Bootstrap框架快速上手攻略

前言

概念

1.選擇器

.xx  類選擇器
#xx  id選擇器
xxx  標籤選擇器

2.縮寫
div  division 劃分,圖層
ul unordered lists 無序列表
ol ordered lists 有序列表
li list item 列表項目

3.視口

Viewport是指手機端可見窗口(去掉瀏覽器導航欄,菜單欄後的窗口)。在添加視口代碼前，設備會按照桌面電腦分辨率去渲染整個頁面，然後再按照比例顯示到手機上。添加視口後，會強制按照手機屏幕分辨率渲染頁面。

第一章 基礎及佈局

一.柵格系統

定義:一系列的行和列構建的佈局,隨着屏幕放大,最多展示12個列
1.容器
固定佈局 div class = container 居中容器
流式佈局 div class = container-fluid 橫全屏容器

2.行與列
a.行
div class = row

b.列 class = col-
第一列 div class=col-lg-3 (每個佔3列) n=3
第二列 div class=col-lg-3
第三列 div class=col-lg-3
第四列 div class=col-lg-3
網頁顯示就是4列了.
col * n = 12

c.柵格參數:
 col-lg-3: lg large-->當屏幕大於1200px時採用 電腦
 col-md-3: md middle-->992~1200px
 col-sm-3: sm small-->768~992px             平板
 col-xs-3: xs extremely small-->小於768px 手機
 
d.多屏適配寫法:

<div class="col-lg-3 col-sm-4 col-xs-6"></div>

二.輔助類

文本顏色,及背景,有助於統一整體樣式
文本:class = text-

    <h1 class="text-primary">主要</h1>
    <h1 class="text-success">成功</h1>
    <h1 class="text-warning">警告</h1>
    <h1 class="text-danger">危險</h1>
    <h1 class="text-info">信息</h1>
    <h1 class="text-muted">暗啞</h1>

背景:class = bg-  

    <h1 class="bg-primary">主要</h1>
    <h1 class="bg-success">成功</h1>
    <h1 class="bg-warning">警告</h1>
    <h1 class="bg-danger">危險</h1>
    <h1 class="bg-info">信息</h1>
    <h1 class="bg-muted">暗啞</h1>

關閉按鈕圖標 class = close

    <button class="close"><span>×</span></button>
    <input class="close" type="button" value="關閉">

三角圖標^ class = caret

<span class="caret"></span>

快速浮動 div,class = pull-left ,pull-right 浮動會將塊元素轉化爲行內元素!!

補充:

行內元素與塊級函數的三個區別
1.行內元素與塊級元素直觀上的區別
行內元素會在一條直線上排列，都是同一行的，水平方向排列-->不管多少內容,始終佔滿一行
塊級元素各佔據一行，垂直方向排列。塊級元素從新行開始結束接着一個斷行-->有多少內容佔多少空間

2.塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素。

3.行內元素與塊級元素屬性的不同，主要是盒模型屬性上
行內元素設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效

4.行內元素轉換爲塊級元素
display:block (字面意思表現形式設爲塊級)如果不想讓父元素收到快速浮動的影響,要給父元素加上:class = clearfix

居中：

塊元素居中 div,class = center-block 
文字居中div,class = text-center
垂直居中 自定義樣式!

 <style>
	#div1{
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
	}
</style>

舉例：
<div id="div1" class="center-block text-center" style="width: 500px;border: 1px solid red;">
    塊元素居中
</div>
translate(-50%,-50%):元素自己的50%大小,向左平移,向上平移
顯示和隱藏 div,class = visible-lg


表格 table,class = table （響應式表格）
只需要增加table類,即可實現表格美化效果
1.斑馬線 class = table-striped
2.鼠標懸停變色 class = table-hover
3.邊框 class = table-bordered
4.顏色 active success warning danger info 注意:此處沒有primary
如:tr,class = danger

表格內垂直居中 
class = vertical-align:middle

三.列表

<ul></ul>
ul,class = list-group      列表
li,class = list-group-item 列表每一項

<span class="badge"></span> 徽章

