第4章-Bootstrap頁面內(nèi)容

第4章Bootstrap頁面內(nèi)容3.1

排版3.2代碼風(fēng)格3.3表格3.4表單3.5圖片3.6畫像3.7實戰(zhàn):后臺管理系統(tǒng)頁面掌握Bootstrap中頁面各組成元素的排版掌握Bootstrap中代碼、表格及表單的設(shè)計掌握Bootstrap中畫像及圖片的設(shè)計引言網(wǎng)頁的組成復(fù)雜而豐富，包括文字、圖片、視頻等。進(jìn)行頁面設(shè)計時必須按照一定的順序合理編排頁面元素。頁面編排的好壞直接決定網(wǎng)站的整體風(fēng)格，也影響頁面的美觀度。在Bootstrap中，頁面的編排應(yīng)立足于全局，實現(xiàn)元素風(fēng)格的統(tǒng)一化。本章主要介紹Bootstrap的頁面內(nèi)容，包括頁面排版、代碼風(fēng)格、表格、表單、畫像、圖片等樣式。4.1排版常用排版類強(qiáng)調(diào)引用列表4.1排版4.1.1常用排版類類名名稱說明.h{1|2|3|4|5|6}標(biāo)題類這些標(biāo)題類可為HTML文本標(biāo)簽賦予標(biāo)題樣式，等同于HTML中所有的標(biāo)題標(biāo)簽。HTML中所有的標(biāo)題標(biāo)簽，如<h1>到<h6>在Bootstrap中均可使用.small副標(biāo)題開發(fā)者可在標(biāo)題內(nèi)應(yīng)用<small>標(biāo)簽或為內(nèi)嵌元素賦予.small類，從而實現(xiàn)為標(biāo)題添加副標(biāo)題（也稱輔助標(biāo)題）.display{1|2|3|4}顯示標(biāo)題可使用.display類將標(biāo)題文字放大。Bootstrap4提供.display1到.display4的顯式標(biāo)題類.lead段落類通過添加.lead類可以讓段落突出顯示。突出顯示的段落文本其font-size變?yōu)?.25rem，font-weight變?yōu)?00.initialism縮略語縮略語元素帶有title屬性，title屬性可用于存放完整文本，縮略語的提示框外觀展現(xiàn)為背景呈白色的線框，當(dāng)鼠標(biāo)移至縮寫詞上時提示框會帶有“問號”。<abbr>標(biāo)簽用于縮略詞和首字母縮略詞的實現(xiàn)，.initialism類用于實現(xiàn)一個字體略小的縮寫詞。1.常用標(biāo)題的語法格式（1）標(biāo)題標(biāo)簽的語法格式如下所示。<h1>h1.heading</h1>（2）標(biāo)題類的語法格式如下所示。<pclass="h1">h1.Bootstrap標(biāo)題</p>（3）副標(biāo)題類的語法格式如下所示。<h3>主標(biāo)題<smallclass="text-muted">副標(biāo)題</small></h3>（4）顯示標(biāo)題的語法格式如下所示。<h1class="display-1">Display1</h1>4.1排版4.1.1常用排版類1.常用標(biāo)題的代碼實現(xiàn)使用標(biāo)題類實現(xiàn)依次輸出6級標(biāo)題，使用.small類依次輸出3級標(biāo)題及其副標(biāo)題，使用.display類實現(xiàn)依次輸出4級顯式標(biāo)題。4.1排版4.1.1常用排版類<!--.h1-.h6標(biāo)題類的應(yīng)用--><pclass="h1">h1.中國特色大國外交</p><pclass="h2">h2.堅持習(xí)近平外交思想</p><pclass="h3">h3.堅持獨立自主和平外交政策</p><pclass="h4">h4.堅持走和平發(fā)展道路</p><pclass="h5">h5.推動建設(shè)新型國際關(guān)系</p><pclass="h6">h6.推動構(gòu)建人類命運共同體</p><!--常規(guī)標(biāo)題--對照組--><h1>領(lǐng)悟人生真諦<smallclass="text-muted">把握人生方向</small></h1><h2>追求遠(yuǎn)大理想<smallclass="text-muted">堅定崇高信念</small></h2><h3>繼承優(yōu)良傳統(tǒng)<smallclass="text-muted">弘揚(yáng)中國精神</small></h4><h1class="display-1">Display1把握人生方向</h1><h1class="display-2">Display2堅定崇高信念</h1><h1class="display-3">Display3弘揚(yáng)中國精神</h1><h1class="display-4">Display4親民愛民艱苦奮斗</h1>主體代碼

