BootStrap学习手册

网格系统

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。

结构

定义一个container，用row类分行，在row内用col-*-*分列。前一个参数指定设备的规范，后一个参数指定该列类所占的列数，因为每行最多有12列，故同一行的列类该参数之和小于等于12。一个列类同时又可视作一个容器类，可以再次分行从而实现嵌套操作。

  <div class="container">
    <div class="row">    
        <div class="col-md-4">
            第一列
        </div>
        <div class="col-md-4">
            第二列
        </div>
        <div class="col-md-4">
            第三列
        </div>
    </div>

偏移

• 原理：增加列类的左外边距
• 功能：设置列类的起始列数，范围为：1~11
• 代码：col-*-offset-*

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-xs-6 col-md-offset-3" >
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing </p>
        </div>
    </div>
</div>

排序

• 原理：并非改变边距，尚不清楚

• 功能：基于列改变列类的排序方式，范围为：1~11

• 代码：col-*-pull/push-* //pull向前移，push向后移

<div class="container">
    <div class="row">    
        <div class="col-md-8 col-md-push-4">left</div>
        <div class="col-md-4 col-md-pull-8">right</div>
    </div>
</div>

标签页

构成

• 无序列表（使用有序列表则toggle失效，原因不明）

  • ul定义为nav类，设置role为tablist

  • 指定标签样式：

  类名	样式
  nav-tabs	传统标签
  nav-pills	横向胶囊式
  nav-stacked	纵向胶囊式

  • li设置role为tab，设置data-toggle为tab

  • li嵌套a，a指定tab的id

  • 设置一个li为acitive类，默认选中

• 标签页
  
  • div定义为tab-content类，嵌套tab-pane类
  • 设置tab-pane的id

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#first" role="tab" data-toggle="tab">first</a></li>
    <li><a href="#second" role="tab" data-toggle="tab">second</a></li>
    <li><a href="#third" role="tab" data-toggle="tab">third</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane" id="first">
        <p>first</p>
    </div>
    <div class="tab-pane" id="second">
        <p>second</p>
    </div>
    <div class="tab-pane" id="third">
        <p>third</p>
    </div>
</div>

更多效果

• 淡入淡出

  扫描二维码关注公众号，回复： 1587388 查看本文章

  • 设置tab-pane类为fade类

  • 要默认显示的标签页必须设为in类、active类

  • <div class="tab-content">
        <div class="tab-pane fade in active" id="first">
            <p>first</p>
        </div>
        <div class="tab-pane fade " id="second">
            <p>second</p>
        </div>
        <div class="tab-pane fade" id="third">
            <p>third</p>
        </div>
    </div>

• 实现下拉子菜单

  • 设置li为dropdown类

  • 嵌套的a设为dropdown-toggle类，data-toggle设为dropdown而非tab，role设为button而非tab，设置aria-haspopup=”true” aria-expanded=”false”

  • 在a内嵌套caret类的span标签，嵌入倒三角形符号

  • li内嵌套子菜单，ul设为dropdown-menu

  • 子li设为role=”separator” class=”divider”，修改样式为分割线

  • <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>

导航条

构成

• navbar-headerDiv
  
  • 功能：设置页面缩小情况下导航条显示的样式
  • 实现页面收缩时导航条按钮，同级的设置导航条的brand，嵌套个就可以加logo了

• navbar-collapseDiv

  • 功能：设置页面正常情况下导航条显示的样式
  • 嵌套navbar-nav类的ul

• <nav class="navbar navbar-default">
  <div class="container-fluid">
  
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
  
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  
  </div>
  </nav>

• 样式选项

  样式	背景
  navbar-default	白色
  navbar-inverse	黑色

  ​