Bootstrap4總結

時間 2020-09-12

標籤 bootstrap4 bootstrap 總結欄目 Bootstarp 简体版

原文原文鏈接

1、 bootstrap簡介

Bootstrap，來自 Twitter（全國最大的微博），是目前最受歡迎的前端框架。javascript

bootstrap下載及演示 http://v3.bootcss.comcss

什麼是bootstrap？html

Bootstrap是基於 HTML、CSS、JAVASCRIPT 的開源框架，它簡潔、直觀、強悍、靈活，使得 Web開發更加快捷，前端

用於開發響應式佈局、移動設備優先的 WEB項目。html5

爲何使用 Bootstrap？java

跨設備jquery

跨瀏覽器（chrome，IE9以上，Firefox，Safari，Opera…）ios

響應式佈局css3

具備實用性強的組件chrome

內置jquery插件

bootstrap的結構

主要分爲三大核心模塊：css、js、font

2、bootstrap排版樣式

標題

從 h1 到 h6

<h1>Bootstrap 排版</h1> //36px

<h2>Bootstrap 排版</h2> //30px

<h3>Bootstrap 排版</h3> //24px

<h4>Bootstrap 排版</h4> //18px

<h5>Bootstrap 排版</h5> //14px

<h6>Bootstrap 排版</h6> //12px

<h2>bootstrap課程</h2>

<p class="lead">hello world</p>

內聯文本元素

添加標記，<mark>元素或.mark 類

<p>Bootstrap<mark>排版</mark></p>

<del>Bootstrap 排版</del> //刪除的文本

<s>Bootstrap 排版</s> //無用的文本

<ins>Bootstrap 排版</ins> //插入的文本

<u>Bootstrap 排版</u> //效果同上，下劃線文本

<small>Bootstrap 排版</small> //標準字號的 85%

<strong>Bootstrap 排版</strong> //加粗 700

<em>Bootstrap 排版</em> //傾斜

<p class="text-left">向左對齊文本</p>

<p class="text-center">居中對齊文本</p>

<p class="text-right">向右對齊文本</p>

<p class="text-justify">對齊文本。該段落會根據屏幕的大小對超出屏幕的文字進行換行</p>

<p class="text-nowrap">該段落不會根據屏幕的大小對超出屏幕的文字進行換行。</p>

<p class="text-lowercase">BOOTSTROP</p>

<p class="text-uppercase">bootstrap</p>

<p class="text-capitalize">bootstrap</p> //單詞首字母大寫

縮略語

HTML元素提供了用於縮寫的標記，好比 WWW 或 HTTP。Bootstrap 定義 <abbr> 元素的樣式爲顯示在文本底部的一條虛線邊框

當鼠標懸停在上面時會顯示完整的文本（只要您爲 <abbr> title 屬性添加了文本）。爲了獲得一個更小字體的文本，

請添加 .initialism 到 <abbr>

地址

address默認爲 display:block;，須要使用標籤來爲封閉的地址文本添加換行

<strong>Twitter, Inc.</strong><br>

795 Folsom Ave, Suite 600<br>

San Francisco, CA 94107<br>

<abbr title="Phone">P:</abbr> (123) 456-7890

</address>

<a href="mailto:#">first.last@example.com</a>

</address>

引用

默認樣式引用，增長了左邊線，設定了字體大小和內外邊距

<blockquote> Bootstrap 框架 </blockquote>

反向

<blockquote class="blockquote-reverse "> Bootstrap 框架 </blockquote>

多種引用樣式

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

<footer class="text-right">Someone famous in <cite title="Source Title">Source Title</cite></footer>

</blockquote>

列表

有序列表、無序列表、自定義列表

.list-unstyled

.list-inline

.dl-horizontal 應用於<dl>元素和<dt>元素中

代碼

.pre-scrollable 使 <pre> 元素可滾動 scrollable

內聯代碼 <code><section></code>

用戶輸入 press <kbd>ctrl + ,</kbd>

標記變量 <var>y</var> = <var>m</var><var>x</var> + <var>b</var>

程序輸出 <samp>This text is meant to be treated as sample output from a computer program.</samp>

代碼塊 <pre><article>Please input...</article></pre>

3、表格、按鈕、圖片

表格

基本表格 <table class="table">

條紋表格 <table class="table table-striped">

邊框表格 <table class="table table-bordered">

懸停表格<table class="table table-hover">