例5.31.常用標(biāo)題的實現(xiàn)效果4.1排版4.1.1常用排版類2.段落的語法格式（1）.lead類的語法格式如下所示。4.1排版4.1.1常用排版類<pclass="lead">這是一個引導(dǎo)段落，它從常規(guī)段落中脫穎而出。</p>2.段落的代碼實現(xiàn)使用.lead類突出顯示贊美長城的詩句。4.1排版4.1.1常用排版類<p>長城是世界上修建時間最長、工程最大的一項古代防御工程，它是一道高大、堅固而且連綿不斷的長垣。</p><pclass="lead">“望長城內(nèi)外,惟余莽莽;大河上,頓失滔滔。”</p><p>1952年,國家組織開展了第一批長城保護(hù)維修工程。正是一代又一代長城人的專注、傳承,才讓我們在今天依然能夠感受到萬里長城的磅礴氣勢。</p>主體代碼

例4.22.段落的實現(xiàn)效果4.1排版4.1.1常用排版類3.縮略語的語法格式（1）縮略語的語法格式如下所示。4.1排版4.1.1常用排版類<p><abbrtitle="完整文本">縮略詞</abbr></p><p><abbrtitle="完整文本"class="initialism">字體略小的縮略詞</abbr></p>3.縮略語的代碼實現(xiàn)使用縮略語標(biāo)簽與initialism類為文本實現(xiàn)縮略語樣式。4.1排版4.1.1常用排版類<p>社會主義核心價值體系是由有關(guān)<abbrtitle="馬克思主義指導(dǎo)思想">指導(dǎo)思想</abbr><abbrtitle="中國特色社會主義理想">一個理想</abbr><abbrtitle="以愛國主義為核心的民族精神和以改革開放為核心的時代精神">兩種精神</abbr><abbrtitle="社會主義榮辱觀">一個道德觀念</abbr>組成的</p><p><abbrtitle="社會主義核心觀是社會主義核心價值體系的內(nèi)核"class="initialism">社會主義核心價值觀</abbr></p>主體代碼

例4.33.縮略語的實現(xiàn)效果4.1排版4.1.1常用排版類HTML5中的內(nèi)聯(lián)樣式同樣適用于Bootstrap，Bootstrap框架強(qiáng)調(diào)實現(xiàn)頁面樣式時，直接使用HTML元素標(biāo)簽并輔助一些樣式即可，輔助樣式包括<mark>、<del>、<s>、<u>、<u>、<strong>、<em>等。實現(xiàn)強(qiáng)調(diào)樣式，可使用Bootstrap默認(rèn)的排版標(biāo)簽顯示文字效果，并在需要特別標(biāo)注的文字內(nèi)容前后加入強(qiáng)調(diào)標(biāo)簽即可。強(qiáng)調(diào)樣式的語法格式如下所示。4.1排版4.1.2強(qiáng)調(diào)<p>你可以使用mark標(biāo)簽去<mark>高亮</mark>文本.</p>代碼實現(xiàn)分別使用強(qiáng)調(diào)標(biāo)簽與強(qiáng)調(diào)類為文本添加強(qiáng)調(diào)樣式。4.1排版<h2>強(qiáng)調(diào)文本</h2><p> mark >標(biāo)簽-重點標(biāo)記：<mark>標(biāo)記的重點內(nèi)容</mark></p><p> .mark 類：<spanclass="mark">標(biāo)記的重點內(nèi)容</span></p><p> del >標(biāo)簽-刪除：<del>刪除的文本</del></p><p> s >標(biāo)簽-不再準(zhǔn)確中劃線：<s>不再準(zhǔn)確的文本</s></p><p> ins >標(biāo)簽-補(bǔ)充文本：<ins>對文檔的補(bǔ)充文本</ins></p><p> u >標(biāo)簽-下劃線：<u>添加下劃線的文本</u></p><p> strong >標(biāo)簽-粗體：<strong>粗體文本</strong></p><p> em >標(biāo)簽-斜體：<em>斜體文本</em></p>主體代碼

例4.44.1.2強(qiáng)調(diào)強(qiáng)調(diào)的實現(xiàn)效果4.1排版4.1.2強(qiáng)調(diào)4.1排版4.1.3引用以學(xué)術(shù)網(wǎng)站為例，其頁面中包含大量的文獻(xiàn)、論文或文章資源，因此在頁面中標(biāo)注引用是必不可少的。Bootstrap框架通過<blockquote>標(biāo)簽實現(xiàn)引用樣式增強(qiáng)，在正文中添加引用文字，可使用引用塊包裹引用文字，而引用塊則通過帶有.blockquote類的<blockquote>標(biāo)簽實現(xiàn)。1.引用的結(jié)構(gòu)組成引用塊中主要有三個可用標(biāo)簽。（1）<blockquote>引用塊標(biāo)簽。（2）<cite>引用塊內(nèi)容來源的標(biāo)注標(biāo)簽。（3）<footer>包含引用來源與作者的標(biāo)簽。其中，<footer>標(biāo)簽要配合.blockquote-footer類和<cite>標(biāo)簽組合使用。4.1.3引用4.1排版2.引用的語法格式引用樣式的語法格式如下所示。4.1.3引用4.1排版<blockquoteclass="blockquote"><pclass="mb-0">引用文字</p><footerclass="blockquote-footer">引用來源-作者署名<citetitle="SourceTitle">源作品的名稱</cite></footer></blockquote>。代碼實現(xiàn)使用引用塊標(biāo)簽實現(xiàn)詩歌賞析，并應(yīng)用.text-ight類實現(xiàn)文本右對齊。4.1排版<blockquote><p>紅軍不怕遠(yuǎn)征難，萬水千山只等閑。</p><p>五嶺逶迤騰細(xì)浪，烏蒙磅礴走泥丸。</p><p>金沙水拍云崖暖，大渡橋橫鐵索寒。</p><p>更喜岷山千里雪，三軍過后盡開顏。</p><footerclass="blockquote-footertext-right">—選自毛澤東的<cite>《七律·長征》</cite></footer></blockquote>主體代碼

