bootstrap實戰教程

本文轉載自查看原文 2016-04-22 16:07 5210 思維導圖/ html5/ bootsharp/ 響應式布局/ course/ bootstrap/ 實戰教程

bootstrap實戰教程

bootstrap介紹

簡介

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式布局、移動設備優先的 WEB 項目。全球數以百萬計的網站都是基於 Bootstrap 構建的。

Bootstrap是完全開源的由Twitter @mdo 和 @fat 構建, 采用 LESS CSS, 通過Node編譯, 代碼托管、開發、維護都在 GitHub 平台上

Bootstrap 為所有開發者、所有應用場景而設計，所有開發者都能快速上手、所有設備都可以適配、所有項目都適用。

簡潔、直觀、強大的開發框架，有眾多插件，讓Web開發更快、更容易

特點

預處理器

Bootstrap 提供了可以直接使用的 CSS 文件，源碼是用CSS 預處理器。如需快速上手可以直接使用編譯好的 CSS 文件，或者你也可以自己編譯源碼。

功能完備

Bootstrap 提供了全面、美觀的文檔。你能在這里找到關於 HTML 元素、HTML 和 CSS 組件、jQuery 插件方面的所有詳細文檔。

一個框架、多種設備

你的網站和應用能在 Bootstrap 的幫助下通過同一份代碼快速、有效適配手機、平板、PC 設備，這一切都是 CSS 媒體查詢（Media Query）的功勞。

bootstrap特點

相關網址

Getting started · Bootstrap
http://getbootstrap.com/getting-started/

Bootstrap中文網
http://www.bootcss.com/

twbs/bootstrap · GitHub
https://github.com/twbs/bootstrap

Bootstrap優站精選
http://expo.bootcss.com/

http://www.howzhi.com/
好知網-重拾學習樂趣

https://zh.airbnb.com/
airbnb中國站

bootstrap編碼規范
http://codeguide.bootcss.com/

下載安裝

http://getbootstrap.com/getting-started/
Getting started · Bootstrap

2016.01.28 最新版是v3.3.6

http://v3.bootcss.com/
Bootstrap 中文文檔

http://codeguide.bootcss.com/
bootstrap編碼規范

http://expo.bootcss.com/
優選網站

目錄結構

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── 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

源碼結構

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/

http://jquery.com/download/
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.

jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8. All the notes in the jQuery 1.9 Upgrade Guide apply here as well. Since IE 8 is still relatively common, we recommend using the 1.x version unless you are certain no IE 6/7/8 users are visiting the site. Please read the 2.0 release notes carefully.

jquery2.x不支持IE8以下的，bootsrtap插件無法正常使用，建議用jquery1.12.0的在IE8下基本功能可以使用，css3語法仍不兼容。

fonts-google字體，國內環境加載慢需要下載到本地

引入核心文件

引入核心js css

用Meta標簽代碼讓360雙核瀏覽器默認極速模式不是兼容模式
<meta name="renderer" content="webkit" />
讓IE以最高級模式渲染文檔，強制IE使用Chrome Frame渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

全局 CSS 樣式

設置全局 CSS 樣式；基本的 HTML 元素均可以通過 class 設置樣式並得到增強效果；還有先進的柵格系統。
深入了解 Bootstrap 底層結構的關鍵部分，包括我們讓 web 開發變得更好、更快、更強壯的最佳實踐。

柵格系統
排版
代碼
表格
表單
按鈕
圖片
輔助類
響應式工具
使用 Less
使用 Sass

http://v3.bootcss.com/css/

可復用組件

無數可復用的組件，包括字體圖標、下拉菜單、導航、警告框、彈出框等更多功能。

Glyphicons 字體圖標
下拉菜單
按鈕組
按鈕式下拉菜單
輸入框組
導航
導航條
路徑導航
分頁
標簽
徽章
巨幕
頁頭
縮略圖
警告框
進度條
媒體對象
列表組
面板
具有響應式特性的嵌入內容
Well

http://v3.bootcss.com/components/

JavaScript 插件

http://v3.bootcss.com/javascript/

過渡效果
模態框
下拉菜單
滾動監聽
標簽頁
工具提示
彈出框
警告框
按鈕
Collapse
Carousel
Affix

