Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)任務(wù)式教程課件 任務(wù)4 基本排版與工具類(lèi)應(yīng)用_第1頁(yè)
Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)任務(wù)式教程課件 任務(wù)4 基本排版與工具類(lèi)應(yīng)用_第2頁(yè)
Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)任務(wù)式教程課件 任務(wù)4 基本排版與工具類(lèi)應(yīng)用_第3頁(yè)
Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)任務(wù)式教程課件 任務(wù)4 基本排版與工具類(lèi)應(yīng)用_第4頁(yè)
Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)任務(wù)式教程課件 任務(wù)4 基本排版與工具類(lèi)應(yīng)用_第5頁(yè)
已閱讀5頁(yè)，還剩35頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

任務(wù)4基本排版與工具類(lèi)應(yīng)用Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)Bootstrap基礎(chǔ)排版1

排版主要是針對(duì)HTML元素進(jìn)行樣式設(shè)置及布局定位，排版在前端開(kāi)發(fā)十分重要，Bootstrap提供了一套CSS樣式，可以方便快速地渲染HTML元素，讓頁(yè)面排版更加便捷。Bootstrap基礎(chǔ)排版

Bootstrap中可以使用HTML中<h1>~<h6>這六個(gè)標(biāo)題標(biāo)簽，并賦予了它們半粗體屬性及由大到小的字體font-size屬性。Bootstrap基礎(chǔ)布局--基礎(chǔ)排版標(biāo)

題h1~h6標(biāo)簽<h1>中國(guó)十大博物館（h1標(biāo)題）</h1><h2>中國(guó)十大博物館（h2標(biāo)題）</h2><h3>中國(guó)十大博物館（h3標(biāo)題）</h3><h4>中國(guó)十大博物館（h4標(biāo)題）</h4><h5>中國(guó)十大博物館（h5標(biāo)題）</h5><h6>中國(guó)十大博物館（h6標(biāo)題）</h6>【實(shí)例4-1】標(biāo)題的使用，代碼如下運(yùn)行【實(shí)例4-1】代碼，頁(yè)面效果如圖所示。圖

h1~h6標(biāo)簽

Bootstrap除了基礎(chǔ)的<h1>~<h6>這六個(gè)標(biāo)題標(biāo)簽，還提供了.h1~.h6六個(gè)樣式類(lèi)，使用它們可以給內(nèi)聯(lián)屬性的文本賦予不同級(jí)別的標(biāo)題樣式。Bootstrap基礎(chǔ)布局--基礎(chǔ)排版使用樣式類(lèi).h1~.h6<spanclass="h1">中國(guó)十大博物館（h1標(biāo)題）</span><spanclass="h2">中國(guó)十大博物館（h2標(biāo)題）</span><spanclass="h3">中國(guó)十大博物館（h3標(biāo)題）</span><spanclass="h4">中國(guó)十大博物館（h4標(biāo)題）</span><spanclass="h5">中國(guó)十大博物館（h5標(biāo)題）</span><spanclass="h6">中國(guó)十大博物館（h6標(biāo)題）</span>【實(shí)例4-2】標(biāo)題的使用，代碼如下運(yùn)行【實(shí)例4-2】代碼，頁(yè)面效果如圖所示圖

使用.h1~.h6樣式類(lèi)

Bootstrap基礎(chǔ)布局--基礎(chǔ)排版Display標(biāo)題類(lèi)Bootstrap還提供了.display-1、.display-2、.display-3、.display類(lèi)來(lái)控制標(biāo)題的樣式。Display標(biāo)題可以輸出更大更粗的字體樣式。小標(biāo)題以.display-1類(lèi)為例，分辨率大于等于1200像素時(shí)，文字大小為5rem，當(dāng)分辨率小于1200像素時(shí)，文字大小設(shè)置為：font-size:calc(1.625rem+4.5vw)。

Bootstrap將頁(yè)面body中的全局字體大小font-size設(shè)置為16px，行高line-height設(shè)置為1.5。<body>和<p>元素都被賦予了這些屬性。另外<p>元素還被設(shè)置了等于1rem行高(16px)的底部外邊距（margin-bottom）。Bootstrap基礎(chǔ)布局--基礎(chǔ)排版段落1.基本段落2.中心內(nèi)容Bootstrap中為了突出多個(gè)段落中的某一個(gè)段落，也就是強(qiáng)調(diào)文本，則可以添加class="lead"，這將得到更大更粗、行高更高的文本。.lead{font-size:1.25rem;font-weight:300;}

Bootstrap基礎(chǔ)布局--基礎(chǔ)排版文本樣式1.內(nèi)聯(lián)文字元素HTML網(wǎng)頁(yè)中，為了讓文字富有變化，或者為了著重強(qiáng)調(diào)某一部分，例如為文字設(shè)置粗體、斜體或下劃線(xiàn)效果，為此Bootstrap針對(duì)文本格式化標(biāo)簽的樣式進(jìn)行了重新定義，表列出了常用的格式標(biāo)簽。標(biāo)簽名稱(chēng)說(shuō)明標(biāo)簽名稱(chēng)說(shuō)明<small>…</small>字體大小是父元素的0.85<strong>…</strong>表示強(qiáng)調(diào)，一般為粗體<mark>…</mark>用于突出顯示高亮的文本<em>…</em>表示強(qiáng)調(diào)，一般為斜體<del>…</del>刪除線(xiàn)<b>…</b>粗體，表示高亮單詞<s>…</s>對(duì)于沒(méi)有用的、不相關(guān)的內(nèi)容<i>…</i>斜體，表示發(fā)言、技術(shù)詞匯<ins>…</ins>額外插入的文本<sup>…</sup>上標(biāo)<u>…</u>專(zhuān)有名詞（人名、地名、朝代等）<sub>…</sub>下標(biāo)

Bootstrap基礎(chǔ)布局--基礎(chǔ)排版1.文本的基本樣式與顏色Bootstrap針對(duì)文本的對(duì)齊提供了.text-start、.text-end、.text-center、.text-nowrap等文本對(duì)齊類(lèi)，表列出了常用的格式標(biāo)簽。類(lèi)說(shuō)明類(lèi)說(shuō)明.text-start向左對(duì)齊文本.text-primary表示重要強(qiáng)調(diào)色.text-end向右對(duì)齊文本.text-success表示成功強(qiáng)調(diào)色.text-center居中對(duì)齊文本.text-info表示信息強(qiáng)調(diào)色.text-nowrap內(nèi)容不換行.text-warning表示警告強(qiáng)調(diào)色.text-body默認(rèn)顏色，為黑色.text-danger表示危險(xiǎn)強(qiáng)調(diào)色.text-dark表示深灰色文字.text-secondary表示次要的.text-muted表示內(nèi)容減弱.text-light表示淺灰色文本

Bootstrap基礎(chǔ)布局--基礎(chǔ)排版2.文本的對(duì)齊方式與強(qiáng)調(diào)Bootstrap針對(duì)文本的對(duì)齊提供了.text-left、.text-right、.text-center、.text-nowrap等文本對(duì)齊類(lèi)，表4-5列出了常用的格式標(biāo)簽。類(lèi)說(shuō)明類(lèi)說(shuō)明.text-left向左對(duì)齊文本.text-primary表示重要強(qiáng)調(diào)色.text-right向右對(duì)齊文本.text-success表示成功強(qiáng)調(diào)色.text-center居中對(duì)齊文本.text-info表示信息強(qiáng)調(diào)色.text-nowrap內(nèi)容不換行.text-warning表示警告強(qiáng)調(diào)色.text-muted內(nèi)容減弱.text-danger表示危險(xiǎn)強(qiáng)調(diào)色表4-5常用文本對(duì)齊與強(qiáng)調(diào)樣式

Bootstrap基礎(chǔ)布局--基礎(chǔ)排版2.文本的對(duì)齊方式與強(qiáng)調(diào)圖

常用文本對(duì)齊與強(qiáng)調(diào)樣式演示

Bootstrap基礎(chǔ)布局--基礎(chǔ)排版3.

字體大小演示Bootstrap中的字體大小與HTML的標(biāo)題元素相匹配，因此隨著數(shù)量的增加，它們的大小也會(huì)減小。共定義了6個(gè)字體大小類(lèi).fs-1、.fs-2、.fs-3、.fs-4、.fs-5、.fs-6。以.fs-1類(lèi)為例。.fs-1{font-size:calc(1.375rem+1.5vw);}@media(min-width:1200px){.fs-1{font-size:2.5rem!important;}}

Bootstrap基礎(chǔ)布局--基礎(chǔ)排版4.

字母大小寫(xiě)與縮寫(xiě)演示Bootstrap提供了.text-lowercase（將大寫(xiě)轉(zhuǎn)換為小寫(xiě)）、.text-uppercase（將小寫(xiě)轉(zhuǎn)換為大寫(xiě)）、.text-capitalize（將首字母轉(zhuǎn)換為大寫(xiě)）幾個(gè)類(lèi)方便地改變文本的字母大小寫(xiě)。Bootstrap定義<abbr>元素的樣式為顯示在文本底部的一條虛線(xiàn)邊框，當(dāng)鼠標(biāo)懸停在上面時(shí)會(huì)顯示完整的文本，實(shí)現(xiàn)方式是為<abbr>的title屬性添加了文本說(shuō)明。<pclass="text-lowercase">將大寫(xiě)轉(zhuǎn)換為小寫(xiě):博物館（MUSEUM）</p><pclass="text-uppercase">將小寫(xiě)轉(zhuǎn)換為大寫(xiě):博物館（Museum）</p><pclass="text-capitalize">將首字母轉(zhuǎn)換為大寫(xiě):博物館（museum）</p><p>層疊樣式表<abbrtitle="CascadingStyleSheets">CSS</abbr></p>類(lèi)說(shuō)明類(lèi)說(shuō)明.fst-italic斜體.fw-normal正常的文本.fst-normal正常的文本.lh-1行高為1.fw-lighter細(xì)體文本（相對(duì)于父元素）.lh-sm行高為1.25.fw-light細(xì)體文本.lh-base行高為1.5.fw-bold粗體正文.lh-lg行高為2.fw-bolder粗體正文（相對(duì)于父元素）

Bootstrap基礎(chǔ)布局--基礎(chǔ)排版5.

字體斜體、粗細(xì)與行高演示

使用這些實(shí)用程序可以快速更改文本的font-weight或font-style。font-style實(shí)用程序縮寫(xiě)為.fst-*，font-weight實(shí)用程序縮寫(xiě)為.fw-*。字體粗細(xì)和斜體類(lèi)與說(shuō)明如表4-3所示列表2

Bootstrap基礎(chǔ)布局—列表有序列表和無(wú)序列表有序列表是指以數(shù)字或其他有序字符開(kāi)頭的列表。無(wú)序列表是指沒(méi)有特定順序的列表，是以傳統(tǒng)風(fēng)格的著重號(hào)開(kāi)頭的列表。演示

Bootstrap基礎(chǔ)布局--列表如果不想給有序或無(wú)序列表顯示這些著重號(hào)，可以使用

.list-unstyled

類(lèi)來(lái)移除樣式。還可以通過(guò)使用

.list-inline類(lèi)把所有的列表項(xiàng)放在同一行中。內(nèi)聯(lián)列表演示

Bootstrap基礎(chǔ)布局--列表定義列表

定義列表（definitionlist）是指帶有描述的短語(yǔ)列表。定義列表多用于對(duì)術(shù)語(yǔ)或名詞的描述，同時(shí)，定義列表項(xiàng)前面無(wú)任何項(xiàng)目符號(hào)。<dl>標(biāo)簽用于結(jié)合

<dt>

