Bootstrap

時間 2019-11-29

標籤 bootstrap 欄目 Bootstarp 简体版

原文原文鏈接

1、Bootstrap簡介

1、Bootstrap是什麼？

Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術工程師研發的一個開源的前端開發框架css

基於HTML、CSS、JavaScript,代碼簡潔、視覺優美，用來快速開發基於PC以及移動端的Web頁面，更快速、簡單。html

2010 年 6 月，Twitter 內部的工程師爲了解決前端開發任務中的協做統一問題。經歷前端

各類方案後，Bootstrap 最終被肯定下來，並於 2011 年 8 月發佈。通過很長時間的迭代升html5

級，由最初的 CSS 驅動項目發展成爲內置不少 JavaScript 插件和圖標的多功能 Web 前端react

的開源框架。jquery

Bootstrap 最爲重要的部分就是它的響應式佈局，經過這種佈局能夠兼容 PC 端、PADcss3

以及手機移動端的頁面訪問。chrome

Bootstrap官網：http://www.getbootstrap.com編程

中文網：http://www.bootcss.combootstrap

版本：v3.0、v4.0

二、特色

l 跨設備、跨瀏覽器

兼容全部主流瀏覽器，包括IE7、IE8

l 響應式佈局

支持PC、移動端（手機、PAD）等，移動設備優先。

l 豐富的組件

表單、下拉菜單、導航、面板、徽章、標籤等

l 內置jQuery插件

模態框、工具提示、彈出框、輪播圖等。

l 支持動態樣式

LESS 、SASS,可使用變量、嵌套、混合等，編寫樣式更快、更靈活

l 支持HTML5/CSS3

2、起步

下載Bootstrap

CDN:Content Delivery Network,即內容分發網絡，提供穩定快速的資源網絡

優化網站：

Js、css等一些庫文件，壓縮

CDN

解壓後，目錄呈現這樣的結構：

bootstrap/

├── css/

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── bootstrap.min.css

│ ├── bootstrap-theme.css

│ ├── bootstrap-theme.css.map

│ └── bootstrap-theme.min.css

├── js/

│ ├── bootstrap.js

│ └── bootstrap.min.js

└── fonts/

├── glyphicons-halflings-regular.eot

├── glyphicons-halflings-regular.svg

├── glyphicons-halflings-regular.ttf

├── glyphicons-halflings-regular.woff

└── glyphicons-halflings-regular.woff2

主要分爲三大核心目錄：css(樣式)、js(腳本)、fonts(字體)。

1.css 目錄中有四個 css 後綴的文件，其中包含 min 字樣的，是壓縮版本，通常使用這個；不包含的屬於沒有壓縮的，能夠學習瞭解 css 代碼的文件；而 map 後綴的文件則是css 源碼映射表，在一些特定的瀏覽器工具中使用。

2.js 目錄包含兩個文件，是未壓縮和壓縮的 js 文件。

3.fonts 目錄包含了不一樣後綴的字體文件。

準備

開發工具：Hbuild

測試工具：Firfox chrome （自帶響應式設計模式）

基本模板

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</body>

</html>

注意：控制檯報錯：

源映射錯誤：TypeError: NetworkError when attempting to fetch resource. 源 URL：file:///E:/Bootstrap/code/css/bootstrap.css 源映射 URL：bootstrap.css.map[詳細瞭解]

若是不將bootstrap.css.map和bootstrap.css放在一個目錄下將報源映射錯誤

柵格系統

Bootstrap 的柵格系統，提供了一套響應式、移動設備優先的流式柵格系統。

一．移動設備優先

有一份很是重要的 meta，用於設置屏幕和設備等寬以及是否運行用戶縮放，及縮放比例的問題。

二．佈局容器

Bootstrap 須要爲頁面內容和柵格系統包裹一個.container 容器。因爲 padding 等

屬性的緣由，這兩種容器類不能相互嵌套。

.container//固定容器

.container-fluid//100%寬度

柵格系統中，瀏覽器會隨着屏幕的大小的增減自動分配最多 12 列。經過一系列的行(row)

與列(column)的組合來建立頁面佈局。工做原理以下：

「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100%寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。
經過「行（row）」在水平方向建立一組「列（column）」。

3.你的內容應當放置於「列（column）」內，而且，只有「列（column）」能夠做爲行（row）」的直接子元素。

4.相似 .row 和 .col-xs-4 這種預約義的類，能夠用來快速建立柵格佈局。