精簡表格<table class="table table-condensed">

狀態表格active、success、info、warning、danger

隱藏某一行<tr class="sr-only">

響應式表格

表格父元素設置響應式，小於 768px 出現邊框

按鈕

按鈕標籤

轉化成普通按鈕

<button class="btn btn-default">Button</button>

注意：爲了跨瀏覽器展示，儘可能使用button

按鈕大小

.btn-lg 這會讓按鈕看起來比較大。

.btn-sm 這會讓按鈕看起來比較小。

.btn-xs 這會讓按鈕看起來特別小。

預約義樣式

.btn-default 默認/標準按鈕

.btn-primary 首選項樣式

.btn-success 成功樣式

.btn-info通常信息樣式

.btn-warning 警告樣式

.btn-danger 危險樣式

.btn-link 連接樣式

塊級按鈕

.btn-block 塊級按鈕(拉伸至父元素100%的寬度)

激活狀態

<button class="btn active">Button</button>

禁用狀態

<button class="btn active disabled">Button</button>

圖片

.img-rounded 圓角 (IE8 不支持)

.img-circle 圓形 (IE8 不支持)

.img-thumbnail 縮略圖功能

.img-responsive 圖片響應式 (將很好地擴展到父元素)

4、柵格系統、表單

柵格系統

響應式網格系統隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。

工做原理

行必須放置在.container(固定寬度)或者.container-fluid(100%寬度) class內，得到適當的對齊(alignment)和內邊距(padding)

內容放置在列中，惟有列能夠是行的直接子元素

預約義的網格類，好比 .row 和 .col-lg-4，可用於快速建立網格佈局

列經過內邊距（padding）來建立列內容之間的間隙

媒體查詢

超小設備（手機，小於 768px）

沒有任何媒體查詢相關的代碼，由於這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？）

小型設備（平板電腦，大於等於768px）@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

中型設備（臺式電腦，大於等於992px）@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

大型設備（大臺式電腦，大於等於1200px）@media (min-width: @screen-lg-min) { ... }

柵格參數

超小屏幕手機 (<768px)

小屏幕平板 (≥768px)

中等屏幕桌面顯示器 (≥992px)

大屏幕大桌面顯示器 (≥1200px)

柵格系統行爲

老是水平排列

開始是堆疊在一塊兒的，當大於這些閾值時將變爲水平排列C

.container 最大寬度 None（自動）750px 970px 1170px

類前綴 .col-xs- .col-sm- .col-md- .col-lg-

列（column）數 12

最大列（column）寬自動 ~62px ~81px ~97px

間隙寬度 30px （每列左右均有 15px）

四種屏幕分類所有激活

....

</div>

能夠設置列偏移，讓中間保持空隙

</div>

能夠嵌套，嵌滿也是 12 列

</div>

</div>

能夠把兩個列交換位置，push 向右移動（推），pull 向左移動（拉）

</div>

表單

垂直或基本表單

內聯表單

讓表單左對齊浮動，並表現爲 inline-block內聯塊結構<form class="form-inline">

注：當小於 768px，會恢復獨佔樣式

水平表單

讓表單內的元素保持水平排列

表單組合

先後增長片斷

</div>

輸入框、文本域

原生的HTML5的input類型的支持

包括：

text

password

datetime

datetime-local

date

month

time

week

number

url

tel

color

複選框（Checkbox）和單選框（Radio）

</div>

<label>

<input type="radio" name="optionsRadios" id="optionsRadios1"

value="option1" checked> 選項 1

</label>

</div>

內聯的複選框和單選框

<input type="checkbox" id="inlineCheckbox1" value="option1"> 選項 1

</label>

<input type="radio" id="optionsRadiosinline" value="option1"> 選項 1

</label>

選擇框 multiple多行顯示

</select>

靜態控件 .form-control-static

表單控件狀態

輸入框焦點

當輸入框 input 接收到:focus 時，輸入框的輪廓會被移除，同時應用 box-shadow。

禁用的輸入框 input

若是您想要禁用一個輸入框 input，只須要簡單地添加 disabled 屬性，這不只會禁用輸入框，還會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。

禁用的字段集 fieldset

對 <fieldset> 添加 disabled 屬性來禁用<fieldset> 內的全部控件。

校驗狀態

.has-warning、.has-error 或 .has-success 類到這些控件的父元素便可。

任何包含在此元素以內的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗狀態的樣式。

