基礎(chǔ)樣式目錄Contents01Bootstrap基礎(chǔ)排版設(shè)置02正文與文本塊樣式03實戰(zhàn)案例：在線簡歷模板04思考與練習(xí)01Bootstrap基礎(chǔ)排版設(shè)置默認(rèn)排版樣式Bootstrap默認(rèn)字體大小14像素，采用sans-serif字體族，如HelveticaNeue、Helvetica、Arial等。字體棧確保在不同設(shè)備上顯示效果一致。表2-1詳細(xì)列出了Bootstrap默認(rèn)排版設(shè)置，包括html、body、標(biāo)題和段落等元素的字體大小、行高和外邊距。字體棧優(yōu)化HelveticaNeue可能不是所有計算機(jī)的默認(rèn)字體，且安裝不完整時會導(dǎo)致顯示問題。可通過自定義樣式表覆蓋Bootstrap字體棧，使用font-family:Arial,Helvetica,"HelveticaNeue",sans-serif!important;確保字體顯示正常。排版樣式應(yīng)用Bootstrap為頁面排版提供了簡潔的默認(rèn)樣式，用戶無需手動調(diào)整字體大小或行高，即可快速開發(fā)出美觀的網(wǎng)頁。這種默認(rèn)設(shè)置大大提高了開發(fā)效率，同時保證了頁面的可讀性和一致性。頁面排版基礎(chǔ)標(biāo)準(zhǔn)標(biāo)題樣式Bootstrap重寫HTML默認(rèn)標(biāo)題樣式，所有標(biāo)題和段落元素的上外邊距被移除，下外邊距設(shè)置為0.5rem。標(biāo)題h1~h6的字體大小根據(jù)視口寬度動態(tài)調(diào)整，視口寬度大于或等于1200px時，字體大小分別為2.5rem、2rem、1.75rem、1.5rem、1.25rem、1rem。示例代碼展示了如何使用HTML標(biāo)題標(biāo)簽和Bootstrap標(biāo)題類實現(xiàn)不同級別的標(biāo)題效果，如<h1>到<h6>以及.h1到.h6，并可通過.display-1到.display-6類進(jìn)一步突出顯示標(biāo)題。內(nèi)聯(lián)子標(biāo)題與輔助文本標(biāo)題樣式優(yōu)化Bootstrap支持在標(biāo)題中嵌套<small>標(biāo)簽創(chuàng)建內(nèi)聯(lián)子標(biāo)題，并可通過.text-muted樣式類將子標(biāo)題文本設(shè)置為灰色，以補充或說明主標(biāo)題內(nèi)容。通過.small類為內(nèi)聯(lián)標(biāo)題添加輔助文本，如在<span>元素中使用.small類，可使文本字體大小變?yōu)楦冈氐?.875倍，增強頁面內(nèi)容的層次感和可讀性。Bootstrap為標(biāo)題提供了多種樣式類，如.display-1到.display-6，用于在大屏幕上顯示更大的標(biāo)題，提升視覺效果。這些樣式類在視口寬度大于或等于1200px時，字體大小分別為5rem、4.5rem、4rem、3.5rem、3rem、2.5rem，使標(biāo)題更具吸引力和表現(xiàn)力。標(biāo)題樣式設(shè)計02正文與文本塊樣式段落樣式Bootstrap為段落標(biāo)簽<p>設(shè)置了上邊距為0，下邊距為1rem的默認(rèn)樣式，確保段落之間的間距合理。通過.lead類可實現(xiàn)強調(diào)文本效果，使文字更大、更粗，行高更大，具體表現(xiàn)為font-size:1.25rem和font-weight:300。示例代碼展示了如何使用.lead類突出顯示重要段落，如<pclass="lead">這是要強調(diào)的文本內(nèi)容。</p>，使頁面內(nèi)容的重點更加突出，吸引用戶注意力。內(nèi)聯(lián)文本樣式Bootstrap重定義了內(nèi)聯(lián)文本元素的樣式，如<mark>用于突出顯示文本，<strong>用于加粗文本，<small>用于顯示略小的文本。HTML5中的<em>用于斜體文本，<del>用于刪除文本，<b>用于高亮顯示文本，<i>用于表示外來語或技術(shù)術(shù)語。示例代碼展示了如何使用這些內(nèi)聯(lián)文本元素實現(xiàn)不同的文本效果，如<em>強調(diào)</em>、<del>過時</del>、<b>突出顯示</b>和<i>外來語</i>，豐富了頁面文本的表現(xiàn)形式。文本塊樣式Bootstrap為文本塊提供了多種樣式，如縮略語、引用、列表和代碼等。縮略語使用<abbr>標(biāo)記實現(xiàn)，鼠標(biāo)懸停時顯示完整內(nèi)容；引用使用<blockquote>標(biāo)記和.blockquote類實現(xiàn)增強樣式；列表包括無序列表、有序列表和內(nèi)聯(lián)列表，可通過.list-unstyled和.list-inline類進(jìn)行樣式調(diào)整；代碼包括行內(nèi)代碼和代碼塊，分別使用<code>和<pre>標(biāo)簽實現(xiàn)。示例代碼展示了如何使用這些文本塊樣式，如縮略語<abbrtitle="HyperTextMarkupLanguage">HTML</abbr>、引用<blockquote>...</blockquote>、無序列表<ul>...</ul>和代碼塊<pre><code>...</code></pre>，使頁面內(nèi)容更加豐富和多樣化。正文樣式設(shè)計響應(yīng)式圖片Bootstrap通過.img-fluid類實現(xiàn)圖片的響應(yīng)式布局，使圖片能夠根據(jù)父容器的大小自動調(diào)整大小，保持寬高比。同時，.img-thumbnail類可為圖片添加內(nèi)邊距和灰色邊框，增強圖片的視覺效果。示例代碼展示了如何使用.img-fluid類創(chuàng)建響應(yīng)式圖片，如<imgsrc="..."class="img-fluid"alt="...">，確保圖片在不同設(shè)備上都能完美顯示，提升用戶體驗。圖片邊框與形狀在Bootstrap5中，.img-thumbnail類被廢棄，取而代之的是.rounded類用于添加圓角邊框，.border類用于添加邊框樣式。此外，.rounded-circle和.rounded-pill類可用于實現(xiàn)圓形和橢圓形圖片效果。示例代碼展示了如何使用這些類為圖片添加不同的邊框和形狀效果，如<imgsrc="..."class="img-fluidroundedborderborder-3"alt="...">，使圖片更具個性和美觀性。圖片輪廓標(biāo)記Bootstrap使用<figure>標(biāo)記和.figure類、.figure-img類、.figure-caption類為圖片和標(biāo)題提供基本樣式。通過這些類可以實現(xiàn)圖片與標(biāo)題的關(guān)聯(lián)顯示，增強頁面內(nèi)容的語義化和可讀性。示例代碼展示了如何使用輪廓標(biāo)記展示圖片和標(biāo)題，如<figureclass="figure">...<figcaptionclass="figure-caption">...</figcaption></figure>，使圖片和相關(guān)文本的展示更加清晰和專業(yè)。圖片樣式設(shè)計03實戰(zhàn)案例：在線簡歷模板案例效果本案例制作了一個響應(yīng)式的個人簡歷模板，頁面布局在中型以上設(shè)備（>768px）中顯示為左側(cè)信息欄、右側(cè)導(dǎo)航條和內(nèi)容區(qū)的布局；在中型以下設(shè)備（<768px）中，左側(cè)信息欄和右側(cè)內(nèi)容區(qū)將響應(yīng)式地進(jìn)行排列，以適應(yīng)不同設(shè)備的屏幕尺寸。簡歷模板頁面的導(dǎo)航條中包含“發(fā)送郵件”和“學(xué)歷照片”等鏈接，點擊后可跳轉(zhuǎn)到相應(yīng)頁面，進(jìn)一步增強了模板的功能性和用戶體驗。設(shè)計準(zhǔn)備項目使用HTML5文檔類型，并在頁面頭部導(dǎo)入Bootstrap框架的基本樣式文件、腳本文件、jQuery文件和自定義的CSS文件。配置文件中包含了必要的<meta>標(biāo)簽和鏈接，確保頁面在不同設(shè)備上都能正確顯示。示例代碼展示了項目的基本配置文件結(jié)構(gòu)，如<!DOCTYPEhtml>...<linkhref="..."rel="stylesheet">，為后續(xù)的頁面開發(fā)提供了基礎(chǔ)框架。設(shè)計布局頁面布局使用Bootstrap的網(wǎng)格系統(tǒng)進(jìn)行設(shè)計，左側(cè)信息欄在中型以上設(shè)備中占3份，右側(cè)內(nèi)容區(qū)占9份；在小屏幕設(shè)備中，左側(cè)信息欄和右側(cè)內(nèi)容區(qū)各占一行。通過自定義樣式，設(shè)置了頁面的最小寬度、字體大小和媒體查詢，以確保頁面在不同設(shè)備上的友好顯示。示例代碼展示了如何使用Bootstrap網(wǎng)格系統(tǒng)實現(xiàn)頁面布局，如<divclass="container-fluid">...<divclass="row">...</div></div>，并通過自定義樣式調(diào)整頁面的顯示效果。案例概述信息欄布局左側(cè)信息欄包含上下兩個部分，上部分由<img>和兩個<h>標(biāo)簽組成，用于顯示個人照片、姓名和求職意向；下半部分使用<h>標(biāo)簽和<p>標(biāo)簽顯示個人信息。信息欄在小型屏幕設(shè)備中一行顯示，在中型及以上設(shè)備中占一行的3份。示例代碼展示了信息欄的具體實現(xiàn)，如<divclass="col-sm-12col-md-3left">...<imgsrc="..."class="img-fluidborder">...</div>，通過網(wǎng)格系統(tǒng)和響應(yīng)式類實現(xiàn)了信息欄的布局和顯示。信息欄樣式信息欄使用Bootstrap的響應(yīng)式類和自定義樣式進(jìn)行美化，如為個人照片添加.img-fluid和.border類，為文本內(nèi)容設(shè)置字體大小、顏色和間距等樣式，使信息欄的顯示更加美觀和專業(yè)。示例代碼展示了信息欄樣式的具體實現(xiàn)，如.left{background:#f8f9fa;text-align:center;padding:1rem;}，通過CSS樣式調(diào)整信息欄的背景顏色、文本對齊方式和內(nèi)邊距。信息欄功能信息欄不僅展示了求職者的個人信息，還通過響應(yīng)式設(shè)計確保在不同設(shè)備上都能良好顯示。同時，信息欄的設(shè)計風(fēng)格簡潔明了，突出了求職者的核心信息，如姓名、求職意向和聯(lián)系方式，便于招聘者快速獲取關(guān)鍵信息。制作信息欄導(dǎo)航條使用無序列表<ul>定義，通過Bootstrap的響應(yīng)式浮動類和自定義樣式實現(xiàn)列表項目的布局。在小屏幕設(shè)備中，列表項目左浮動，使用<liclass="float-sm-left">定義；清除浮動使用<ulclass="clearfix">定義。示例代碼展示了導(dǎo)航條的具體實現(xiàn)，如<ulclass="d-flexalign-items-center">...<liclass="me-2">...</li></ul>，通過Flex布局和間距類實現(xiàn)了導(dǎo)航條的水平排列和項目間距。導(dǎo)航條布局使用CSS樣式去掉無序列表的項目符號，為字體圖標(biāo)添加顏色，并消除超鏈接下劃線，使導(dǎo)航條的顯示更加簡潔和美觀。具體樣式包括ul{list-style:none;}、i{color:#B7DEE5;}和a{text-decoration:none;}。示例代碼展示了導(dǎo)航條樣式的具體實現(xiàn)，通過這些樣式調(diào)整導(dǎo)航條的外觀，使其與頁面整體風(fēng)格保持一致。導(dǎo)航條樣式導(dǎo)航條為用戶提供了一個清晰的頁面導(dǎo)航結(jié)構(gòu)，方便用戶快速跳轉(zhuǎn)到不同的頁面或頁面內(nèi)的不同部分。通過添加字體圖標(biāo)和超鏈接，導(dǎo)航條不僅具有視覺吸引力，還具備了實用的功能性，提升了用戶的瀏覽體驗。導(dǎo)航條功能制作導(dǎo)航條工作經(jīng)歷部分包括標(biāo)題和工作經(jīng)歷信息欄。標(biāo)題使用<h5>標(biāo)簽并添加自定義樣式類color1，信息欄使用Bootstrap表格組件進(jìn)行布局，表頭背景色使用.table-success定義，內(nèi)容使用.table-info定義。示例代碼展示了工作經(jīng)歷部分的具體實現(xiàn)，如<h5class="color1">工作經(jīng)歷</h5>...<tableclass="table">...</table>，通過表格組件清晰地展示了工作經(jīng)歷的各項信息。專業(yè)技能部分包括標(biāo)題和專業(yè)技能信息欄。標(biāo)題同樣使用<h5>標(biāo)簽和color1樣式類，信息欄使用Bootstrap柵格系統(tǒng)進(jìn)行布局，分為兩列，分別展示擅長的技能和熟悉的技能。示例代碼展示了專業(yè)技能部分的具體實現(xiàn)，如<h5class="color1">專業(yè)技能</h5>...<divclass="row">...</div>，通過柵格系統(tǒng)和卡片組件實現(xiàn)了專業(yè)技能的分類展示。工作經(jīng)歷專業(yè)技能教育經(jīng)歷部分包括標(biāo)題和教育經(jīng)歷信息欄。標(biāo)題使用<h5>標(biāo)簽和color1樣式類，信息欄使用Bootstrap列表組件進(jìn)行布局，列表組項目使用.list-group-item定義，并嵌套網(wǎng)格系統(tǒng)，每行三列。示例代碼展示了教育經(jīng)歷部分的具體實現(xiàn)，如<h5class="color1">教育經(jīng)歷</h5>...<ulclass="list-group">...</ul>，通過列表組件清晰地展示了教育經(jīng)歷的各項信息。其他信息部分包括標(biāo)題和手風(fēng)琴式信息欄。標(biāo)題使用<h5>標(biāo)簽和color1樣式類，信息欄使用Bootstrap折疊組件、卡片組件和列表組結(jié)合設(shè)計，通過<divid="accordion">定義手風(fēng)琴折疊框，每個卡片容器包含標(biāo)題和內(nèi)容主體部分。示例代碼展示了其他信息部分的具體實現(xiàn)，如<h5class="color1">其他信息</h5>...<divclass="accordion"id="accordionExample">...</div>，通過折疊組件實現(xiàn)了信息的折疊和展開，使頁面內(nèi)容更加簡潔和易于瀏覽。教育經(jīng)歷其他信息制作簡歷主頁04思考與練習(xí)Bootstrap5的CSS基礎(chǔ)樣式中包含的內(nèi)聯(lián)文本元素有<mark>、<small>、<em>、<del>、<b>和<i>等。這些元素分別用于突出顯示文本、顯示略小的文本、設(shè)置文本為斜體、刪除文本、高亮顯示文本和表示外來語或技術(shù)術(shù)語。內(nèi)聯(lián)文本元素.display-1至.display-6類的定義代碼如下：css.display-1{font-size:5rem;}.display-2{font-size:4.5rem;}.display-3{font-size:4rem;}.display-4{font-size:3.5rem;}.display-5{font-size:3rem;}.display-6{font-size:2.5rem;}4.1.2在Bootstrap5中，控制列表樣式主要使用的類有.list-unstyled、.list-inline和.list-group等。.list-unstyled類用于刪除列表的自定義樣式，.list-inline類用于實現(xiàn)內(nèi)聯(lián)列表，.list-group類用于創(chuàng)建列表組，增強列表的視覺效果。控制列表樣式的類在Bootstrap5中，為<img>元素添加的類有.img-fluid和.img-thumbnail等。.img-fluid類使圖片支持響應(yīng)式布局，根據(jù)父容器的大小自動調(diào)整大小，保持寬高比；.img-thumbnail類為圖片添加內(nèi)邊距和灰色邊框，增強圖片的視覺效果。在Bootstrap5中，.img-thumbnail類被廢棄，取而代之的是.rounded類用于添加圓角邊框，.border類用于添加邊框樣式。4.1.4在Bootstrap5中，設(shè)置文本對齊方式的主要類及其效果如下：.text-left：將文本左對齊。.text-center：將文本居中對齊。.text-right：將文本右對齊。.text-justify：將文本兩端對齊。.text-nowrap：防止文本換行。這些類通過設(shè)置text-align屬性來實現(xiàn)不同的文本對齊效果，使頁面文本的排版更加靈活和多樣化。設(shè)置文本對齊方式的類Bootstrap5提供了多種類用于調(diào)整元素的邊距和補白，如m-（外邊距）、p-（內(nèi)邊距）等。這些類的數(shù)值范圍從0到5，分別表示不同的邊距或補白大小。例如：m-1：外邊距為0.25rem。m-2：外邊距為0.5rem。p-1：內(nèi)邊距為0.25rem。p-2：內(nèi)邊距為0.5rem。在容器內(nèi)應(yīng)用這些類時，可以通過添加相應(yīng)的類名來調(diào)整元素的邊距和補白，如<divclass="m-2p-3">...</div>，使頁面布局更加靈活和美觀。調(diào)整元素邊距和補白的類Bootstrap5為頁面排版提供了響應(yīng)式工具，主要包括.d-none、.d-sm-block、.d-md-block、.d-lg-block、.d-xl-block等類，用于在