（定義列表中的項(xiàng)目）和

<dd>

（描述列表中的項(xiàng)目）。Bootstrap還可以使用.dl-horizontal類(lèi)讓

<dl>

內(nèi)的短語(yǔ)及其描述排在一行。<h2>一個(gè)定義列表：</h2><dl><dt>中國(guó)畫(huà)</dt><dd>漢族傳統(tǒng)繪畫(huà)形式是用毛筆蘸水、墨、彩作畫(huà)于絹或紙上，這種畫(huà)種被稱(chēng)為“中國(guó)畫(huà)”，簡(jiǎn)稱(chēng)“國(guó)畫(huà)”。</dd></dl><h2>一個(gè)水平定義列表：</h2><dlclass="dl-horizontal"><dt>中國(guó)書(shū)法</dt><dd>中國(guó)書(shū)法是一門(mén)古老的漢字的書(shū)寫(xiě)藝術(shù)，從甲骨文、石鼓文、金文（鐘鼎文）演變而為大篆、小篆、隸書(shū)，至定型于東漢、魏、晉的草書(shū)、楷書(shū)、行書(shū)等，書(shū)法一直散發(fā)著藝術(shù)的魅力。</dd></dl>有序列表和無(wú)序列表的使用演示工具類(lèi)3

背景色Bootstrap可以使用任意背景色設(shè)置元素的背景。這些樣式也可以應(yīng)用于鏈接，并會(huì)像默認(rèn)鏈接樣式一樣在懸停時(shí)變暗。Bootstrap基礎(chǔ)布局—背景色演示

顯示（Display)Bootstrap基礎(chǔ)布局使用響應(yīng)display實(shí)用程序類(lèi)更改display屬性的值。Display應(yīng)用能覆蓋超小設(shè)備、平板、桌面顯示器、大桌面顯示器、特大桌面顯示器、超大桌面顯示器各個(gè)斷點(diǎn)，定義如下。display實(shí)用程序類(lèi)使用以下格式命名。.d-{value}

用于

xs；.d-{breakpoint}-{value}

用于

sm,

md,

lg,

xl,和

xxl。為了高效開(kāi)發(fā)，使用響應(yīng)顯示類(lèi)按設(shè)備顯示和隱藏元素，根據(jù)每個(gè)屏幕大小相應(yīng)地隱藏元素，相對(duì)應(yīng)的類(lèi)的作用與含義如表所示。類(lèi)含義類(lèi)含義.d-none所有屏幕上隱藏.d-block所有屏幕上顯示.d-none.d-sm-block僅在超小屏幕上隱藏.d-block.d-sm-none僅在超小屏幕上顯示.d-sm-none.d-md-block僅在小屏幕上隱藏.d-none.d-sm-block.d-md-none僅在小屏幕上顯示.d-md-none.d-lg-block僅在平板上隱藏.d-none.d-md-block.d-lg-none僅在平板上顯示.d-lg-none.d-xl-block僅在桌面顯示器上隱藏.d-none.d-lg-block.d-xl-none僅在桌面顯示器上顯示.d-xl-none僅在特大桌面顯示器上隱藏.d-none.d-xl-block.d-xxl-none僅在特大桌面顯示器上顯示.d-xxl-none僅在超大桌面顯示器上隱藏.d-none.d-xxl-block僅在超大桌面顯示器上顯示

Bootstrap基礎(chǔ)布局<divclass="container"> <pclass="d-md-noned-lg-blockbg-warning">故宮博物院</p> <pclass="d-noned-md-blockd-lg-nonebg-info">中國(guó)國(guó)家博物館</p></div>display實(shí)用程序類(lèi)的使用分辨率大于等于992像素的效果分辨率大于等于768像素小于992像素的效果分辨率小于768像素的效果演示

