HTML5+CSS3+JavaScript+Bootstrap網站開發(fā)技術（第3版）課件 第8章 Bootstrap的全局樣式

柵格系統(tǒng)1頁面版式2表格3按鈕4表單5圖片6第8章Bootstrap的全局樣式應用案例7小結88.1柵格系統(tǒng)柵格系統(tǒng)（GridSystem）主要用于頁面布局柵格是由一系列相交的直線（垂直的、水平的）組成的格子用來承載網頁的內容8.1柵格系統(tǒng)8.1.1柵格系統(tǒng)的原理柵格系統(tǒng)使用的類.container類和.container-fluid類容器類.row類行類.col-[screenStyle]-[percent]類列類，使用組合類名，來定義柵格行中的一個具體柵格8.1柵格系統(tǒng)8.1.1柵格系統(tǒng)的原理柵格系統(tǒng)的工作規(guī)則。行必須放置在.container類或.container-fluid類內使用行（.row類）來創(chuàng)建列（.col-[screenStyle]-[percent]類）的水平組。頁面元素應該放置在列內，且唯有列可以是行的直接子元素預定義的柵格類，例如.row、.col-xs-4、.col-sm-3等，用于快速創(chuàng)建柵格布局列通過內邊距（padding）來創(chuàng)建列內容之間的間隙柵格系統(tǒng)是通過指定橫跨12個可用的列來創(chuàng)建的8.1柵格系統(tǒng)8.1.2柵格系統(tǒng)的類及相關參數8.1柵格系統(tǒng)8.1.2柵格系統(tǒng)的類及相關參數demo0801.htmldemo0802.html8.1柵格系統(tǒng)8.1.2柵格系統(tǒng)的類及相關參數demo0803.htmldemo0804.html8.1柵格系統(tǒng)8.1.3用柵格實現的響應式布局demo0804.html視口尺寸在992~1200px時的效果視口尺寸小于768px時的效果8.2頁面版式8.2.1標題重新定義<h1>~<h6>標題（Headings）的樣式定義.h1~.h6的標題類在標題中使用<small>標記或者.small類，可以設置副標題8.2頁面版式8.2.2列表實現了列表（Lists）的增強樣式無序列表、有序列表、自定義列表等列表元素的使用方式和HTML5中使用列表的方式相同在頁面版式方面，還提供了abbr元素（縮略語）、address元素（地址）、blockquote元素（引用）的增強效果重新定義了mark、strong、del、em等內聯文本元素8.3表格優(yōu)化了表格（Table）的樣式，通過一些表格類，增強了表格的顯示效果

.table類，為表格添加基本樣式（橫向分隔線）.table-striped類，在tbody元素內添加斑馬線形式的條紋.table-bordered類，為表格的單元格定義邊框樣式.table-hover類，在tbody元素內的任一行啟用鼠標懸停狀態(tài)8.4按鈕優(yōu)化了按鈕（Button）的格式，提供如下樣式類：.btn類，為按鈕添加基本樣式。.btn-default類，默認/標準按鈕。.btn-primary類，原始按鈕樣式（未被操作）。.btn-success類，表示成功的按鈕。.btn-info類，表示用于彈出信息的按鈕。.btn-warning類，表示需要謹慎操作的按鈕。.btn-danger類，表示危險動作的按鈕.btn-lg、.btn-sm、.btn-xs等類8.5表單通過一些HTML標記和擴展類可以創(chuàng)建出不同樣式的表單（Form）。創(chuàng)建表單的步驟把表單元素放在一個用.form-group類描述的div中，這樣可以獲取最佳的元素間距可以向所有input元素、textarea元素、select元素添加.form-control類創(chuàng)建垂直表單創(chuàng)建內聯表單8.6圖片為圖片添加.img-responsive類可以讓圖片支持響應式布局。下面的類讓圖片呈現不同的形狀.img-rounded類，添加border-radius:6px來獲得圓角圖片.img-circle類，添加border-radius:50%來讓整個圖片變成圓形.img-thumbnail類，添加內邊距（padding）和一個灰色的邊框8.7應用案例利用Bootstrap的全局CSS樣式使用柵格系統(tǒng)、表單、圖片等元素一個響應式表單的效果小結柵格系統(tǒng)主要使用.container類、.container-fluid類、.row類、.col-[screenStyle]-[percent]類來創(chuàng)建頁面布局。標題（Headings）和列表（Lists）兩種頁面版式表格相關類和按鈕相關類表單（Form）部分，主要學習了.form-group類、.form-control類、.form-inline類。Bootstrap的圖片添加.img-responsive類可以讓圖片支持響應式布局。Bootstrap還通過為img元素添加.img-rounded類、.img-circle、.img-thumbnail類，讓圖片呈現不同的形狀。一個響應式表單的綜合示例。。作業(yè)