5.柵格系統中的列是經過指定 1 到 12 的值來表示其跨越的範圍。例如，三個等寬的列可使用三個 .col-xs-4 來建立。

6.若是一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被做爲一個總體另起一行排列。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

.col1{

background:red;

}

.col2{

background:#666;

}

.col3{

background:blue;

}

.col4{

background:green;

}

</style>

</head>

<body>

</div>

<hr/>

</div>

<hr/>

</div>

<hr/>

</div>

<hr/>

</div>

</body>

</html>

列偏移、列排序、列嵌套

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

.row div{

background:#ccc;

border: 1px solid red;

}

</style>

</head>

<body>

</div>

<hr/>

</div>

<hr/>

</div>

</div>

</body>

</html>

排版樣式

1.頁面主體

Bootstrap 將全局 font-size 設置爲 14px，line-height 行高設置爲 1.428(即

20px)；<p>段落元素被設置等於 1/2 行高(即 10px)；顏色被設置爲#333。

2.標題

Bootstrap 分別對 h1 ~ h6 進行了 CSS 樣式的重構，而且還支持普通內聯元素定義 class=(.h1 ~ h6)來實現相同的功能。

注：Bootstrap字體顏色、字體樣式、行高均被固定了，從而保

證了統一性，而原生的會根據系統內置的首選字體決定，顏色是最黑色。

在 h1 ~ h6 元素之間，還能夠嵌入一個 small 元素做爲副標題.

h1 ~ h3 下 small 元素的大小隻佔父元素的 65%，那麼經過計算，h1 ~ h3 下的 small 爲 23.4px、19.5px、15.6px；h4 ~ h6 下 small 元素的大小隻佔父元素的 75% ,分別爲：13.5px、10.5px、9px。在 h1 ~ h6 下的 small 樣式也進行了改變，顏色變成淡灰色：#777，行高爲 1，粗度爲 400。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

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

<hr/>

</div>

<hr/>

<span class="mark">span下的mark</span><br/>

<del>被刪除的文本</del><br/>

<s>無用的文本</s><br/>

<ins>插入的文本</ins>

<u>帶下劃線的文本</u><br/>

<span class="small">span下的小號文本</span><br/>

<strong>着重強調的文本</strong><br/>

<b>用於高亮單詞或短語，不帶有任何着重的意味</b><br/>

<hr/>

<p style="border:1px solid red;width:30px" class="text-nowrap">超出後不換行</p>

<hr/>

<p class="text-lowercase">hello world!</p>//小寫

<p class="text-uppercase">hello world!</p>//大寫

<p class="text-capitalize">hello horld!</p>//首字母大寫

<hr/>

<!--縮略語

class="initialism"複寫html5的abbr

-->

中國北京天安門

</address>

<p>鋼鐵是咋樣練成的？</p>

</blockquote>

<p>鋼鐵是咋樣練成的？</p>

</blockquote>

<hr/>

<p>鋼鐵是咋樣練成的？</p>

</blockquote>

<!--列表

list-unstyled：移除默認樣式（無序列表不加小圓點）

list-inline：內聯（設置爲一行）

-->

<ul>

</ul>

</ul>

<hr/>

<!--水平排列描述列表

dl-horizontal:dt和dd水平排列

-->

<dd>是一款遊戲</dd>

</dl>

<hr/>

press <kbd>ctrl + ,</kbd>

<hr/>

<pre><p>Please input...</p></pre>

</body>

</html>

代碼樣式

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<code>Console.log()</code>表示在控制檯輸出信息<br/>

請按<kbd>ctrl+s</kbd>進行保存

<hr/>

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

</pre>

var <var>abc</var>=10;

</body>

</html>

表格

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<!--表格

.table:實現基本的表格樣式

.table-striped:條紋狀表格(讓<tbody>裏的行產生一行隔一行加單色背景效果) 注：表格效果須要基於基本格式.table

. table-bordered:帶邊框的表格

.table-hover:讓<tbody>下的表格懸停鼠標實現背景效果

-->

<thead>

<!--狀態類

能夠單獨設置每一行/列的背景樣式

active:鼠標懸停在行或單元格上

success:標識成功或積極的動做

info:標識普通的提示信息或動做

warning:標識警告或須要用戶注意

danger:表示危險或潛在的帶來負面影響的動做

-->

</tr>

</thead>

<tbody>

</tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html>

表單

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

<form>

</div>

</div>

</form>

<hr/>

<!--內聯表單