使用邊框工具可以快速設(shè)置元素的邊框和邊框半徑的樣式。非常適合圖像、按鈕等元素。使用邊框工具添加或刪除元素的邊框。從所有邊框中選擇或一次選擇一個(gè)邊框。Border工具類(lèi)與含義如表4-5所示。邊框Bootstrap基礎(chǔ)布局—邊框類(lèi)含義類(lèi)含義.border四周應(yīng)用1像素淺灰色實(shí)線(xiàn)邊框.border-primary藍(lán)色邊框.border-top頂部應(yīng)用1像素淺灰色實(shí)線(xiàn)邊框.border-secondary灰色邊框.border-end右側(cè)應(yīng)用1像素淺灰色實(shí)線(xiàn)邊框.border-success藍(lán)色邊框.border-bottom底部應(yīng)用1像素淺灰色實(shí)線(xiàn)邊框.border-danger紅色邊框.border-start左側(cè)應(yīng)用1像素淺灰色實(shí)線(xiàn)邊框.border-warning橘黃色邊框.border-0刪除四周邊框.border-info淺藍(lán)色邊框.border-top-0刪除頂部邊框.border-light亮灰色邊框.border-end-0刪除右側(cè)邊框.border-dark黑色邊框.border-bottom-0刪除底部邊框.rounded邊界圓角.border-start-0刪除左側(cè)邊框.rounded-top頂部邊界圓角.border-1邊框?qū)挾?像素.rounded-end右側(cè)邊界圓角.border-2邊框?qū)挾?像素.rounded-bottom底部邊界圓角.border-3邊框?qū)挾?像素.rounded-start左側(cè)邊界圓角.border-4邊框?qū)挾?像素.rounded-circle橢圓形圓角.border-5邊框?qū)挾?像素.rounded-pill膠囊行圓角

邊框Bootstrap基礎(chǔ)布局—邊框演示

Bootstrap的間距（Spacing）包括邊距（margin）和填充（padding）程序類(lèi)，用于修改元素的外觀(guān)。對(duì)于xs，類(lèi)的命名格式為

{property}{sides}-{size}；對(duì)于

sm,

md,

lg,

xl

和

xxl，類(lèi)的命名格式為

{property}{sides}-{breakpoint}-{size}

。其中屬性是以下之一。m代表對(duì)于設(shè)置margin的類(lèi)p代表對(duì)于設(shè)置

padding的類(lèi)其中邊

是以下之一。t代表對(duì)于設(shè)置

margin-top

或

padding-top的類(lèi)。b代表對(duì)于設(shè)置

margin-bottom

或

padding-bottom的類(lèi)。s代表對(duì)于設(shè)置

margin-left

或

padding-left的類(lèi),

margin-right

或

padding-right的類(lèi)。e代表對(duì)于設(shè)置

margin-right

或

padding-right的類(lèi),

margin-left

或

padding-left的類(lèi)。x

代表對(duì)于設(shè)置

*-left

和

*-right的類(lèi)。y代表對(duì)于設(shè)置

*-top

和

*-bottom的類(lèi)。blank

-用于在元素的所有4個(gè)邊上設(shè)置

margin

或

padding的類(lèi)。其中

size是以下之一。值0對(duì)于通過(guò)將其設(shè)置為0來(lái)消除

margin

或

padding的類(lèi)。值1在默認(rèn)情況下，對(duì)于將

margin

或

padding

設(shè)置為

$spacer*.25的類(lèi)值2在默認(rèn)情況下，對(duì)于將

margin

或

padding

設(shè)置為

$spacer*.5的類(lèi)值3在默認(rèn)情況下，對(duì)于將

margin

或

padding

設(shè)置為

$spacer的類(lèi)值4在默認(rèn)情況下，對(duì)于將

margin

或

padding

設(shè)置為

$spacer*1.5的類(lèi)值5在默認(rèn)情況下，對(duì)于將

margin

或

padding

設(shè)置為

$spacer*3的類(lèi)值auto表示對(duì)于將

margin

設(shè)置為

auto的類(lèi)。間距Bootstrap基礎(chǔ)布局—間距

間距Bootstrap基礎(chǔ)布局—間距演示