柵格系統

柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中

柵格參數

超小屏幕手機 (<768px) .col-xs-
小屏幕平板 (≥768px) .col-sm-
中等屏幕桌面顯示器 (≥992px) .col-md-
大屏幕大桌面顯示器 (≥1200px) .col-lg-
.container 最大寬度 None （自動） 750px 970px 1170px

http://v3.bootcss.com/css/#grid

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。

container容器

Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。

.container 類用於固定寬度並支持響應式布局的容器。默認1200px，槽邊15px

.container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器。

導航條

導航條是在您的應用或網站中作為導航頁頭的響應式基礎組件。它們在移動設備上可以折疊（並且可開可關），且在視口（viewport）寬度增加時逐漸變為水平展開模式。

響應式導航條依賴 collapse 插件，定制 Bootstrap 的話時候必將其包含。
通過調整源碼中的@grid-float-breakpoint 值，就可以控制導航條何時堆疊排列，何時水平排列。默認值是 768px

http://v3.bootcss.com/components/#navbar

pc寬屏下的效果

小屏自動縮進成菜單欄，注意：data-target 的ID要和下面div的ID保持一致，否則出不來

<nav class="navbar navbar-default">
<div class="container margintop30">

<div class="navbar-header marginright40">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a href="{:U('System/Index/index')}"><img src="__PUBLIC__/Common/images/logo.png" class="l" /></a> </div>


<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="current"><a href="{:U('System/Index/index')}">首頁</a></li>
<li><a href="{:U('Design/Design/index')}">設計中心</a></li>
<li><a href="{:U('System/Product/index')}">產品中心</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<if condition="$userId gt 0 ">
<li class="dropdown"> <a href="{:U('System/Wode/index')}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的蝸牛窩 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{:U('System/Wode/index')}">個人資料</a></li>
<li><a href="{:U('System/Anquan/xiugai')}">修改密碼</a></li>
<li><a href="{:U('System/Anquan/index')}">綁定手機/郵箱</a></li>
<li><a href="{:U('System/Shoucang/index')}">我的收藏</a></li>
<li><a href="{:U('System/login/logout')}">退出登錄</a></li>
</ul>
</li>
<else />
<li><a href="{:U('System/login/index')}">登錄</a></li>
<li><a href="{:U('System/regsiter/index')}">注冊{$menuid}</a></li>
</if>
</ul>
</div>

</div>

</nav>

導航

bootstrap 中的導航組件都依賴同一個 .nav 類，狀態類也是共用的。改變修飾類可以改變樣式。

如果你在使用導航組件實現導航條功能，務必在 <ul> 的最外側的邏輯父元素上添加 role="navigation" 屬性，或者用一個 <nav> 元素包裹整個導航組件。不要將 role 屬性添加到 <ul> 上，因為這樣可以被輔助設備（殘疾人用的）上被識別為一個真正的列表。

標簽頁，.nav-tabs 類依賴 .nav 基類。

膠囊式標簽頁，HTML 標記相同，但使用 .nav-pills 類：

兩端對齊的標簽頁
在大於 768px 的屏幕上，通過 .nav-justified 類可以很容易的讓標簽頁或膠囊式標簽呈現出同等寬度。在小屏幕上，導航鏈接呈現堆疊樣式。
兩端對齊的導航條導航鏈接已經被棄用了。

禁用的鏈接
對任何導航組件（標簽頁、膠囊式標簽頁），都可以添加 .disabled 類，從而實現鏈接為灰色且沒有鼠標懸停效果。
鏈接功能不受到影響
這個類只改變 <a> 的外觀，不改變功能。可以自己寫 JavaScript 禁用這里的鏈接。

添加下拉菜單，用一點點額外 HTML 代碼並加入下拉菜單插件的 JavaScript 插件即可。

輸入框組

通過在文本輸入框 <input> 前面、后面或是兩邊加上文字或按鈕，可以實現對表單控件的擴展。為 .input-group 賦予 .input-group-addon 類，可以給 .form-control 的前面或后面添加額外的元素。