表單幫助文本

<span class="help-block">一個較長的幫助文本塊，超過一行，須要擴展到下一行。本實例中的幫助文本總共有兩行。</span>

</form>

控件尺寸

.input-lg和col-lg-*來設置表單的高度和寬度

</div>

</div>

</div>

</div>

5、輔助類、響應式工具、菜單、圖標

輔助類

文本

<p class="text-muted">本行內容是減弱的</p>

<p class="text-primary">本行內容帶有一個 primary class</p>

<p class="text-success">本行內容帶有一個 success class</p>

<p class="text-info">本行內容帶有一個 info class</p>

<p class="text-warning">本行內容帶有一個 warning class</p>

<p class="text-danger">本行內容帶有一個 danger class</p>

背景

<p class="bg-primary">bootstrap課程</p>

<p class="bg-success">bootstrap課程</p>

<p class="bg-info">bootstrap課程</p>

<p class="bg-warning">bootstrap課程</p>

<p class="bg-danger">bootstrap課程</p>

關閉按鈕 close

下拉式菜單 caret

浮動 pull-left pull-right

<div class="pull-left">向左快速浮動</div>

<div class="pull-right">向右快速浮動</div>

清除浮動 clearfix

<div class="pull-left" style="background:#58D3F7;">向左快速浮動</div>

<div class="pull-right" style="background: #DA81F5;">向右快速浮動</div>

</div>

塊級內容居中 center-block

這是 center-block

</div>

顯示、隱藏 show hide

這是 show class

</div>

這是 hide class

</div>

屏幕閱讀器和鍵盤導航 .sr-only 來把元素對全部設備隱藏，除了屏幕閱讀器 .sr-only-focusable

<label class="sr-only" for="email">Email 地址</label>

</div>

</div>

</form>

</div>

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

響應式工具

visible-xs visible-sm visible-md visible-lg

hidden-xs hidden-sm hidden-md hidden-lg

以超小屏幕（xs）爲例，可用的 .visible-*-* 類是：visible-xs-block、visible-xs-inline 和 visible-xs-inline-block

visible-print-block visible-print-inline visible-print-inline-block 瀏覽器隱藏打印機可見

`hidden-print` 瀏覽器可見打印機隱藏 `visible-print`

<span class="visible-xs">✔ 在特別小型設備上可見</span>

</div>

<span class="visible-sm">✔ 在小型設備上可見</span>

</div>

<span class="visible-md">✔ 在中型設備上可見</span>

</div>

<span class="visible-lg">✔ 在大型設備上可見</span>

</div>

字體圖標

用法：<span class="glyphicon glyphicon-search"></span>

下拉菜單

基本的下拉菜單

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>

<li><a href="">Javascript</a></li>

<li><a href="">jQuery</a></li>

</ul>

</div>

對齊 dropdown-menu-right

...

<li class="dropdown-header">Dropdown header</li>

...

</ul>

分隔線

...

...

</ul>

禁用的菜單項

<li><a href="#">Regular link</a></li>

<li class="disabled"><a href="#">Disabled link</a></li>

<li><a href="#">Another link</a></li>

</ul>

讓菜單默認顯示 <div class="dropdown open">

6、按鈕、輸入框組件

按鈕組件

基本的按鈕組

<button class="btn btn-default">middle</button>

<button class="btn btn-default">right</button>

</div>

按鈕工具欄

<button class="btn btn-default">middle</button>

<button class="btn btn-default">right</button>

</div>

<button class="btn btn-default">middle</button>

<button class="btn btn-default">right</button>

</div>

</div>

按鈕的大小

<button class="btn btn-default">middle</button>

<button class="btn btn-default">right</button>

</div>

<button class="btn btn-default">middle</button>

<button class="btn btn-default">right</button>

</div>

<button class="btn btn-default">middle</button>

<button class="btn btn-default">right</button>

</div>

嵌套

<button class="btn btn-default">middle</button>

</ul>

</div>

垂直的按鈕組

<button class="btn btn-default">middle</button>

</ul>

</div>

兩端對齊排列的按鈕組

</div>

<button class="btn btn-default">middle</button>

</div>

<button class="btn btn-default">right</button>

</div>

爲了瀏覽器兼容問題使用btn-group包裹

<a href="" class="btn btn-default">middle</a>

<a href="" class="btn btn-default">right</a>

</div>

按鈕式下拉菜單