(表單元素居於一行)

-->

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

<hr/>

</div>

</div>

</form>

<hr/>

<form>

閱讀服務協議

</textarea>

<!--

複選框

disabled:設置禁用

-->

<label>

<input type="checkbox" disabled>吃飯

</label>

</div>

<label>

<input type="checkbox">睡覺

</label>

</div>

<label>

<input type="checkbox">打豆豆

</label>

</div>

<!--

設置內聯樣式

-->

<input type="checkbox" disabled>睡覺

</label>

<input type="checkbox">打豆豆

</label>

<!--

設置下拉列表

-->

</select>

</form>

<hr/>

<!--校驗狀態

Has-success:成功狀態

Has-error:失敗狀態

Has-warning:警告狀態

添加額外的圖標

glyphicon-ok：成功狀態

glyphicon-warning-sign：警告狀態

glyphicon-remove：錯誤狀態

注意：圖標顯示在文本框中須要加上.has-feedback和.form-control-feedback

-->

</div>

</div>

</form>

<hr/>

</body>

</html>

按鈕

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

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

<a href="#" class="btn btn-default" role="button">超連接按鈕</a>

<br/>

<!--預約義樣式、尺寸

樣式：btn-default,btn-success,btn-info,btn-warning,btn-danger,btn-primary,

btn-link

尺寸：btn-lg >默認>btn-sm>btn-xs

btn-block:塊級按鈕（佔整行）

-->

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

<button class="btn btn-info btn-xs">通常信息按鈕</button>

<button class="btn btn-default btn-block active">激活狀態按鈕</button>

<button class="btn btn-default btn-block disabled">禁用狀態按鈕</button>

<a href="#" class="btn btn-default disabled" role="button">禁用超連接按鈕</a>

</body>

</html>

圖片

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

img{

width:600px;

}

</style>

</head>

<body>

<!--圖片 img-thumbnail自帶響應式 img-responsive響應式的

.img-rounded:圓角

.img-circle：圓

.img-thumbnail：縮略圖

-->

</body>

</html>

輔助類

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

img{

width:600px;

}

.crd{

width:200px;

}

</style>

</head>

<body>

<p class="bg-primary">首選項情景背景色</p>

<p class="bg-success">成功情景背景色</p>

<p class="bg-info">通常情景背景色</p>

<p class="bg-warning">警告情景背景色</p>

<p class="bg-danger">危險情景背景色</p>

</button>

<hr/>

<hr/>

</body>

</html>

響應式工具

<!DOCTYPE html>

<head>

<title>響應式工具</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<!--注：對於顯示的內容，有三種變體，分別爲：block、inline-block、inline。

-->

<div class="hidden-xs">超小屏幕時隱藏</div>

<div class="visible-md-block">中等屏幕時顯示爲塊狀</div>

<div class="visible-sm-inline">小屏幕時顯示爲內聯</div>

</body>

</html>

圖標

263個圖標

可使用<i>或<span>標籤來使用

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<span class="glyphicon glyphicon-star"></span> Star

</button>

</body>

</html>

下拉菜單

聲明式用法的關鍵核心：

1.外圍容器使用 class="dropdown"包裹；

2.內部點擊按鈕事件綁定 data-toggle="dropdown"；

3.菜單元素使用 class="dropdown-menu"。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

下拉菜單<span class="caret"></span>

</button>

</ul>

</div>

<br/>

下拉菜單<span class="caret"></span>

</button>

</ul>

</div>

<hr/>

下拉菜單<span class="caret"></span>

</button>

</ul>

</div>

<hr/>

下拉菜單<span class="caret"></span>

</button>

</ul>

</div>

</body>

</html>

按鈕組

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</button>

</button>

</button>

</div>

</button>

</button>

</div>

<hr/>

</button>

</button>

</button>

點我 <span class="caret"><span>

</button>

</ul>

</div>

<hr/>

</button>

</button>

</button>

</div>

<hr/>

</div>

</body>

</html>

按鈕式下拉菜單

<!DOCTYPE html>

<head>

<title>按鈕式下拉菜單</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

點我 <span class="caret"><span>

</button>

</ul>

</div>

<hr/>

<button class="btn btn-default">Click Me</button>

</button>

</ul>

</div>

<hr/>

<button class="btn btn-default">Click Me</button>

</button>

</ul>

</div>

</body>

</html>

輸入框組

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</div>

<hr/>

</div>

<hr/>

</div>

<hr/>