li,class = list-group-item-success/danger/warning 列表每一項顏色

四.表單

1.垂直樣式表單(默認):form 或 form-vertical
<lable for="xxx"></lable> for和id一定做要關聯

表單分組:class = form-group 
表單項:class = form-control placeholder="請輸入用戶名"
複選框:div class = checkbox
單選框:div class = radio
下拉列表:select class = form-control
圓角:style border-radius: 10px;

五.按鈕

1.<button type="submit" class="btn btn-primary">提交</button>

class = 
btn 按鈕
btn-primary/success/... 按鈕顏色 
btn-block 按鈕佔滿一行


2.水平樣式表單
a.給form增加一個form-horizontal類

谷歌瀏覽器F12可以臨時修改樣式.

表單補充:
校驗狀態
成功:has-success
失敗:has-error

第二章 JavaScript組件

添加額外圖標
1.在form-group對應的標籤裏增加 has-feedback類
2.在input輸入框的後面,創建圖標 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
*圖片類屬性名去bootstrap中文網複製名稱使用:has-feedback


六.圖片:
響應式圖片 class="img-responsive"


圖片的形狀 
圓角圖片 img-rounded
圓形的圖片 img-circle
縮略圖 img-thumbnail


超鏈接縮略圖 a,class = thumbnail


七.按鈕
1.三種方式創建按鈕
1.
<button type="button" class="btn btn-primary">button按鈕1</button>
2.
<input type="button" class="btn btn-success" value="input按鈕">
3.
<a href="#" class="btn btn-danger">a按鈕</a>


2.
樣式 class = btn
顏色 class = btn-primary/success/danger/...
尺寸 
大  btn-lg
中  btn-sm
小  btn-xs
block塊級按鈕  btn-block 佔滿整個一行


3.按鈕組 class = btn-group


4.激活狀態和禁用狀態
激活:active
禁用:disabled


八.下拉菜單 class = dropdown-menu
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">php</a> </li>
<li><a href="#">java</a> </li>
<li><a href="#">js</a> </li>
<li><a href="#">android</a> </li>
</ul>
</div>


步驟:
1.將ul列表轉換爲下拉菜單: 增加dropdown-menu類
2.給button增加dropdown-toggle類 , 實現點擊按鈕時,讓菜單顯示:
data-toggle = "dropdown"






九.輸入框組 class = input-group
給輸入框的兩側增加按鈕或元素


1.按鈕  class="input-group-btn"
<div class="input-group">
<input type="text" class="form-control" placeholder="請輸入">
<div class="input-group-btn">
<button class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>


<div class="input-group">
<input class="form-control" placeholder="請輸入">
<span class="input-group-btn">
<button class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>


2.元素 class="input-group-addon"
<div class="container">
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text" placeholder="請輸入" class="form-control">
        <span class="input-group-addon">.00</span>
    </div>
</div>




十.導航 class = nav 
ul
1.nav nav-tabs 普通導航
2.nav nav-pills 膠囊式導航
3.nav nav-stacked 堆疊式導航
4.nav nav-justify 平鋪式導航


li
激活狀態 class = active




十一.導航條 class = navbar
導航條高度=50px
<nav class="navbar navbar-primary navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">阿比巴斯</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a href="#">首頁</a></li>
        <li><a href="#">產品介紹</a></li>
        <li><a href="#">關於我們</a></li>
    </ul>
    <form role="form" class="navbar-form navbar-left">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="請輸入">
            <button type="submit" class="btn btn-default">提交</button>
        </div>
    </form>


    <div class="container">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">首頁</a></li>
            <li><a href="#">產品介紹</a></li>
            <li><a href="#">關於我們</a></li>
        </ul>
    </div>
</nav>


步驟:
1.創建導航條:
<nav class="navbar navbar-inverse"></nav>
2.第一個元素及品牌:
<div class="nav navbar-header">
<a class="navbar-brand">阿比巴斯</a>
</div>
3.頭元素後的導航
<ul class="nav navbar-nav">
<li><a href="#">首頁</a></li>
<li><a href="#">產品介紹</a></li>
<li><a href="#">關於我們</a></li>
</ul>
4.導航條內的表單
 <form role="form" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="請輸入">
