Bootstrap響應(yīng)式Web開發(fā)（第2版）第4章 Bootstrap開發(fā)基礎(chǔ)_第1頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第4章 Bootstrap開發(fā)基礎(chǔ)_第2頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第4章 Bootstrap開發(fā)基礎(chǔ)_第3頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第4章 Bootstrap開發(fā)基礎(chǔ)_第4頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第4章 Bootstrap開發(fā)基礎(chǔ)_第5頁
已閱讀5頁，還剩91頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第4章Bootstrap開發(fā)基礎(chǔ)《Bootstrap響應(yīng)式Web開發(fā)（第2版）》學習目標/Target掌握Bootstrap的下載和引入，能夠獨立完成Bootstrap的下載和引入掌握Bootstrap布局容器的使用方法，能夠運用容器類創(chuàng)建不同特征的布局容器掌握Bootstrap柵格系統(tǒng)的使用方法，能夠運用柵格系統(tǒng)創(chuàng)建頁面布局

掌握Bootstrap工具類的使用方法，能夠運用工具類根據(jù)不同的設(shè)備自動應(yīng)用

特定的樣式章節(jié)概述/Summary在使用Bootstrap進行響應(yīng)式網(wǎng)頁開發(fā)之前，首先要學習如何下載并引入Bootstrap，然后學習Bootstrap的布局容器、柵格系統(tǒng)和工具類等知識。只有對這些知識有深入的理解，才能充分發(fā)揮Bootstrap的優(yōu)勢，并在實際項目中進行靈活而高效地開發(fā)。本章將對Bootstrap開發(fā)基礎(chǔ)進行詳細講解。目錄/Contents4.14.24.3Bootstrap下載和引入Bootstrap布局容器Bootstrap柵格系統(tǒng)4.4Bootstrap工具類Bootstrap下載和引入4.14.1.1下載Bootstrap

先定一個小目標！掌握Bootstrap的下載方法，能夠獨立完成Bootstrap的下載步驟1在瀏覽器中訪問Bootstrap的官方網(wǎng)站，Bootstrap官方網(wǎng)站首頁如下圖所示。步驟3步驟4步驟2演示如何下載Bootstrap4.1.1下載Bootstrap單擊Bootstrap官方網(wǎng)站中的“Docs”鏈接，跳轉(zhuǎn)到Bootstrap官方文檔頁面，如下圖所示。步驟1步驟3步驟4步驟24.1.1下載Bootstrap演示如何下載Bootstrap步驟3步驟4步驟2步驟1單擊Bootstrap官方文檔頁面中的“Download”鏈接，進入Bootstrap下載頁面，如下圖所示。4.1.1下載Bootstrap演示如何下載Bootstrap步驟3步驟4步驟2步驟1在Bootstrap下載頁面中，序號①方框處的內(nèi)容表示Bootstrap的不同下載方式的鏈接，具體解釋如下。CompiledCSSandJS：單擊該鏈接可以跳轉(zhuǎn)到下載Bootstrap預(yù)編譯文件的區(qū)域，預(yù)編譯文件中包含已編譯的CSS文件和JavaScript文件。Source