</span>

</div>

<hr/>

</span>

</div>

<button class="btn btn-default">Click Me</button>

</button>

</ul>

</div>

</div>

</body>

</html>

導航條

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<!--導航條

navbar-fixed-top 導航條一直顯示在最上邊，

即便頁面向下拉，導航條也顯示在最上面

即便代碼寫在下面，導航條也顯示在頂端

navbar-fixed-bottom：將導航補丁在底部

navbar-static-top：靜態導航，和頁面等寬的導航條，去掉了圓角

不會跟着下拉，而一直顯示

navbar-default:默認的導航條

navbar-inverse:反色的導航條

-->

</a>

</div>

</ul>

</span>

</div>

</form>

<p class="navbar-text">Welcome to <a href="#" class="navbar-link">China</a></p>

</div>

</body>

</html>

路徑導航

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</ul>

</ol>

</body>

</html>

分頁

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</a>

</li>

<li>

</a>

</li>

</ul>

<hr/>

</ul>

<hr/>

</ul>

</body>

</html>

徽章

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

</style>

</head>

<body>

<hr/>

</body>

</html>

巨幕

巨幕組件主要是展現網站的關鍵性區域。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

</style>

</head>

<body>

<h1>Hello World</h1>

<p>This is my First Demo</p>

</div>

<h1>Hello World</h1>

<p>This is my First Demo</p>

</div>

</body>

</html>

縮略圖

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

</style>

</head>

<body>

<!--圖片 img-thumbnail自帶響應式 img-responsive響應式的

.img-rounded:圓角

.img-circle：圓

.img-thumbnail：縮略圖

-->

<p>關於這張圖片的詳情</p>

</div>

<p>關於這張圖片的詳情</p>

</div>

<p>關於這張圖片的詳情</p>

</div>

<p>關於這張圖片的詳情</p>

</div>

</body>

</html>

警告框

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

</style>

</head>

<body>

<!--警告框

fade in：添加淡入淡出效果

-->

不容許的操做

</div>

<div class="alert alert-success">不容許的操做</div>

</div>

<div class="alert alert-warning">不容許的操做</div>

</div>

不容許的操做<a href="#" class="alert-link">請下載</a>

</div>

</body>

</html>

Well組件

能夠實現簡單的嵌入效果。

<!DOCTYPE html>

<head>

<title>well組件</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin: 10px;

}

</style>

</head>

<body>

<!--

well組件

大小：well-lg>默認>well-sm

-->

<div class="well well-sm">Bootstrap</div>

</body>

</html>

進度條組件

進度條組件爲當前工做流程或動做提供時時反饋。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin: 10px;

}

</style>

</head>

<body>

<!--

基本進度條

-->

60%

</div>

<!--

最低值進度條

min-width:1% 設置最小寬度

-->

</div>

<!--

結合情景的進度條

progress-bar-success

-->

60%

</div>

<!--

條紋狀進度條，IE10+支持

progress-bar-striped

-->

60%

</div>

<!--

動畫效果

progress-bar-striped active 動畫效果必須加上條紋狀

-->

60%

</div>

<!--

堆疊效果

-->

20%

</div>

40%

</div>

40%

</div>

</body>

</html>

媒體對象

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin: 50px;

}

</style>

</head>

<body>

<!--

媒體對象在左邊

media-top:上邊

media-middle:中間

media-bottom:底部

-->

</div>

<p>企鵝（學名：Spheniscidae）：有「海洋之舟」美稱的企鵝是一種最古老的遊禽，它們極可能在地球穿上冰甲以前，就已經在南極安家落戶。全世界的企鵝共有17種，大多數都分佈在南半球。主要生活在南半球，屬於企鵝目，企鵝科。特徵爲不能飛翔；腳生於身體最下部，故呈直立姿式；趾間有蹼；跖行性（其餘鳥類以趾着地）；前肢成鰭狀；羽毛短，以減小摩擦和湍流；羽毛間存留一層空氣，用以保溫。背部黑色，腹部白色。各個種的主要區別在於頭部色型和個體大小。

企鵝（學名：Spheniscidae）：有「海洋之舟」美稱的企鵝是一種最古老的遊禽，它們極可能在地球穿上冰甲以前，就已經在南極安家落戶。全世界的企鵝共有17種，大多數都分佈在南半球。主要生活在南半球，屬於企鵝目，企鵝科。特徵爲不能飛翔；腳生於身體最下部，故呈直立姿式；趾間有蹼；跖行性（其餘鳥類以趾着地）；前肢成鰭狀；羽毛短，以減小摩擦和湍流；羽毛間存留一層空氣，用以保溫。背部黑色，腹部白色。各個種的主要區別在於頭部色型和個體大小。