<button type="submit" class="btn btn-default">提交</button>
</div>
</form>
navbar-left : 左浮動
5.右側導航區域
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">首頁</a></li>
<li><a href="#">產品介紹</a></li>
<li><a href="#">關於我們</a></li>
</ul>
</div>
navbar-right : 右浮動


十二.麪包屑導航 class = breadcrumb


十三.分頁
1.普通分頁 class = pagination
2.居中分頁 class = pager


十四.警告框 class = alert alert-danger/warning/...


十五.面板 class = panel
嵌套表格的面板
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">這是面板的標題</h1>
</div>
<div class="panel-body">
這是面板的內容
</div>
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>23</td>
</tr>
</tbody>
</table>
</div>
</div>




十六.字體圖標 class = ...官網找類的屬性名
圖標也可以嵌套在按鈕裏面






十七.模態框(彈窗)
1.創建按鈕,點擊顯示模態框


2.創建模態狂,默認是隱藏的
 <div class="container">
       <button class="btn btn-primary">
           彈出模態框
       </button>
        <br>
        <br>
        <br>
       模態框
       <div class="modal" role="dialog">
           <div class="modal-dialog" role="document">
               <div class="modal-content">
                   <div class="modal-header">
                       <h4 class="modal-title">這是模態框標題</h4>
                       <button class="close">&times;</button>
                   </div>
                   <div class="modal-body">
                       這裏是模態框的內容
                   </div>
                   <div class="modal-footer">
                       <button class="btn btn-default">關閉</button>
                       <button class="btn btn-default">保存修改</button>
                   </div>
               </div>
           </div>
       </div>
   </div>
   
3.實現點擊按鈕的時候,讓模態框顯示出來,有2種方法
方法1:通過data-屬性實現
<div class="container">
       <button class="btn btn-primary" data-toggle="modal" data-target="#myModal"> data屬性!
           彈出模態框
       </button>
        <br>
        <br>
        <br>
       模態框
       <div class="modal" role="dialog" id="myModal"> 給出id!
           <div class="modal-dialog" role="document">
               <div class="modal-content">
                   <div class="modal-header">
                       <h4 class="modal-title">
                           這是模態框標題
                           <button class="close">&times;</button>
                       </h4>
                   </div>
                   <div class="modal-body">
                       這裏是模態框的內容
                   </div>
                   <div class="modal-footer">
                       <button class="btn btn-default">關閉</button>
                       <button class="btn btn-default">保存修改</button>
                   </div>
               </div>
           </div>
       </div>
   </div>
   如何實現,點擊X號關閉模態框:給button增加data-dismiss屬性
  <button class="close" data-dismiss="modal">&times;</button>
   
   
方法2:通過javascript實現
1.點擊按鈕,給按鈕綁定一個點擊事件
2.點擊背景幕時,不讓模態框隱藏
3.將模態框的內容寫到外部文件中,然後再加載進來
   <div class="container">
       <button class="btn btn-primary" id="openModal">
           彈出模態框
       </button>
        <br>
        <br>
        <br>
       模態框
       <div class="modal" role="dialog" id="myModal">
           <div class="modal-dialog" role="document">
               <div class="modal-content">


               </div>
           </div>
       </div>
   </div>
    <script>
        //表示當整個頁面加載完畢後執行
        $(function(){
            $('#openModal').click(function(){
                //show方法:顯示
                //$('#myModal').modal('show');


                //用到Json
                $('#myModal').modal({
                    backdrop:'static',  //表示點擊背景幕的時候模態框不消失
                    keyboard:true,      //按esc鍵也消失
                    show:true,          //一上來就顯示
                    remote:'10.2.2.remote.html'  //表示加載外部內容進來
                });
            })


            //監視id=openModel的事件-show  on表示監聽
            $('#myModal').on('show.bs.modal',function(){
                alert('模態框要展示出來了!');
            })


            //監視id=openModel的事件-shown  on表示監聽
            $('#myModal').on('shown.bs.modal',function(){
                alert('模態框已經展示出來了!');
            })


            //監視id=openModel的事件-hide  on表示監聽
            $('#myModal').on('hide.bs.modal',function(){
                alert('模態框要隱藏了!');
            })


            //監視id=openModel的事件-hidden  on表示監聽
            $('#myModal').on('hidden.bs.modal',function(){
                alert('模態框已經隱藏了!');
            })
        })
    </script>



