bootstrap简单使用

Bootstrap （版本 v3.3.7）官网教程： https://v3.bootcss.com/css/

row——行　　　　　　row——列

push——推　　　　　 pull——拉

col-md-offset-3　　在左边偏移3格

col-md-push-5　　向右推5格

col-md-pull-2　　向左拉2格

结构
<div class="container">
    <div class="row">
      　<div class="col-md-4">col-md-4</div>
    　　<div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>
</div>

<body class="table-responsive">
<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>王小二</td>
            <td>男</td>
            <td>21</td>
        </tr>
        <tr class="info">
            <td>2</td>
            <td>张溜溜</td>
            <td>女</td>
            <td>23</td>
        </tr>
        <tr>
            <td>3</td>
            <td>程陈晨</td>
            <td>男</td>
            <td>25</td>
        </tr>
        <tr class="success">
            <td>4</td>
            <td>李云龙</td>
            <td>男</td>
            <td>53</td>
        </tr>
    </tbody>
</table>
</body>

{

position:absolute;

background-position: center center;

background-size:cover;

}

jQuery文件。务必在bootstrap.min.js 之前引入(因为是基于jquery)

站点图标 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

快速生成图片 https://www.dummyimage.com/

bootstrap 实现两种方法：1）通过 js 实现 2）通过css3 媒体查询实现

图片：<img src="..." class="img-responsive"/> 图片响应式

用到栅格，应在父元素清除浮动（clearfix）

container 和 container-fluid 的区别

.container类用于固定宽度并支持响应式布局

.container-fluid类用于100%宽度，占据全部视口

https://www.cnblogs.com/zhangbao/p/6593121.html
一个典型导航条的结构如下：
nav .navbar.navbar-default
        .container
          .nav-header
             a.nav-brand

<div class="form-group">
    <label class="sr-only">用户名:</label>
    <input type="text" class="form-control" name="name" placeholder="输入用户名" />
</div>

<div class="checkbox"> 
　　<label><input type="checkbox" />记住密码</label> 
</div>