例4.54.1.3引用強(qiáng)調(diào)的實現(xiàn)效果4.1排版4.1.3引用Bootstrap框架針對列表同樣實現(xiàn)了樣式增強(qiáng)，包括有序列表、無序列表、無樣式列表、內(nèi)聯(lián)式列表、描述性列表等。4.1排版4.1.4列表類名名稱說明.list-unstyled無樣式列表刪除list-style列表項的默認(rèn)樣式和左邊距（僅限直接子項）。這僅適用于直接子列表項，這意味著需要為所有嵌套列表添加list-unstylede類.list-inline內(nèi)聯(lián)式列表內(nèi)聯(lián)列表把垂直列表變成水平列表，且去掉項目符號，保持水平顯示。實現(xiàn)內(nèi)聯(lián)列表需要將.list-inline類與.list-inline-item類結(jié)合，需要為列表項添加.list-inline-item類

.list-inline-item內(nèi)聯(lián)式列表.dl-horizontal描述性列表描述性列表由<dl></dl>、<dt></dt>、<dd></dd>標(biāo)簽組成，Bootstrap可為<dl>標(biāo)簽添加.dl-horizontal類使列表實現(xiàn)水平顯示效果.text-truncate截斷文本類用省略號截斷文本?？膳c描述性列表組合使用，對于較長的術(shù)語，可視情況為<dt>添加.text-truncate類，從而應(yīng)用省略號截斷文本。1.無樣式列表-語法格式無樣式列表的語法格式如下所示。4.1排版4.1.4列表<ulclass="list-unstyled"><li>列表項</li><li>列表項</li></ul>使用無樣式列表分別嵌套兩個列表，對比嵌套列表是否應(yīng)用.list-unstyled類的效果。1.無樣式列表-演示說明<ulclass="list-unstyled"><li>擔(dān)當(dāng)復(fù)興大任成就時代新人</li><li>我們處在中國特色社會主義新時代</li><li>新時代呼喚擔(dān)當(dāng)民族復(fù)興大任的時代新人</li><li>領(lǐng)悟人生真諦把握人生方向<ul><!--嵌套列表未加list-unstyled類--><li>人生觀是對人生的總看法</li><li>樹立正確的人生觀</li><li>創(chuàng)造有意義的人生</li></ul></li><li>堅定信仰信念信心<ulclass="list-unstyled"><!--嵌套列表添加list-unstyled類--><li>增強(qiáng)對馬克思主義、共產(chǎn)主義的信仰</li><li>增強(qiáng)對中國特色社會主義的信念</li><li>增強(qiáng)對實現(xiàn)中華民族偉大復(fù)興的信心</li></ul></li></ul>主體代碼

例4.64.1排版4.1.4列表1.無樣式列表-實現(xiàn)效果4.1排版4.1.4列表2.內(nèi)聯(lián)式列表-語法格式內(nèi)聯(lián)式列表的語法格式如下所示。4.1排版4.1.4列表內(nèi)聯(lián)式列表的語法格式如下所示。<ulclass="list-inline"><liclass="list-inline-item">列表項</li><liclass="list-inline-item">列表項</li></ul>使用內(nèi)聯(lián)式列表為社會主義核心價值觀實現(xiàn)水平導(dǎo)航效果。2.內(nèi)聯(lián)式列表-演示說明<ulclass="list-inline"><liclass="list-inline-item">富強(qiáng)</li><liclass="list-inline-item">民主</li><liclass="list-inline-item">文明</li><liclass="list-inline-item">和諧</li><liclass="list-inline-item">自由</li><liclass="list-inline-item">平等</li><liclass="list-inline-item">公正</li><liclass="list-inline-item">愛國</li><liclass="list-inline-item">敬業(yè)</li><liclass="list-inline-item">誠信</li><liclass="list-inline-item">友善</li></ul>主體代碼