files：單擊該鏈接可以跳轉(zhuǎn)到下載Bootstrap源代碼文件的區(qū)域。Examples：單擊該鏈接可以跳轉(zhuǎn)到下載Bootstrap的示例文件的區(qū)域。CDNviajsDelivr：單擊該鏈接可以跳轉(zhuǎn)到獲取CDN鏈接的區(qū)域。Packagemanagers：單擊該鏈接可以跳轉(zhuǎn)到通過常見的包管理器（例如npm、yarn等）下載Bootstrap的方法的區(qū)域。4.1.1下載Bootstrap演示如何下載Bootstrap單擊Bootstrap下載頁面中序號②方框內(nèi)的“Download”按鈕，將Bootstrap下載至本地。下載完成后，在下載目錄中找到一個名為bootstrap-5.3.0-dist.zip的壓縮包文件，如下圖所示。步驟3步驟4步驟2步驟14.1.1下載Bootstrap演示如何下載Bootstrap創(chuàng)建D:\Bootstrap\chapter04目錄，解壓縮bootstrap-5.3.0-dist.zip壓縮包文件到該目錄下，解壓縮后的目錄結(jié)構(gòu)如下所示。步驟3步驟4步驟2步驟14.1.1下載Bootstrap演示如何下載Bootstrapbootstrap-5.3.0-dist/├──css/└──js/在Bootstrap的目錄結(jié)構(gòu)中，有兩個文件夾，即css和js，具體解釋如下。css：用于存放Bootstrap的CSS文件。這些文件包含對各種常見HTML元素的樣式定義，包括按鈕、表格、表單等。js：用于存放Bootstrap的JavaScript文件。這些文件提供一些組件的交互功能，例如導(dǎo)航欄、模態(tài)框、下拉框等。步驟3步驟4步驟2步驟14.1.1下載Bootstrap演示如何下載Bootstrapcss文件夾中的文件如下圖所示。步驟3步驟4步驟2步驟14.1.1下載Bootstrap演示如何下載Bootstrapjs文件夾中的文件如下圖所示。步驟3步驟4步驟2步驟14.1.1下載Bootstrap演示如何下載Bootstrap下面對css文件夾和js文件夾中常用的文件進行介紹。bootstrap.css、bootstrap.js：未壓縮的CSS、JavaScript文件。bootstrap.css.map、bootstrap.js.map：CSS、JavaScript源碼映射表文件。bootstrap.min.css、bootstrap.min.js：壓縮后的CSS、JavaScript文件。bootstrap.min.css.map、bootstrap.min.js.map：壓縮后CSS、JavaScript文件的源碼映射表文件。bootstrap.bundle.js：該文件是捆綁了Bootstrap和Popper.js的JavaScript文件。bootstrap.bundle.min.js：壓縮后的捆綁了Bootstrap和Popper.js的JavaScript文件。步驟3步驟4步驟2步驟14.1.1下載Bootstrap演示如何下載Bootstrap4.1.2引入Bootstrap

先定一個小目標！掌握Bootstrap的引入方法，能夠在HTML文件中引入Bootstrap4.1.2引入Bootstrap在下載完Bootstrap后，若要在項目中使用Bootstrap來開發(fā)響應(yīng)式網(wǎng)頁，需要在HTML文件中引入Bootstrap。在實際開發(fā)中，讀者可以復(fù)制已經(jīng)解壓縮的Bootstrap文件到項目中，并引入頁面所需的文件。4.1.2引入Bootstrap為了使網(wǎng)頁具有更快的加載速度，建議引入壓縮后的文件，如bootstrap.min.css、bootstrap.min.js和bootstrap.bundle.min.js等。這些文件占用空間較小，加載速度較快。如果只需要使用Bootstrap設(shè)置頁面樣式，則只引入bootstrap.min.css文件即可。如果需要使用Bootstrap提供的具有交互功能的組件，如輪播圖、導(dǎo)航欄等，需要同時引入bootstrap.min.css和bootstrap.min.js文件。4.1.2引入Bootstrap下面通過案例來演示如何引人Bootstrap。步驟1創(chuàng)建D:\Bootstrap\chapter04目錄，并使用VSCode編輯器打開該目錄。步驟3步驟4步驟2步驟5演示如何引入Bootstrap4.1.2引入Bootstrap步驟1步驟3步驟4步驟2步驟5將解壓縮的bootstrap-5.3.0-dist文件復(fù)制到D:\Bootstrap\chapter04目錄下，以便于在HTML文件中引用Bootstrap。4.1.2引入Bootstrap演示如何引入Bootstrap步驟3步驟4步驟2步驟5步驟1創(chuàng)建demo.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)。4.1.2引入Bootstrap演示如何引入Bootstrap步驟3步驟4步驟2步驟5步驟1使用<link>標簽引入bootstrap.min.css文件，具體代碼如下。<linkrel="stylesheet"href="bootstrap-5.3.0-dist/css/bootstrap.min.css">4.1.2引入Bootstrap演示如何引入Bootstraphref屬性用于指定要引入的文件路徑步驟3步驟4步驟2步驟5步驟14.1.2引入Bootstrap演示如何引入Bootstrap使用<script>標簽引入bootstrap.min.js文件，具體代碼如下。<body><scriptsrc="bootstrap-5.3.0-dist/js/bootstrap.js"></script></body>src屬性用于指定要引入的文件路徑Bootstrap布局容器4.24.2.1初識Bootstrap布局容器

