第4章-Bootstrap頁面內容

第4章Bootstrap頁面內容3.1

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

例5.31.常用標題的實現(xiàn)效果4.1排版4.1.1常用排版類2.段落的語法格式（1）.lead類的語法格式如下所示。4.1排版4.1.1常用排版類<pclass="lead">這是一個引導段落，它從常規(guī)段落中脫穎而出。</p>2.段落的代碼實現(xiàn)使用.lead類突出顯示贊美長城的詩句。4.1排版4.1.1常用排版類<p>長城是世界上修建時間最長、工程最大的一項古代防御工程，它是一道高大、堅固而且連綿不斷的長垣。</p><pclass="lead">“望長城內外,惟余莽莽;大河上,頓失滔滔。”</p><p>1952年,國家組織開展了第一批長城保護維修工程。正是一代又一代長城人的專注、傳承,才讓我們在今天依然能夠感受到萬里長城的磅礴氣勢。</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)使用縮略語標簽與initialism類為文本實現(xiàn)縮略語樣式。4.1排版4.1.1常用排版類<p>社會主義核心價值體系是由有關<abbrtitle="馬克思主義指導思想">指導思想</abbr><abbrtitle="中國特色社會主義理想">一個理想</abbr><abbrtitle="以愛國主義為核心的民族精神和以改革開放為核心的時代精神">兩種精神</abbr><abbrtitle="社會主義榮辱觀">一個道德觀念</abbr>組成的</p><p><abbrtitle="社會主義核心觀是社會主義核心價值體系的內核"class="initialism">社會主義核心價值觀</abbr></p>主體代碼

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

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

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

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

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

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

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

<samp>標簽指示程序的示例輸出結果4.2代碼風格2.行內代碼與代碼塊文本內容<code><section></code>文本內容.

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

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

</code></pre>行內代碼的語法格式4.2代碼風格使用行內代碼標簽與代碼塊標簽分別輸出單行代碼及多行代碼。2.行內代碼與代碼塊<div>行內代碼：<code><code></code>標簽可實現(xiàn)展示行內代碼片段。</div><p>行內代碼：<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代碼風格2.行內代碼與代碼塊-實現(xiàn)效果4.2代碼風格3.其他代碼的語法格式如下所示。//<var>標簽<var>y</var>=<var>m</var><var>x</var>+<var>b</var>//<kbd>標簽文本內容<kbd>cd</kbd>文本內容.<br>文本內容<kbd><kbd>ctrl</kbd>+<kbd>,</kbd></kbd>//<samp>標簽<samp>輸出內容.</samp>其他代碼的語法格式如下所示。4.2代碼風格變量標簽用于包裹變量，輸入標簽用于標明鍵盤輸入，輸出標簽用于以示例的形式輸出程序的示例輸出代碼。這些代碼標簽用法基本一致，即使用雙標簽將代碼進行包裹。使用變量標簽、用戶輸入標簽、示例輸出標簽實現(xiàn)代碼展示。3.其他代碼<!--<var>標簽--><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>標簽--><p>對代碼進行全選操作時，請輸入：<kbd>ctrl</kbd>+<kbd>a</kbd></p><br><!--<samp>標簽-->document.write("helloworld")<p>運行程序后，其示例結果為：<samp>helloworld</samp></p>主體代碼

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