在輸入框的任意一側添加額外元素或按鈕。你還可以在輸入框的兩側同時添加額外元素。
不支持在輸入框的單獨一側添加多個額外元素。
不支持在單個輸入框組中添加多個表單控件。

為 .input-group 添加相應的尺寸類，其內部包含的元素將自動調整自身的尺寸。不需要為輸入框組中的每個元素重復地添加控制尺寸的類。

作為額外元素的多選框和單選框
可以將多選框或單選框作為額外元素添加到輸入框組中。

作為額外元素的按鈕
為輸入框組添加按鈕需要額外添加一層嵌套，不是 .input-group-addon，而是添加 .input-group-btn 來包裹按鈕元素。由於不同瀏覽器的默認樣式無法被統一的重新賦值，所以才需要這樣做。

作為額外元素的按鈕式下拉菜單

作為額外元素的分裂式按鈕下拉菜單

按鈕式下拉和向上彈出菜單

單按鈕下拉菜單

分裂式按鈕下拉菜單

向上彈出式菜單

給父元素添加 .dropup 類就能使觸發的下拉菜單朝上方打開。

輪播Carousel插件

Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。除此之外，內容也是足夠靈活的，可以是圖像、內嵌框架、視頻或者其他您想要放置的任何類型的內容。

http://v3.bootcss.com/javascript/#carousel

<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>

<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

bootstrap-3.3.6\js\tests\visual\carousel.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Carousel</title>
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">

</head>
<body>

<div class="page-header">
<h1>Carousel <small>Bootstrap Visual Test</small></h1>
</div>

</div>

<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../carousel.js"></script>

</body>
</html>

由於輪播carousel第一個div需要設置active樣式才能正常顯示，上面的圓點也同樣需要數字，使用volist標簽在循環的同時可以取得下標（foreach，for標簽實現不了）

<div class="container">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<volist name="bopic" id="xt">
<li data-target="#carousel-example-generic" data-slide-to="{$i-1}" class="<if condition="$i eq 1 ">active</if>"></li>
</volist>
</ol>
<div class="carousel-inner">
<volist name="bopic" id="xt">
<div class='item <if condition="$i eq 1 ">active</if>'>
<img src="{$xt.page_bopic_image}" alt="{$xt.page_bopic_seo}"/>
</div>
</volist>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

</div>

輪播carousel效果

輪播Unslider插件

unslider插件是一個超小的Jquery輪播（slider）插件，大小不到3k，源碼托管在GitHub上，是一個開源項目。支持鍵盤導航，就是鍵盤上的左右鍵

unslider分組后輪播在屏幕縮小后無法在一行完整顯示，換行對高度有要求，各種屏寬下效果都可能不一樣，不好控制，建議響應式布局少用這種輪播效果

http://www.bootcss.com/p/unslider/

輪播unslider效果

airbnb大中小屏及圖片布局

https://zh.airbnb.com/
美短租網站目前Airbnb估值達到了250億美元或更多

airbnb圖片當背景圖處理，加上 background-position: center; 實現居中收縮
col-md-12 這個在中屏下為12列全屏，col-lg-4 默認為4列，用rm-padding-sm實現小屏幕上去掉槽邊功能，實現了上面的效果。

大屏下並排三列，中屏為兩行，一行全屏，下面兩個並列，小屏為三行。

大中小屏的布局代碼

柵格參數

九宮格合作伙伴友情鏈接

要在不同屏幕下實現九宮格居中的效果，不能采用ul li 然后float的方式實現（無法在不同寬度情況下居中）,col的方式采用百分比控制寬度

.partner-row{
margin-right: -30px;
margin-left: -30px;
}
.partner-row [class*="col"]{
margin-bottom: 30px;
}
.partner-row img{
width:100px;
height:72px;
}
@media screen and (max-width: 767px) {
.partner-row img{
width:80px;
height:60px;
}
}

針對屏幕大小定義樣式

通過@media screen and (min-width: 767px)可以定義不同屏幕下的顯示效果，這個屬於css3的語法，在IE8以下不支持css3的瀏覽器不期作用。

定義不同屏幕樣式,pc大屏效果