先定一個小目標！熟悉Bootstrap布局容器，能夠歸納Bootstrap內(nèi)置的三種容器類及作用4.2.1初識Bootstrap布局容器在Bootstrap中，布局容器用于包裹內(nèi)容元素?？梢酝ㄟ^內(nèi)置的容器類來創(chuàng)建布局容器，容器類中定義了預(yù)設(shè)的樣式，例如寬度和邊距。因此，通過使用不同的容器類創(chuàng)建的布局容器可以輕松地控制寬度和邊距。4.2.1初識Bootstrap布局容器Bootstrap提供了3種內(nèi)置的容器類，具體如下。①.container類：用于創(chuàng)建默認布局容器。默認布局容器具有固定的寬度，并且會根據(jù)視口寬度自動調(diào)整寬度。②.container-fluid類：用于創(chuàng)建流式布局容器。流式布局容器會占據(jù)整個視口寬度，即視口寬度為100%視口寬度。③.container-{sm|md|lg|xl|xxl}類：用于創(chuàng)建響應(yīng)式布局容器，其中，sm、md、lg、xl、xxl統(tǒng)稱為類中綴，用于表示不同的斷點。4.2.1初識Bootstrap布局容器斷點設(shè)備類型類中綴視口寬度超小超小型設(shè)備無小于576px小小型設(shè)備sm大于等于576px且小于768px中中型設(shè)備md大于等于768px且小于992px大大型設(shè)備lg大于等于992px且小于1200px特大特大型設(shè)備xl大于等于1200px且小于1400px超大超大型設(shè)備xxl大于等于1400pxBootstrap中的斷點有超小、小、中、大、特大、超大，這些斷點用于根據(jù)不同的視口寬度劃分設(shè)備類型。Bootsrap中的斷點與設(shè)備類型、類中綴和視口寬度的關(guān)系如下表所示。4.2.1初識Bootstrap布局容器容器類超小型設(shè)備小型設(shè)備中型設(shè)備大型設(shè)備特大型設(shè)備超大型設(shè)備.container100%540px720px960px1140px1320px.container-sm100%540px720px960px1140px1320px.container-md100%100%720px960px1140px1320px.container-lg100%100%100%960px1140px1320px.container-xl100%100%100%100%1140px1320px.container-xxl100%100%100%100%100%1320px.container-fluid100%100%100%100%100%100%容器類在不同設(shè)備中設(shè)定的寬度如下表所示。4.2.2Bootstrap布局容器的使用方法