</p>

</div>

<!--

媒體對象在右邊

-->

</p>

</div>

</div>

<hr />

<!--

媒體對象列表

-->

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</div>

</p>

</div>

</li>

</p>

</div>

</div>

</li>

</ul>

</body>

</html>

列表組

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin:20px;

}

</style>

</head>

<body>

<!--

基本的列表組組件

情景類:list-group-item-success,list-group-item-info,list-group-item-warning,list-group-item-danger

-->

</ul>

<!--

列表組組件帶徽章

-->

</ul>

<!--

div a 連接

active:激活

disabled:禁用

-->

</div>

<!--

按鈕式列表

-->

</div>

<!--

列表組定製內容

-->

</a>

</div>

</body>

</html>

面板

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

</style>

</head>

<body>

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

底部

</div>

<!--

列表類面板

-->

</div>

內容區

</div>

</ul>

底部

</div>

</body>

</html>

響應式嵌入組件

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

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

<!DOCTYPE html>

<head>

<title>響應式嵌入組件</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<!--

響應式嵌入組件

embed-responsive-16by9：16比9

embed-responsive-4by3：4:3

-->

allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>

</div>

</body>

</html>

模態框

是一款交互式網站很是常見的彈窗功能插件。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

$(function(){

//參數、選項

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

$('#myModal').modal({

backdrop:'static',

});

//方法

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

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

setTimeout(function(){

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

},2000)

})

//事件

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

alert("模態框即將被顯示");

});

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

alert("模態框已經顯示");

});

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

alert("模態框即將消失");

});

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

alert("模態框已經消失");

});

</script>

<style>

</style>

</head>

<body>

<!--模態聲明

Fade:模態框淡入淡出

-->

</div>

</div>

</div>

</div>

</div>

</form>

</div>

</div>

<button class="btn btn-default" id="btnOpen">彈出模態框：經過JS編程方式</button>

<!--data-backdrop

默認值 true，表示背景存在黑灰透明遮罩，且單擊空白背景可關閉彈窗；

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

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

-->

<button class="btn btn-default" data-toggle="modal" data-target="#myModal" data-backdrop="static">彈出模態框：經過data屬性方式</button>

<hr/>

<button class="btn btn-success" id="btn">模態框的方法</button>

</body>

</html>

滾動監聽插件

滾動監聽插件是用來根據滾動條所處在的位置自動更新導航項目，顯示導航項目高亮顯示。

當使用滾動監聽插件的同時在 DOM 中添加或刪除元素後，你須要像下面這樣調用此刷新（ refresh）方法：

$('#內容區ID').scrollspy('refresh');

<!DOCTYPE html>

<head>

<title>滾動監聽插件</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

</style>

</head>

<body>

<a href="#" class="navbar-brand">Web開發</a>

</div>

<li><a href="#js">JavaScript</a></li>

BootStrap

</a>

</ul>

</li>

</ul>

</nav>

<!--

data-spy="scroll" 設置滾動監聽

position:relative; 相對定位

data-target="#nav"：綁定指定監聽的菜單

data-offset:默認值爲 10，固定弄內容距滾動容器 10 像素之內，就高亮顯示所對應的菜單。可本身設置爲其它值data-offset=」0」

-->

<p>

標準通用標記語言下的一個應用HTML標準自1999年12月發佈的HTML4.01後，後繼的HTML5和其它標準被束之高閣，爲了推進Web標準化運動的發展，一些公司聯合起來，成立了一個叫作 Web Hypertext Application Technology Working Group （Web超文本應用技術工做組 -WHATWG）的組織。WHATWG 致力於 Web 表單和應用程序，而W3C（World Wide Web Consortium，萬維網聯盟）專一於XHTML2.0。在 2006 年，雙方決定進行合做，來建立一個新版本的 HTML。

HTML5草案的前身名爲 Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接納，併成立了新的 HTML 工做團隊。

HTML 5 的第一份正式草案已於2008年1月22日公佈。HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具有了某些 HTML5 支持。

2012年12月17日，萬維網聯盟（W3C）正式宣佈凝結了大量網絡工做者心血的HTML5規範已經正式定稿。根據W3C的發言稿稱：「HTML5是開放的Web網絡平臺的奠定石。」