例4.74.1排版4.1.4列表2.內(nèi)聯(lián)式列表-實現(xiàn)效果4.1排版4.1.4列表3.描述性列表-語法格式描述性列表的語法格式如下所示。4.1排版4.1.4列表<dlclass="dl-horizontal"><dt>描述列表</dt><dd>描述列表非常適合定義術(shù)語</dd><dtclass="text-truncate">被截斷的術(shù)語</dt><dd>這在空間緊張時很有用。在末尾添加一個省略號。</dd></dl>Bootstrap框架的描述性列表與HTML5的基本一致，Bootstrap對描述性列表標(biāo)簽進(jìn)行了功能增強(qiáng)。Bootstrap調(diào)整其行間距、外邊距以及字體加粗效果。結(jié)合描述性列表與網(wǎng)格系統(tǒng)水平對齊術(shù)語和描述，實現(xiàn)名詞解釋效果。3.描述性列表-演示說明dlclass="row"><dtclass="col-sm-3">十三五</dt><ddclass="col-sm-9">一般指中華人民共和國國民經(jīng)濟(jì)和社會發(fā)展第十三個五年規(guī)劃綱要</dd><dtclass="col-sm-3">十四五</dt><ddclass="col-sm-9"><p>一般指中華人民共和國國民經(jīng)濟(jì)</p><p>和社會發(fā)展第十四個五年規(guī)劃和2035年遠(yuǎn)景目標(biāo)綱要。</p></dd><dtclass="col-sm-3text-truncate">三保三保三保三保三保三保</dt><ddclass="col-sm-9">保基本民生、保工資、保運轉(zhuǎn)</dd></dl>主體代碼

例4.74.1排版4.1.4列表3.描述性列表-實現(xiàn)效果4.1排版4.1.4列表4.2代碼風(fēng)格行內(nèi)代碼與代碼塊其他代碼1.代碼標(biāo)簽介紹4.2代碼風(fēng)格代碼標(biāo)簽是HTML5的新增標(biāo)簽，可在文本中保持顯示代碼樣式。Bootstrap框架增強(qiáng)了代碼標(biāo)簽的功能，主要包括<code>標(biāo)簽、<pre>標(biāo)簽、<var>標(biāo)簽、<kbd>標(biāo)簽和<smap>標(biāo)簽。1.代碼標(biāo)簽介紹標(biāo)簽名稱說明<code>行內(nèi)代碼<code>標(biāo)簽包裹行內(nèi)代碼片段，實現(xiàn)內(nèi)聯(lián)式的代碼樣式。需要確保轉(zhuǎn)義HTML代碼中的尖括號，通過“<”轉(zhuǎn)譯左尖括號，通過“>”轉(zhuǎn)譯右尖括號<pre>代碼塊<pre>標(biāo)簽可包裹多行代碼。同樣需要確保轉(zhuǎn)義HTML代碼中的尖括號，以便正確展示代碼。可選擇性地添加.pre-scrollable類，實現(xiàn)垂直滾動的代碼塊效果<var>其他代碼標(biāo)簽<var>標(biāo)簽包裹并標(biāo)識變量<kbd>

<kbd>標(biāo)簽通常用于標(biāo)明需要鍵盤輸入的字符<smap>

<samp>標(biāo)簽指示程序的示例輸出結(jié)果4.2代碼風(fēng)格2.行內(nèi)代碼與代碼塊文本內(nèi)容<code><section></code>文本內(nèi)容.

代碼塊的語法格式如下所示。<pre>

<code><p>示例代碼...</p><p>換行代碼...</p>

</code></pre>行內(nèi)代碼的語法格式4.2代碼風(fēng)格使用行內(nèi)代碼標(biāo)簽與代碼塊標(biāo)簽分別輸出單行代碼及多行代碼。2.行內(nèi)代碼與代碼塊<div>行內(nèi)代碼：<code><code></code>標(biāo)簽可實現(xiàn)展示行內(nèi)代碼片段。</div><p>行內(nèi)代碼：<code>alert('thisisinlinecode')</code></p><div>代碼塊:<preclass="pre-scrollable">varx=1;vary=2;alert(x+y);varx=1;vary=2;alert(x+y);varx=1;vary=2;alert(x+y);</pre></div>主體代碼

例4.94.2代碼風(fēng)格2.行內(nèi)代碼與代碼塊-實現(xiàn)效果4.2代碼風(fēng)格3.其他代碼的語法格式如下所示。//<var>標(biāo)簽<var>y</var>=<var>m</var><var>x</var>+<var>b</var>//<kbd>標(biāo)簽文本內(nèi)容<kbd>cd</kbd>文本內(nèi)容.<br>文本內(nèi)容<kbd><kbd>ctrl</kbd>+<kbd>,</kbd></kbd>//<samp>標(biāo)簽<samp>輸出內(nèi)容.</samp>其他代碼的語法格式如下所示。4.2代碼風(fēng)格變量標(biāo)簽用于包裹變量，輸入標(biāo)簽用于標(biāo)明鍵盤輸入，輸出標(biāo)簽用于以示例的形式輸出程序的示例輸出代碼。這些代碼標(biāo)簽用法基本一致，即使用雙標(biāo)簽將代碼進(jìn)行包裹。使用變量標(biāo)簽、用戶輸入標(biāo)簽、示例輸出標(biāo)簽實現(xiàn)代碼展示。3.其他代碼<!--<var>標(biāo)簽--><var>int</var><var>x</var>=5;<br><var>int</var><var>y</var>=3;<br><var>int</var><var>sum</var>;<br><var>sum</var>=<var>x</var>+<var>y</var><br><br><!--<kbd>標(biāo)簽--><p>對代碼進(jìn)行全選操作時，請輸入：<kbd>ctrl</kbd>+<kbd>a</kbd></p><br><!--<samp>標(biāo)簽-->document.write("helloworld")<p>運行程序后，其示例結(jié)果為：<samp>helloworld</samp></p>主體代碼