先定一個小目標！掌握Bootstrap布局容器的使用方法，能夠運用容器類創(chuàng)建不同特征的布局容器在Bootstrap中，通常使用<div>標簽定義布局容器，并且通過添加合適的容器類，為布局容器賦予相應(yīng)的布局樣式。無論是文字、圖像、表單，還是其他HTML元素，都能夠被放置在布局容器內(nèi)，從而實現(xiàn)所需的布局效果。4.2.2Bootstrap布局容器的使用方法使用.container-sm類創(chuàng)建一個布局容器的示例代碼如下。<divclass="container-sm"><!--在這里添加要布局的內(nèi)容--></div>4.2.2Bootstrap布局容器的使用方法在此處可以添加<img>、<p>等標簽來添加要布局的內(nèi)容4.2.2Bootstrap布局容器的使用方法下面通過案例來講解如何使用Bootstrap布局容器。步驟1演示如何使用Bootstrap布局容器創(chuàng)建container.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。步驟24.2.2Bootstrap布局容器的使用方法編寫頁面結(jié)構(gòu)，具體代碼如下。<body><divclass="container"><h4>.container類設(shè)置布局容器</h4></div><divclass="container-fluid"><h4>.container-fluid類設(shè)置布局容器</h4></div><divclass="container-sm"><h4>.container-sm類設(shè)置布局容器</h4></div></body>步驟1步驟24.2.2Bootstrap布局容器的使用方法演示如何使用Bootstrap布局容器保存上述代碼，在瀏覽器中打開container.html文件，按“F12”鍵啟動開發(fā)者工具，進入移動設(shè)備調(diào)試模式，將移動設(shè)備的視口寬度設(shè)置為575px，以模擬超小型設(shè)備。在開發(fā)者工具的元素面板中，找到包含.container類的div元素，將鼠標指針移入對應(yīng)類的div元素后，單擊元素，查看元素的相關(guān)信息。container.html頁面效果和元素面板的內(nèi)容如下圖所示。4.2.2Bootstrap布局容器的使用方法在開發(fā)者工具的元素面板中，找到包含.container-fluid類的div元素，將鼠標指針移入對應(yīng)類的div元素后，單擊元素，查看元素的相關(guān)信息。container.html頁面效果和元素面板的內(nèi)容如下圖所示。4.2.2Bootstrap布局容器的使用方法在開發(fā)者工具的元素面板中，找到包含.container-sm類的div元素，將鼠標指針移入對應(yīng)類的div元素后，單擊元素，查看元素的相關(guān)信息。container.html頁面效果和元素面板的內(nèi)容如下圖所示。4.2.2Bootstrap布局容器的使用方法將移動設(shè)備的視口寬度設(shè)置為650px（模擬小型設(shè)備）時，在開發(fā)者工具的元素面板中，找到包含.container類的div元素，將鼠標指針移入對應(yīng)類的div元素后，單擊元素，查看元素的相關(guān)信息。container.html頁面效果和元素面板的內(nèi)容如下圖所示。4.2.2Bootstrap布局容器的使用方法將移動設(shè)備的視口寬度設(shè)置為650px（模擬小型設(shè)備）時，在開發(fā)者工具的元素面板中，找到包含.container-fluid類的div元素，將鼠標指針移入對應(yīng)類的div元素后，單擊元素，查看元素的相關(guān)信息。container.html頁面效果和元素面板的內(nèi)容如下圖所示。4.2.2Bootstrap布局容器的使用方法將移動設(shè)備的視口寬度設(shè)置為650px（模擬小型設(shè)備）時，在開發(fā)者工具的元素面板中，找到包含.container-sm類的div元素，將鼠標指針移入對應(yīng)類的div元素后，單擊元素，查看元素的相關(guān)信息。container.html頁面效果和元素面板的內(nèi)容如下圖所示。4.2.2Bootstrap布局容器的使用方法Bootstrap柵格系統(tǒng)4.34.3.1初識Bootstrap柵格系統(tǒng)