應(yīng)用display實(shí)用程序創(chuàng)建flexbox容器并將直接子元素轉(zhuǎn)換為flex項(xiàng)。.d-flex

和

.d-inline-flex也存在響應(yīng)式變化，其所對(duì)應(yīng)類(lèi)與含義如表所示。FlexBootstrap基礎(chǔ)布局—Flex類(lèi)含義類(lèi)含義.d-flex定義flexbox容器，并將其子項(xiàng)轉(zhuǎn)換為flex項(xiàng).d-lg-flex屏幕寬度大于或者等于992像素時(shí)，定義為flexbox容器.d-inline-flex定義為行內(nèi)flexbox容器.d-lg-inline-flex屏幕寬度大于或者等于992像素時(shí)，定義為行內(nèi)flexbox容器.d-sm-flex屏幕寬度大于或者等于576像素時(shí)，定義為flexbox容器.d-xl-flex屏幕寬度大于或者等于1200像素時(shí)，定義為flexbox容器.d-sm-inline-flex屏幕寬度大于或者等于576像素時(shí)，定義為行內(nèi)flexbox容器.d-xl-inline-flex屏幕寬度大于或者等于1200像素時(shí)，定義為行內(nèi)flexbox容器.d-md-flex屏幕寬度大于或者等于768像素時(shí)，定義為flexbox容器.d-xxl-flex屏幕寬度大于或者等于1400像素時(shí)，定義為flexbox容器.d-md-inline-flex屏幕寬度大于或者等于768像素時(shí)，定義為行內(nèi)flexbox容器.d-xxl-inline-flex屏幕寬度大于或者等于1400像素時(shí)，定義為行內(nèi)flexbox容器1定義flexbox容器

使用方向?qū)嵱贸绦蛟O(shè)置flex容器中flex項(xiàng)的方向。.flex-row設(shè)置彈性子元素水平顯示，這是默認(rèn)值；.flex-row-reverse

類(lèi)用于設(shè)置右對(duì)齊顯示，即與

.flex-row

方向相反。.flex-column類(lèi)用于設(shè)置彈性子元素垂直方向顯示,.flex-column-reverse用于翻轉(zhuǎn)子元素。此外，方向?qū)嵱贸绦蛟O(shè)置也存在響應(yīng)式變化。FlexBootstrap基礎(chǔ)布局—Flex2.設(shè)定方向在flexbox容器上使用justify-content實(shí)用程序可以更改彈性項(xiàng)在主軸上的對(duì)齊方式（開(kāi)始時(shí)為主軸，如果是flex-direction:column，則為交叉軸）。從start（瀏覽器默認(rèn)設(shè)置）、end、center、between、around或evenly中進(jìn)行選擇。同樣justify-content也有響應(yīng)式的變化，可以設(shè)置在不同斷點(diǎn)上的對(duì)齊方式的變化。3.設(shè)定主軸上的對(duì)齊方式演示

使用flexbox容器上的

align-items

實(shí)用程序可以更改主軸（開(kāi)始時(shí)為交叉軸，如果時(shí)flex-direction:column則為主軸）上的flex項(xiàng)目對(duì)齊方式。從

start、

end、

center、

baseline或

stretch

（默認(rèn)）中選擇。同樣align-items

也有響應(yīng)式的變化，可以設(shè)置在不同斷點(diǎn)上的對(duì)齊項(xiàng)目對(duì)齊方式的變化。FlexBootstrap基礎(chǔ)布局—Flex4.設(shè)定交叉軸上對(duì)齊方式使用flexbox項(xiàng)目上的

align-self

工具，可以單獨(dú)更改它們?cè)跈M軸上的對(duì)齊方式（開(kāi)始時(shí)為交叉軸，如果是flex-direction:column，則為主軸）。從與

align-items相同的選項(xiàng)中選擇：start、end、center、baseline

或stretch（默認(rèn)）。5.