@media screen and (min-width: 767px) {
.mr0{
margin-right: 0px !important;
padding-right: 0px !important;
}
}
/** start mobile style */
@media screen and (max-width: 767px) {
#carousel-example-generic{
height: 300px !important;
}
#carousel-example-generic .item{
height: 300px !important;
}
}
/** end mobile style */

移動端效果

.design-info-sm{
display:none;
}
@media screen and (max-width: 767px) {
.design-info-sm{
display:block;
font-size:24px;
color:#FFF;
text-align:center;
vertical-align:middle;
display:block;
padding-top:130px;
height:300px;
margin-top:-300px;
z-index:10000;
}
}

.design-info-sm{
display:none;
}
@media screen and (max-width: 767px) {
.design-info-sm{
display:block;
}
}

響應式工具visible-*-*

http://v3.bootcss.com/css/#responsive-utilities

為了加快對移動設備友好的頁面開發工作，利用媒體查詢功能並使用這些工具類可以方便的針對不同設備展示或隱藏頁面內容。另外還包含了針對打印機顯示或隱藏內容的工具類。
有針對性的使用這類工具類，從而避免為同一個網站創建完全不同的版本。相反，通過使用這些工具類可以在不同設備上提供不同的展現形式。

可用的類，通過單獨或聯合使用以下列出的類，可以針對不同屏幕尺寸隱藏或顯示頁面內容。

從 v3.2.0 版本起，形如 .visible-*-* 的類針對每種屏幕大小都有了三種變體，每個針對 CSS 中不同的 display 屬性，列表

打印類，和常規的響應式類一樣，使用下面的類可以針對打印機隱藏或顯示某些內容。

測試用例，調整你的瀏覽器大小，或者用其他設備打開頁面，都可以測試這些響應式工具類。

模態框 modal.js

http://v3.bootcss.com/javascript/#modals

模態框經過了優化，更加靈活，以彈出對話框的形式出現，具有最小和最實用的功能集。
不支持同時打開多個模態框
千萬不要在一個模態框上重疊另一個模態框。要想同時支持多個模態框，需要自己寫額外的代碼來實現。
模態框的 HTML 代碼放置的位置
務必將模態框的 HTML 代碼放在文檔的最高層級內（也就是說，盡量作為 body 標簽的直接子元素），以避免其他組件影響模態框的展現和/或功能。

靜態模態框包含了模態框的頭、體和一組放置於底部的按鈕。

<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

動態模態框，點擊按鈕即可通過 JavaScript 啟動一個模態框。此模態框將從上到下、逐漸浮現到頁面前。

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

增強模態框的可訪問性
務必為 .modal 添加 role="dialog" 和 aria-labelledby="..." 屬性，用於指向模態框的標題欄；為 .modal-dialog 添加 aria-hidden="true" 屬性。
另外，你還應該通過 aria-describedby 屬性為模態框 .modal 添加描述性信息。

模態框提供了兩個可選尺寸，通過為 .modal-dialog 增加一個樣式調整類實現。
data-target=".bs-example-modal-lg" data-target=".bs-example-modal-sm"

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

禁止動畫效果，如果你不需要模態框彈出時的動畫效果（淡入淡出效果），刪掉 .fade 類即可。
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">...</div>

手動打開或關閉模態框。在模態框顯示或隱藏之前返回到主調函數中（也就是，在觸發 shown.bs.modal 或 hidden.bs.modal 事件之前）。
$('#myModal').modal('toggle')

通過 data 屬性，不需寫 JavaScript 代碼也可激活模態框。通過在一個起控制器作用的元素（例如：按鈕）上添加 data-toggle="modal" 屬性，或者 data-target="#foo" 屬性，再或者 href="#foo" 屬性，用於指向被控制的模態框。
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

通過 JavaScript 調用，只需一行 JavaScript 代碼，即可通過元素的 id myModal 調用模態框：$('#myModal').modal(options)

參數，可以將選項通過 data 屬性或 JavaScript 代碼傳遞。對於 data 屬性，需要將參數名稱放到 data- 之后，例如 data-backdrop=""。

Bootstrap 的模態框類提供了一些事件用於監聽並執行你自己的代碼。
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})