先定一個小目標！了解Bootstrap柵格系統(tǒng)，能夠說出定義行容器和列容器的類4.3.1初識Bootstrap柵格系統(tǒng)什么是柵格系統(tǒng)？4.3.1初識Bootstrap柵格系統(tǒng)Bootstrap柵格系統(tǒng)（GridSystems）是基于12列布局的系統(tǒng)，通過行（row）和列（column）的組合來創(chuàng)建頁面布局。通過將內(nèi)容分配到列上，開發(fā)者可以靈活地控制布局。4.3.1初識Bootstrap柵格系統(tǒng).row-cols-{sm|md|lg|xl|xxl}-{value}Bootstrap柵格系統(tǒng)提供了用于定義行容器和列容器的類，通過將這些類添加到<div>標簽中，可以實現(xiàn)在不同視口寬度下的靈活布局。定義行容器的類為.row類，它主要用于將元素組合成行。除了.row類之外，Bootstrap還提供了.row-cols類，用于定義行容器中元素的列布局，語法格式如下。4.3.1初識Bootstrap柵格系統(tǒng)下面對Bootstrap柵格系統(tǒng)中.row-cols類的語法格式進行講解。row：表示行。cols：表示列。{sm|md|lg|xl|xxl}：表示斷點的類中綴，用于為特定設(shè)備設(shè)置列。使用超小斷點時，應(yīng)省略類中綴及其前面的“-”。{value}：表示每行容器中列的數(shù)量?？梢匀≈禐閍uto或1~6的整數(shù)。當取值為auto時，列的寬度會根據(jù)內(nèi)容自動調(diào)整。當取值為整數(shù)時，表示每行容器中具有的固定列數(shù)。例如，取值為1表示每行只有一列，取值為2表示每行有兩列，依此類推。4.3.1初識Bootstrap柵格系統(tǒng)在Bootstrap的柵格系統(tǒng)中，可以同時使用多個類指定行容器中列的個數(shù)。例如.row-cols-{value}、.row-cols-sm-{value}、.row-cols-md-{value}、.row-cols-lg-{value}、.row-cols-xl-{value}和.row-cols-xxl-{value}類。當同時設(shè)置多個類時，程序會根據(jù)當前視口寬度來使相應(yīng)的類生效，從而實現(xiàn)在不同設(shè)備中展示不同的頁面布局。如果沒有為當前設(shè)備設(shè)置相應(yīng)的類，Bootstrap會自動使用小于當前設(shè)備的類中最接近當前設(shè)備的類。例如，當同時設(shè)置了.row-cols-{value}類和.row-cols-md-{value}類時，如果當前設(shè)備是小型設(shè)備，則.row-cols-{value}類將會生效。4.3.1初識Bootstrap柵格系統(tǒng)下面對Bootstrap柵格系統(tǒng)中定義列容器的類的語法格式進行講解。①col：表示列。②{sm|md|lg|xl|xxl}：表示斷點的類中綴，用于為特定設(shè)備設(shè)置列。使用超小斷點時，應(yīng)省略類中綴及其前面的“-”。{value}：表示元素在一行中所占的列數(shù)，取值為auto或1~12。當取值為auto時，列的寬度會根據(jù)內(nèi)容自動調(diào)整。當取值為1~12時，列會被固定為等寬的列，其中，12表示一整行的寬度。如果1行超過了12列，超出的列會自動換行。.col-{sm|md|lg|xl|xxl}-{value}定義列容器的類的語法格式如下。4.3.1初識Bootstrap柵格系統(tǒng)定義列容器的類可以寫多個，即可以同時設(shè)置.col-{value}、.col-sm-{value}、.col-md-{value}、.col-lg-{value}、.col-xl-{value}和.col-xxl-{value}類。當同時設(shè)置多個類的時候，程序會根據(jù)當前視口寬度來使相應(yīng)的類生效，從而實現(xiàn)在不同設(shè)備中展示不同的頁面布局。如果沒有為當前設(shè)備設(shè)置相應(yīng)的類，Bootstrap會自動使用小于當前設(shè)備的類中最接近當前設(shè)備的類。例如，當同時設(shè)置了.col-{value}類和.col-md-{value}類時，如果當前設(shè)備是小型設(shè)備，則.col-{value}類生效。4.3.2Bootstrap柵格系統(tǒng)的使用方法

