Bootstrap---栅格系统

normalize.css 重置浏览器样式，让浏览器保持一致
bootstrap里边的css 全是响应式的 媒体查询做响应式（适应屏幕大小变化）

一.移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

二.两个布局模式

container 固定模式布局
container-fluid 流式布局 占整屏（100%宽度）

<div class="container one"></div>
<div class="container-fluid"></div>

三.栅格系统（重点）

每个对应的屏幕尺寸和类前缀要记牢

① row是行，必须放在布局模式中，列必须放在行内
② 布局模式之间的padding(槽宽)可以用子元素的margin 负值来抵消
或者直接padding=0!important;

③ 每行可以放12列，要是放13个，第13个会折行
④ co-lg-num num是这个div占多少列
⑤ 为了让内容适应各种屏幕大小，四个col都写上
⑥ 不同屏幕之间显示隐藏类：
visible- /hidden- 后边跟啥尺寸，啥尺寸下该内容可见/隐藏
⑦ 偏移类：
col-lg-offset-num 设置marginleft值
col-lg-push-num 设置left值
col-lg-pull-num 设置right值
⑧ 行与行之间可以嵌套

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
会有padding值，让布局错乱，加padding=0；去除padding     
        .one{
            height: 200px;
        }
        .s{
            height: 70px;
            border: solid 1px blueviolet;
            margin-top: 10px;
            padding: 0!important;
        }
        
<div class="container">
    <div class="row">
        <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">1</div>
        <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">2</div>
        <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">3</div>
        <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">4</div>
        <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">5</div>
        <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">6</div>
        <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">7</div>
        <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">8</div>
        <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">9</div>
        <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">10</div>
        <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">11</div>
        <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">12</div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-sm-3 col-xs-3 col-md-3 s">1</div>
        <div class="col-lg-3 col-sm-3 col-xs-3 col-md-3 s">2</div>
        <div class="col-lg-3 col-sm-3 col-xs-3 col-md-3 s">3</div>
        <div class="col-lg-3 col-sm-3 col-xs-3 col-md-3 s">4</div>
    </div>    
    <div class="row">
        <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 s">1</div>
        <div class="col-lg-9 col-md-9 col-xs-9 col-sm-9 s">2</div>
    </div>

    <div class="row hidden-md">
        <div class="col-lg-12 s">11111</div>
    </div>
    <div class="row hidden-lg">
        <div class="col-md-2 s">2222222222</div>
        <div class="col-md-10 s">2</div>
    </div>

    <div class="row">
        <div class="col-lg-3 s col-lg-push-2">1</div>
        <div class="col-lg-7 s">2</div>
    </div>
    <div class="row">
        <div class="col-lg-3 s col-lg-offset-2">3</div>
        <div class="col-lg-7 s">4</div>
    </div>
	
	嵌套
    <div class="row">
        <div class="col-lg-5 s">
                <div class="col-lg-4 s">1</div>
                <div class="col-lg-4 s">1</div>
                <div class="col-lg-4 s">1</div>
        </div>
        <div class="col-lg-7 s"></div>
    </div>
    
	将两个元素换位置
 	<div class="row">
        <div class="col-lg-5 s col-lg-push-7">1</div>  <!--push  left值-->
        <div class="col-lg-7 s col-lg-pull-5">2</div>
    </div>
</div>

执行结果如下图

四.排版（重点）

所有内容都要写在<div class=“container/container-fluid”><\div>中

① h1~h6标签用class类引入其中，class=small或<small>标签字体大小为85%，用来标记副标题
② class=mark文本有背景色，lead 文本字体会变大。本质都是突出文本
③ <del> <s>标签给文本加删除线
④<u> 给文本添加下划线
⑤<stronger> 加粗标签
⑥ <em> <u> 斜体标签

    <div class="h1">1 <span class="small">副标题</span></div>
    <div class="h2">1</div>
    <div class="h3">1</div>
    <div class="h4">1</div>
    <div class="h5">1</div>
    <div class="h6">1</div>
    <div class="h5">1 <span class="lead">111111</span></div>
    <div class="h6">1 <span class="mark">234</span></div>
    <del>11111</del>
    <s>111</s>
    <u>222</u>

7.文本对齐
添加text-center类

   对齐
   <div class="text-center">lenorksakfnnnnnnnnnn</div>
   <div class="text-left">lenorksakfnnnnnnnnnn</div>
   <div class="text-right">lenorksakfnnnnnnnnnn</div>
   <div class="text-justify">lenorksakfnnnnnnnnnn</div>  <!--两端对齐，这里边为左对齐-->
   <div class="text-nowrap">lenorksakfnnnnnnnnnnorksakfnnnnnnnnnnlenorksakfnnnnnnnnnnlenorksakfnnnnnnnnnnlenorksakfnnnnnnnnnnlenorksakfnnnnnnnnn</div>

8.改变字母大小写
text-lowercase，text-uppercase，text-capitalize

    改变字母大小写
    <div class="text-lowercase">SDJFJFHldkdaknan</div>   全部小写
    <div class="text-uppercase">buildkdaknan</div>       全部大写
    <div class="text-capitalize">buildkdaknan</div>      首字母大写

9.地址
用<address>标签写

	地址
	<address>
        <strong>Twitter, Inc.</strong><br>
        1355 Market Street, Suite 900<br>
        San Francisco, CA 94103<br>
    	<abbr title="Phone">P:</abbr> (123) 456-7890
    </address>

10.引用
<blockquote>标签,可以用footer标签标明出处

	引用
    <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>