例4.104.2代碼風(fēng)格3.其他代碼-實現(xiàn)效果4.2代碼風(fēng)格3.1Bootstrap布局基礎(chǔ)3.1.2代碼風(fēng)格2.容器的分類-container-fluid（1）.container-fluid容器.container-fluid容器是保持width為100%、占據(jù)全部視口（viewport）的容器，它在所有斷點處均保持width為100%。container-fluid容器自動設(shè)置容器寬度為外層視窗的100%，可用于實現(xiàn)全屏設(shè)置、保持100%寬度設(shè)置。為一個元素添加.container-fluid類，可實現(xiàn)一個元素保持跨越整個視口的寬度。4.3表格表格的結(jié)構(gòu)標(biāo)簽表格的個性化風(fēng)格4.3表格4.3.1表格的結(jié)構(gòu)標(biāo)簽Bootstrap框架定義豐富的表格樣式類，增強(qiáng)表格的功能，優(yōu)化表格的結(jié)構(gòu)標(biāo)簽，使得表格在頁面中呈現(xiàn)出簡潔、美觀的特點。4.3表格4.3.1表格的結(jié)構(gòu)標(biāo)簽1.表格的常用結(jié)構(gòu)標(biāo)簽介紹名稱說明<table>表格容器<thead>表格的表頭容器<tbody>表格的主體容器<tr>表格的行結(jié)構(gòu)<td>表格的單元格<th>表格的表頭容器中的單元格<caption>表格的標(biāo)題容器4.3表格4.3.1表格的結(jié)構(gòu)標(biāo)簽1.表格的常用結(jié)構(gòu)標(biāo)簽介紹Bootstrap框架實現(xiàn)以上標(biāo)簽的樣式優(yōu)化，使表格風(fēng)格更加統(tǒng)一。在HTML結(jié)構(gòu)中一些應(yīng)用頻率較少的表格標(biāo)簽，如<tfoot>、<colgroup>等，Bootstrap框架仍支持這些標(biāo)簽的使用，但并不為其提供樣式優(yōu)化與增強(qiáng)。4.3表格4.3.2表格的個性化風(fēng)格Bootstrap定義了豐富的表格樣式類，開發(fā)者可應(yīng)用豐富、多樣的表格類設(shè)計個性化表格。2.表格的常用類4.3表格4.3.2表格的個性化風(fēng)格名稱適用標(biāo)簽說明.table<tbody>表格的默認(rèn)風(fēng)格，對每個td增加padding，相鄰之間的td也會有一些間隔，并且增加了水平方向的分割線.table-borderless<tbody>無邊框風(fēng)格，設(shè)計沒有邊框的表格.table-striped<tbody>條紋狀風(fēng)格，設(shè)計條紋、斑馬紋狀的表格.table-bordered<tbody>邊框風(fēng)格，設(shè)計表格具備邊框.table-hover<tbody>指針懸停風(fēng)格，使表格產(chǎn)生行懸停效果，將鼠標(biāo)移至行上時，改變底紋顏色.table-sm<tbody>緊湊風(fēng)格，將表格的padding值縮減一半，使表格緊湊.table-primary<tbody>、<thead>、<tr>、<td>用于設(shè)計表格背景顏色，藍(lán)色，表重要操作.table-success適用標(biāo)簽與.table-primary一致用于設(shè)計表格背景顏色，綠色，表示可執(zhí)行操作.table-danger適用標(biāo)簽與.table-primary一致用于設(shè)計表格背景顏色，紅色，表示危險操作.table-info適用標(biāo)簽與.table-primary一致用于設(shè)計表格背景顏色，淺藍(lán)色，表示表示內(nèi)容變更.table-warning適用標(biāo)簽與.table-primary一致用于設(shè)計表格背景顏色，橘色，表示需要注意的操作.table-active適用標(biāo)簽與.table-primary一致用于設(shè)計表格背景顏色，灰色，用于鼠標(biāo)懸停效果.table-secondary適用標(biāo)簽與.table-primary一致用于設(shè)計表格背景顏色，灰色，表示內(nèi)容不重要.table-light適用標(biāo)簽與.table-primary一致用于設(shè)計表格背景顏色，淺灰色.table-dark適用標(biāo)簽與.table-primary一致用于設(shè)計表格背景顏色，深灰色4.3表格4.3.2表格的個性化風(fēng)格3.表格的語法格式以條紋狀表格為例，語法格式如右側(cè)所示。<tableclass="tabletable-striped"><thead><tr><th>#</th><th>分類</th></tr></thead><tbody><tr><th>1</th><td>類型1</td></tr><tr><th>2</th><td>類型2</td></tr></tbody></table>4.3表格4.3.2表格的個性化風(fēng)格4.表格的應(yīng)用演示以表格的顏色風(fēng)格與指針懸停風(fēng)格為例進(jìn)行演示。主體代碼

