Hello,Bootstrap!
需要注意的是因爲bootstrap框架依賴於jquery,所以要先導入jquery.js再導入bootstrap.js .另外以前我們導入 js都是在head中導入,現在爲什麼要把它放到body中導入呢? 因爲如果放到head中導入,服務器給客戶端瀏覽器傳輸該頁面的時候從上到下傳輸,這樣會先傳輸js文件,如果用戶的網速比較慢,這樣在傳輸js文件的過程中,body中的內容還沒有傳輸過來,這樣用戶看到的是一片白,影響用戶的體驗,所以我們通常把js文件放到後面加載,這樣用戶可以先看到body中的內容,再下載js來改變頁面的行爲,提高用戶了用戶的體驗.(否則用戶看見一片白直接關閉網頁了) 普通純HTML效果如下 比較全的第一個程序 Bootstrap 101 TemplateHello, world!!!
代碼解釋1： 頁面寬度爲設備寬度,初始縮放比例爲1.0,調整比例對桌面瀏覽器並不起作用,只對移動端瀏覽器生效,比例值越大字越大 該語句是爲了解決移動端瀏覽器顯示問題 不加上面這句話,在web端訪問沒問題,在移動端瀏覽器中顯示效果如下 加上這句話以後效果如下 具體詳見: http://davidbcalhoun.com/2010/viewport-metatag/ 代碼解釋2: 條件註釋 IE9以下 引入這兩個文件,IE9以上(包括IE9)把它當做註釋內容,不引入. 引入這兩個文件爲了讓IE8支持HTML5元素和媒體查詢. 四.基本樣式 1.普通按鈕 (1)按鈕基本樣式 演示代碼: 默認 主要 成功 信息 警告 危險 危險 (2)調節按鈕的大小主要 默認
主要 默認
主要 默認
主要 默認
(3)塊級按鈕 和 默認都是行內元素(內聯元素),而對於移動端來說一個佔據一行的大按鈕再正常不過了 演示代碼: 主要 默認 (4)不可點擊的按鈕 講按鈕的背景色做50%的褪色處理以呈現出無法點擊的效果 主要 默認 2.關閉按鈕 對按鈕元素應用.close類就可以顯示一個關閉按鈕,如圖所示 × aria-hidden=”true” 對屏幕閱讀器來說這個按鈕時隱藏的 屏幕閱讀器,便於殘障人士更方便閱讀網頁內容的工具 關於屏幕閱讀器,可參見 http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/ 3.下拉按鈕 對span元素應用caret類就可以顯示一個下拉符號 下拉菜單 4.圖片
5.表格
演示代碼如下:
bootstrap表格
tr.tableHead {
background-color:#000000;
color:#ffffff;
}
tr.tableHead>th {
text-align: center;
}
6.工具類
(1)浮動工具
左浮動、右浮動: 爲元素添加.pull-left、.pull-right類就可以設置左浮動和有浮動
演示代碼如下:
111
222
內部的源代碼如下:
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
!important; 設置該屬性爲最高優先級,即相當於把該屬性定義在css文件最下面.
(2)顯示/隱藏工具
使用.show類顯示, .hidden類隱藏,這種隱藏是不佔位的,相當於設置了display:none
333
444
(3)居中
使用.center-block 類將元素設爲塊級元素並居中
555
注意必須設置元素的寬度居中才有效
5.對除了屏幕閱讀器的設備隱藏
使用.sr-only類
Skip to main content
五.組件集
1.導航條
Bootstrap的導航主要分爲膠囊式導航、麪包屑導航、頭部導航3類,可以滿足大多數的開發需求.
膠囊式導航
水平膠囊導航
膠囊導航實質是一個無序列表,只需要給ul元素添加.nav和.nav-pills類即可
垂直膠囊導航
如果需要縱向的膠囊導航, 只需要在水平膠囊導航的基礎上加一個.nav-stacked 類即可
麪包屑導航
麪包屑導航一般用於有層次關係的選項，如果想實現麪包屑導航,需要給ul加一個.breadcrumb類即可.
頭部導航
<nav class="navbar navbar-default">
<!—這裏設置網站的鏈接 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">鏈接<span class="sr-only">(current)</span></a></li>
<li><a href="#">鏈接</a></li>
<li class="dropdown">
<a href="#" 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="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">鏈接</a></li>
<li class="dropdown">
<a href="#" 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="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
具體分析頭部導航主要分爲兩層結構,第一層是最外面的
，這一層用於設置導航的基本樣式將.navbar-default類替換爲 .navbar-inverse類,則顯示爲反色的導航(黑底白字)
第二層有兩個並列的元素:
內部用於設置標題內容. 內部則用於編寫具體的導航鏈接、搜索表單、下拉菜單等具體的導航內容。 Bootstrap提供了在小窗口下導航 收起/展開的功能 同學們可以把上面的窗口拖小的試一下 添加.navbar-fixed-top可以讓導航條固定在頂部,不會隨頁面滾動而消失。爲了防止固定在頂部後遮擋正常內容,需要設置:body{padding-top:50px;} 其中具體的值取決於導航條的高度 加了body的補白不會遮擋正常內容,不加會遮擋 2.下拉菜單 演示代碼：
下拉菜單
按鈕和下拉選擇都要包裹在
….
內 按鈕必須添加 data-toggle=”dropdown” 觸發器
放置下拉選項的無須列表需要添加 .dropdown-menu 類
添加一個空的
3.按鈕組
上面一組是放到按鈕組中的效果,下面一組是沒有放到按鈕組的效果
按鈕組用於把一組按鈕放在同一行裏，按鈕之間沒有間隙.用法很簡單,只需要將一組按鈕
放在
..
中即可.
演示代碼:
Left
Middle
Right
(1)垂直排列
(2)兩端對齊(按鈕組拉伸到100%寬度)
演示代碼:
注意:兩端對齊的用法只適用於元素,因爲按鈕元素不能應用這些樣式並將其所包含的內容兩端對齊.
(3)嵌套,可以在 按鈕組 內繼續 嵌套 按鈕組
演示代碼:
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">選項一</a></li>
<li><a href="#">選項二</a></li>
<li><a href="#">選項三</a></li>
<li class="divider"></li>
<li><a href="#">選項四</a></li>
</ul>
</div>
</div>
4.input控件組
多個input控件放到一組中配合使用,下面演示了幾種常見的組合，最常見的input控件組
非搜索框莫屬.
(1)搜索框
實質就是 文本框+按鈕
演示代碼:
<div class="input-group" style="width:500px;margin:0px auto;">
<input type="text" class="form-control"/>
如果需要帶下拉菜單的按鈕,只需要將按鈕換成下拉菜單即可。
(2)搜索框+文字
搜索框後不是按鈕,不可點擊
演示代碼:
輸入完成後回車
5.列表組
上圖是未經美化的列表,下圖是經過美化的列表
演示代碼如下:
注意:列表組中使用有序列表時不會顯示序號.
列表組不僅可以應用於列表,還可以將其他需要列表的元素展現爲列表的樣子.例如,
左圖爲不加樣式的,右圖爲加上列表組樣式的.
演示代碼:
爲列表組添加徽章也十分容易,Bootstrap會自動將徽章放置在右邊
演示代碼:
6.分頁 幾乎所有的列表頁面都需要分頁, Bootstrap提供了一個較爲美觀的分頁樣式,如下圖所示： 實現上述效果比較簡單,只需給無序列表的ul元素添加pagination類即可 演示代碼： 可以通過添加 .pagination-lg類或.pagination-sm類來獲得比標準尺寸更大或更小的分頁,例如: