2019-06-03

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)格今豆,在代碼中碰到小于號(<)要使用硬編碼“&lt;”來替代嫌拣,大于號(>)使用“&gt;”來替代。

[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)容,按鈕等淮逻。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末琼懊,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子爬早,更是在濱河造成了極大的恐慌哼丈,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件筛严,死亡現(xiàn)場離奇詭異醉旦,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)桨啃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,347評論 3 385
  • 文/潘曉璐 我一進(jìn)店門车胡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人照瘾,你說我怎么就攤上這事匈棘。” “怎么了析命?”我有些...
    開封第一講書人閱讀 157,435評論 0 348
  • 文/不壞的土叔 我叫張陵主卫,是天一觀的道長。 經(jīng)常有香客問我鹃愤,道長簇搅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,509評論 1 284
  • 正文 為了忘掉前任软吐,我火速辦了婚禮馍资,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己鸟蟹,他們只是感情好乌妙,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,611評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著建钥,像睡著了一般藤韵。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上熊经,一...
    開封第一講書人閱讀 49,837評論 1 290
  • 那天泽艘,我揣著相機(jī)與錄音,去河邊找鬼镐依。 笑死匹涮,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的槐壳。 我是一名探鬼主播然低,決...
    沈念sama閱讀 38,987評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼务唐!你這毒婦竟也來了雳攘?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,730評論 0 267
  • 序言:老撾萬榮一對情侶失蹤枫笛,失蹤者是張志新(化名)和其女友劉穎吨灭,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體刑巧,經(jīng)...
    沈念sama閱讀 44,194評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡喧兄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,525評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了啊楚。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片吠冤。...
    茶點(diǎn)故事閱讀 38,664評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖特幔,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情闸昨,我是刑警寧澤蚯斯,帶...
    沈念sama閱讀 34,334評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站饵较,受9級特大地震影響拍嵌,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜循诉,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,944評論 3 313
  • 文/蒙蒙 一横辆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧茄猫,春花似錦狈蚤、人聲如沸困肩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,764評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽锌畸。三九已至,卻和暖如春靖避,著一層夾襖步出監(jiān)牢的瞬間潭枣,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,997評論 1 266
  • 我被黑心中介騙來泰國打工幻捏, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留盆犁,地道東北人。 一個月前我還...
    沈念sama閱讀 46,389評論 2 360
  • 正文 我出身青樓篡九,卻偏偏與公主長得像谐岁,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子瓮下,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,554評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5翰铡? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,449評論 1 45
  • IO流技術(shù): 目的:將數(shù)據(jù)源讀取到目的地 原理:從中搭建管道讽坏,將數(shù)據(jù)源數(shù)據(jù)通過管道輸送給目的地锭魔。 四大抽象類: 輸...
    袁小勝閱讀 68評論 0 0
  • 完善clearfix 子元素和父元素相鄰的垂直外邊距會發(fā)生重疊庆锦,子元素的外邊距會傳遞給父元素 使用空的table標(biāo)...
    々_18C閱讀 334評論 1 0
  • 一、Git Svn: 1.沖突怎么解決轧葛? Git解決沖突: 1搂抒、拉去最新代碼,將更新的工程文件內(nèi)容尿扯,替換到本地的工...
    安夢_4de8閱讀 380評論 0 0
  • 2017-05-24 星期三 天氣晴 寶貝年齡:7周歲2個月和1周3個月 學(xué)經(jīng)周期:3年半 學(xué)經(jīng)人員:琦媽衷笋,琦琦芳杏,...
    廈門琦心媽閱讀 200評論 0 2