例4.11<tableclass="tabletable-borderedtable-hovertext-center"><caption>24節(jié)氣</caption><!--藍(lán)色背景--><theadclass="table-primary"><tr><th>#</th><th>春</th><th>夏</th><th>秋</th><th>冬</th></tr></thead><tbody><!--淺藍(lán)色背景--><trclass="table-info"><th>1</th><td>立春</td><td>立夏</td><td>立秋</td><td>立冬</td></tr>

<!--綠色背景--><trclass="table-success"><th>2</th><td>雨水</td><td>小滿</td><td>處暑</td><td>小雪</td></tr><trclass="table-info"><th>3</th><td>驚蟄</td><td>芒種</td><td>白露</td><td>大雪</td></tr><trclass="table-success"><th>4</th><td>春分</td><td>夏至</td><td>秋分</td><td>冬至</td></tr>

<trclass="table-info"><th>5</th><td>清明</td><td>小暑</td><td>寒露</td><td>小寒</td></tr><trclass="table-success"><th>6</th><td>谷雨</td><td>大暑</td><td>霜降</td><td>大寒</td></tr></tbody></table>4.3表格4.3.2表格的個性化風(fēng)格4.表格的實現(xiàn)效果在上述代碼中，首先為<table>標(biāo)簽應(yīng)用.table類保持Bootstrap表格的默認(rèn)樣式，其次為<table>標(biāo)簽應(yīng)用.table-hover類、.table-bordered類、.text-right類，分別使表格保持鼠標(biāo)懸停變色，為表格添加邊框樣式，使表格內(nèi)容水平居中，即可完成此個性化表格設(shè)計。4.4表單表單控件基本結(jié)構(gòu)常用表單控件類表單控件應(yīng)用4.4表單表單包括表單域、輸入框、單選按鈕、復(fù)選框等控件，Bootstrap4進(jìn)一步擴(kuò)展了表單樣式，使表單在瀏覽器和設(shè)備之間的呈現(xiàn)更具一致性，本節(jié)將詳細(xì)些介紹表單控件的應(yīng)用。4.4表單1.表單控件基本結(jié)構(gòu)介紹4.4.1表單控件基本結(jié)構(gòu)在Bootstrap4中，為文本表單控件（如<input>、<textarea>、<select>）添加.form-control類，可使文本表單控件獲得統(tǒng)一的全局樣式，如寬度100%、淺灰色的邊框，4px的圓角等。在組合使用<label>標(biāo)簽和表單控件時，可將標(biāo)簽與表單控件放置在.form-group類定義的表單組中，從而使表單組內(nèi)的元素在視覺呈現(xiàn)上獲得最佳的排列樣式。<form><divclass="form-group"><labelfor="name">用戶名</label><inputtype="email"class="form-control"id="name"></div><divclass="form-group"><labelfor="pwd">密碼</label><inputtype="password"class="form-control"id="pwd"></div><buttontype="submit"class="btnbtn-primary">提交</button></form>1.表單控件基本結(jié)構(gòu)介紹表單控件的基本結(jié)構(gòu)如下所示。4.4表單4.4.1表單控件基本結(jié)構(gòu)1.常用表單控件類介紹Boottsrap4中內(nèi)置了大量表單控件類，可用于控制表單的尺寸、狀態(tài)、輸入范圍等。4.4表單4.4.2常用表單控件類4.3表格4.3.2表格的個性化風(fēng)格名稱說明名稱.form-control為文本表單控件設(shè)置統(tǒng)一樣式，如寬度100%、淺灰色的邊框，4px的圓角等。.form-control.form-control-{lg|sm}用于設(shè)置表單控件的尺寸，如設(shè)置大號、小號表單等。.form-control-{lg|sm}.form-control-plaintext用于將應(yīng)用了readonly屬性的表單控件樣式化為只讀的純文本。.form-control-plaintext.form-control-range用于設(shè)置水平的范圍輸入效果，范圍輸入效果早不同的瀏覽器中效果不同。.form-control-range.form-text用于創(chuàng)建表單的幫助文本。.form-text.form-check單選按鈕、復(fù)選框的父容器，應(yīng)用位置與.form-group類一致。可實現(xiàn)單選按鈕、復(fù)選框堆疊效果。.form-check容器內(nèi)的控件需應(yīng)用.form-check-input類。.form-check.form-check-input.form-check容器內(nèi)的<input>控件需應(yīng)用.form-check-input類。.form-check-input.form-check-label.form-check容器內(nèi)的<label>控件需應(yīng)用.form-check-label類。.form-check-label.form-check-inline應(yīng)用于.form-check容器，可使容器內(nèi)的單選按鈕和復(fù)選框?qū)崿F(xiàn)水平排列效果。.form-check-inline.disabled用于設(shè)置單選按鈕與復(fù)選框的禁用狀態(tài)，<input>的禁用狀態(tài)則通過diaabled屬性來實現(xiàn)。.disabled.form-row表單行。表單控件不僅可與網(wǎng)格布局（row、col）組合使用，建立更復(fù)雜的布局。還可借助Bootstrap4定義的.form-row類使表單獲得更緊湊的布局。.form-row4.4表單4.4.3表單控件應(yīng)用表單控件的應(yīng)用演示“實踐是檢驗真理的唯一標(biāo)準(zhǔn)”。應(yīng)用上述表單控件的常用工具類來展示其不同的顯示效果。主體代碼