實例：頁面有多個模態框，用class=fade來控制在模態框顯示出來后執行指定腳本的方法。
$(".fade").each(function () {
var dom = $(this);
dom.on('shown.bs.modal', function () {
//dosomething...
});
});

輔助類

http://v3.bootcss.com/css/#helper-classes

情境文本顏色

通過顏色來展示意圖，Bootstrap 提供了一組工具類。這些類可以應用於鏈接，並且在鼠標經過時顏色可以還可以加深，就像默認的鏈接一樣。

情境背景色

和情境文本顏色類一樣，使用任意情境背景色類就可以設置元素的背景。鏈接組件在鼠標經過時顏色會加深，就像上面所講的情境文本顏色類一樣。

關閉按鈕

通過使用一個象征關閉的圖標，可以讓模態框和警告框消失。
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

三角符號

通過使用三角符號可以指示某個元素具有下拉菜單的功能。注意，向上彈出式菜單中的三角符號是反方向的。<span class="caret"></span>

快速浮動

通過添加一個類，可以將任意元素向左或向右浮動。!important 被用來明確 CSS 樣式的優先級。
<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}

// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}

不能用於導航條組件中
排列導航條中的組件時可以使用這些工具類：.navbar-left 或 .navbar-right 。參見導航條文檔以獲取更多信息。

讓內容塊居中

為任意元素設置 display: block 屬性並通過 margin 屬性讓其中的內容居中。
<div class="center-block">...</div>

// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}

清除浮動

通過為父元素添加 .clearfix 類可以很容易地清除浮動（float）。這里所使用的是 Nicolas Gallagher 創造的 micro clearfix 方式。
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}

// Usage as a mixin
.element {
.clearfix();
}

顯示或隱藏內容

show 和 .hidden 類可以強制任意元素顯示或隱藏(對於屏幕閱讀器也能起效)。這些類通過 !important 來避免 CSS 樣式優先級問題，就像 quick floats 一樣的做法。注意，這些類只對塊級元素起作用，另外，還可以作為 mixin 使用。
.hide 類仍然可用，但是它不能對屏幕閱讀器起作用，並且從 v3.0.1 版本開始就不建議使用了。請使用 .hidden 或 .sr-only 。
另外，.invisible 類可以被用來僅僅影響元素的可見性，也就是所，元素的 display 屬性不被改變，並且這個元素仍然能夠影響文檔流的排布。

// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}

// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}

屏幕閱讀器和鍵盤導航

.sr-only 類可以對屏幕閱讀器以外的設備隱藏內容。.sr-only 和 .sr-only-focusable 聯合使用的話可以在元素有焦點的時候再次顯示出來（例如，使用鍵盤導航的用戶）。對於遵循可訪問性的最佳實踐很有必要。

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

// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}

圖片替換

使用 .text-hide 類或對應的 mixin 可以用來將元素的文本內容替換為一張背景圖。<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
.text-hide();
}

列表組

列表組是靈活又強大的組件，不僅能用於顯示一組簡單的元素，還能用於復雜的定制的內容。http://v3.bootcss.com/components/#list-group

基本實例，最簡單的列表組僅僅是一個帶有多個列表條目的無序列表，另外還需要設置適當的類。我們提供了一些預定義的樣式，你可以根據自身的需求通過 CSS 自己定制。

<ul class="list-group">
<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>

給列表組加入徽章(數字)組件，它會自動被放在右邊。

<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>

鏈接，用 <a> 標簽代替 <li> 標簽可以組成一個全部是鏈接的列表組（還要注意的是，我們需要將 <ul> 標簽替換為 <div> 標簽）。沒必要給列表組中的每個元素都加一個父元素。

<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

按鈕，列表組中的元素也可以直接就是按鈕（也同時意味着父元素必須是 <div> 而不能用 <ul> 了），並且無需為每個按鈕單獨包裹一個父元素。注意不要使用標准的 .btn 類！

<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

被禁用的條目，為 .list-group-item 添加 .disabled 類可以讓單個條目顯示為灰色，表現出被禁用的效果。<a href="#" class="list-group-item disabled">

<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

情境類，為列表中的條目添加情境類，默認樣式或鏈接列表都可以。還可以為列表中的條目設置 .active 狀態。

<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

