Bootstrap開發

一、BootStrap開發工具

　　任意前端工具

　　專門Bootstrap工具：Jetstrap（下載地址：jetstrap.com）

二、官網：

　　www.bootcss.com（「下載Bootstrap」，解壓後是：css、fonts、js三個文件）

三、網頁開發：

　　引入樣式：<link rel="stylesheet" href="dist/css/bootstrap.min.css"/>

　　引入jquery文件和bootstrap的js：（jquery須要引入1.9.1更高版本）

　　　　<script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>

　　　　<script src="dist/js/bootstrap.min.js" type="text/javascript"></script>

四、Bootstrap中的全局樣式

　　基本HTML元素均可以使用class設置樣式並獲得加強效果

　　①、樣式

　　標題（h1~h6 / .h1~.h6）

　　　　<span  class="h1">標題</span>

　　副標題（small）

　　　　<small></small>

　　②、文本

　　　段落（p）

　　③、表格

　　　<table class="table"></table>

　　　<table class="table  table-striped"></table>　　(增長實體線)

　　　<table class="table  table-striped  table-hover"></table>　　(鼠標移動高亮)

　　④、表單

　　　<div  class="form-group">

　　　    <input  class="form-control"   type="text"  placeholder="這是輸入框" />

　　　</div>

　　　　水平排列：<div  class="form-inline">

　　　　消失：<laber  class="sr-only">

　　⑤、按鈕

　　　　<button  class="btn  btn-default">按鈕</button>

　　　　<button  class="btn  btn-success">按鈕</button>

　　　　<button  class="btn  btn-primary">按鈕</button>

　　　　<button  class="btn  btn-info">按鈕</button>

　　　　<button  class="btn  btn-warning">按鈕</button>

　　　　<button  class="btn  btn-danger">按鈕</button>

　　　　<button  class="btn  btn-link">按鈕</button>

　　　　<button  class="btn  btn-default  btn-lg">按鈕</button>　　控制大小

　　⑥、圖片及輔助類

　　　　<img  class="img-rounded">　　圓角

　　　　<img  class="img-circle">　　　　圓形

　　　　<img  class="img-trumbnail">　　帶邊框圓角

五、Bootstrap漸進

　　--開發響應式頁面　　　　Viewport

 

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

　　--利用柵格佈局（柵格系統）適配不一樣硬件

　　　　*{

　　　　　　padding：0；

　　　　　　margin：0；

　　　　}

　　　　@media  screen  and(max-width:900px)  and  (min-width:500px){　　　　// 當屏幕範圍操控在500，900px時

　　　　　　.text{

　　　　　　　　width:100%;

　　　　　　　　hieght:100px;

　　　　　　　　background:blue;

　　　　　　}

　　　　}

　　　　<div  class="text  col-lg-3  col-md-4  col-sm-6  col-xs-12  col-lg-offset-3  col-md-offset-4"></div>　　　//  Bootstrap中的適應屏幕的類

　　--單位

　　　　px、em、rem

　　--字體圖標（front文件夾）

　　　　引用後

　　　　<style>

　　　　　　.glyphicon-asterisk{

　　　　　　　　color：green;

　　　　　　　　font-size：100px;

　　　　　　}

　　　　</style>

　　　　<span  class="glyphicon  glyphicon-asterisk"></span>

六、Bootstrap中的組件

　　①、怪異屬性（盲文網站）

　　　　role

　　　　aria-label

　　　　tabIndex

　　　　data-

　　②、字體圖標

　　③、下拉菜單

　　　　

　　　　data-toggle="dropdown"綁定事件

　　④、控件組

　　　　input-group　　表示控件組

　　　　input-group-addon　　可放置額外內容及圖標

　　　　

　　⑤、導航

　　　　一、以一個帶有class.nav的無序列表開始

　　　　二、nav-tabs　　表明可切換的導航

　　　　三、nav-pills　　表明膠囊導航

　　　　四、nav-justified　　使導航垂直

　　　　

　　⑥、分頁

 　　　　一、pagination　　在父元素中添加表示分頁

　　　　二、pager　　放置在翻頁區域

　　　　三、previous　　把連接向左對齊

　　　　四、next　　　　把連接向右對齊

　　　　<nav>

　　　　　　　

　　　　　　　

　　　　　　　　　　　</a>

　　　　　　　　　</li>

　　　　　　　</ul>

　　　　</nav>

　　　　結果：

　　⑦、進度條

　　　　一、progress　　表示進度條

　　　　二、經過狀態類改變進度條的顏色

　　　　三、progress-bar-striped　　使進度條顏色漸變

　　　　

　　⑧、列表

　　　　一、list-group　　表明列表組

　　　　二、badge　　表明狀態數

　　　　三、active　　表明選中狀態

　　　　

　　⑨、面板

　　　　一、panel　　面板

　　　　二、panel-body　　表明面板內容

　　　　三、panel-footer　　表明面板的註腳

　　　　

七、Bootstrap中的插件

　　一、Bootstrap插件依賴Bootstrap.js

　　二、Bootstrap.js基於JQuery

　　①、data屬性

　　　　一、經過data屬性控制頁面交互

　　　　二、$(document).off('.data-api')解除屬性綁定

　　　　data-toggle="class"　　指定綁定標籤的class

　　　　data-target="#id"　　　指定綁定標籤的id