2013年5月6日， HTML 5.1正式草案公佈。該規範定義了第五次重大版本，第一次要修訂萬維網的核心語言：超文本標記語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應用程序的做者，努力提升新元素互操做性。

本次草案的發佈，從2012年12月27日至今，進行了多達近百項的修改，包括HTML和XHTML的標籤，相關的API、Canvas等，同時HTML5的圖像img標籤及svg也進行了改進，性能獲得進一步提高。

支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內的傲遊瀏覽器（Maxthon），以及基於IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器一樣具有支持HTML5的能力。

在移動設備開發HTML5應用只有兩種方法，要不就是全使用HTML5的語法，要不就是僅使用JavaScript引擎。

JavaScript引擎的構建方法讓製做手機網頁遊戲成爲可能。因爲界面層很複雜，已預訂了一個UI工具包去使用。

純HTML5手機應用運行緩慢並錯漏百出，但優化後的效果會好轉。儘管不是不少人願意去作這樣的優化，但依然能夠去嘗試。

HTML5手機應用的最大優點就是能夠在網頁上直接調試和修改。原先應用的開發人員可能須要花費很是大的力氣才能達到HTML5的效果，不斷地重複編碼、調試和運行，這是首先得解決的一個問題。所以也有許多手機雜誌客戶端是基於HTML5標準，開發人員能夠輕鬆調試修改。

2014年10月29日，萬維網聯盟淚流滿面地宣佈，通過幾乎8年的艱辛努力，HTML5標準規範終於最終制定完成了，並已公開發布。

在此以前的幾年時間裏，已經有不少開發者陸續使用了HTML5的部分技術，Firefox、Google Chrome、Opera、Safari 4+、Internet Explorer 9+都已支持HTML5，但直到今天，咱們纔看到「正式版」。

HTML5將會取代1999年制定的HTML 4.01、XHTML 1.0標準，以期能在互聯網應用迅速發展的時候，使網絡標準達到符合當代的網絡需求，爲桌面和移動平臺帶來無縫銜接的豐富內容。

</p>

<p>Flexbox(伸縮佈局盒) 是 CSS3 中一個新的佈局模式，爲了現代網絡中更爲

flexbox

複雜的網頁需求而設計。

Flexbox 由伸縮容器和伸縮項目組成。經過設置元素的 display 屬性爲 flex 或 inline-flex 能夠獲得一個伸縮容器。設置爲 flex 的容器被渲染爲一個塊級元素，而設置爲 inline-flex 的容器則渲染爲一個行內元素。

Flexbox一般能讓咱們更好的操做他的子元素佈局，例如：

若是元素容器沒有足夠的空間，咱們無需計算每一個元素的寬度，就能夠設置他們在同一行；

能夠快速讓他們佈局在一列；

能夠方便讓他們對齊容器的左、右、中間等；

無需修改結構就能夠改變他們的顯示順序；

若是元素容器設置百分比和視窗大小改變，不用擔憂未指定元素的確切寬度而破壞佈局，由於容器中的每一個子元素均可以自動分配容器的寬度或高度的比例。[2] </p>

<h4 id="js">JavaScript</h4>

<p>

HTML5草案的前身名爲 Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接納，併成立了新的 HTML 工做團隊。

HTML 5 的第一份正式草案已於2008年1月22日公佈。HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具有了某些 HTML5 支持。

在移動設備開發HTML5應用只有兩種方法，要不就是全使用HTML5的語法，要不就是僅使用JavaScript引擎。

JavaScript引擎的構建方法讓製做手機網頁遊戲成爲可能。因爲界面層很複雜，已預訂了一個UI工具包去使用。

純HTML5手機應用運行緩慢並錯漏百出，但優化後的效果會好轉。儘管不是不少人願意去作這樣的優化，但依然能夠去嘗試。

2014年10月29日，萬維網聯盟淚流滿面地宣佈，通過幾乎8年的艱辛努力，HTML5標準規範終於最終制定完成了，並已公開發布。

</p>

<p>Flexbox(伸縮佈局盒) 是 CSS3 中一個新的佈局模式，爲了現代網絡中更爲

flexbox

複雜的網頁需求而設計。

Flexbox一般能讓咱們更好的操做他的子元素佈局，例如：

若是元素容器沒有足夠的空間，咱們無需計算每一個元素的寬度，就能夠設置他們在同一行；

能夠快速讓他們佈局在一列；

