文檔結(jié)構(gòu)

需要使用HTML5文檔結(jié)構(gòu) <!DocType html>
移動(dòng)設(shè)備優(yōu)先需要在頭部增加<meta>標(biāo)簽

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,initial-scale=1.0"/>

引入BootStrap
- 引入css，當(dāng)有自己的css文檔，應(yīng)引入bootstrap.css后再引入自己編寫(xiě)額css文件
- 引入jQuery.js再引入bootstrap.js
- 若要兼容IE瀏覽器，再引入兩個(gè)js文件，使用IE的條件注釋
```
    
  [兩個(gè)js文件自己google]
```

bootstrap表單樣式

    創(chuàng)建表單步驟：
    1.創(chuàng)建form標(biāo)簽并添加role="form"(語(yǔ)義化，給瀏覽器和搜索引擎看)
    2.控制分組，把標(biāo)簽和控件放在一個(gè)class為formgroup的div中
    3.給表單控件(input,textarea,select)添加類(lèi)名form-control

內(nèi)聯(lián)表單

給form添加類(lèi)名form-inline

水平表單

給form添加類(lèi)名form-horizontal
給標(biāo)簽label添加類(lèi)名control-label
配合bootstrap網(wǎng)格系統(tǒng)加入類(lèi)名col-sm-1

其它表單控件

form-control-static：靜態(tài)表單控件，添加標(biāo)簽和類(lèi)名，不必用input特定標(biāo)簽
help-block：表單提示，添加標(biāo)簽和類(lèi)名（同上）
提示圖標(biāo)：glyphicon glyphicon-ok（參照API文檔） form-control-feedback

按鈕：在使用其它類(lèi)名前均加上基礎(chǔ)類(lèi)名btn

  基礎(chǔ)類(lèi)名：btn
  默認(rèn)按鈕樣式：btn-default
  原始按鈕樣式：btn-primary
  成功按鈕樣式：btn-success
  鏈接式按鈕：btn-link
  -----------------------
  設(shè)置按鈕大小
  超大：btn-lg
  默認(rèn)大?。篵tn-md
  小號(hào)：btn-xs
  btn-block：塊級(jí)按鈕，寬度取決于它父級(jí)的寬度的100%
  -----------------------
  設(shè)置按鈕狀態(tài)
  激活：active
  禁用：disable

bootstrap圖片樣式

響應(yīng)式圖片

img-responsive（max-width:100%）

圓角圖片

img-rounded
img-circle 圓形

縮略圖

img-thumbnail：添加一個(gè)內(nèi)邊距padding和邊框

bootstrap輔助類(lèi)

左浮動(dòng)：pull-left
右浮動(dòng)：pull-right
塊級(jí)并居中：center-block 需要設(shè)置寬度，不能設(shè)浮動(dòng)
強(qiáng)制元素顯示/隱藏：show/hide
隱藏文字：text-hide

bootstrap表格樣式

基礎(chǔ)類(lèi)名：table

  table-striped：斑馬線表格
  table-bordered：帶邊框表格（給td加邊框）
  table-hover：鼠標(biāo)懸停高亮效果
  table-condensed：緊湊型表格（減少單元格padding值）
  table-responsive：響應(yīng)式表格

bootstrap網(wǎng)格系統(tǒng)

原理

將容器平分為12份（12列）
結(jié)合媒體查詢(xún)做出響應(yīng)式布局效果

用法

定義一個(gè).row的容器作為行
定義一個(gè).col的容器作為列
只有col才能作為row的直接子元素

              屏幕   屏幕尺寸
  .col-lg-*   超大   >1200px
  .col-md-*   中屏   >992px
  .col-sm-*   小屏   >768px 
  .col-xs-*   超小   <768px
  
  *代表1~12，每一個(gè)所占空間大小

列偏移&列排序

列偏移：不希望兩列靠在一起，使用類(lèi)名.col-*-offset-*

列排序：設(shè)置網(wǎng)格的排列順序

.col-*-push-* 往右排

.col-*-pull-* 往左排

  通俗點(diǎn)就是往左移動(dòng)和往右移動(dòng)幾個(gè)網(wǎng)格空間大小

bootstrap下拉菜單

創(chuàng)建一個(gè)類(lèi)名為dropdown的div容器，用它來(lái)包裹整個(gè)下拉菜單

