Bootstrap

Bootstrap

栅格系统
     row必须放到container和container-fluid里面
     内容应当放置于“列（column）”内，并且，只有“列
     （column）”可以作为行（row）”的直接子元素。

　　　栅格系统中的列是通过指定1到12的值来表示其跨越的范围。
　　　
　　　如果一“行（row）”中包含了的“列（column）”大
     于 12，多余的“列（column）”所在的元素将被作
     为一个整体另起一行排列。

     栅格类适用于与屏幕宽度大于或等于分界点大小的设备，
     并且针对小屏幕设备覆盖栅格类。因此，在元素上应用
     任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分
     界点大小的设备,并且针对小屏幕设备覆盖栅格类。因
     此，在元素上应用任何 .col-lg-*不存在，也影响大屏
     幕设备。
       
        
列的样式 
　　　.col-xx（lg md sm xs）-数字（1~12）  
      container有一个padding是15px
      row有一个margin是-15px
        
      列是支持嵌套的
        
      列偏移： col-xx-offset-数字（1~12）     
      列排序： .col-md-pull-数字 .col-md-push-数字   

媒体查询 
　　　 /* 小屏幕（平板，大于等于 768px） */ 
      @media (min-width: @screen-sm-min) { ... }

      /* 中等屏幕（桌面显示器，大于等于 992px） */ 
　　　　@media (min-width: @screen-md-min) { ... }

　　　　/* 大屏幕（大桌面显示器，大于等于 1200px） */ 
　　　　@media (min-width: @screen-lg-min) { ... }
 
      偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 
　　　 的影响限制在更小范围的屏幕大小之内。　　

　　　　@media (max-width: @screen-xs-max) 
　　　　　　　   { ... }
　　　　
      @media (min-width: @screen-sm-min) 
         and (max-width: @screen-sm-max) { ... }
　　　　
　　　 @media (min-width: @screen-md-min) 
         and (max-width: @screen-md-max) { ... }
　　　　
　　　 @media (min-width: @screen-lg-min) { ... }

 

Bootstrap3居中处理：
        
水平居中：
         - .center-block 不涉及到列的居中 本质上就是 margin: 0 auto 
         让那个标签居中就把它写在哪个标签的样式类中
            
         - 我们自定义的居中 在涉及到列的居中时使用
            .col-centered {
                  float: none;
                  margin: 0 auto;
                }
         - 文本类居中或者display: inline
                .text-center
                
垂直居中：
         .vertical-center {
              display: flex;
              align-items: center;
            }
            
用在父标签中，让子块级标签垂直居中

Bootstrap组件：

图标：
    
     span标签，里面加上样式类；
     图标类只能应用在不包含任何文本内容或子元素的元素上；
     示例：
  <button type="button" class="btn btn-default" aria-label="Left Align">
     <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
  </button>

  <button type="button" class="btn btn-default btn-lg">
     <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
  </button>

     alert组件中所包含的图标是用来表示这是一条错误消息的，通过添加额外的 .sr-only 文本
     就可以让辅助设备知道这条提示所要表达的意思了。
     示例：
  <div class="alert alert-danger" role="alert"> 
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 
    <span class="sr-only">Error:</span> Enter a valid email address 
  </div

下拉菜单

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" 
   id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" 
   aria-expanded="true">Dropdow<span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

<li role="separator" class="divider"></li>添加分割线

按钮组
示例：

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可
以做成更复杂的组件
示例：

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

单按钮下拉菜单
示例：

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" 
   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

分裂式按钮下拉菜单
示例：

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" 
    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

输入框组

只支持文本输入框 <input>
这里请避免使用 <select> 元素，因为 WebKit 浏览器不能完全绘制它的样式。
避免使用 <textarea> 元素，由于它们的 rows 属性在某些情况下不被支持
不要将表单组或栅格列（column）类直接和输入框组混合使用。而是将输入框组
嵌套到表单组或栅格相关元素的内部。
示例：

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" 
   aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" 
   aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

 

