01.简介
Bootstrap来自Twitter 是目前很受欢迎的前端框架。
Bootstrap是基于HTML CSS JavaScript的，它简洁灵活
使得Web开发更加快捷
响应式设计
引入boostrap.css
引入boostrap.js
引入jquery
02.全局样式之布局容器和栅格系统
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。如果没给就继承父级宽度
栅格系统
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
md 中屏幕 lg大屏幕 xs小屏幕 针对不同尺寸 一行总共12份想让他占几份 就写几份
xs-offset-向右偏移多少行
03.排版
标题
HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
通过添加 .lead 类可以让段落突出显示。
内联文本样式<mark>
对于被删除的文本使用 <del> 标签。
对于没用的文本使用 <s> 标签。
额外插入的文本使用 <ins> 标签
为文本添加下划线，使用 <u> 标签
对齐 text-对齐方向
04.表格
table
striped给奇数行加颜色
bordert添加边框
hover
| .active | 鼠标悬停在行或单元格上时所设置的颜色 |
| .success | 标识成功或积极的动作 |
| .info | 标识普通的提示信息或动作 |
| .warning | 标识警告或需要用户注意 |
| .danger | 标识危险或潜在的带来负面影响的动作 |
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
05-表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。
控制尺寸 input-lg大 input-sm小 默认不加
06.按钮切图辅助类
预定义样式Default primary首选项 成功Success 一般信息 Info 警告Warning 危险 Danger 链接link
btn btn-样式
四种尺寸 btn-lg大 btn-sm 小 btn-xs超小
Btn-block变成块级元素
activer 默认处于激活状态
Disabled 禁用
图片
响应式图片
.img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block;
img-rounded圆角
img-circley 圆形
img-thumbnail 外面加了一个宽
辅助类
情境文本色
通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。
Text-
情境背景色
和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。
Bg-
关闭符号
×；
加个类名close 在右边
三角符号
加个类 caret
快速浮动
pull-left向左
pull-right向右
Center-block 居中
导航
如果你在使用导航组件实现导航条功能，务必在 <ul> 的最外侧的逻辑父元素上添加 role="navigation" 属性，或者用一个 <nav> 元素包裹整个导航组件。不要将 role 属性添加到 <ul> 上，因为这样可以被辅助设备（残疾人用的）上被识别为一个真正的列表。
标签页
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
胶囊式标签页
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
两端对齐式标签页
.nav-justified
垂直标签页
.nav-stacked
带下拉菜单的标签页
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...</ul>
353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