在dropdown容器內(nèi)添加一個(gè)按鈕button，作為父菜單

  定義類(lèi)名為dropdown-toggle和自定義屬性data-toggle="dropdown"

添加按鈕里的小三角

  button添加類(lèi)名為caret的span標(biāo)簽

創(chuàng)建下拉菜單

  添加一個(gè)ul無(wú)序列表，定義類(lèi)名為dropdown-menu

菜單分割線

  添加一個(gè)空列表項(xiàng)li，類(lèi)名為divider

bootstrap按鈕組

    將幾個(gè)按鈕放入一個(gè)類(lèi)名為btn-group的div中
    btn-group-vertical ? 垂直按鈕組
    按鈕組大 ? 給組別加類(lèi)名btn-group-lg|md|sm|xs

嵌套按鈕組
```
  在按鈕組里面嵌套下拉列表
```
- 在btn-group里面嵌套一個(gè)btn-group，將下拉菜單的父菜單按鈕放置在嵌套的btn-group里
- 給父菜單按鈕添加類(lèi)名dropdown-toggle和自定義屬性data-toggle="dropdown"
- 增加小三角圖標(biāo)<span class='caret'></span>

bootstrap導(dǎo)航

添加無(wú)序列表，用來(lái)作為導(dǎo)航

給列表添加類(lèi)名 .nav ? 基礎(chǔ)類(lèi)名

  nav-tabs ? 表格式導(dǎo)航
  nav-pills ? 鼓囊式導(dǎo)航

給導(dǎo)航菜單項(xiàng)添加樣式
```
  active ? 當(dāng)前選中項(xiàng)
  disabled ? 禁用狀態(tài)  
```
? 垂直式導(dǎo)航：給導(dǎo)航添加類(lèi)名nav-stacked
一般用于鼓囊式導(dǎo)航

? 導(dǎo)航二級(jí)菜單：在導(dǎo)航里添加下拉列表
1. 給父級(jí)菜單添加類(lèi)名dropdown
2. 在此列表項(xiàng)里添加一個(gè)二級(jí)菜單列表項(xiàng) .dropdown-menu
3. 給此列表里面的a標(biāo)簽添加類(lèi)名dropdown-toggle和自定義屬性data-toggle="dropdown"

? tab標(biāo)簽頁(yè)導(dǎo)航（選項(xiàng)卡功能）
1. 添加一個(gè)表格式導(dǎo)航
2. 給導(dǎo)航里面的a標(biāo)簽添加屬性data-toggle="tab"的錨點(diǎn)鏈接地址
3. 添加一個(gè)tab-content的div，在里面包含每一個(gè)要切換的tab標(biāo)簽頁(yè)
4. 給每一個(gè)標(biāo)簽頁(yè)添加類(lèi)名tab-pane和fade
5. 默認(rèn)顯示項(xiàng)
- 給導(dǎo)航列表項(xiàng)添加類(lèi)名active
- 給默認(rèn)顯示標(biāo)簽頁(yè)添加類(lèi)名active和in

? 導(dǎo)航條
導(dǎo)航條頭部里面可以放置導(dǎo)航，表單等
1. 添加類(lèi)名為navbar的div，用來(lái)制作導(dǎo)航條
navbar-default ? 默認(rèn)
navbar-inverse ? 反色
2. 在navbar里面添加頁(yè)面標(biāo)題
添加一個(gè)類(lèi)名為navbar-head的div，包含navbar-brand的a標(biāo)簽
3. 在navbar里添加導(dǎo)航
在普通導(dǎo)航基礎(chǔ)上添加類(lèi)名navbar-nav
4. 導(dǎo)航里添加表單（搜索框）
添加類(lèi)名navbar-form
PS：將搜索框和按鈕用類(lèi)名為input-group的div包起來(lái)，將搜索按鈕放入類(lèi)名為input-group-btn的span中，可實(shí)現(xiàn)搜索框和按鈕連在一起的視覺(jué)效果
5. 導(dǎo)航條里的浮動(dòng)
navbar-left ? 左浮動(dòng)
navbar-right ? 右浮動(dòng)
6. 導(dǎo)航條里面單獨(dú)的按鈕和鏈接
按鈕 ? navbar-btn
鏈接 ? navbar-link和navbar-text
普通文字 ? navbar-text
7. 固定導(dǎo)航條
navbar-fixed-top|navbar-fixed-bottom