先定一個小目標！掌握Bootstrap柵格系統(tǒng)的使用方法，能夠運用柵格系統(tǒng)創(chuàng)建頁面布局4.3.2Bootstrap柵格系統(tǒng)的使用方法在使用Bootstrap柵格系統(tǒng)時，首先需要在布局容器中創(chuàng)建一個.row類的<div>標簽作為行容器，然后在行容器的內(nèi)部創(chuàng)建列容器。通過在列容器的<div>標簽中添加.col類，可以定義不同視口寬度下的列寬度。4.3.2Bootstrap柵格系統(tǒng)的使用方法<divclass="container"><divclass="row"><divclass="col-3"><!--在此處定義列的內(nèi)容--></div><divclass="col-3"><!--在此處定義列的內(nèi)容--></div></div></div>在布局容器中定義柵格系統(tǒng)的行容器和列容器的示例代碼如下。4.3.2Bootstrap柵格系統(tǒng)的使用方法<divclass="row"><divclass="col-3"><divclass="row"><divclass="col-6"></div><divclass="col-6"></div></div></div></div>Bootstrap柵格系統(tǒng)支持在列容器中嵌套行容器，示例代碼如下。4.3.2Bootstrap柵格系統(tǒng)的使用方法除此之外，Bootstrap柵格系統(tǒng)還提供.offset-{sm|md|lg|xl|xxl}-{value}類，用于將列容器向右側(cè)偏移。該類主要通過增加了當前元素的左外邊距（margin-left）實現(xiàn)，value的取值范圍為1~12，表示偏移的列數(shù)。4.3.2Bootstrap柵格系統(tǒng)的使用方法下面通過案例來講解如何使用Bootstrap柵格系統(tǒng)實現(xiàn)導(dǎo)航欄效果。4.3.2Bootstrap柵格系統(tǒng)的使用方法導(dǎo)航欄效果的實現(xiàn)思路：首先定義導(dǎo)航欄的頁面結(jié)構(gòu)，使用.container-fluid類定義一個流式布局容器。然后在流式布局容器中定義行和列，實現(xiàn)在中型及以上設(shè)備（視口寬度≥768px的設(shè)備）中，導(dǎo)航欄的所有導(dǎo)航項在同一行顯示，而在中型以下設(shè)備（視口寬度<768px的設(shè)備）中，每個導(dǎo)航項占據(jù)整個視口寬度。步驟1創(chuàng)建NavigationBar.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。步驟3步驟2演示如何使用Bootstrap柵格系統(tǒng)4.3.2Bootstrap柵格系統(tǒng)的使用方法步驟1步驟3步驟2編寫頁面結(jié)構(gòu)，具體代碼如下。4.3.2Bootstrap柵格系統(tǒng)的使用方法演示如何使用Bootstrap柵格系統(tǒng)<body><divclass="container-fluid"><ulclass="row"><liclass="col-md-3">首頁</li><liclass="col-md-3">通知公告</li><liclass="col-md-3">合作交流</li><liclass="col-md-3">關(guān)于我們</li></ul></div></body>步驟3步驟2步驟14.3.2Bootstrap柵格系統(tǒng)的使用方法演示如何使用Bootstrap柵格系統(tǒng)編寫頁面樣式，具體代碼如下。<style>.row{padding:0;}li{list-style:none;text-align:center;padding:10px;font-size:20px;border:1pxsolidblack;}</style>4.3.2Bootstrap柵格系統(tǒng)的使用方法保存上述代碼，在瀏覽器中打開NavigationBar.html文件，按“F12”鍵啟動開發(fā)者工具，進入移動設(shè)備調(diào)試模式，將移動設(shè)備的視口寬度設(shè)置為768px（模擬中型設(shè)備）時的頁面效果如下圖所示。4.3.2Bootstrap柵格系統(tǒng)的使用方法將移動設(shè)備的視口寬度設(shè)置為576px（模擬小型設(shè)備）時的頁面效果如下圖所示。Bootstrap工具類4.44.4.1顯示方式工具類

