Bootstrap入門及其常用內置實現
BootStrap是一個專門做頁面的
1.BS是基於HTML CSS JS 的一個前端框架(半成品)
2.預定義了一套CSS樣式與JQurey實現
3.BS和Validation類似，都是JQ的插件，需要與與之配對的JQuery版本一起使用
4.BS內置了一些實現，也可以進行自定義實現，現在學習前者
BootStrap重要特點：
1.可以實現響應式布局(在不同大小的屏幕中顯示處不同的狀態)
BootStrap使用準備：
1.導入與之匹配的JQ
2.將dist目錄下的三個文件夾復制進當前項目(這三個文件夾必須平級)（內置實現）
BootStrap模板：
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
/*這三個標簽必須這head標簽之後，其它所有標簽之前*/
<link href="../../css/bootstrap.css" rel="stylesheet">
<script src="../../js/jquery-1.11.3.min.js"></script>
<script src="../../js/bootstrap.js"></script>
/*引入BS內置的CSS，引入JQuery，引入BS的JS文件*/
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
/*瀏覽器兼容，在IE9以下瀏覽器使用這個框架時需要使用*/
BootStrap布局：
1.容器：
方式1：使用 class = "container"
效果：一般情況(pc機)左右有留白，移動設備左右無留白
方式2：使用class = "container-fluid"
左右無留白
2.柵格
A：行 ：class="row"
B：列：class="col-xx-單元列數"
BS中默認將一行分成12個單元列，我們要指定自己的單元格時，必須要指定它所占的單元列數
註意：
A：一行中所有的單元格總列數相加可以小於12，剩余的部分是空白
B：一行中所有的單元格總列數相加大於12時，大於的部分換行排列
C：柵格化布局時，采用比已設置屏幕更小的屏幕所有列都占一行的原則(如果不設置的話)
3.BootStrap的布局都是通過class屬性來定位div標簽所在的位置來對頁面進行布局
4.BS中的class實現
使用BS時，要實現某些功能，基本都是通過指定class實現的，BS中的class值都是固定的，類似於關鍵字可以被
BS識別，BS中的css文件有關於class的相關實現（.class{CSS樣式實現}）
響應式布局：
1.實現機制：
超小屏幕-------手機---------xs
小屏幕---------ipad mini-------sm
中等屏幕--------ipad----------md
大屏幕---------pc---------lg
2.代碼體現
不同設備上顯示不同效果，布局上通過class指定
class="col-屏幕代號-單元列數" (要設置多種中間加空格)
特點：小屏優先
大屏幕指定列數了，但是比其小的屏幕是換行實現
小屏幕指定列數了，比其大的屏幕沒有指定時，按照小屏的劃分顯示
顯示與隱藏設置：
顯示：visible-屏幕代號
隱藏：hidden-屏幕代號
特點：默認的是全部顯示，如果設置了特定屏幕顯示或隱藏，其它沒有設置的則取反
布局偏移：
1.設置空的div占位
2.偏移量：<div class="col-xs-8 col-xs-offset-4 text-center">
BS中的計時器：（輪播圖）
js代碼：
$(function(){
$(‘.carousel‘).carousel({
interval:時間值
});
});
輪播圖開始標簽中：
data-interval="時間值"
BS中的按鈕：
<button type="button" class="btn btn-關鍵字">顯示字樣</button>
BS中設置懸浮在頁面之上的元素（導航條）：
<div class="container" data-spy="affix" data-offset-top="60" data-offset-bottom="200" id="daohang">
然後在css代碼中定位該元素，將其置於頁面之上：
#daohang {
/*顯示在上面*/
z-index: 1;
top:0px;
left:0px;
right:0px;
}
BS中的膠囊條：
1.先查找導航實現，編寫膠囊導航條
2.通過CSS設置它的位置
3.單擊導航條定位到某個位置
A:href="#id值"
B:頁面中的實現模塊都有id值
href中的id值和頁面模塊的id值一一對應
4.body添加屬性，定位添加css樣式（因為是一直在頁面中顯示）
代碼實現：<body data-spy="scroll" data-target="#jiaonang">
<div class="container" id="jiaonang">
<ul class="nav nav-pills nav-stacked" >
<li class="active"><a href="#top">頂部</a></li>
<li><a href="#lunbo">輪播圖</a></li>
<li><a href="#remen">熱門商品</a></li>
</ul>
</div>
...
<style>
#jiaonang{
z-index:1;
width:100px;
position:fixed;(定義其在頁面中的絕對位置)
top:100px;
left:50px;
}
body {
position:relative;
}
</style>
Bootstrap入門及其常用內置實現