bootstrap页面排版和栅格处理

1.下载编译后的bootstrap导入css和js，导入jQuery要在bootstrap.min.js上；

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="src/js/jquery-1.11.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

2.导航条自作；

<nav class="navbar navbar-default">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">python</a></li>
        <li><a href="#">java</a></li>
    </ul>
</nav>

3.点击导航条出下拉列表；

role="navigation"有助于增加可访问性，class="caret"下角标

<a class="navbar-brand" href="#"><img src="src/img/logo.png"/></a>
<b class="caret"></b>

<nav class="navbar navbar-default">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">iOS</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">SVN <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li>next</li>
            </ul>
        </li>
    </ul>
</nav>

4.container和container-fluid区别，在不同屏幕大小中观察变化，container-fluid大小永远都是父元素的100%，container会随着屏幕大小变化；

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

5.在栅格中进行排版

首先在外面div中写class=‘row’，表示要将父级宽度分成12分，col-sm-4:平板尺寸、col-md-4:电脑尺寸、col-xs-4:手机尺寸、col-lg-2:超大尺寸；

移动：col-md-push-2: 右移动2列、col-md-pull-2:左移动2列；col-md-offset-3:向右偏移3列；

<div class="row">
    <div class="col-sm-4 col-md-4 col-xs-6 col-lg-2">
        内容1
    </div>
    <div class="col-sm-8 col-md-8 col-xs-6 col-lg-10">
        内容2
    </div>
</div>

6.class="clearfix"：清除浮动； class="thumbnail"：缩略图 ; class="hidden-lg":在超大设备中隐藏；

<div class="clearfix"></div>
<a href="#" class="thumbnail"><img src="src/img/ydyl_logo.png" alt="通用的占位符缩略图"></a>
<div class="hidden-lg hidden-xs hidden-md"></div>

7.分页

<ul class="pagination">
    <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

8.show-xs:在低于786像素设备中显示、hidden-md:大于992像素中隐藏；

<ul class="hid_ul show-xs hidden-md hidden-sm hidden-lg">
    <li><a href="#">GIS平台</a></li>
    <li><a href="#">数据产品</a></li>
    <li><a href="#">软件产品</a></li>
    <li><a href="#">硬件产品</a></li>
</ul>

9.缩略图制作；

<div class="row">
     <div class="col-sm-3 col-md-3 col-xs-4 col-lg-3">
          <a href="#" class="thumbnail prodect">
          <img src="src/img/product2.png"/>
          </a>
     </div>
     <div class="col-sm-9 col-md-9 col-xs-8 col-lg-9">
          <h4>生物多样性</h4>
     </div>
</div>

10.媒体查询；

@media only screen and (max-width: 991px){
    body{background:red;}
}

@media screen and (max-width: 1024px) {
	ul li {float:right;}
}

注：这些都是本人实际中使用过的；勤奋是你生命的密码，能译出你一部分壮丽的史诗；