先定一個小目標！掌握顯示方式工具類的使用方法，能夠運用顯示方式工具類根據(jù)不同的設(shè)備類型控制元素的顯示與隱藏4.4.1顯示方式工具類在進行響應(yīng)式頁面開發(fā)時，常常需要根據(jù)不同的設(shè)備類型控制元素的顯示與隱藏，這時可以借助顯示方式工具類來實現(xiàn)。4.4.1顯示方式工具類.d-{sm|md|lg|xl|xxl}-{value}顯示方式工具類的語法格式如下。下面對顯示方式工具類的語法格式進行講解。①d：表示display，取自display的首字母，以便于理解和記憶。②{sm|md|lg|xl|xxl}：表示斷點的類中綴，用于為特定設(shè)備設(shè)置顯示方式。使用超小斷點時，應(yīng)省略類中綴及其前面的“-”。③{value}：表示d的不同取值，包括none（隱藏）、block（塊）、inline（行內(nèi)）、inline-block（行內(nèi)塊）、flex（Flex容器）、inline-flex（內(nèi)聯(lián)的Flex容器）等。4.4.1顯示方式工具類示例超小型設(shè)備小型設(shè)備中型設(shè)備大型設(shè)備特大型設(shè)備超大型設(shè)備.d-none.d-sm-block隱藏顯示顯示顯示顯示顯示.d-sm-none.d-md-block顯示隱藏顯示顯示顯示顯示.d-md-none.d-lg-block顯示顯示隱藏顯示顯示顯示.d-lg-none.d-xl-block顯示顯示顯示隱藏顯示顯示.d-xl-none.d-xxl-block顯示顯示顯示顯示隱藏顯示.d-xxl-none顯示顯示顯示顯示顯示隱藏根據(jù)顯示方式工具類的命名格式，可以選取不同的類中綴和值來使用顯示方式工具類。通過組合顯示方式工具類可以輕松控制元素在特定設(shè)備中的顯示方式?？刂圃卦谔囟ㄔO(shè)備中隱藏的示例如下表所示。4.4.1顯示方式工具類示例超小型設(shè)備小型設(shè)備中型設(shè)備大型設(shè)備特大型設(shè)備超大型設(shè)備.d-sm-none顯示隱藏隱藏隱藏隱藏隱藏.d-none.d-sm-block.d-md-none隱藏顯示隱藏隱藏隱藏隱藏.d-none.d-md-block.d-lg-none隱藏隱藏顯示隱藏隱藏隱藏.d-none.d-lg-block.d-xl-none隱藏隱藏隱藏顯示隱藏隱藏.d-none.d-xl-block.d-xxl-none隱藏隱藏隱藏隱藏顯示隱藏.d-none.d-xxl-block隱藏隱藏隱藏隱藏隱藏顯示控制元素在特定設(shè)備中顯示的示例如下表所示。4.4.1顯示方式工具類下面通過案例來講解如何使用顯示方式工具類實現(xiàn)元素在不同設(shè)備中的顯示與隱藏。步驟1演示如何使用顯示方式工具類創(chuàng)建ResponsiveToolClass.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。步驟24.4.1顯示方式工具類編寫頁面結(jié)構(gòu)，具體代碼如下。<body><divclass="d-noned-sm-block">

紙上得來終覺淺，絕知此事要躬行。

</div><divclass="d-sm-none">

學非探其花，要自拔其根。

</div></body>步驟1步驟24.4.1顯示方式工具類演示如何使用顯示方式工具類保存上述代碼，在瀏覽器中打開ResponsiveToolClass.html文件，按“F12”鍵啟動開發(fā)者工具，進入移動設(shè)備調(diào)試模式，將移動設(shè)備的視口寬度設(shè)置為577px（模擬小型設(shè)備）時的頁面效果如下圖所示。4.4.1顯示方式工具類將移動設(shè)備的視口寬度設(shè)置為575px（模擬超小型設(shè)備）時的頁面效果如下圖所示。4.4.1顯示方式工具類4.4.2邊距工具類