? 響應(yīng)式導(dǎo)航條
1. 將nav導(dǎo)航用一個(gè)類(lèi)名為collapse和navbar-collapse的div包起來(lái)
2. 在navbar-header里添加類(lèi)名為navbar-toggle和自定義屬性為data-toggle="collapse"與data-target="#myNav（自己取名）"的按鈕，在按標(biāo)簽里再加入漢堡按鈕
漢堡按鈕：三個(gè)span標(biāo)簽，每個(gè)類(lèi)名為icon-bar

bootstrap標(biāo)簽/徽章

通過(guò)span標(biāo)簽，添加類(lèi)名label ? 基礎(chǔ)類(lèi)名
```
  label-default
  label-primary
  label-success
  ...
```
通過(guò)span標(biāo)簽，添加類(lèi)名bodge

bootstrap內(nèi)置組件

縮略圖

使用網(wǎng)格系統(tǒng)實(shí)現(xiàn)

警示框

若在警告框里的文字加鏈接，則會(huì)覆蓋原有警示框顏色，應(yīng)該在a標(biāo)簽里加類(lèi)名alert-link

給警示框加類(lèi)名alert-dismissable
給警示框加類(lèi)名為close的button標(biāo)簽
按鈕上加自定義屬性data-dismiss="alert"

進(jìn)度條

外層div用來(lái)寫(xiě)灰色背景，類(lèi)名progress

  加類(lèi)名progress-striped為條紋進(jìn)度條
  再加active類(lèi)名為動(dòng)態(tài)進(jìn)度條

里層div顯示進(jìn)度，類(lèi)名progress-bar ? 基礎(chǔ)類(lèi)名
```
  progress-bar-success
  ...
```
給progress-bar加行內(nèi)樣式width=百分比

bootstrap多媒體對(duì)象

加一個(gè)類(lèi)名為media的div容器
在media的div中加一個(gè)類(lèi)名為pull-left的a標(biāo)簽
在media的div中添加媒體描述，使用類(lèi)名為media-body的div
給媒體body中的標(biāo)題加media-heading類(lèi)名

要放置多個(gè)媒體列表，則在所有列表外套一個(gè)類(lèi)名為media-list的div
在media-dody中再寫(xiě)入media的div則為媒體嵌套

bootstrap列表組

基礎(chǔ)列表組

  給無(wú)序列表或div加類(lèi)名list-group，給li列表項(xiàng)加類(lèi)名list-group-item

在列表組里加徽章，bodge，自動(dòng)的右浮動(dòng)

自定義列表

  li添加標(biāo)題元素類(lèi)名為list-group-item-heading放置標(biāo)題和h標(biāo)簽
  再加入類(lèi)名為list-group-item-text的p標(biāo)簽來(lái)放內(nèi)容

bootstrap面板

基礎(chǔ)面板

添加類(lèi)名為panel的div容器，其中panel為基礎(chǔ)類(lèi)名
在panel里添加類(lèi)名為panel-heading的div，在其中添加類(lèi)名為panel-title的標(biāo)題h1~h6
在panel里添加一個(gè)類(lèi)名為panel-body的div放主內(nèi)容，表格，表單等
在panel-body后添加類(lèi)名為panel-footer的div，在其中添加普通文字

bootstrap插件

以下插件若通過(guò)js調(diào)用的話，均不必添加任何自定義屬性

模態(tài)彈出框

通俗點(diǎn)就是alert彈出框，只不過(guò)樣式花哨點(diǎn)

結(jié)構(gòu)分析

.modal
    .modal-dialog
        .modal-content
            .modal-header
            .modal-body
            .modal-footer

模態(tài)框默認(rèn)為隱藏狀態(tài)

觸發(fā)方式

給觸發(fā)元素（按鈕）添加屬性data-toggle="modal"和data-target="#myModal（自己取名）"
a標(biāo)簽加href="#myModal"和data-toggle="modal"

js觸發(fā)

$('#myModal').modal();

  給模態(tài)框添加動(dòng)畫(huà)效果：在modal類(lèi)名上的div中再增加fade類(lèi)
  當(dāng)data-backdrop="static"時(shí)，點(diǎn)擊modal之外的地方不會(huì)使其消失

其他參數(shù)
```
  通過(guò)標(biāo)簽屬性和js參數(shù)傳遞，通過(guò)js，則去掉data-*屬性，只傳入后面的名稱(chēng)$('#myModal').modal();只傳入modal括號(hào)內(nèi)就好
```
- data-backdrop ? true|false ? 彈出框是否有大背景，默認(rèn)true
- data-keyboard ? true|false ? 按下Esc鍵是否可以關(guān)閉模態(tài)框
  需要同時(shí)設(shè)置屬性tabindex="-1"

滾動(dòng)監(jiān)聽(tīng)

創(chuàng)建一個(gè)導(dǎo)航，添加id屬性
給導(dǎo)航中的li中的a標(biāo)簽添加href值對(duì)應(yīng)到每一個(gè)模塊

給body添加屬性data-spy="scroll"和data-target="#myNavbar（自己取名）"

  固定定位：在需要固定的元素加屬性data-spy="affix"和data-offset-top="數(shù)值"

提示框

給需要提示的標(biāo)簽添加屬性data-toggle="tooltip"，title="提示"
通過(guò)js調(diào)用提示框插件
```
tooltip();
```
控制提示框的方向：添加屬性data-placement="top|bottom|left|right"

彈出框

給需要彈出框的元素加屬性data-toggle="popover"和data-content="彈出框內(nèi)容"，title="標(biāo)題內(nèi)容"

警示框

創(chuàng)建一個(gè)警示框alert
在其中加入關(guān)閉按鈕
用警示框外的按鈕來(lái)關(guān)閉它
- 在外部元素添加屬性data-dismiss="alert"和data-target="#自己取名"

按鈕

模擬單選按鈕
- 在btn-group中添加data-toggle="buttons"
模擬復(fù)選框
- 同上，把input的type類(lèi)型換成checkbox即可
按鈕狀態(tài)切換
- 給button添加屬性data-toggle="button"
- 通過(guò)js調(diào)用
```
$('selector').button('toggle');
```

加載狀態(tài)按鈕

  當(dāng)點(diǎn)擊時(shí)，按鈕狀態(tài)變?yōu)榧虞d中，文本變成data-toggle-text的內(nèi)容

$('selector').button('toggle');
$('selector').button('reset');//寫(xiě)入setTimeout函數(shù)中去

手風(fēng)琴插件使用

添加一個(gè)類(lèi)名為panel-group的div作為面板組的內(nèi)容
在面板組里面添加面板，并且為面板定義頭部和主體內(nèi)容
在panel-title里添加一個(gè)a標(biāo)簽，加屬性data-toggle="collapse"和data-parent="#面板組id"，href="#面板內(nèi)容id"
將panel-body用類(lèi)為panel-collapse和collapse的div包起來(lái)，并設(shè)置id
給指定面板加類(lèi)名in，則為默認(rèn)展開(kāi)狀態(tài)

輪播圖插件使用

添加類(lèi)名為carousel和slide的div，作為輪播圖容器，設(shè)置id
添加計(jì)數(shù)器，默認(rèn)樣式為圓點(diǎn)，可用無(wú)序列表實(shí)現(xiàn)，為其添加類(lèi)名carousel-indicators，為每個(gè)li加屬性data-target="#容器id"和data-slide-to="0~n"，對(duì)應(yīng)每一張圖
添加一個(gè)類(lèi)名為carousel-inner的div容器，用來(lái)存放圖片，每張圖放在類(lèi)名為item的div中
給對(duì)應(yīng)的item項(xiàng)和對(duì)應(yīng)的圓點(diǎn)加active為默認(rèn)顯示的狀態(tài)
添加兩個(gè)類(lèi)名為carousel-control的a鏈接，分別加類(lèi)名left|right，在其中加屬性data-slide="prev"或next，并設(shè)置href="#容器id"

給carousel加data-ride="carousel"使其自動(dòng)輪播
data-interval="毫秒數(shù)" ? 控制輪播圖自動(dòng)輪播切換間隔時(shí)間
data-wrap="true|false" ? 是否循環(huán)輪播

  js控制輪播：
  $('selector').carousel();參數(shù)同上一條的data屬性
  $('selector).carousel('pause|prev|next');暫停|上一張|下一張
  
  輪播事件：
  $('selector').on({
      'slide.bs.carousel':function(){
          ...     切換前事件
      },
      'slid.bs.carousel':function(){
          ...     切換后事件
      }
      })

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

BootStrap框架常用語(yǔ)法