能夠方便讓他們對齊容器的左、右、中間等；

無需修改結構就能夠改變他們的顯示順序；

<p>Flexbox(伸縮佈局盒) 是 CSS3 中一個新的佈局模式，爲了現代網絡中更爲

flexbox

複雜的網頁需求而設計。

Flexbox一般能讓咱們更好的操做他的子元素佈局，例如：

若是元素容器沒有足夠的空間，咱們無需計算每一個元素的寬度，就能夠設置他們在同一行；

能夠快速讓他們佈局在一列；

能夠方便讓他們對齊容器的左、右、中間等；

無需修改結構就能夠改變他們的顯示順序；

<p>Flexbox(伸縮佈局盒) 是 CSS3 中一個新的佈局模式，爲了現代網絡中更爲

flexbox

複雜的網頁需求而設計。

Flexbox一般能讓咱們更好的操做他的子元素佈局，例如：

若是元素容器沒有足夠的空間，咱們無需計算每一個元素的寬度，就能夠設置他們在同一行；

能夠快速讓他們佈局在一列；

能夠方便讓他們對齊容器的左、右、中間等；

無需修改結構就能夠改變他們的顯示順序；

</div>

</body>

</html>

標籤頁

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin:10px;

}

</style>

</head>

<body>

<li><a href="#js" data-toggle="tab">JavaScript</a></li>

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

</ul>

<div class="tab-pane" id="js">JavaScript.....</div>

<div class="tab-pane" id="bootcss">Bootstrap.....</div>

</div>

<li><a href="#jss">JavaScript</a></li>

<li><a href="#bootcsss">Bootstrap</a></li>

</ul>

<!--

fade：淡出淡出

in：表示首選的內容默認顯示(配合fade使用)

-->

<div class="tab-pane fade" id="jss">JavaScript.....</div>

<div class="tab-pane fade" id="bootcsss">Bootstrap.....</div>

</div>

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

e.preventDefault();

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

});

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

alert('選項卡即將切換');

});

$('.nav li a').on('shown.bs.tab',function(){

alert('選項卡已經切換');

});

</script>

</body>

</html>

工具提示插件

data-container：默認值 false，將 tooltip 附加到特定的元素上。好比組合按鈕組提示，容器不夠，能夠附加 body 上。container : 'body'。當前容器不足以防止tooltip，將tooltip放置到更大的容器上。

data-selector：當一個父容器裏有多個組件須要加tooltip,當須要指定某個組件的tooltip顯示時使用。

$(‘#selection’).tooltip({

Selection:’a[rel=tooltip]’//rel爲自定義屬性

});

<!DOCTYPE html>

<head>

<title>工具提示插件</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin:100px;

}

</style>

</head>

<body>

<!--tooltip 工具提示插件當鼠標移動到元素之上的時候，給一個提示消息

也能夠自定義顯示的方式

-->

<button class="btn btn-default" data-toggle="tooltip" title="左邊給提示" data-placement="top">左邊給提示</button>

<hr/>

用戶名：<input type="text" id="username" data-toggle="tooltip"/>

//必須使用JS編程方式進行初始化

$('[data-toggle="tooltip"]:first').tooltip();

$('#username').on('blur',function(){

if($('#username').val()==''){

$('#username').tooltip({

trigger:'manual',//本身控制觸發時機

title:'用戶名不能爲空',

placement:'right'

}).tooltip('show');

}

});

//設置提示消息在2秒鐘以後消失

$('[data-toggle="tooltip"]').each(function(){

$(this).on('shown.bs.tooltip',function(){

var _this=this;

setTimeout(function(){

$(_this).tooltip('hide');

},2000)

});

</script>

</body>

</html>

彈出框插件

<!DOCTYPE html>

<head>

<title>彈出框插件</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin:30px;

}

</style>

</head>

<body>

<!--彈出框插件 popover 默認：當點擊一個元素時會彈出一個包含標題和內容的彈框

基於工具提示插件

-->

<button class="btn btn-success" id="btn" data-toggle="popover">彈出框：JS傳遞參數</button>

<hr/>

<button class="btn btn-primary" id="btn3">點此按鈕在div上彈框</button>

//將popover和父容器對齊

HTML5

</button>

</div>

$('[data-toggle="popover"]:first').popover();

$('#btn').popover({

title:'Bootstrap',

content:'Bootstrap是一個開源的前段框架...',

placement:'bottom'

});

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

$('#div').popover({

trigger:'manul',

title:'HTML',

content:'超文本標記語言'

}).popover('show');

});