先定一個小目標！掌握邊距工具類的使用方法，能夠運用邊距工具類根據(jù)不同的設(shè)備類型來設(shè)置元素的內(nèi)外邊距在CSS中，經(jīng)常通過margin和padding屬性來設(shè)置元素的內(nèi)外邊距。其中：margin用于設(shè)置元素的外邊距，它影響元素與其相鄰?fù)獠吭刂g的距離；padding用于設(shè)置元素的內(nèi)邊距，它影響元素與其內(nèi)部子元素之間的距離。Bootstrap提供一系列用于設(shè)置內(nèi)外邊距的邊距工具類。4.4.2邊距工具類.{property}{sides}-{sm|md|lg|xl|xxl}-{size}邊距工具類的語法格式如下。下面對邊距工具類的語法格式進行講解。①{property}：表示屬性，可選值為m、p，分別表示margin屬性、padding屬性。②{sides}：表示具體的邊，省略表示同時設(shè)置4條邊，可選值如下。t：表示top，上邊。b：表示bottom，下邊。s：表示start，起始邊，在從左到右布局中表示左邊，在從右到左布局中表示右邊。e：表示end，結(jié)束邊，在從左到右布局中表示右邊，在從右到左布局中表示左邊。x：表示left和right，左右兩邊。y：表示top和bottom，上下兩邊。4.4.2邊距工具類③{sm|md|lg|xl|xxl}：表示斷點的類中綴，用于為特定設(shè)備設(shè)置邊距。使用超小斷點時，則省略類中綴及其前面的“-”。④{size}：表示邊距的大小，可選值為0~5和auto，其中，1~5分別表示0.25rem、0.5rem、1rem、1.5rem、3rem。4.4.2邊距工具類根據(jù)邊距工具類的語法格式，可以選取不同的值來定義設(shè)置元素的邊距的類。例如，.mt-5類表示在所有設(shè)備中元素的上外邊距為3rem，.pb-sm-1類表示在小型及以上設(shè)備中元素的下內(nèi)外邊距為0.25rem。4.4.2邊距工具類下面通過案例來演示邊距工具類的使用。步驟1創(chuàng)建spacing.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)并引入bootstrap.min.css文件。步驟3步驟2演示如何使用邊距工具類4.4.2邊距工具類步驟1步驟3步驟2編寫頁面樣式，具體代碼如下。<style>.content{width:10rem;height:8rem;border:1pxsolidblack;}.box{border:1pxdashedblack;}</style>4.4.2邊距工具類演示如何使用邊距工具類步驟3步驟2步驟1編寫頁面結(jié)構(gòu)，具體代碼如下。<body><divclass="content"><divclass="boxm-sm-2m-md-4p-sm-2p-md-4">設(shè)置內(nèi)外邊距</div></div></body>4.4.2邊距工具類演示如何使用邊距工具類保存上述代碼，在瀏覽器中打開spacing.html文件，按“F12”鍵啟動開發(fā)者工具，進入移動設(shè)備調(diào)試模式，將移動設(shè)備的視口寬度設(shè)置為577px（模擬小型設(shè)備）時的頁面效果如下圖所示。4.4.2邊距工具類將移動設(shè)備的視口寬度設(shè)置為768px（模擬中型設(shè)備）時的頁面效果如下圖所示。4.4.2邊距工具類4.4.3彈性盒布局工具類

先定一個小目標！掌握彈性盒布局工具類的使用方法，能夠運用彈性盒布局工具類根據(jù)不同的設(shè)備類型來設(shè)置彈性盒布局4.4.3彈性盒布局工具類為了方便使用彈性盒布局，Bootstrap提供了彈性盒布局工具類。使用方法：首先通過設(shè)置.d-{sm|md|lg|xl|xxl}-flex類將父元素設(shè)置為Flex容器，然后使用Flex容器和Flex元素的相關(guān)類來控制元素的排列和對齊。4.4.3彈性盒布局工具類1.Flex容器的常用類在Bootstrap中，F(xiàn)lex容器的常用類如下。（1）.justify-content-{sm|md|lg|xl|xxl}-{value}該類用于設(shè)置Flex元素在主軸上的對齊方式，常用的

溫馨提示

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

評論

0/150

提交評論