Bootstrap 之栅格系统与常用样式

一、Bootstrap简介

Bootstrap来自Twitter(推特)，是目前最受欢迎的前端框架，Bootstrap是基于HTML,CSS和JavaScrpit 的，它简洁灵活，使得web开发更加快捷。

• 中文官网：http://www.bootcss.com/
• 官网：http://getbootstrap.com/

优点

• 标准化的html+css编码规范
• 提供了一套简洁、直观、强悍的组件
• 有自己的生态圈，不断的更新迭代
• 让开发更简单，提高了开发的效率

二、Bootstrap 栅格系统

1、栅格系统简介

栅格系统英文为“grid systems”,也有人翻译为“网格系统”，它是指将网页布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

2、栅格系统参数

栅格系统通过一系列的行（row）和列（column）的组合来创建页面布局，这时候你的内容就可以放在这些创建好的布局中。

• 行（row）必须放在continer 布局容器里面
• 我们实现列的平均划分，需要给列添加类前缀
• xs-extra small：超小；sm-small ：小， md-medium：中等， lg-large：大；
• 列（column）大于12，多余的列所在的元素将被作为一个整体另起一行排列
• 每一列默认有左右15像素的padding
• 可以同时为一列指定多个设备的类名，以便划分不同份数,例如class=“col-md-4,col-sm-6”

看一个实例代码：

<div class="container">
        <div class="row">
           <div class="col-md-3">1</div>
           <div class="col-md-3">2</div>
           <div class="col-md-3">3</div>
           <div class="col-md-3">4</div>
         </div>
       <br>
       <div class="row">
           <div class="col-md-6">1</div>
           <div class="col-md-2">2</div>
           <div class="col-md-2">3</div>
           <div class="col-md-1">4</div>
       </div>
   
       <br><br>
  
       <div class="row">
           <div class="col-md-6">1</div>
           <div class="col-md-2">2</div>
           <div class="col-md-2">3</div>
           <div class="col-md-3">4</div>
       </div>
</div>

结果可以看到如果列数相加等于12，则列数能占满整个的 container 的宽度，如果列数相加小于12，列数将占不满整个的 container 的宽度，如果列数相加大于12，则列数会 另起一行显示

3、栅格系统使用

<div class="container">
        <div class="row">
             <div class="col-lg-3 col-md-4 col-sm-6">你第一好看</div>
             <div class="col-lg-3 col-md-4 col-sm-6">你第二好看</div>
             <div class="col-lg-3 col-md-4 col-sm-6">你第三好看</div>
             <div class="col-lg-3 col-md-4 col-sm-6">你第四好看</div>
             
        </div>  
    </div>

随着屏幕的变化，列数也随着宽度发生改变

4、栅格系统列嵌套

栅格系统内置的栅格系统内容再次嵌套，简单理解就是一个列内分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*内，看代码

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 列嵌套一个行，row可以取消父元素的padding值，而且高度自动和父级一样高 -->
                <div class="row">
                     <div class="col-md-6">a</div>
                     <div class="col-md-6">b</div>
               </div>
            </div>    
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>  
        </div>  
    </div>

注意：如果在列中嵌套一个行，row可以取消父元素的padding值，而且高度自动和父级一样高

5、栅格系统列偏移

使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距。

 <div class="container">
        <div class="row">
            <!-- 偏移的份数就是12-两个盒子的份数=6 -->
            <div class="col-md-3">左侧</div>
            <div class="col-md-3 col-md-offset-6">右侧</div>
        </div>
        <div class="row">
            <!-- 如果只有一个盒子那么就偏移=（12-8）/2 -->
            <div class="col-lg-8 col-md-offset-2">中间</div>
        </div>
    </div>

6、栅格系统列排序

列排序其实就是改变列的方向，改变左右浮动，并且设置浮动的距离，bootstrap中通过添加类名.col-md-push-*和 .col-md-push-* （其中* 代表移动的列组合数，往前pull,往后push）改变列的顺序。

  <div class="container">
        <div class="row">      
            <div class="col-md-4 col-lg-push-8">左侧</div>
            <div class="col-md-8 col-lg-pull-4">右侧</div>
        </div>
       
    </div>

这样就可以实现位置的调换啦

列偏移和列排序的区别：如果列偏移列数总和大于12，此时多余的列也会跟着偏移，列排序中如果列数总和大于12，在移动过程中会存在覆盖现象。往后偏移后面执行的会覆盖前面执行的，往前偏移前面执行的会覆盖后面执行的。

7、响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

我们来模拟一下效果

<div class="container">
        <div class="row">
           <div class="col-xs-3">
               <span class="visible-lg">我会显示奥</span>
           </div>
           <div class="col-xs-3 hidden-xs">看我去哪了那</div>
           <div class="col-xs-3 hidden-md">我会变魔术奥</div>
           <div class="col-xs-3">4</div>
        </div>
    </div>

动画中我们可以看到当屏幕变为中等屏幕的时候，我会变魔术奥会隐藏起来，当屏幕变为小屏幕的时候，看我去哪了那会隐藏起来，超大的屏幕才会显示字样我会显示奥

三、Bootstrap 常用样式

1、排版

1)标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>

通过引入bootstrap样式可以对比标题的区别，第二个是引入之后的标题样式。明显看到字体变淡了不少。

2）段落

通过.lead来突出强调内容（其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理），通过.samll来减小字号

  <p>你好你好你好你好</p>
  <p class="lead">你好你好你好你好</p>
  <p >你好<small>你好</small>你好你好</p>

3)强调和对齐效果

强调效果通过使用text-primary，text-success，text-danger，text-info，text-warning，text-secondary来进行设置。