$('[data-toggle="popover"]').on('shown.bs.popover',function(){

var _this=this;

setTimeout(function(){

$(_this).popover('hide');

},1000);

});

//把popover放到一個容器中

/*$('#viewbtn').popover({

viewport:"#view"

});*/

$('#viewbtn').popover({

viewport : {

selector : "#view",

padding : 10

}

});

</script>

</body>

</html>

按鈕插件

能夠經過按鈕插件建立不一樣狀態的按鈕。

//單個切換。

注：在 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>

//加載狀態

加載狀態

</button>

$('#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');

})

摺疊插件

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin:50px;

}

</style>

</head>

<body>

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

Bootstrap是一個開源的前端框架

</div>

<button class="btn btn-default" data-toggle="collapse" id="btn">摺疊，經過JS實現</button>

<hr/>

<!--

手風琴式的摺疊插件

若是不設置data-parent="#accordion"可同時打開多個

-->

Collapsible Group Item #1

</a>

</h4>

</div>

<!--

.collapse:默認影藏

.in：隱藏後能夠顯示

-->

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

</div>

Collapsible Group Item #2

</a>

</h4>

</div>

</div>

Collapsible Group Item #3

</a>

</h4>

</div>

</div>

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

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

});

</script>

</body>

</html>

輪播圖插件

<!DOCTYPE html>

<head>

<title>輪播圖插件</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin:50px;

}

#myCarousel{

width:524px;

}

</style>

</head>

<body>

<!--輪播圖插件 carousel 將幾張大小相同的圖片按照順序依次播放

data-ride="carousel" 5秒鐘自動輪播

-->

</ul>

<h3>Bootstrap</h3>

<p>Bootstrap是一款HTML5響應式的框架</p>

</div>

</div>

</div>

</div>

</a>

</a>

</div>

//設置自動播放

$('#myCarousel').carousel({

interval:"2000" //設置自動播放的間隔時間

});

</script>

</body>

</html>

附加導航插件

附加導航即粘貼在屏幕某處實現錨點功能

<!DOCTYPE html>

<head>

<title>well組件</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

.nav-pills{

width: 200px;

}

.nav-pills.affix{

top:30px;

}

</style>

</head>

<h2>Bootstrap</h2>

</div>

</ul>

</div>

<p style="line-height: 2">這一同比降低主要是因爲電商的興起。許多美國消費者經過智能手機、平板電腦和PC去尋找優惠信息。另外一方面，在感恩節以前，不少零售商就已提供了優惠折扣，從而沖淡了黑色星期五的影響力。過去幾周，電商平臺經過電子郵件等渠道向用戶進行了推廣。Adobe的數據顯示，今年黑色星期五，美國電商銷售總額同比增加14%，達到27.2億美圓。Adobe追蹤了美國4500家零售網站的狀況。相對於2014年，電子郵件推廣帶來的銷售額增加了25%。這一同比降低主要是因爲電商的興起。許多美國消費者經過智能手機、平板電腦和PC去尋找優惠信息。另外一方面，在感恩節以前，不少零售商就已提供了優惠折扣，從而沖淡了黑色星期五的影響力。過去幾周，電商平臺經過電子郵件等渠道向用戶進行了推廣。Adobe的數據顯示，今年黑色星期五，美國電商銷售總額同比增加14%，達到27.2億美圓。Adobe追蹤了美國4500家零售網站的狀況。相對於2014年，電子郵件推廣帶來的銷售額增加了25%。這一同比降低主要是因爲電商的興起。許多美國消費者經過智能手機、平板電腦和PC去尋找優惠信息。另外一方面，在感恩節以前，不少零售商就已提供了優惠折扣，從而沖淡了黑色星期五的影響力。過去幾周，電商平臺經過電子郵件等渠道向用戶進行了推廣。Adobe的數據顯示，今年黑色星期五，美國電商銷售總額同比增加14%，達到27.2億美圓。Adobe追蹤了美國4500家零售網站的狀況。相對於2014年，電子郵件推廣帶來的銷售額增加了25%。</p>

</div>

</body>

</html>

//JavaScript 代替 data-spy="affix" data-offset-top="125"

$('#myAffix').affix({

offset: {

top: 150

}

})

咱們默認使用的是 top，固然也能夠默認居底 bottom。這個定位方式是直接經過 CSS定位的。

//設置成 bottom

.nav-pills.affix{