Bootstrap样式、组件

Bootstrap
布局容器：

需要为页面内容和栅格系统包裹一个
.container 类用于固定宽度并支持响应式布局的容器

<div class="container">
    响应式布局：宽度<768px width:100%
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
    流式布局： width：100%
</div>

注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12

列偏移
使用col-屏幕参数-offset-偏移数，可以将列向右侧偏移。
这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 元素向右侧偏移了4个列（column）的宽度。

列排序
col-屏幕参数-push-排列序号 往后推n个格子
列排序 col-屏幕参数-pull-排列序号 往前拉n个格子

Bootstrap常用样式
屏幕参数：
xs : 超小屏幕 手机 (<768px)
sm : 小屏幕 平板 (≥768px)
md : 中等屏幕 桌面显示器 (≥992px)
lg : 大屏幕 大桌面显示器 (≥1200px)
1、container类
用于定义一个固定宽度且居中的版心
2、row类
每一个列默认有一个15px的左右外边距，row类的一个作用就是通过左右-15px屏蔽掉它

3、hidden 类
hidden-xs,hidden-sm,hidden-md,hidden-lg在不同的屏幕下隐藏。
4、text-* 类
text-center 文本居中
text-left 文本左对齐
text-right 文本右对齐
5、pull-* 类
pull-left 左浮动类
pull-right 右浮动类
6、center-block 类
让一个固定宽度的元素居中。
7、display: table-cell
8、table类
table-bordered 表格边框
table-striped 条纹状
table-hover 鼠标悬浮时显示的效果
9、表单
所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。
将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  </form>

更多详情查看Bootsatrap全局 CSS 样式

组件
无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能

1.字体图标
它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 标签，并将图标类应用到这个 标签上。

<span class="glyphicon glyphicon-search" ></span>

2.下拉菜单
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 类中，通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）

dropdown-toggle：下拉菜单切换的类
data-toggle="dropdown"：声明这是一个下拉菜单的功能组件
aria-expanded="false"，凡是aria-开头的属性 都是提供盲人使用的，一般可以删除
dropdown-menu：二级菜单
class="divider"：分割线
下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2"
            data-toggle="dropdown">
        菜单列表
        <span class="caret"></span>  <!-- 倒三角图标-->
    </button>
 
    <ul class="dropdown-menu"> <!-- dropdown-menu：二级菜单-->
        <li><a href="#">菜单1</a></li>
        <li class="disabled"><a href="#">菜单2</a></li>
        <li><a href="#">菜单3</a></li>
        <li class="divider"></li>
        <li><a href="#">菜单4</a></li>
    </ul>
</div>

默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐，左对齐，请使用 .dropdown-menu-left 类。

<ul class="dropdown-menu dropdown-menu-right" >
  ...
</ul>

3.导航
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式
4.导航条
默认样式的导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式
navbar:导航条样式
navbar-default：默认导航条
navbar-inverse：反色导航条

<nav class="navbar navbar-default">
<!--container-fluid：流式布局模式-->
    <div class="container-fluid">
        <!-- navbar-header：导航条头部 -->
        <div class="navbar-header">
             <!--collapse：折叠组件样式  navbar-collapse：导航条的折叠样式 -->
             <!--data-target="#box" 折叠关联id为box的元素-->
            <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#box">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="" class="navbar-brand">logo</a>
        </div>
        <!--导航折叠结构-->
        <div class="collapse navbar-collapse" id="box">
            <ul class="nav navbar-nav">
           		 <!--active：默认选中的样式-->
                <li class="active"><a href="">link1</a></li>
                <li><a href="">link2</a></li>
                <li><a href="">link3</a></li>
                <li><a href="">link4</a></li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="搜索">
                </div>
                <button class="btn btn-default">搜索</button>
            </form>
            <!--nav navbar-nav navbar-right：居右的导航条-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="">link5</a></li>
            </ul>
        </div>
    </div>
</nav>

更多组件查看bootstrap组件