設(shè)定自身對(duì)齊方式對(duì)一系列同級(jí)元素使用.flex-fill類(lèi)，將它們強(qiáng)制為與其內(nèi)容相等的寬度（如果內(nèi)容沒(méi)有超出邊框，則為相等寬度），同時(shí)占用所有可用的水平空間。6.

設(shè)定等寬填充演示

使用.flex-grow-*實(shí)用程序切換flex項(xiàng)的增長(zhǎng)能力以填充可用空間。使用.flex-grow-1類(lèi)元素使用了它所能使用的所有可用空間，同時(shí)允許其余兩個(gè)flex項(xiàng)使用它們所需的空間。使用.flex-shrink-*實(shí)用程序在必要時(shí)切換flex項(xiàng)的收縮能力。使用.flex-shrink-1類(lèi)的元素能根據(jù)實(shí)際情況進(jìn)行“收縮”。flex-grow

和

flex-shrink也存在響應(yīng)變化。FlexBootstrap基礎(chǔ)布局—Flex7.擴(kuò)大與收縮當(dāng)將flex對(duì)齊和自動(dòng)邊距混合在一起時(shí)，三個(gè)通過(guò)自動(dòng)邊距控制flex項(xiàng)的示例：默認(rèn)（無(wú)自動(dòng)邊距）、向右推動(dòng)兩個(gè)項(xiàng)（.me-auto）和向左推動(dòng)兩個(gè)項(xiàng)（.ms-auto）。8.自動(dòng)邊距彈性容器中包裹子元素可以使用以下三個(gè)類(lèi)：.flex-nowrap（默認(rèn)），.flex-wrap或.flex-wrap-reverse。設(shè)置flex容器是單行或者多行，flex-wrap也存在響應(yīng)變化。9.包裹演示

Bootstrap使用.align-content-*控制在垂直方向上堆疊子元素，包含的有：.align-content-start，.align-content-end，.align-content-center，.align-content-between，.align-content-around和.align-content-stretch。這些類(lèi)在只有一行的彈性子元素中是無(wú)效的。FlexBootstrap基礎(chǔ)布局—Flex10.內(nèi)容對(duì)齊使用一些order實(shí)用程序更改特定flex項(xiàng)的視覺(jué)順序。由于order

采用0到5之間的任何整數(shù)值，因此需要為任何其他值添加自定義CSS。常用的次序類(lèi)包括.order-first、.order-1、.order-2、.order-3、.order-4、.order-5、.order-last。響應(yīng)式

.order-first

和

.order-last

類(lèi)也存在響應(yīng)變化。11.次序

浮動(dòng)Bootstrap基礎(chǔ)布局—浮動(dòng)響應(yīng)式浮動(dòng)實(shí)用程序，可以在任何斷點(diǎn)上的任何元素上切換浮動(dòng)。這些實(shí)用程序類(lèi)使用float屬性根據(jù)當(dāng)前視口大小將元素向左或向右浮動(dòng)，或者禁用浮動(dòng)。它們使用與網(wǎng)格系統(tǒng)相同的視口斷點(diǎn)。請(qǐng)注意float實(shí)用程序?qū)lex項(xiàng)目沒(méi)有影響。浮動(dòng)類(lèi)包括.float-start、.float-end、.float-none三個(gè)類(lèi)，每個(gè)

float

值也存在響應(yīng)變化。<divclass="containerbg-light"> <divclass="float-startbg-info">故宮博物院</div><br> <divclass="float-endbg-warning">南京博物院</div><br> <divclass="float-nonebg-success">上海博物館</div></div>演示

溢出Bootstrap基礎(chǔ)布局—溢出元素溢出設(shè)置主要包括.overflow-auto、.overflow-hidden、.overflow-visible、.overflow-scroll這4個(gè)類(lèi)。演示

定位Bootstrap基礎(chǔ)布局—定位

使用定位（Position）可以快速配置元素的位置?？焖俣ㄎ活?lèi)包括.position-static、.position-relative、.position-absolute、.position-fixed、.position-sti

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論