單按鈕下拉菜單 btn-default btn-success btn-primary btn-info btn-danger btn-warning

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>

<li><a href="">javascript</a></li>

<li><a href="">jQuery</a></li>

</ul>

</div>

分裂式按鈕下拉菜單

<button class="btn btn-default">Default</button>

<li><a href="">javascript</a></li>

<li><a href="">jQuery</a></li>

</ul>

</div>

按鈕下拉菜單的大小 btn-lg btn-sm btn-xs

<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>

<li><a href="">javascript</a></li>

<li><a href="">jQuery</a></li>

</ul>

</div>

向上彈出式菜單 dropup

<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>

<li><a href="">javascript</a></li>

<li><a href="">jQuery</a></li>

</ul>

</div>

輸入框

基本的輸入框組

</div>

</div>

</div>

</form>

輸入框組的大小 input-group-lg input-group-xs input-group-sm

</div>

</form>

複選框和單選框插件

</span>

</div>

</form>

按鈕插件 input-group-btn

</span>

</div>

</form>

按鈕式下拉菜單

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">dropdown<span class="caret"></span></button>

</ul>

</div>

</div>

</form>

分裂式按鈕下拉菜單

<button class="btn btn-default">dropdown</button>

</button>

</ul>

</div>

</div>

</form>

7、導航、導航條、麪包屑導航組件

導航（標籤） nav

標籤頁 nav-tabs

<li><a href="">Project</a></li>

<li><a href="">Message</a></li>

</ul>

膠囊式標籤頁 nav-pills

<li><a href="">Project</a></li>

<li><a href="">Message</a></li>

</ul>

垂直的膠囊式標籤頁 nav-stacked

<li><a href="">Project</a></li>

<li><a href="">Message</a></li>

</ul>

兩端對齊的標籤頁 nav-justified

<li><a href="">Project</a></li>

<li><a href="">Message</a></li>

</ul>

禁用連接 disabled

<li class="disabled"><a href="">Project</a></li>

<li><a href="">Message</a></li>

</ul>

帶有下拉菜單的標籤

<li><a href="">Project</a></li>

<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>

</ul>

</li>

</ul>

帶下拉菜單的膠囊式標籤

<li><a href="">Project</a></li>

<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>

</ul>

</li>

</ul>

導航條 navbar <nav>標籤中添加 class .navbar、.navbar-default

默認的導航欄

<a class="navbar-brand" href="">poetries blog</a>

</div>

<li><a href="">Project</a></li>

<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>

</ul>

</li>

</ul>

</nav>

響應式的導航欄

</button>

</div>

<li><a href="">Project</a></li>

<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>

</ul>

</li>

</ul>

</div>

</nav>

導航欄中的表單

</div>

<button class="btn btn-default">Search</button>

</form>

導航欄中的按鈕 navbar-btn

<button class="btn btn-default navbar-btn">Submit</button>

導航欄中的文本 navbar-text

<p class="navbar-text">Signed in as Thomas</p>

固定到頂部、底部 navbar-fixed-top navbar-fixed-bottom

</div>

<li><a href="">Project</a></li>

<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>

</ul>

</li>

</ul>

</nav>

靜態的頂部 navbar-static-top

倒置的導航欄帶有黑色背景白色文本的倒置的導航欄 navbar-inverse

麪包屑導航

</ul>

8、分頁、標籤、徽章、巨幕、頁頭、縮略圖、警告框組件

分頁

默認的分頁

</ul>

禁用和激活狀態

</ul>

分頁的尺寸 pagination-lg pagination-sm

翻頁（Pager）

<li><a href="">previous</a></li>

</ul>

對齊的連接

<li class="previous"><a href="">← previous</a></li>

</ul>

可選的禁用狀態

<li class="previous disabled"><a href="">← previous</a></li>

</ul>

標籤

<span class="label label-default">Default</span>

<span class="label label-primary">Primary</span>

<span class="label label-success">Success</span>

<span class="label label-warning">Warning</span>

<span class="label label-danger">Danger</span>

徽章badge

<a href="">Messages <span class="badge">20</span></a>

<button class="btn btn-default">Messages <span class="badge">20</span></button>

巨幕 jumbotron

<h1>hello world!!!</h1>

<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured

content or information.</p>

<p><a class="btn btn-primary" href="">Learn more</a></p>

</div>

頁頭 page-header

<h1>Example page header

<small>Subtext for header</small>

</h1>