例4.11<tableclass="tabletable-borderedtable-hovertext-center"><caption>24節(jié)氣</caption><!--藍色背景--><theadclass="table-primary"><tr><th>#</th><th>春</th><th>夏</th><th>秋</th><th>冬</th></tr></thead><tbody><!--淺藍色背景--><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表格的個性化風格4.表格的實現(xiàn)效果在上述代碼中，首先為<table>標簽應用.table類保持Bootstrap表格的默認樣式，其次為<table>標簽應用.table-hover類、.table-bordered類、.text-right類，分別使表格保持鼠標懸停變色，為表格添加邊框樣式，使表格內容水平居中，即可完成此個性化表格設計。4.4表單表單控件基本結構常用表單控件類表單控件應用4.4表單表單包括表單域、輸入框、單選按鈕、復選框等控件，Bootstrap4進一步擴展了表單樣式，使表單在瀏覽器和設備之間的呈現(xiàn)更具一致性，本節(jié)將詳細些介紹表單控件的應用。4.4表單1.表單控件基本結構介紹4.4.1表單控件基本結構在Bootstrap4中，為文本表單控件（如<input>、<textarea>、<select>）添加.form-control類，可使文本表單控件獲得統(tǒng)一的全局樣式，如寬度100%、淺灰色的邊框，4px的圓角等。在組合使用<label>標簽和表單控件時，可將標簽與表單控件放置在.form-group類定義的表單組中，從而使表單組內的元素在視覺呈現(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.表單控件基本結構介紹表單控件的基本結構如下所示。4.4表單4.4.1表單控件基本結構1.常用表單控件類介紹Boottsrap4中內置了大量表單控件類，可用于控制表單的尺寸、狀態(tài)、輸入范圍等。4.4表單4.4.2常用表單控件類4.3表格4.3.2表格的個性化風格名稱說明名稱.form-control為文本表單控件設置統(tǒng)一樣式，如寬度100%、淺灰色的邊框，4px的圓角等。.form-control.form-control-{lg|sm}用于設置表單控件的尺寸，如設置大號、小號表單等。.form-control-{lg|sm}.form-control-plaintext用于將應用了readonly屬性的表單控件樣式化為只讀的純文本。.form-control-plaintext.form-control-range用于設置水平的范圍輸入效果，范圍輸入效果早不同的瀏覽器中效果不同。.form-control-range.form-text用于創(chuàng)建表單的幫助文本。.form-text.form-check單選按鈕、復選框的父容器，應用位置與.form-group類一致。可實現(xiàn)單選按鈕、復選框堆疊效果。.form-check容器內的控件需應用.form-check-input類。.form-check.form-check-input.form-check容器內的<input>控件需應用.form-check-input類。.form-check-input.form-check-label.form-check容器內的<label>控件需應用.form-check-label類。.form-check-label.form-check-inline應用于.form-check容器，可使容器內的單選按鈕和復選框實現(xiàn)水平排列效果。.form-check-inline.disabled用于設置單選按鈕與復選框的禁用狀態(tài)，<input>的禁用狀態(tài)則通過diaabled屬性來實現(xiàn)。.disabled.form-row表單行。表單控件不僅可與網(wǎng)格布局（row、col）組合使用，建立更復雜的布局。還可借助Bootstrap4定義的.form-row類使表單獲得更緊湊的布局。.form-row4.4表單4.4.3表單控件應用表單控件的應用演示“實踐是檢驗真理的唯一標準”。應用上述表單控件的常用工具類來展示其不同的顯示效果。主體代碼

例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>單選按鈕與復選框的布局類應用</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>表單控件的應用演示4.4表單4.4.3表單控件應用表單的實現(xiàn)效果表單控件類的顯示效果如圖所示。4.4表單4.4.3表單控件應用4.5圖片

圖片類圖片對齊方式Bootstrap框架增強了圖片功能，為圖片提供響應式行為。開發(fā)者在項目中引用圖片將更加便捷且圖片元素更加穩(wěn)定。4.5圖片4.5.1圖片類1.圖片的常用類介紹名稱說明.img-fluid響應式圖片.img-thumbnail縮略圖，給圖片加上一個圓角且1px的邊界的邊框樣式.rounded圖片樣式，圖片實現(xiàn)圓角矩形樣式.rounded-circle圖片樣式，圖片實現(xiàn)圓角50%樣式以響應式圖片為例進行介紹，通過Bootstrap4所提供的.img-fluid類使其支持響應式布局。其原理是將max-width:100%、height:auto賦予圖片，實現(xiàn)響應式布局，圖片將隨父元素同步縮放。響應式圖片的語法格式如下所示。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ōu)g覽器窗口的尺寸時，該圖片將隨瀏覽器窗口的變化而同步縮放。4.5Bootstrap布局基礎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>標簽轉換成塊級元素。4.5Bootstrap布局基礎4.5.2圖片對齊方式2.圖片對齊方式的應用演示<!--父元素清除浮動影響--><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結合圖片類，通過一個案例來演示圖片對齊方式的設置。4.5Bootstrap布局基礎4.5.2圖片對齊方式3.圖片類的實現(xiàn)效果4.6畫像

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

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