外部文件:
<div class="modal-header">
<h4 class="modal-title">
這是模態框標題
<button class="close" data-dismiss="modal">&times;</button>
</h4>
</div>
<div class="modal-body">
這裏是模態框的內容
</div>
<div class="modal-footer">
<button class="btn btn-default">關閉</button>
<button class="btn btn-default">保存修改</button>
</div>






十八.輪播圖 class = carousel 
<div class="container">
    <div class="carousel slide" id="myCarousel">
        <!--標識符(指示符,小圓點)部分-->
        <ul class="carousel-indicators">
            <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <li data-target="#myCarousel" data-slide-to="4"></li>
        </ul>


        <!--內容部分-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="../img/carousel1.jpg" alt="這是輪播圖的標題">
                <div class="carousel-caption">
                    <!--這是輪播圖的標題-->
                </div>
            </div>


            <div class="item">
                <img src="../img/carousel2.jpg" alt="這是輪播圖的標題">
                <div class="carousel-caption">
                    <!--這是輪播圖的標題-->
                </div>
            </div>


            <div class="item">
                <img src="../img/carousel3.jpg" alt="這是輪播圖的標題">
                <div class="carousel-caption">
                    <!--這是輪播圖的標題-->
                </div>
            </div>


            <div class="item">
                <img src="../img/carousel4.jpg" alt="這是輪播圖的標題">
                <div class="carousel-caption">
                    <!--這是輪播圖的標題-->
                </div>
            </div>


            <div class="item">
                <img src="../img/carousel5.jpg" alt="這是輪播圖的標題">
                <div class="carousel-caption">
                    <!--這是輪播圖的標題-->
                </div>
            </div>
        </div>


        <!--控制左右換頁的箭頭-->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev" >
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next" >
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <!--通過js修改slide速度-->
    <script>
        $(function(){
            $('#myCarousel').carousel({
                interval:2500   //每隔2500毫秒切換一次
            })
        })
    </script>
</div>




第三章 
一.複習:
(一).模態框
1.先創建一個按鈕
2.點擊按鈕的時候,顯示出一個模態框
兩種方式顯示模態框
1.通過data屬性實現


2.通過javascript實現


模態框還提供了4個事件:




(二).下拉菜單
代碼實現
1.先創建 class = dropdown的div
2.再創建 date-toggle屬性是dropdown的div
3.再創建下拉菜單


提供了幾個事件


二.滾動監聽
參考jQuery全屏滾動插件fullPage.js !
<style>
#section1,#section2,#section3{
height: 728px;
}


#section1{
background: red;
}


#section2{
background: green;
}


#section3{
background: blue;
}


#nav_ul{
position: fixed;
top:20px;
}
</style>

<div class="container">
<div class="row">
<div class="col-lg-3">
<nav>
<ul class="nav nav-pills nav-stacked" id="nav_ul">
<li class="active"><a href="#section1">Section1</a></li>
<li><a href="#section2">Section2</a></li>
<li><a href="#section3">Section3</a></li>
</ul>
</nav>
</div>
<div class="col-lg-9">
<div id="section1">
<h1>這是section1的標題</h1>
</div>
<div id="section2">
<h1>這是section2的標題</h1>
</div>
<div id="section3">
<h1>這是section3的標題</h1>
</div>
</div>
</div>
</div>


固定,相對,絕對定位
1.先搭建界面.
2.給導航的a標籤href屬性指定跳轉的位置.
3.綁定監聽事件.