</div>

縮略圖

默認樣式

</a>

</div>

自定義內容

<h3>縮略圖標籤</h3>

<p>一些示例文本。一些示例文本。</p>

<p>

</p>

</div>

警告框

基本默認樣式

<div class="alert alert-success">成功！很好地完成了提交。</div>

<div class="alert alert-info">信息！請注意這個信息。</div>

<div class="alert alert-warning">警告！請不要提交。</div>

<div class="alert alert-danger">錯誤！請進行一些更改。</div>

可關閉的警告框<button type="button" class="close" data-dismiss="alert">×</button>

警告中的連接

<a href="#" class="alert-link">成功！很好地完成了提交。</a>

</div>

9、進度條、媒體對象、列表組、面板、響應式插入組件

進度條

默認的進度條

</div>

情景變化的進度條

</div>

</div>

</div>

</div>

條紋的進度條 progress-striped

</div>

動畫的進度條active

</div>

堆疊的進度條

</div>

媒體對象

這是一些示例文本。這是一些示例文本。

</div>

列表組

向列表組添加國徽

<li class="list-group-item"><a href="">免費域名註冊 <span class="badge pull-right">20</span></a></li>

<li class="list-group-item"><a href="">免費 Window 空間託管</a></li>

<li class="list-group-item"><a href="">每一年更新成本</a></li>

</ul>

向列表組添加連接

<a href="" class="list-group-item active">免費域名註冊</a>

<a href="" class="list-group-item">免費 Window 空間託管</a>

<a href="" class="list-group-item">每一年更新成本</a>

</div>

向列表組添加自定義內容

<li class="list-group-item">Cras justo odio</li>

<li class="list-group-item">Dapibus ac facilisis in</li>

<li class="list-group-item">Morbi leo risus</li>

<li class="list-group-item">Porta ac consectetur ac</li>

<li class="list-group-item">Vestibulum at eros</li>

</ul>

面板

面板標題

面板腳註

<div class="panel-footer text-right">by zichen</div>

面板主題

帶表格的面板

<div class="panel-heading">Panel heading</div>

<tr>

</tr>

</table>

</div>

帶列表組的面板

<div class="panel-body">面板內容顯示區域</div>

<li class="list-group-item">免費域名註冊</li>

<li class="list-group-item">免費 Window 空間託管</li>

<li class="list-group-item">圖像的數量</li>

<li class="list-group-item">每一年更新成本</li>

</ul>

<div class="panel-footer text-right">by zichen</div>

</div>

響應式嵌入組件

根據被嵌入內容的外部容器的寬度，自動建立一個固定的比例，從而讓瀏覽器自動肯定內容的尺寸，可以在各類設備上縮放

這些規則能夠直接用於<iframe>、<embed>、<video>和<object>元素。

16:9 響應式

</div>

4:3 響應式

</div>

</div>

</div>

well

基本的well

尺寸大小 well-lg well-sm

10、彈出框、警告框、標籤頁和工具提示插件插件

彈出框

彈出框點擊一個元素，彈出一個包含標題和內容的容器

//基本用法

點擊彈出/隱藏彈出框

</button>

JavaScript 初始化 $('button').popover();

Popover 插件中的屬性：

data-animation 默認 true，在 popover 上應用一個 CSS fade 動畫。若是設置 false，則不該用。

data-html 默認 false，不容許提示內容格式爲 html。若是設置爲 true，則能夠設置 html 格式的提示內容

data-placement 默認值 top，還有 bottom、left、right 和 auto。若是auto會自行調整合適的位置，若是是auto left 則會盡可能在左邊顯示，但左邊不行就靠右邊。

data-selector 默認 false，能夠選擇綁定指定的選擇器。

data-original-title 默認空字符串，彈出框的標題。優先級比 title 低

title 默認字空符串，彈出框的標題。

data-trigger 默認值 click，表示怎麼觸發 popover，其餘值爲： hover、focus、manual。多個值用空格隔開，manual 手動不能和其餘同時設置。

data-delay 默認值 0，延遲觸發 popover(毫秒)，若是傳數字則，表示 show/hide 的毫秒數，若是傳對象，結構爲： {show:500,hide:100}

data-container 默認值 false，將 popover 附加到特定的元素上。比如組合按鈕組提示，容器不夠，能夠附加 body 上。container : 'body'

data-template 更改提示框的 HTML 提示語的模版，默認值爲：

