bootstrap

感悟：bootstrap就是一个预定义的模板，你用它的模板最主要的是要知道class是什么，class的作用域，作用范围是什么，各种bootstrap的实现是通过各种类名的添加来实现的，最重要的模块是栅格属性（当然，你可以动态改变栅格系统的列数）

如果要超小屏幕，小屏幕和中等屏幕同时拥有排列效果，那么需要把类前缀都加上（3个）

重要的类名

(相当于css.reset)


想知道元素为什么会设置为某个样式，比如为什么list-inline会让文本水平排列，可以打开浏览器审查元素，直接看css设置

表格标题和表格内容的写法

即便是不加table-responsive表格也是响应式的，加上更为保险一些

所有的包裹着form-group类的元素宽度都为100%

当你点击label的时候，input会自动获取焦点，所以label非常重要，注意图中id的对应一致性

每个input都加了一个类名class=“form-control”，这个类名加了之后，会让input样式发生一些改变

在bootstrap下创建按钮的三种方式（共同点是class=“btn
btn-default”，当然也可以通过其他的class来创建比如Success,Danger只是颜色不同而已）

响应式图片也非常简单加个class就可以了

在一些对界面要求不太严格的项目中，可以使用bootstrap

bootstrap组件路径导航

下拉列表的源码里面可以把所有以aria和role开头的删除掉 下面第4<li role="separator" class="divider"></li>行代表着下划线，添加可以使结构明晰 dropdown可以变为dropup
dropdown-menu可以变为dropdown-menu-right,下拉菜单元素就会右对齐 也可以添加一行li为下拉列表加个标题

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <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>

按钮组 加个-vertical按钮就变成垂直排列 可以在按钮组里面加上下拉列表 按钮尺寸调整加上btn-sm

<div class="btn-group">
  <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>

输入框组不重要

导航

bootstrap导航都依赖于同一个nav类 如果你在使用导航组件实现导航条功能，务必在

• 的最外侧的逻辑父元素上添加
  role=“navigation” 属性，或者用一个
  元素包裹整个导航组件。

class="active"被选中状态

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

导航条
注意下拉列表的最外层一定是drapdown或者drapup

路径导航

一般在二级操作才会进行的

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

分页

一般用到默认样式 注意结合thinkphp和bootstrap来做后台分页样式 注意active的位置
pagination-lg可以改变分页位置的大小 也可以用label-success，danger等等改变颜色

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

徽章

> <span class="badge">4</span>这句话是主要的

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

列表组

每一个li默认宽度为100%，想要改变这种情况，首先要定义一个<div class="container"></div>然后根据屏幕进行分列，一共有12列，很多时候不用所有的屏幕都考虑
通过设置class=list-group-item-success可以改变列表组的颜色 当然也可以自己添加样式，改变表单的颜色方法如下图

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

列表组之徽章

面板组