<div class="container">
        <div  class="text-primary ">主要深灰色</div>
        <div  class="text-success">成功绿色</div>
        <div  class="text-danger">危险红色</div>
        <div  class="text-info">通知浅蓝色</div>
        <div  class="text-warning">警告蓝色 </div>
        <div  class="text-secondary">次要褐色</div> 
    </div>

对齐效果常常使用 text-align来实现文本的对齐风格的设置
其中主要有四种风格：
左对齐,取值left;
右对齐,取值right;
居中对齐,取值center;
两端对齐,取值justify;

       <p class="text-left">居左</p>
       <p class="text-right">居右</p>
       <p class="center">居中</p>
       <p class="justify">两侧对齐</p>

这里两侧对齐由于文字少，所以效果不明显。

2、列表

在html文档中，列表主要有无序列表，有序列表，定义列表。在Bootstrap 中，可以利用.list-unstyled形成点列表和.list-inline形成内联列表，这两个是比较常用的在我们布局过程中。看一下啊效果图作比较。

		<!-- 去点列表 -->
        <ul class="list-unstyled">
            <li>无序列表一</li>
            <li>无序列表二</li>
        </ul>

        <!-- 内联列表 -->
        <ol class="list-inline">
            <li>有序列表一</li>
            <li>有序列表二</li>
        </ol>

3、表格

3.1表格样式
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应的表格，在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。
基础样式：
1）table：基础表格
附加样式：
1）.table-striped：斑马线表格
2）.table-striped：带边框的表格
3）.table-hover：鼠标悬停的表格
4）.table-condensed：紧凑型表格

3.2 tr 、th 、td样式
通过这些状态类可以为行或单元格设置颜色。

.active：鼠标悬停在行或单元格上时所设置的颜色
.success ：标识成功或积极的动作
.info ：标识普通的提示信息或动作
.warning：标识警告或需要用户注意
.danger ：标识危险或潜在的带来负面影响的动作

 <table class="table table-striped table-bordered table-hover table-condensed ">
            <tr class="info">
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr class="success">
                <td>小明</td>
                <td>12</td>
                <td>男</td>
            </tr>
            <tr class="warning">
                <td>小红</td>
                <td>12</td>
                <td>女</td>
            </tr>
            <tr class="active">
                <td>小王</td>
                <td>14</td>
                <td>女</td>
            </tr>
            <tr class="danger">
                <td>小白</td>
                <td>13</td>
                <td>男</td>
            </tr>
          </table>

从表格中可以清晰看到悬停效果和斑马线效果

4、表单

表单主要功能是用来与用户交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通，表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

      <input type="text"/><br>
          <select>
              <option >请选择城市</option>
              <option >上海</option>
              <option >北京</option>
          </select><br>
         <textarea name="" id="" cols="30" rows="10"></textarea>
          <br><br>

传统表单控件的样式没有美感，如图：

看一下加入Bootstrap 样式之后表单控件的样式，分条演示：

4.1 文本框

当我们加入Bootstrap样式之后，文本框样式的区别

  <!-- 文本框 -->
<input type="text" class="form-control"><br>
<input type="text" class="form-control input-lg"><br>
 <input type="text" class="form-control input-sm"><br>

4.2 下拉框

Bootstrap样式下，对于标记了 multiple 属性的 控件来说，默认显示多选项。

<div class="row">
           <div class="col-md-3">
           <select class="form-control"  multiple="multiple">
               <option>1</option>
               <option>2</option>
               <option>3</option>
               <option>4</option>
               <option>5</option>
             </select>
         </div>
         </div>

未标记 multiple 属性

标记了 multiple 属性

4.3 文本域

Bootstrap 样式中支持多行文本的表单控件。可根据需要改变 rows 属性。

   <div class="row">
            <div class="col-md-3">
                <textarea class="form-control" rows="3"></textarea>
           </div>
   </div>

4.4、多选和单选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

<div class="checkbox">
          <label>
            <input type="checkbox" value="">
              跑步
          </label>       
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">
             唱歌
           </label>
    
        
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>1 </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" checked>2 </label>
        </div>
        <div class="radio disabled">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" checked>3  </label>
        </div>

内联单选和多选框

<label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
          </label>
          <label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
          </label>
          <label class="checkbox-inline">
            <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
          </label>
          <br>
          <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
          </label>
          <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
          </label>
          <label class="radio-inline">
            <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
          </label>

5、按钮

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

<div class="container">
     <button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button>
  </div>

除了给按钮提供样式之外，还可以给普通元素也提供颜色。

    <a href="#" class="btn btn-success">a标签</a>
    <span class="btn btn-danger">span标签</span>
    <div class="btn btn-info">div标签</div>

设置按钮大小：使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

      <p>
        <button type="button" class="btn btn-primary btn-lg">（大按钮）</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary">（默认尺寸）</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary btn-sm">（小按钮）</button>
      </p>
      <p>
        <button type="button" class="btn btn-primary btn-xs">（超小尺寸）</button>
      </p>

6、表单布局

水平表单：通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

<div class="container">
    <form class="form-horizontal" role="form">
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
          <div class="col-sm-3">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
          </div>
        </div>
        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
          <div class="col-sm-3">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
              <label>
                <input type="checkbox"> 记住我
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-3">
            <button type="submit" class="btn btn-default">登录</button>
          </div>
        </div>
      </form>
    </div>

内联表单：为 <form> 元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件。

<form class="form-inline">
      <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="name">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail2">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="email">
      </div>
      <button type="submit" class="btn btn-default">提交</button>
    </form>