今天繼續學習了Bootstrap表單與元件的應用。

導航欄

　　1、預設樣式導航欄

　　　　向<nav>標籤新增navbar和navbar-default樣式類。新增role=“navigation”有助於增加可訪問性。向<div>元素新增標題navbar-header樣式類。

　　　　為導航欄新增連結的話，只需要新增nav和navbar-nav樣式類的無序列表即可。

　　2、導航欄中的表單

　　　　為<form>元素新增navbar-from樣式類，以確保表單適當的垂直對齊，並且在較窄的視口中可以摺疊。

　　3、導航欄中的按鈕與文字

　　　　在<p>標籤中使用navbar-text,設定適當的前導和顏色。

　　　　在<button>標籤在使用navbar-btn使按鈕在導航欄上面垂直居中。

　　4、結合圖示的導航連結

　　　　<span class="glyphicon glyphicon-log-in"></span>設定圖示

　　5、對齊方式

　　　　navbar-left navbar-right

　　6、導航欄定位

　　　　navbar-fixed-top固定頁面頂部 navbar-fixed-bottom固定在頁面底部 navbar-static-top跟著頁面一起滾動

　　7、反色導航欄

　　　　navbar-inverse 建立一個黑色背景白色文字的反色導航欄。

導航元素

　　通過<ul>標記中新增nav樣式，在此類基礎上新增nav-tables和nav-pills來改變導航欄樣式

其他導航

　　1、響應式導航

　　　　(1)將導航欄中所有要被摺疊的內容由一個<div>元素包裹，並且給這個<div>元素新增“collapse"和“navbar-collapse"樣式類，然後給這個<div>元素新增一個class或ID值。

　　　　(2)在導航欄標題內新增一個按鈕<button>元素，用於觸發選單項的顯示與隱藏。給這個按鈕應用data-target=".."屬性，屬性值對應上面<div>元素的class或ID值。

　　2、路徑導航

　　　　路徑導航也稱為麵包屑導航，是一種基於網站層次資訊的顯示方式。路徑導航可以顯示釋出日期、類別或標籤，用來表示當前頁面在導航層次結構內的位置，路徑導航是建立　　　　　　 一個帶有“breadcrumb”樣式類的無序列表。

　　3、分頁導航

　　　　在無序列表<ul>上新增pagination樣式類。 翻頁是pager樣式類。

CSS元件 標籤與徽章

　　<spanClass="labellabel-default">預設標籤祥式</span>

　　Botstrap具有多種顏色標籤，用於表達不同的頁面資訊，其說明如下所示:labellabel-default:預設的灰色標籤。

　　　　labellabel-primary:重要，其內容用深藍色顯示，提示使用者注意閱讀。

　　　　labellabel-success:成功，其內容用亮綠色顯示，表示成功或積極的動作。

　　　　labellabel-info:資訊，其內容用淺藍色顯示。

　　　　labellabel-warning:警告，其內容用黃色顯示，提醒使用者應該謹慎操作。

　　　　labellabel-danger:危險，其內容用紅色顯示，提醒使用者危險的操作資訊。

　　其使用格式如下所示:

　　　　<spanclass="labellabel-default">default</span>

　　　　<spanclass="labellabel-primary">primary</span>

　　　　<spanclass="labellabel-success">success</span>

　　　　<spanclass="label label-info">info</spao>

　　　　<spanclass="labellabel-warning">warning</span>

　　　　<span class="labellabel-danger">danger</span>

　　微章與標籤相似，主要區別在於微章的邊角更加圓滑。徽章主要用於突出顯示新的或未讀的項。 如果需要使用微章，只需要把<span class="badge"新增到連結。

　　　　<ahref='"#”>Mailbox<spanclass="badge">50</span></a>

巨幕與頁頭

　　可以在所有的container樣式類外使用jumbotron樣式類

縮圖

　　在影象周圍新增帶有thumbnail類的<a>標籤

警告與進度條

　　alert-success(成功) alert-info(資訊) alert-warning(警告) alert-danger(危險) alert-dismissable(新增一個關閉按鈕)

　　進度條progress-bar樣式類 aria-valuenow(合適) aria-valuemin(最小) aria-valuemax(最大) style="width:40%"

面板

　　panel樣式類 panel-heading頭部 panel-body內容 panel-footer尾部

Bootstrap外掛

　　模態框

　　　　(1)modal:是把<div>的內容設定為模態框最外層容器的樣式類。

　　　　(2)modal-dialog:是把<div>的內容設定為模態框第二層容器的樣式類。

　　　　(3)modal-content:是把<div>的內容設定為模態框第三層容器的樣式類。

　　　　其中:modal-header:是把<div>設定為模態框視窗頭部的樣式類。

　　　　　　modal-body:是把<div>設定為模態框視窗主體內容的樣式類。

　　　　　　modal-footer:是把<div>設定為模態框視窗底部的樣式類。

　　　　(4)aria-hidden="true":用於保持模態框視窗不可見，直到觸發器被觸發為止(例如單擊相關的觸發按鈕)。

　　　　(5)class="close":用於設定模態框視窗關閉按鈕的樣式類。

　　　　(6)data-dismiss="modal":用於關閉模態框視窗。