例4.12<form><!--表單行--><divclass="form-row"><!--網(wǎng)格布局的列元素--><divclass="col"><labelfor="Firstname">用戶名：</label><!--大號輸入框--><inputtype="text"class="form-controlform-control-lg"placeholder="Firstname"id="Firstname"></div><divclass="col"><labelfor="Pwd">密碼：</label><!--小號輸入框--><inputtype="password"class="form-controlform-control-sm"placeholder="Lastname"id="Pwd"><!--幫助文本--><smallclass="form-text">幫助文本-請輸入6位密碼</small></div></div>主體代碼

例4.11<!--表單組--><divclass="form-group"><labelfor="Mail">郵箱：</label><!--輸入框的只讀純文本模式--><inputtype="text"readonlyclass="form-control-plaintext"id="Mail"value="email@"></div><divclass="form-group"><labelfor="Range">輸入范圍</label><!--輸入范圍--><inputtype="range"class="form-control-range"id="Range"></div><h3>單選按鈕與復(fù)選框的布局類應(yīng)用</h3>性別：<!--堆疊效果--><divclass="form-check"><inputtype="radio"class="form-check-input"name="sex"id="sex1"><labelclass="form-check-label"for="sex1">男</label></div><divclass="form-check"><inputtype="radio"class="form-check-input"name="sex"id="sex2"><labelclass="form-check-label"for="sex2">女</label></div>愛好：<!--水平排列--><divclass="form-checkform-check-inline"><inputtype="checkbox"class="form-check-input"name="hobby"id="hobby1"><labelclass="form-check-label"for="hobby1">閱讀</label></div><divclass="form-checkform-check-inline"><inputtype="checkbox"class="form-check-input"name="hobby"id="hobby2"><labelclass="form-check-label"for="hobby2">運動</label></div><divclass="form-checkform-check-inline"><inputtype="checkbox"class="form-check-input"name="hobby"id="hobby3"><labelclass="form-check-label"for="hobby3">唱歌</label></div></form>表單控件的應(yīng)用演示4.4表單4.4.3表單控件應(yīng)用表單的實現(xiàn)效果表單控件類的顯示效果如圖所示。4.4表單4.4.3表單控件應(yīng)用4.5圖片

圖片類圖片對齊方式Bootstrap框架增強(qiáng)了圖片功能，為圖片提供響應(yīng)式行為。開發(fā)者在項目中引用圖片將更加便捷且圖片元素更加穩(wěn)定。4.5圖片4.5.1圖片類1.圖片的常用類介紹名稱說明.img-fluid響應(yīng)式圖片.img-thumbnail縮略圖，給圖片加上一個圓角且1px的邊界的邊框樣式.rounded圖片樣式，圖片實現(xiàn)圓角矩形樣式.rounded-circle圖片樣式，圖片實現(xiàn)圓角50%樣式以響應(yīng)式圖片為例進(jìn)行介紹，通過Bootstrap4所提供的.img-fluid類使其支持響應(yīng)式布局。其原理是將max-width:100%、height:auto賦予圖片，實現(xiàn)響應(yīng)式布局，圖片將隨父元素同步縮放。響應(yīng)式圖片的語法格式如下所示。4.5圖片4.5.1圖片類1.圖片的常用類介紹2.圖片的語法格式<imgsrc="..."class="img-fluid"alt="...">使用.img-fluid類使圖片與父元素保持同步縮放。4.5圖片<bodyclass="container"><imgsrc="images/respon.jpg"class="img-fluid"alt=""></body>主體代碼