</div>

data-content 默認值爲空，彈出框的內容。

data-viewport 設置外圍容器的邊際，具體代碼看示例。

$('button').popover({

trigger:"click",

placement:"right",

viewport : {

selector : '#view'

}

});

Popover 插件中的方法：

顯示 $('button').popover('show');

隱藏 $('button').popover('hide');

反轉顯示和隱藏 $('button').popover('toggle');

隱藏並銷燬 $('button').popover('destroy');

Popover 插件中的事件：

show.bs.popover 在調用 show 方法時觸發

shown.bs.popover 在顯示整個彈窗時時觸發

hide.bs.popover 在調用 hide 方法時觸發

hidden.bs.popover 在徹底關閉整個彈出時觸發

$('button').on('show.bs.tab', function () {

alert('調用 show 方法時觸發！');

});

警告框

警告框即爲點擊小時的信息框

//基本實例

</button>

<p>警告：您的瀏覽器不支持！</p>

</div>

添加淡入淡出效果 <div class="alert alert-warning fade in">

若是用 JavaScript，能夠代替 data-dismiss="alert"

Alert 插件中的方法：

$('.close').on('click', function () {

$('#alert').alert('close');

})

Alert 插件中的事件：

close.bs.alert 當 close 方法被調用後當即觸發

closed.bs.alert 當警告框被徹底關閉後當即觸發

$('#alert').on('close.bs.alert', function () {

alert('當 close 方法被觸發時調用！');

});

標籤頁

標籤頁也就是一般所說的選項卡功能

//基本用法

<li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li>

<li><a href="#jquery" data-toggle="tab">jQuery</a></li>

<li><a href="#extjs" data-toggle="tab">ExtJS</a></li>

</ul>

</div>

能夠設置淡入淡出效果 fade，而 in 表示首選的內容默認顯示

也能夠換成膠囊式

data-target 使用 data-target 綁定或不綁定效果都是同樣的

Tab 插件中的方法：

$('#nav a').on('click', function (e) {

e.preventDefault();

$(this).tab('show');

});

Tab 插件中的事件：

show.bs.tab 在調用 tab 方法時觸發

shown.bs.tab 在顯示整個標籤時觸發

$('#nav a').on('show.bs.tab', function () {

alert('調用 tab 時觸發！');

});

工具提示

工具提示就是經過鼠標移動選定在特定的元素上時，顯示相關的提示語

//基本實例

JavaScript 初始化 $('#section').tooltip();

data-animation 默認 true，在 tooltip 上應用一個 CSS fade 動畫。若是設置 false，則不該用。

data-html 默認 false，不容許提示內容格式爲 html。若是設置爲 true，則能夠設置 html 格式的提示內容。

data-placement 默認值 top，還有 bottom、left、right 和 auto。若是auto會自行調整合適的位置，若是是auto left 則會盡可能在左邊顯示，但左邊不行就靠右邊。

data-selector 默認 false，能夠選擇綁定指定的選擇器。 rel="tooltip"

data-original-title 默認空字符串，提示語的內容。優先級比 title 低

title 默認字空符串，提示語的內容。

data-trigger 默認值 hover foucs，表示怎麼觸發 tooltip，其他值爲：click、manual。多個值用空格隔開，manual 手動不能和其餘同時設置。

data-delay 默認值 0，延遲觸發 tooltip(毫秒)，若是傳數字則，表示 show/hide 的毫秒數，若是傳對象，結構爲：{ show:500,hide:100 }

data-container 默認值 false，將tooltip 附加到特定的元素上。比如組合按鈕組提示，容器不夠，能夠附加 body 上。container : 'body'

data-template 更改提示框的 HTML 提示語的模版，默認值爲：

</div>

<a href="#" rel="tooltip"

data-toggle="tooltip"

title="超文本標識符"

data-animation="false"

data-html="true"

data-placement="auto"

data-selector="a[rel=tooltip]"

data-trigger="click"

data-delay="500"

data-template="<b>123</b>" >HTML5

</a>