除了通過data屬性實現滾動監聽之外,還可以通過javaScript來實現.
提供了一個事件:activate.bs.scrollspy ,獲得當前滾動到的是哪一項.
<div class="container">
    <div class="row">
        <div class="col-lg-3" id="myScroll">
            <nav>
                <ul class="nav nav-pills nav-stacked" id="nav_ul">
                    <li class="active"><a href="#section1">Section1</a></li>
                    <li><a href="#section2">Section2</a></li>
                    <li><a href="#section3">Section3</a></li>
                </ul>
            </nav>
        </div>
        <div class="col-lg-9">
            <div id="section1">
                <h1>這是section1的標題</h1>
            </div>
            <div id="section2">
                <h1>這是section2的標題</h1>
            </div>
            <div id="section3">
                <h1>這是section3的標題</h1>
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
        $('body').scrollspy({
            target: '#myScroll'
        })


        //監視滾動的行爲
        $('#myScroll').on('activate.bs.scrollspy',function() {
            //找到哪個li標籤處於active狀態
            var activeItem = $('#myScroll li.active').text();
            alert('當前顯示的是:' + activeItem);
        })
    })
</script>






三.標籤頁或選項卡
fade:漸變
active:活動狀態
in:顯示內容
注:in和active配合使用


1.通過data-屬性實現
<div class="container">
    <ul class="nav nav-tabs"> <!--或者nav-pills-->
        <li class="active"><a href="#home" data-toggle="tab">首頁</a></li>
        <li><a href="#product" data-toggle="tab">產品</a></li>
        <li><a href="#other" data-toggle="tab">其他</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active fade in" id="home" >
            企業網站
        </div>
        <div class="tab-pane fade" id="product">
            公司產品 起重機 壓縮機 水泵 電機 淨化器
        </div>
        <div class="tab-pane fade" id="other">
            歡迎聯繫我們
        </div>
    </div>
</div>




2.通過javascript實現
<div class="container">
    <ul class="nav nav-pills">
        <li class="active"><a href="#home">首頁</a></li>
        <li><a href="#product">產品</a></li>
        <li><a href="#other">其他</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active fade in" id="home" >
            企業網站
        </div>
        <div class="tab-pane fade " id="product">
            公司產品 起重機 壓縮機 水泵 電機 淨化器
        </div>
        <div class="tab-pane fade" id="other">
            歡迎聯繫我們
        </div>
    </div>
</div>
<script>
    $(function(){
        $('.nav-pills a').click(function(){
            //$(this)指的就是當前的a標籤
            $(this).tab('show');
        })


        $('.nav-pills a').on('shown.bs.tab',function(e){
            //e,指的是-->事件對象,該對象獲得當前點擊的是哪個a標籤
            //var currentItem = e.target;
            //var prevTab = e.relatedTarget;
            var currentItem = $(e.target).text();
            var prevTab = $(e.relatedTarget).text();
            alert('當前的標籤頁是:' + currentItem);
            alert('上一個標籤頁是:' + prevTab);
        })
    })
</script>


四.摺疊菜單
<div class="container">
    <div class="panel panel-primary" data-toggle="collapse">
        <div class="panel-heading">
            <a href="#collapseArea" data-toggle="collapse"> <!-- data-toggle="collapse"-->
                <h4 style="color:white;">點擊摺疊,再次點擊顯示</h4>
            </a>
        </div>
        <div class="panel-collapse collapse in" id="collapseArea">
            <div class="panel-body">
                這裏是面板內容區域
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
        //$('#collapseArea').collapse('show');
        //$('#collapseArea').collapse('hide');
        //$('#collapseArea').collapse('toggle');


        $('#collapseArea').on('show.bs.collapse',function(){
            alert('即將顯示');
        })


        $('#collapseArea').on('shown.bs.collapse',function(){
            alert('已經顯示');
        })


        $('#collapseArea').on('hide.bs.collapse',function(){
            alert('即將隱藏');
        })


        $('#collapseArea').on('hidden.bs.collapse',function(){
            alert('已經隱藏');
        })
    })
</script>


五.響應式網站
1.塊區域內容垂直居中
讓height 和 line-height相等


2.圖片垂直居中
圖片是行內元素,所以現將圖片轉換成塊元素,再垂直居中