複習：
Bootstrap是一個HTML/CSS/JS框架，適用於響應式Web項目，內容涉及到：
HTML: 基於H5已有標籤添加了data-*屬性
CSS: (1)CSSReset (2)千個class
JS: 基於jQuery提供了十幾個插件函數
分爲五部分：
(1)起步
下載、模板、實例、Bootlint、兼容性
(2)全局CSS樣式
按鈕、圖片、列表、文本、輔助類、表格、柵格系統、表單(默認、行內、水平)
(3)組件
下拉菜單、警告框
(4)JS插件
(5)定製
<div class="dropdown">
<a data-toggle="dropdown">觸發元素</a>
<ul class="dropdown-menu"></ul>
</div>
<div class="alert alert-顏色 alert-dismissible">
<span class="close" data-dismiss="alert">×</span>
任意文字
</div>
今日目標
(1)組件 —— 難點在響應式導航條
(2)插件 ——
1.補充知識點：Bootstrap全局CSS樣式——柵格系統
列偏移(offset)：
控制某列向右錯位，並影響後續所有的列
.col-lg/md/sm/xs-offset-*
作用：列左右留白、列右對齊、列居中
列排序：
控制某列向右/左移動，並不影響其他列
.col-lg-push-1/2/.../12
.col-lg-pull-1/2/.../12
作用：在特定屏幕下臨時調整列的出現位置
2.Bootstrap第三部分：組件——下拉菜單
3.Bootstrap第三部分：組件——警告框
4.Bootstrap第三部分：組件——圖標字體
圖標字體：本質是文字，不是圖片，可以隨意變大、添加下劃線、變斜體、改顏色。
Web應用中常用圖標字體： FontAwesome、Glyphicons
因爲客戶端都沒有上述字體文件，必須應用服務器端字體：
@font-face {
font-family: 'Glyphicon'; /*聲明服務器端字體*/
src: url(../fonts/glyphicons....ttf) /*服務器端字體下載位置*/
}
.glyphicon {
font-family: 'Glyphicon'; /*使用服務器端字體*/
}
.glyphicon-alert:before {
content: '\9fc3';
}
Bootstrap提供了200+個Glyphicons圖標，使用方法：
<span class="glyphicon glyphicon-*"></span>
提示：使用圖標字體的HTML標籤中不能有任何子元素或內容！
5.Bootstrap第三部分：組件——按鈕組
把多個按鈕放在一起組成小組
.btn-group > .btn*n
.btn-group.btn-group-justified > .btn*n
.btn-group-vertical > .btn*n
6.Bootstrap第三部分：組件——導航(nav)
Boostrap提供了三種形式的導航組件：
(1)標籤頁式導航（頁籤組件）
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"></a></li>
</ul>
(2)膠囊式導航
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab"></a></li>
</ul>
(3)導航條專用導航
7.Bootstrap第三部分：組件——縮略圖
可以用於A元素或者DIV元素，用於展示一系列條目中的一個。
8.Bootstrap第三部分：組件——媒體對象
媒體對象常用於商品列表：
<div class="media">
<div class="media-left">圖片</div>
<div class="media-body">主體</div>
<div class="media-right">圖片</div>
</div>
9.Bootstrap第三部分：組件——列表組
用法1：無鼠標懸停效果
<ul class="list-group">
<li class="list-group-item"></li>
</ul>
用法2：有鼠標懸停效果
<div class="list-group">
<a class="list-group-item"></div >
</div>
10.Bootstrap第三部分：組件 —— 面板組件 —— 小難點
面板：在Bootstrap中是一種呈現“頭部-主體-尾部”三層結構的組件。
<div class="panel">
<div class="panel-heading"></div>
<div class="panel-body"></div>
<div class="panel-footer"></div>
</div>
提示：面板組件中尤其適合放置 <table class="table">
11.Bootstrap第四部分：JS插件 —— Collapse
摺疊效果，本身使用很簡單：
<a data-toggle="collapse" href="cid">觸發元素</a>
<div id="cid" class="collapse in">
內容
</div>
摺疊效果有兩個使用場景：
(1)手風琴： 摺疊效果插件 + 面板組
(2)響應式導航條：
12.Bootstrap第三部分：組件 —— 響應式導航條 —— 最難點
注意：響應式導航條的結構——只有從手機屏幕才能看出來！
代碼結構：
<div class="navbar">
<div class="container">
<div class="navbar-header">
商標和漢堡包按鈕
</div>
<div class="navbar-collapse collapse">
能夠摺疊隱藏的內容，如導航、表單、鏈接...
</div>
</div>
</div>
導航條的種類：按顏色：
淺色底深色字：.navbar.navbar-default
深色底淺色字：.navbar.navbar-inverse
導航條的種類：按定位：
相對定位(佔空間)：.navbar
固定定位(不佔空間)：.navbar.navbar-fixed-*
導航條的種類：按位置：
固定在頂部：.navbar.navbar-fixed-top
固定在底部：.navbar.navbar-fixed-bottom
|
前端實現動畫可用的技術： (1)CSS3 Transition技術 (2)CSS3 Keyframes技術 (3)JS定時器 —— jQuery1/2動畫函數都是定時器動畫 (4)requestAnimationFrame技術 —— jQuery3 |