bootstrap在reset.css文件中设置margin为0，因此其他的标签需要重新设计margin。

1.h

<h>标签和普通使用方法一样。

定义了.h1~.h6六个类名，样式和标题样式一样。

副标题用<small>标签指出，必须包含在h标签内。

<h1>标题1</h1>

<div class="h1">标题1</div>

2.p

定义<body>的字体库、字号、行高、颜色，<p>标签继承这些设置，单独设置margin-bottom为10px，使用方法同普通方法。

强调内容

增大：.lead;

加粗：<strong>; <b>（设置font-weight: bold）

斜体：<em>;<i> （设置font-style: italic）

不变：<cite>

变小：<small>,.small

强调类（颜色）

  • .text-muted：提示，使用浅 灰色（#999）

  • .text-primary：主要，使用 蓝色（#428bca）

  • .text-success：成功，使用 浅绿色(#3c763d)

  • .text-info：通知信息，使用 浅蓝色（#31708f）

  • .text-warning：警告，使用 黄色（#8a6d3b）

  • .text-danger：危险，使用 褐色（##a94442）

  • 文本对齐

  • （设置text-align：center、left、right、justify）

    .text-left：左对齐

    .text-center：居中对齐

    .text-right：右对齐

    .text-justify：两端对齐

  • 表单

  • 1、宽度变成了100%

    2、设置了一个浅灰色（#ccc）的边框

    3、具有4px的圆角

    4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

    5、设置了placeholder的颜色为#999

  • 水平风格表单：标签在左，控件在右

    1、在<form>元素是使用类名“form-horizontal”。

    2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）

    内联表单：控件一行显示

    在<form>元素中添加类名“form-inline”

    表单控件

    select：<select multiple class="form-control"> 选择多个

    textarea： <textarea class="form-control" rows="3"></textarea>

    radio，checkbox：div包着label包着input

  • <div class="checkbox">
  • <lable>
  • <input type="checkbox" value="">
  • </lable>
  • </div>

  • radio，checkbox：水平排列

    div（class=”form-group”）包着label（class=”checkbox-inline”or“radio-inline”）包着input

    禁用控件：在控件上添加disabled属性

    <input class="input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>

    验证状态：form-group容器添加has-success等类;若想label同步变色需要在label上加.control-label;显示icon需要在form-group加.has-feedback，最后加一个span存放icon

    表单提示信息：

    在form-group容器后加一个span，添加类名.help-block

  • button：四种方式，bootstrap用button实现，建议用button和a标签来制作按钮

    <input type="button">

    <input type="reset">

    <input type="submit">

    <button></button>

    button样式

    .btn

    .btn-default

bootstrap总结的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap（二）

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  10. [BootStrap] 富编辑器，基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

  1. EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(一)

    前言 本系列源自对EF6 CodeFirst的探索,但后来发现在自己项目中构建的时候遇到了一些问题以及一些解决方法,因此想作为一个系列写下来. 本系列并不是教你怎么做架构设计,但可以参照一下里面的方法 ...

  2. Fake chat script for website download

    Are you searching for free fake webchat script then you are at the right place go get download your ...

  3. js判断是否是移动端 访问移动端网址

    1以下为代码,可放置在网站foot底部文件,或者haead顶部文件,建议将代码放在网站顶部,这样可以实现手机访问立即跳转! <script src="http://siteapp.ba ...

  4. IIS7 404 模块 IIS Web Core 通知 MapRequestHandler 处理程序 StaticFile 错误代码 0x80070002

    <system.webServer> <!--添加--> <modules runAllManagedModulesForAllRequests="true&q ...

  5. 开启关闭keditor 过滤

    filterMode: false, K.create('#txt_content', { uploadJson: '/js/kindeditor-4.1.10/upload_json.ashx', ...

  6. IOS UIButton用法详解

    这段代码动态的创建了一个UIButton,并且把相关常用的属性都列举了.希望对大家有用.   //这里创建一个圆角矩形的按钮UIButton *button1 = [UIButton buttonWi ...

  7. 几种排序算法的学习，利用Python和C实现

    之前学过的都忘了,也没好好做过总结,现在总结一下. 时间复杂度和空间复杂度的概念: 1.空间复杂度:是程序运行所以需要的额外消耗存储空间,一般的递归算法就要有o(n)的空间复杂度了,简单说就是递归集算 ...

  8. 用PowerMock mock static方法

    在编写代码时,经常需要调用别人已经写好的工具类,而这些工具提供的方法经常是static方法,在这里,直接贴出<PowerMock实战手册>中的例子 待测试方法: public class ...

  9. AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown

    在ui-Bootstrap中,Buttons控件和Dropdown控件与form表单中的按钮和下拉框名字很像,但实际上这两个控件有新的含义. 先说Buttons,它是一组按钮,用来实现form表单中的 ...

  10. Java泛型中的? super T语法

    ? super T 语法将泛型类限制为所有T的超类(包括T自身),但只能用于参数中,不可以在返回值用加以限定.如果不加以限定,假设某个函数头为? super Manager get()由于编译器不知道 ...