导航

 <!--导航区开始-->
   <ul class="nav nav-tabs nav-stacked" role="tablist">
      <li role="presentation" class="active"><a href="#home" 
         role="tab" data-toggle="tab">Home</a></li>
      <li role="presentation"><a href="#profile" role="tab" 
         data-toggle="tab">Profile</a></li>
      <li role="presentation"><a href="#messages" role="tab" 
         data-toggle="tab">Messages</a></li>
   </ul>
 <!--导航区结束-->

 <!--面板区开始-->
      <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" 
            id="home">这里是主页的内容</div>
          <div role="tabpanel" class="tab-pane" 
            id="profile">这里是简介页面的内容</div>
          <div role="tabpanel" class="tab-pane" 
            id="messages">这里是消息页面的内容</div>
      </div>
 <!--面板区结束-->

.nav-tabs        --> tab式
.nav-pills       --> 胶囊式
.nav-justified   --> 两端对齐

带下拉菜单的导航

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

导航条

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <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>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法，例如， aria-label、aria-labelledby 或者 title 属性。如果这些方法都没有，屏幕阅读器将使用 placeholder 属性（如果这个属性存在的话），但是请注意，使用 placeholder 代替其他识别标签的方式是不推荐的。

把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p> 标签。

使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置。

通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式

添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。

如果使用了上面固定在顶部的样式，那么就需要给body设置padding：

body { padding-top: 70px; }

.navbar-static-top --> 静止在顶部，不用给body添加任何内补（padding）

反色的导航条

通过添加 .navbar-inverse 类可以改变导航条的外观。

面包屑导航/路径导航

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

分页

组件中的每个部分都很大，优点是容易点击、易缩放、点击区域大。
示例：

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

翻页

默认示例：
<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

对齐链接：
<nav aria-label="...">
  <ul class="pager">
    <li class="previous">
         <a href="#">
         <span aria-hidden="true">&larr;</span> 
          Older
         </a>
    </li>
    <li class="next">
        <a href="#">Newer 
        <span aria-hidden="true">&rarr;</span>
        </a>
    </li>
  </ul>
</nav>

标签

示例：
<h3>Example heading <span class="label label-default">New</span></h3>

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

徽章

给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。

示例：
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>


适配导航元素的激活状态
<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active">
        <a href="#">Home <span class="badge">42</span></a>
  </li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation">
        <a href="#">Messages <span class="badge">3</span></a>
  </li>
</ul>

巨幕
是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容
示例：
<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>


如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，
请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。
<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

页头

页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。
它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。

示例：
<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

缩略图

通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。

示例：

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>


自定义内容
添加一点点额外的标签，就可以把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内。

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

进度条

默认示例：
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" 
      aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

媒体对象

默认样式：
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

.media-left   .media-body   .media-right    顺序从左往右


头像的位置：
            .默认
            .media-middle   --> 中间
            .media-bottom   --> 底部

示例：

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>


媒体对象列表
用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。

示例：
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>
</div>
        

列表组：
列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。

基本示例：
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>


徽章：

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

链接：
<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>


按钮
列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是 <div> 而不能用 <ul> 了），
并且无需为每个按钮单独包裹一个父元素。注意不要使用标准的 .btn 类！

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

情境类

为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置 .active 状态。

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in
  </li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero
  </li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac
  </li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">
  Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">
  Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">
  Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">
  Vestibulum at eros</a>
</div>

定制内容

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

面版

默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

示例：
    <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">这里写标题</h3>
          </div>
          
          <div class="panel-body">
            这里面是内容
          </div>
          
          <div class="panel-footer">Panel footer</div>
    </div>

Well

默认效果
<div class="well">...</div>

可选类/样式
通过这两种可选修饰类，可以控制此组件的内补（padding）和圆角的设置。
示例：
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>