定制內容，列表組中的每個元素都可以是任何 HTML 內容，甚至是像下面的帶鏈接的列表組。

<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>

面板組件

某些時候你可能需要將某些 DOM 內容放到一個盒子里。對於這種情況，可以試試面板組件。http://v3.bootcss.com/components/#panels

基本實例，默認的 .panel 組件所做的只是設置基本的邊框（border）和內補（padding）來包含內容。
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>

帶標題的面板，通過 .panel-heading 可以很簡單地為面板加入一個標題容器。你也可以通過添加設置了 .panel-title 類的 <h1>-<h6> 標簽，添加一個預定義樣式的標題。
為了給鏈接設置合適的顏色，務必將鏈接放到帶有 .panel-title 類的標題標簽內。

<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>

帶腳注的面板，把按鈕或次要的文本放入 .panel-footer 容器內。注意面板的腳注不會從情境效果中繼承顏色，因為他們並不是主要內容。

<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>

情境效果，像其他組件一樣，可以簡單地通過加入有情境效果的狀態類，給特定的內容使用更針對特定情境的面板。

帶表格的面板，為面板中不需要邊框的表格添加 .table 類，是整個面板看上去更像是一個整體設計。如果是帶有 .panel-body 的面板，我們為表格的上方添加一個邊框，看上去有分隔效果。
如果沒有 .panel-body ，面版標題會和表格連接起來，沒有空隙。

<div class="panel panel-default">

<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>

<table class="table">
...
</table>
</div>

<div class="panel panel-default">

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

<table class="table">
...
</table>
</div>

帶列表組的面板，以簡單地在任何面板中加入具有最大寬度的列表組。

<div class="panel panel-default">

<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>

<ul class="list-group">
<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>

具有響應式特性的嵌入內容

根據被嵌入內容的外部容器的寬度，自動創建一個固定的比例，從而讓瀏覽器自動確定視頻或 slideshow 的尺寸，能夠在各種設備上縮放。
這些規則被直接應用在 <iframe>、<embed>、<video> 和 <object> 元素上。如果你希望讓最終樣式與其他屬性相匹配，還可以明確地使用一個派生出來的 .embed-responsive-item 類。
超級提示：不需要為 <iframe> 元素設置 frameborder="0" 屬性，因為我們已經替你這樣做了！

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Well效果

默認效果，把 Well 用在元素上，能有嵌入（inset）的的簡單效果。

可選類/樣式，通過這兩種可選修飾類，可以控制此組件的內補（padding）和圓角的設置。

Affix固定浮動

The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of the affix plugin.
固定元素在頂部或者底部，可以通過樣式控制或者js控制

$('#myAffix').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
})

Bootstrap's affix plugin exposes a few events for hooking into affix functionality.

標簽頁tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Nested tabs are not supported.

$('#myTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})

<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>

滾動監聽scrollspy.js

滾動監聽插件是用來根據滾動條所處的位置來自動更新導航項的。如下所示，滾動導航條下面的區域並關注導航項的變化。下拉菜單中的條目也會自動高亮顯示。http://v3.bootcss.com/javascript/#scrollspy

滾動監聽插件依賴 Bootstrap 的導航組件用於高亮顯示當前激活的鏈接。

需要相對定位（relative positioning）無論何種實現方式，滾動監聽都需要被監聽的組件是 position: relative; 即相對定位方式。大多數時候是監聽 <body> 元素。When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.

在 CSS 中添加 position: relative; 之后，通過 JavaScript 代碼啟動滾動監聽插件：
$('body').scrollspy({ target: '#navbar-example' })
當使用滾動監聽插件的同時在 DOM 中添加或刪除元素后，你需要像下面這樣調用此刷新（ refresh）方法：
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})

activate.bs.scrollspy 每當一個新條目被激活后都將由滾動監聽插件觸發此事件。
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Bootstrap4項目開發實戰視頻教程 Bootstrap 教程 Bootstrap3 入門實戰 BootStrap入門教程 (一) BootStrap入門教程 (四) BootStrap入門教程 (二) BootStrap入門教程 (三) Bootstrap 完全教程筆記 BootStrap入門教程 (一) bootstrap精簡教程