Bootstrap
[if !supportLists]一婶博、????? [endif]布局容器
Bootstrap 需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個 .container 容器纽匙。我們
提供了兩個作此用處的類。注意,由于padding 等屬性的原因欧啤,這兩種容器
類不能互相嵌套。
<div class="container">
...
</div>
.container類用于固定寬度并支持響應(yīng)式布局的容器状婶;
<div
class="container-fluid">
...
</div>
.container-fluid 類用于 100% 寬度鸭巴,占據(jù)全部視口(viewport)的容器
[if !supportLists]二、????? [endif]柵格網(wǎng)格系統(tǒng)(Grid System)
Bootstrap 提供了一套響應(yīng)式巡通、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)尘执,隨著屏幕
或視口(viewport)尺寸的增加,系統(tǒng)會自動分為最多 12 列扁达。
注意: 網(wǎng)格系統(tǒng)必須使用到 css
container正卧、row 、xs (xsmall
phones), sm (small tablets), md
(middle desktops) lg (larger desktops) 即: 超小屏(自動)跪解,小屏
(750px)炉旷,中屏(970px)和大屏(1170px)
數(shù)據(jù)行(.row)必須包含在容器(.container)中签孔,以便為其賦予合適的對
齊方式和內(nèi)距(padding)。
在行(.row)中可以添加列(.column), 只有列(column)才可以作為行容
器(.row)的直接子元素窘行,但列數(shù)之和不能超過平分的總列數(shù)饥追,比如 12。如果大于 12,則自動換到下一行罐盔。
<div
class="container">
<div
class="row">
<div
class="col-md-4">4 列</div>
<div
class="col-md-8">8 列</div>
</div>
</div>
[if !supportLists]三但绕、????? [endif]列組合
列組合簡單理解就是更改數(shù)字來合并列(原則:列總和數(shù)不能超 12,大于
12,則自動換到下一行惶看。)捏顺,有點(diǎn)類似于表格的 colspan 屬性。
<div class="container">
<div class="row">
<div class="col-md-4">4 列</div>
<div class="col-md-8">8 列</div>
</div>
<div class="row">
<div class="col-md-2">2 列</div>
<div class="col-md-10">10 列</div>
</div>
</div>
[if !supportLists]四纬黎、????? [endif]列偏移幅骄、列排序
使用列偏移也非常簡單,只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要偏移的列組合數(shù))本今,那么具有這個類名的列就會向右偏移拆座。例如,你在列元素上添加“col-md-offset-8”冠息,表示該列向右移動 8 個列的寬度(要保證列與偏移列的總數(shù)不超過 12挪凑,不然會致列斷行|換行顯示)。
列排序:通過添加類名”col-md-push-*”和“col-md-pull-*” (其中星號代表移動的列組合數(shù))逛艰。往前 pull躏碳,往后 push。
[if !supportLists]五瓮孙、????? [endif]列嵌套
Bootstrap 框架的網(wǎng)格系統(tǒng)還支持列的嵌套唐断。你可以在一個列中添加一個或者多個行(row)容器,然后在這個行容器中插入列.
[if !supportLists]六杭抠、????? [endif]排版
[if !supportLists]1脸甘、????????[endif]標(biāo)題
定義標(biāo)題都是使用標(biāo)簽<h1>到<h6>,只不過Bootstrap覆蓋了其默認(rèn)的樣式偏灿,使其在瀏覽器下顯示的效果一樣丹诀。
后面可以緊跟一行小的副標(biāo)題<small></small>或使用.small
<h1>h1. Bootstrap
heading<small>副標(biāo)題</small></h1>
<div class="h1">Bootstrap 標(biāo)題 1<span class="small">副標(biāo)題</span></div>
[if !supportLists]2、????????[endif]段落
段落是排版中一個重要的元素之一翁垂,通過.lead來突出強(qiáng)調(diào)內(nèi)容铆遭,其作用就是增大文本字號,加粗文本沿猜,而且對行高和 margin 也做相應(yīng)的處理:<small>:小號字
<b><strong>:加粗
<i><em>:斜體枚荣。
<p
class="lead"><small>以后的</small><b>你</b>會<i>感謝</i>現(xiàn)在<em>努力</em>的<strong>你</strong></p>
[if !supportLists]3、????????[endif]引用
<blockquote>:標(biāo)簽定義摘自另一個源的塊引用啼肩,
使用.blockquote-reverse橄妆,實(shí)現(xiàn)右對齊衙伶。
<footer>:腳注
<cite>:表示對某個參考文獻(xiàn)的引用
案例:
<blockquote
class="blockquote-reverse">
好好學(xué)習(xí) Java!
<footer>本文出自大師之手</footer>
<cite>thinking in java</cite>
</blockquote>
[if !supportLists]4害碾、????????[endif]強(qiáng)調(diào)
定義了一套強(qiáng)調(diào)類名矢劲,這些強(qiáng)調(diào)類都是通過顏色來表示強(qiáng)
調(diào),具本說明如下:
.text-muted:提示慌随,使用淺灰色(#999)
.text-primary:主要芬沉,使用藍(lán)色(#428bca)
.text-success:成功,使用淺綠色(#3c763d)
.text-info:通知信息阁猜,使用淺藍(lán)色(#31708f)
.text-warning:警告丸逸,使用黃色(#8a6d3b)
.text-danger:危險,使用褐色(#a94442)
[if !supportLists]5剃袍、????????[endif]文本對齊
為了簡化操作椭员,方便使用,Bootstrap通過定義四個類名來控制文本的對齊風(fēng)格:.text-left:左對齊 .text-center:居中對齊 .text-right:右對齊 .text-justify:兩端對齊笛园。
[if !supportLists]6、????????[endif]列表
在 HTML 文檔中侍芝,列表結(jié)構(gòu)主要有三種:
無序列表(<ul><li>…</li></ul>)研铆、
有序列表(<ol><li>…</li></ol>)、
定義列表(<dl><dt>…</dt><dd>…</dd></dl>)州叠。
bootstrap 根據(jù)平時的使用情形提供了六種形式的列表:( 普通列表棵红、有序列表、去點(diǎn)列表咧栗、內(nèi)聯(lián)列表逆甜、描述列表、水平描述列表)致板。在樣式方面 Bootstrap只是在原有的基礎(chǔ)上做了一些細(xì)微的優(yōu)化(margin 調(diào)整),其他差別不大交煞,加入了一些樣式。
[if !supportLists]1)????????[endif]去點(diǎn)列表:class="list-unstyled"
[if !supportLists]2)????????[endif]內(nèi)聯(lián)列表:class=” list-inline”
[if !supportLists]3)????????[endif]定義列表:在原有的基礎(chǔ)加入了一些樣式斟或,使用樣式 class=“.dl-horizontal”制作水平定義列表 : 當(dāng)標(biāo)題寬度超過160px時素征,將會顯示三個省略號。
[if !supportLists]7萝挤、????????[endif]代碼
一般在個人博客上使用的較為頻繁御毅,用于顯示代碼的風(fēng)格。
[if !supportLists]1)????????[endif]使用<code></code>來顯示單行內(nèi)聯(lián)代碼
[if !supportLists]2)????????[endif]使用<pre></pre>來顯示多行塊代碼怜珍,樣式:pre-scrollable(height,max-height高度固定端蛆,為340px,超過存在滾動條)
[if !supportLists]3)????????[endif]使用<kbd></kbd>來顯示用戶輸入代碼酥泛,如快捷鍵
不管使用哪種代碼風(fēng)格今豆,在代碼中碰到小于號(<)要使用硬編碼“<”來替代嫌拣,大于號(>)使用“>”來替代。
[if !supportLists]8晚凿、????????[endif]表格
Bootstrap為表格提供了1種基礎(chǔ)樣式和4種附加樣式以及1個支持響應(yīng)式的表格亭罪。在使用 Bootstrap 的表格過程中,只需要添加對應(yīng)的類名就可以得到不同的表格風(fēng)格:
1) .table-striped:斑馬線表格
2) .table-bordered:帶邊框的表格
3) .table-hover:鼠標(biāo)懸停高亮的表格
4). table-condensed:緊湊型表格歼秽,單元格沒內(nèi)距或者內(nèi)距較其他表格的內(nèi)距更小
<tr>提供了五種不同的類名应役,每種類名控制了行的不同背景顏色
.active
.success
.info
.warning
.danger
[if !supportLists]七、????? [endif]表單
表單中常見的元素主要包括:文本輸入框燥筷、下拉選擇框箩祥、單選按鈕、復(fù)選按鈕肆氓、文本域和按鈕等袍祖。
[if !supportLists]1、????????[endif]表單控件
.form-control .input-lg(較大) .input-sm(較行痪尽)
[if !supportLists]1)???[endif]輸入框
.form-control
[if !supportLists]2)???[endif]下拉選擇框select
多行選擇設(shè)置:multiple="multiple"
[if !supportLists]3)? [endif]文本域textarea
<textarea
class="form-control" rows="3"></textarea>
5)復(fù)選框checkbox
.checkbox蕉陋,水平顯示:.checkbox-inline
6)單選按鈕
.radio,水平顯示:.radio-inline
7)按鈕
使用button實(shí)現(xiàn)
基礎(chǔ)樣式btn
附加樣式:btn-primary
btn-info btn-success btn-warning
btn-danger btn-link btn-default
?????????? 多標(biāo)簽支持:使用a??? div等制作按鈕
<a href="##" class="btn btn-info">a 標(biāo)簽按鈕</a>
<span class="btn btn-success">span 標(biāo)簽按鈕</span>
<div class="btn btn-warning">div 標(biāo)簽按鈕</div>
按鈕大小
使用 .btn-lg拨扶、.btn-sm 或 .btn-xs 就可以獲得不同尺寸的按鈕
按鈕禁用
方法 1:在標(biāo)簽中添加 disabled 屬性
方法 2:在元素標(biāo)簽中添加類名“disabled”
在 class 屬性中添加 disabled 只是樣式上禁用了凳鬓,并不是真正的禁用
了此按鈕!
[if !supportLists]2患民、????????[endif]表單案例
[if !supportLists]1)????????[endif]水平表單
同一行顯示form-horizontal
配合 Bootstrap 框架的網(wǎng)格系統(tǒng)
[if !supportLists]2)????????[endif]內(nèi)聯(lián)表單:將表單的控件都在一行內(nèi)顯示 form-inline
注意 label 不會顯示缩举,存在的意義: 如果沒有為輸入控件設(shè)置 label 標(biāo)簽,屏幕閱讀器將無法正確識別匹颤。這也是 Bootstrap 框架另一個優(yōu)點(diǎn)之處仅孩,為殘障人員進(jìn)行了一定的考慮。
[if !supportLists]八印蓖、????? [endif]下拉菜單
<!-- 如果要使用 Bootstrap 的 js 插件辽慕,必須先調(diào)入 jQuery
-->
<script
src="js/jquery-2.1.4.min.js"></script>
<!-- 包括所有 bootstrap 的 js 插件或者可以根據(jù)需要使用的 js 插件調(diào)用 -->
<script
src="js/bootstrap.min.js"></script>
要點(diǎn):
1、使用一個類名為 dropdown 或 btn-group 的 div 包裹整個下拉框:
<div
class="dropdown"></div>
2赦肃、默認(rèn)向下 dropdown鼻百,向上彈起加入 . dropup 即可
3、使用 button 作為父菜單摆尝,使用類名: dropdown-toggle 和自定義 data-toggle 屬性
data-toggle="dropdown">
4温艇、在 button 中使用 font 制作下拉箭頭
<span
class="caret"></span>
5、下拉菜單項(xiàng)使用一個 ul 列表堕汞,并且定義一個類名為“dropdown-menu
6勺爱、分組分割線: <li>添加類名“divider”來實(shí)現(xiàn)添加下拉分隔線的功能
7、分組標(biāo)題: li 添加類名“dropdown-header”來實(shí)現(xiàn)分組的功能
8讯检、對齊方式:
1)琐鲁、dropdown-menu-left 左對齊默認(rèn)樣式
2)卫旱、dropdown-menu-right? 右對齊
8、激活狀態(tài)(.active)和禁用狀態(tài)(.disabled)
[if !supportLists]九围段、????? [endif]按鈕組
同上引入 js顾翼,需要引入 bootstrap 的 fonts 文件夾。
要點(diǎn):
1奈泪、使用一個類名為 btn-group 的 div 包裹整個按鈕組
2适贸、使用標(biāo)簽 button 、a涝桅、span 制作按鈕拜姿,需要指定類名.btn
3、使用 span 制作圖標(biāo)
4冯遂、大小分類:? btn-group-lgbtn-group btn-group-sm btn-group-xs
5蕊肥、等分按鈕: 自適應(yīng)分組按鈕 btn-group-justified
6、默認(rèn)為水平蛤肌,使用 btn-group-vertical 制作垂直按鈕組
7壁却、按鈕工具欄: 在外層套用 .btn-toolbar 即可
8、注意:btn-group-lg 僅僅是放大按鈕裸准,不能將所有的按鈕作為連接在一起的按鈕組
[if !supportLists]十儒洛、????? [endif]導(dǎo)航
使用下拉與按鈕組合可以制作導(dǎo)航
要點(diǎn):
1、基本樣式: .nav 與“nav-tabs”狼速、“nav-pills”組合制作導(dǎo)航
2、分類:
1)卦停、標(biāo)簽型 (nav-tabs)導(dǎo)航
2)向胡、膠囊形(nav-pills)導(dǎo)航
3)、堆棧(nav-stacked)導(dǎo)航
4)惊完、自適應(yīng)(nav-justified)導(dǎo)航
5)僵芹、面包屑式(breadcrumb)導(dǎo)航,單獨(dú)使用樣式小槐,不與 nav 一起使用,直接加入到 ol拇派、ul 中即可,一般用于導(dǎo)航凿跳,主要是起的作用是告訴用戶現(xiàn)在所處頁面的位置(當(dāng)前位置)
3件豌、狀態(tài):
1)、選中狀態(tài) active 樣式
2)控嗜、禁用狀態(tài): disable
4茧彤、二級菜單
[if !supportLists]十一、 [endif]分頁導(dǎo)航
分頁隨處可見疆栏,分為頁碼導(dǎo)航和翻頁導(dǎo)航
頁碼導(dǎo)航:ul 標(biāo)簽上加 pagination [pagination-lg | pagination-sm]
翻頁導(dǎo)航: ul 標(biāo)簽上加 pager
[if !supportLists]十二曾掂、 [endif]縮略圖
縮略圖在電商類的網(wǎng)站很常見惫谤,最常用的地方就是產(chǎn)品列表頁面≈橄矗縮略圖的實(shí)現(xiàn)是配合網(wǎng)格系統(tǒng)一起使用溜歪。同時還可以讓縮略圖配合標(biāo)題、描述內(nèi)容许蓖,按鈕等蝴猪。
[if !supportLists]十三、 [endif]面板
縮略圖在電商類的網(wǎng)站很常見蛔糯,最常用的地方就是產(chǎn)品列表頁面拯腮。縮略圖的實(shí)現(xiàn)是配合網(wǎng)格系統(tǒng)一起使用蚁飒。同時還可以讓縮略圖配合標(biāo)題动壤、描述內(nèi)容,按鈕等淮逻。