$('#selector a').tooltip({

delay : {

show : 500,

hide : 100,

});

Tooltip插件中的方法：

顯示 $('#section a').tooltip('show');

隱藏 $('#section a').tooltip('hide');

反轉顯示和隱藏 $('#section a').tooltip('toggle');

隱藏並銷燬 $('#section a').tooltip('destroy');

Tooltip插件中的事件：

show.bs.tooltip 在 show 方法調用時當即觸發

shown.bs.tooltip 在提示框徹底顯示給用戶以後觸發

hide.bs.tooltip 在 hide 方法調用時當即觸發

hidden.bs.tooltip 在提示框徹底隱藏以後觸發

$('#select a').on('show.bs.tooltip', function () {

alert('調用 show 時觸發！');

});

//data-selector

$("#selector").tooltip({

selector:"a[rel='tooltip']"

});

data-container

<button class="btn btn-default" title="超文本標記符">middle</button>

<button class="btn btn-default" title="超文本標記符">right</button>

</div>

$("button").tooltip({

delay:{

show:500,

hide:100

container:"body"

});

11、下拉菜單、滾動監聽、按鈕和摺疊插件

下拉菜單插件

</ul>

</div>

若是按鈕在容器外部，能夠經過 data-target 進行綁定

Dropdown插件的方法：，但仍然須要 data-*

$('#btn').dropdown();

$('#btn').dropdown('toggle');

Dropdown插件的事件：

show.bs.dropdown 在 show 方法調用時當即觸發。

shown.bs.dropdown 在下拉菜單徹底顯示出來，而且等 CSS 動畫完成以後觸發。

hide.bs.dropdown 在 hide 方法調用時，但還未關閉隱藏時觸發。

hidden.bs.dropdown 在下拉菜單徹底隱藏以後，而且等 CSS 動畫完成以後觸發。

$('#dropdown').on('show.bs.dropdown', function () {

alert('在調用 show 方法時當即觸發！');

});

滾動監聽插件

data-offset 默認值爲 10，固定弄內容距滾動容器 10 像素之內，就高亮顯示所對應的菜單

data-spy 設置 scroll，將設置滾動容器監聽

data-target 設置#nav，綁定指定監聽的菜單

scroll插件的方法：

$("#scroll").scrollspy({

//offset: 0,

target: "#nav"

});

activate.bs.scrollspy 每當一個新條目被激活後都將由滾動監聽插件觸發此事件。

事件綁定在導航上

$('#nav').on('activate.bs.scrollspy', function () {

alert('新條目被激活後觸發此事件！');

});

滾動監聽還有一個更新容器 DOM 的方法

refresh 更新容器 DOM 的方法

function removeSec(e) {

$(e).parents('.sec').remove();

$('#content').scrollspy('refresh');

}

按鈕插件

單個切換

注：在 Firefox 屢次頁面加載時，按鈕可能保持表單的禁用或選擇狀態。解決方案是：添加autocomplete="off"。

單選按鈕

<input type="radio" name="sex" autocomplete="off" checked> 男

</label>

<input type="radio" name="sex" autocomplete="off"> 女

</label>

</div>

複選按鈕

<input type="checkbox" name="fa" autocomplete="off" checked> 音樂

</label>

<input type="checkbox" name="fa" autocomplete="off"> 體育

</label>

<input type="checkbox" name="fa" autocomplete="off"> 美術

</label>

<input type="checkbox" name="fa" autocomplete="off"> 電腦

</label>

</div>

加載狀態

$('#myButton').on('click', function () {

var btn = $(this).button('loading');

setTimeout(function () {

btn.button('reset');

}, 1000);

});

Button 插件中的 button 方法中有三個參數：toggle、reset、string(好比 loading、 complete)。

可代替 data-toggle="button"

$('button').on('click', function () {

$(this).button('toggle');

});

摺疊插件

基本實例

<button class="btn btn-primary" data-toggle="collapse" data-target="#content"> Bootstrap </button>

Bootstrap 是 Twitter 推出的一個用於前端開發的開源工具包。它由 Twitter 的設計師 Mark Otto 和 Jacob Thornton 合做開發,是一個 CSS/HTML 框架。目前,Bootstrap 最新版本爲 3.0 。

</div>

Collapse插件的方法：hide、show、toggle

$('button').on('click', function () {

$('#collapseOne').collapse('toggle');

});

Collapse插件的事件：

show.bs.collapse 在 show 方法調用時當即觸發

shown.bs.collapse 摺疊區徹底顯示出來是觸發

hide.bs.collapse 在 hide 方法調用時觸發

hidden.bs.collapse 該事件在摺疊區域徹底隱藏以後觸發

12、模態框、輪播插件

模態框插件

模態框的彈窗組件須要三層 div 容器元素，分別爲 modal(模態聲明層)、 dialog(窗口聲明層)、content(內容層)

在內容層裏面，還有三層，分別爲 header(頭部)、body(主體)、footer(註腳)

模態框去掉 show，增長一個 id

全部的插件，都是基於 JavaScript/jQuery 的。

四個要素：用法、參數、方法和事件。

用法

能夠經過 data 屬性 data-toggle data-toggle="modal" data-target="#myModal"

data-toggle 表示觸發類型

data-target 表示觸發的節點

若是不是使用<button>，而是<a>，其中 data-target 也可使用 href="#myModal"取代

建議使用 data-target。除了 data-toggle 和 data-target 兩個聲明屬性外，還有一些能夠用選項

參數

data-backdrop 布爾值或 'static' 默認值 true，表示背景存在黑灰透明遮罩，且單擊空白背景可關閉彈窗；

若是爲 false，表示背景不存在黑灰透明遮罩，且點擊空白背景不可關閉彈窗；

若是是字符串'static'，表示背景存在黑灰透明遮罩，且點擊空白不可關閉彈窗。

data-keyboard 布爾值 true 若是是 true，按 esc 鍵會關閉窗口；若是是 false，按 esc 鍵會不會關閉。

data-show 布爾值 true 若是是 true，初始化時，默認顯示；若是是 false，初始化時，默認隱藏。

remote url 路徑空值若是值不是以#號開頭，則表示一個 url 地址，加載 url 內容到 modal-content 容器裏，並只加載一次。

若是是#號，就是取代 data-target 的方法。

在 JavaScript 直接設置

經過 jQuery 方式聲明

$('#myModal').modal({

show : true,

backdrop : false,

keyboard : false,

remote : 'index.html'

});

方法

toggle .modal('toggle'); 觸發時，反轉切換彈窗狀態

show .modal('show'); 觸發時，顯示彈窗

hide .modal('hide'); 觸發時，關閉彈窗

點擊顯示彈窗

$('#btn').on('click', function () {

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

});

$('#myModal').modal({

show : false,

});

事件

show.bs.modal 在show 方法調用時當即觸發。

shown.bs.modal 在模態框徹底顯示出來，而且等 CSS 動畫完成以後觸發。

hide.bs.modal 在 hide 方法調用時，但還未關閉隱藏時觸發。

hidden.bs.modal 在模態框徹底隱藏以後，而且等 CSS 動畫完成以後觸發

$('#myModal').on('show.bs.modal', function () {

alert('在 show 方法調用時當即觸發！');

});

$('#myModal').on('loaded.bs.modal', function () {

alert('遠程數據加載完畢後觸發！');

});

輪播圖插件

data 屬性解釋：

data-slide 接受關鍵字 prev 或 next，用來改變幻燈片相對於當前位置的位置；

data-slide-to 來向輪播底部建立一個原始滑動索引，data-slide-to="2"將把滑動塊移動到一個特定的索引，索引從 0 開始計數。

data-ride="carousel"屬性用戶標記輪播在頁面加載時開始動畫播放。

data-interval 默認值 5000，幻燈片的等待時間(毫秒)。若是爲 false，輪播將不會自動開始循環。

data-pause 默認鼠標停留在幻燈片區域(hover)即暫停輪播，鼠標離開即啓動輪播。

data-wrap 默認值 true，輪播是否持續循環。

若是在 JavaScript 調用就直接使用鍵值對方法，並去掉 data-；

$('#myCarousel').carousel({ //設置自定義屬性

interval : 2000,//設置自動播放`/2` 秒

pause : 'hover',//設置暫停按鈕的事件

wrap : false, //只播一次

});

方法：

cycle 循環各幀(默認從左到右)

pause 中止輪播

number 輪播到指定的圖片上(小標從 0 開始，相似數組)

prev 循環輪播到上一個項目

next 循環輪播到下一個項目

$('button').on('click', function () {//點擊按鈕執行

$('#myCarousel').carousel('cycle'); //點擊後，自動播放

}

事件

slide.bs.carousel 當調用 slide 實例方式時當即觸發該事件。

slid.bs.carousel 當輪播完成一個幻燈片觸發該事件

$('#myCarousel').on('slide.bs.carousel', function () {

alert('當調用 slide 實例方式時當即觸發');

});

$('#myCarousel').on('slid.bs.carousel', function () {

alert('當輪播完成一個幻燈片觸發');

});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。