11.列表的类
list-inline 内联列表（水平列表）
list-unstyled 去点 去内边距
list-group 和list-group-item一起使用，可以加边框。若里边的是a 链接，a链接鼠标悬停时还会变色
自定义列表：dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。

	列表
	<ul class="list-unstyled">  去点去内边距 
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    
    <ul class="list-group">  列表运行结果如下图一
        <li class="list-group-item"><a class="list-group-item" href="#">1</a></li>
        <li class="list-group-item"><a class="list-group-item" href="#">2</a></li>
        <li class="list-group-item"><a class="list-group-item" href="#">3</a></li>
        <li class="list-group-item"><a class="list-group-item" href="#">4</a></li>
    </ul>

	自定义列表	  
    <dl class="dl-horizontal">  水平类
        <dt>...</dt>
        <dd>...</dd>
    </dl>

12.表格
table-striped 条纹状表格
table-bordered 给表格加边框
table-hover 鼠标悬停表格
table-condensed 紧缩表格
table-responsive 响应式表格，表格随父容器的大小而变化
表格状态类：给表格加颜色 (只能给tr标签上加)
success info warning active

表格
	    <table class="table table-striped table-bordered table-hover table-condensed table-responsive">
        <tr class="active">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr class="success">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr class="info">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr class="warning">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>

13.表单
form-control ：宽度100%，会一个占一行
form-group： margin-bottom:15px
form-inline：内联表单（表单内容在一行）
水平排列表单:
用栅格参数 col-lg-num
control-label 文本居右
边框颜色：
has-success，has-info，has-success

表单
	 <form action="">
        <label for="" class="form-group">姓名：</label>
        <input type="text" class="form-control"/>
    </form>
   
    <form action="" class="form-inline">
        <label for="">姓名：</label>
        <input type="text"/><label for="">姓名：</label>
        <input type="text"/><label for="">姓名：</label>
        <input type="text"/>
    </form>

	水平排列表单
	<form action="" class="form-horizontal">
       <div class="form-group">
           <label for="" class="col-lg-5 control-label">姓名：</label>
           <div class="col-lg-7"><input type="text" class="form-control" /></div>
       </div>    
        <div class="form-group">
           <label for="" class="col-lg-5 control-label">姓名：</label>
           <div class="col-lg-7"><input type="text" class="form-control" /></div>
       </div>
    </form>

	选项框
	<div class="form-group">
        <div class="checkbox">
            <input type="checkbox"/>1111111
        </div>
    </div>
    <div class="form-group">
        <div class="radio"><input type="radio"/>
            1111111</div>
    </div>

14.按钮的类
btn btn-default btn-success btn-info btn-warning btn-primary btn-danger 给按钮加各种背景色
btn-link 将按钮转化为a链接

    <button class="btn btn-default">按钮</button>
    <button class="btn btn-danger">按钮</button>
    <button class="btn btn-success">按钮</button>
    <button class="btn btn-info">按钮</button>
    <button class="btn btn-primary">按钮</button>
    <button class="btn btn-warning">按钮</button>
    <button class="btn btn-link">按钮</button>
    将a链接转化为按钮 
    <a href="" class="btn btn-warning">百度</a>

15.图片的类
img-circle 图片变成圆形，长方形变成椭圆
img-rounded 图片弧角
img-thumbnail 图片加线条和弧角
img-responsive 图片响应式

    <img src="./img/1.jpg" alt="" class="img-circle"/>
    <img src="./img/1.jpg" alt="" class="img-responsive"/><!--图片响应式-->
    <img src="./img/1.jpg" alt="" class="img-rounded"/>
    <img src="./img/1.jpg" alt="" class="img-thumbnail"/>

16.文本颜色类
text-danger text-info text-success text-warning
文本背景颜色类
bg-danger bg-info bg-warning bg-success

    <p class="text-danger bg-danger">leromakhfhsjjjjjjjjjjjjjjjjjjjjjjjjjjj</p>
    <p class="text-info bg-info">leromakhfhsjjjjjjjjjjjjjjjjjjjjjjjjjjj</p>
    <p class="text-success bg-primary">leromakhfhsjjjjjjjjjjjjjjjjjjjjjjjjjjj</p>
    <p class="text-warning bg-warning">leromakhfhsjjjjjjjjjjjjjjjjjjjjjjjjjjj</p>

17.快速浮动
pull-right pull-left clearfix
元素浮动会影响它下来的元素布局，用clearfix加给浮动元素的父元素来清除浮动

    <div class="clearfix">
        <div class="pull-left" style="background-color: #00ffd2;height: 100px;width: 100px"></div>
        <div class="pull-right" style="background-color: #e4b9c0;height: 100px;width: 100px"></div>
    </div>
    <div style="background-color: #00abff;height: 200px;width: 500px"></div>

18.块级元素居中
center-block 也可以让图片居中

  <div class="center-block" style="background-color: #00abff;height: 200px;width: 500px"></div>

19.显示隐藏
show hidden

五.组件使用

1.按钮组
class=“btn-toolbar” role=“toolbar”
class=“btn-group”

<div class="btn-toolbar" role="toolbar">  这个div占一整行
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮 1</button>
        <button type="button" class="btn btn-default">按钮 2</button>
        <button type="button" class="btn btn-default">按钮 3</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮 4</button>
        <button type="button" class="btn btn-default">按钮 5</button>
        <button type="button" class="btn btn-default">按钮 6</button>
    </div>
</div>

2.进度条组
改进度条进度，更改style中width值，进度条加文字，在div里边写文字

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

3.下拉菜单

 	<link rel="stylesheet" href="css/bootstrap.css"/>
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/bootstrap.js"></script>

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

4.按钮加下拉菜单

<div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>

    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>

5.导航栏

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

6.左右点击菜单

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

六.插件使用

插件的效果没办法更改