例4.134.5.1圖片類2.圖片類的應(yīng)用演示當(dāng)用戶改變?yōu)g覽器窗口的尺寸時，該圖片將隨瀏覽器窗口的變化而同步縮放。4.5Bootstrap布局基礎(chǔ)4.5.2圖片對齊方式1.Bootstrap中實現(xiàn)圖片對齊的常用方式如下。（1）浮動類。使用浮動類.float-left或.float-right分別實現(xiàn)圖片的左浮動與右浮動。（2）文本對齊類。使用.text-left類、.text-center類、.text-right類分別實現(xiàn)水平居左、水平居中、水平居右對齊。（3）外邊距類。使用外邊距類.mx-auto來實現(xiàn)水平居中，需要注意，必須通過.d-block類將<img>標(biāo)簽轉(zhuǎn)換成塊級元素。4.5Bootstrap布局基礎(chǔ)4.5.2圖片對齊方式2.圖片對齊方式的應(yīng)用演示<!--父元素清除浮動影響--><divclass="clearfix"><!--左浮動--><imgsrc="images/align.jpg"class="float-leftrounded"width="200"><spanclass="float-left">浮動類實現(xiàn)左浮動</span><!--右浮動--><imgsrc="images/align.jpg"class="float-rightimg-thumbnail"width="200"><spanclass="float-right">浮動類實現(xiàn)右浮動</span></div><!--浮動類實現(xiàn)左右對齊--><divclass="text-center"><imgsrc="images/align.jpg"class="rounded-circle"width="200"><pclass="text-center">文本類實現(xiàn)水平居中</p></div><!--外邊距類實現(xiàn)水平居中--><div><imgsrc="images/align.jpg"class="mx-autod-block"width="200"><pclass="text-center">外邊距類實現(xiàn)水平居中</p></div>主體代碼

例4.14結(jié)合圖片類，通過一個案例來演示圖片對齊方式的設(shè)置。4.5Bootstrap布局基礎(chǔ)4.5.2圖片對齊方式3.圖片類的實現(xiàn)效果4.6畫像

畫像介紹畫像語法畫像應(yīng)用實踐4.6畫像1.畫像介紹任何時候需要為圖片顯示一段內(nèi)容時，如帶有可選標(biāo)題的圖片，均可使用<figure>標(biāo)簽進(jìn)行設(shè)計。.figure類、.figure-img類、.figure-caption類為HTML5的<figure>和<figcaption>元素實現(xiàn)了樣式增強(qiáng)。當(dāng)<figure>標(biāo)簽內(nèi)所包含的圖片沒有明確設(shè)置尺寸時，必須為<img>標(biāo)簽添加.img-fluid類，使其支持響應(yīng)式布局。4.6畫像2.畫像的語法格式畫像的語法格式如下所示。<figureclass="figure"><imgsrc="圖片地址"class="figure-imgimg-fluidrounded"alt="..."><figcaptionclass="figure-caption">畫像對應(yīng)標(biāo)題</figcaption></figure>3.畫像應(yīng)用-演示說明項目資源引入

例4.15<figureclass="figure"><imgsrc="images/briage.jpg"class="figure-imgimg-fluidrounded"alt="..."><figcaptionclass="figure-caption">傳統(tǒng)的橋,古樸的美</figcaption></figure><figureclass="figure"><imgsrc="images/mountain.jpg"class="figure-imgimg-fluidrounded"alt="..."><figcaptionclass="figure-caption">一重山,兩重山。</figcaption></figure><figureclass="figure"><imgsrc="images/river.jpg"class="figure-imgimg-fluidrounded"alt="..."><figcaptionclass="figure-caption">歲月是一條蜿蜒的河</figcaption></figure><figureclass="figure"><imgsrc="images/briage.jpg"class="figure-imgimg-fluidrounded"alt="..."><figcaptionclass="figure-caption">傳統(tǒng)的橋,古樸的美</figcaption></figure>

主體代碼

例4.154.6畫像4.畫像應(yīng)用-實現(xiàn)效果4.6畫像4.7實戰(zhàn)--后臺管理系統(tǒng)頁面4.7.1頁面結(jié)構(gòu)分析簡圖中國傳統(tǒng)文化是不斷傳承下來的豐厚遺產(chǎn)，曾長期處于世界領(lǐng)先的地位。中國傳統(tǒng)文化的范圍較廣，以諸子百家經(jīng)典為例進(jìn)行介紹，諸子百家經(jīng)典包含《論語》、《孟子》、《道德經(jīng)》、《孫子兵法》等。本節(jié)以諸子百家經(jīng)典為題材設(shè)計頁面，使用Bootstrap的頁面排版、表格風(fēng)格、圖片風(fēng)格等技術(shù)實現(xiàn)一個簡單的響應(yīng)式書籍管理頁面。1.項目介紹4.7.1頁面結(jié)構(gòu)分析簡圖首頁主要分為頭部標(biāo)題、頁面主圖、表單操作項以及頁面主體四部分。利用排版的標(biāo)題類制作頁面頭部標(biāo)題，利用圖片類使頁面主圖保持響應(yīng)式設(shè)計，通過表單元素設(shè)計表單操作項，根據(jù)表格風(fēng)格類設(shè)計出美觀、合理的表格樣式。表格主要由復(fù)選框、書籍編