專(zhuān)注Java教育14年
全國(guó)咨詢(xún)/投訴熱線：400-8080-105
更新時(shí)間：2022-10-14 10:12:45 來(lái)源：動(dòng)力節(jié)點(diǎn) 瀏覽1450次
相信大家對(duì)BootStrap框架的使用已經(jīng)有所了解，Bootstrap 是一個(gè)開(kāi)源 HTML、CSS 和 Javascript 框架，它通過(guò)預(yù)構(gòu)建的響應(yīng)類(lèi)和其他實(shí)用程序使 UI 開(kāi)發(fā)更加容易。這個(gè)開(kāi)源框架目前為超過(guò) 1800 萬(wàn)個(gè)網(wǎng)站提供支持，預(yù)計(jì)未來(lái)這個(gè)數(shù)字還會(huì)增長(zhǎng)。
Bootstrap 提供的可重用 JS 和 CSS JavaScript 可以幫助您實(shí)現(xiàn)您想要的結(jié)果。將 Bootstrap 與 HTML 結(jié)合使用可能會(huì)讓初學(xué)者感到困惑。這是有關(guān)如何執(zhí)行此操作的全面的分步指南。
您需要具備 HTML/CSS 和 JS 的基本知識(shí)。
要在 HTML 中包含 Bootstrap，您可以使用以下三種方法之一：
1. 使用引導(dǎo) CDN
CSS
只需將此樣式表鏈接復(fù)制到HTML文件的
<link rel= "stylesheet" 完整性= "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = “匿名” >
JS
一些組件的 JavaScript 功能，如下拉菜單、選項(xiàng)卡等，依賴(lài)于 jQuery 和 popper.js。因此，在加載引導(dǎo) JavaScript 文件以使其正常運(yùn)行之前，按以下順序包含 jQuery 和 popper.js。
<script src= “https://code.jquery.com/jquery-3.3.1.slim.min.js” 完整性= “sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin= “匿名” ></script>
<script src= “https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js” 完整性= “sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1” crossorigin= “匿名” ></腳本>
<script src= “https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js” 完整性= “sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin= “匿名” ></script>
2.本地下載文件
您可以從https://getbootstrap.com/docs/4.3/getting-started/download/將文件本地下載到項(xiàng)目文件夾，而不是使用 CDN下載文件后，您可以將 bootstrap.min.css 文件和 bootstrap.min.js 文件包含在. 即使您使用下載的引導(dǎo)文件，您也必須在加載 bootstrap.min.js 之前包含 jquery.min.js 和 popper.min.js
3. 使用包管理器
使用“npm”、“yarn”等包管理器可以輕松地將引導(dǎo)程序拉入任何項(xiàng)目。 由于 npm 是前端開(kāi)發(fā)人員使用的最流行的包管理器，我們將繼續(xù)使用 npm 命令來(lái)安裝引導(dǎo)程序。在你的項(xiàng)目文件夾中輸入以下命令(假設(shè)你已經(jīng)在項(xiàng)目中初始化了 npm)
npm安裝引導(dǎo)程序
此命令將在項(xiàng)目的“node_modules”文件夾中下載引導(dǎo)文件的本地副本。然后，您可以將 bootstrap.min.css 文件包含在. 如方法 2 中所述，您必須在加載 bootstrap.min.js 之前包含 jquery.min.js 和 popper.min.js。
用法
包含引導(dǎo) CSS 和 js 后的示例 HTML 文件將如下所示(我們?cè)谙旅娴氖纠惺褂昧?CDN 方法。如果您選擇任何其他方法，您可以使用正確的路徑編輯樣式表的 HREF 屬性和 javascript 的 src 屬性)：
<!doctype html>
<html lang= "en" >
<head> <!-- 必需的元標(biāo)記 --> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-寬度，初始比例=1，縮小到適合=否“ > <!-- Bootstrap CSS --> <link rel= "stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3. 1/css/bootstrap.min.css”完整性= “sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin= “匿名” ><title>引導(dǎo)示例</title> </head>
<body> <!-- 先是 jQuery，然后是 Popper.js，然后是 Bootstrap JS --> <script src= "https://code.jquery.com/jquery-3.3.1.slim.min.js"完整性= "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin= "匿名" ></script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/ popper.min.js"完整性 = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "匿名" ></script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.3。1/js/bootstrap.min.js"完整性=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin= "匿名" ></script>
</body> </html>
一旦您使用上述任何一種方法將 Bootstrap 包含在您的項(xiàng)目中，您就可以輕松地使用 bootstrap 中可用的所有組件。
例如，要以原色創(chuàng)建 Bootstrap 按鈕，您必須簡(jiǎn)單地使用標(biāo)記
<button type= "button" class= "btn btn-primary" >主要
</button>
僅使用這兩個(gè)類(lèi)，您將獲得一個(gè)包含所有相關(guān)樣式的按鈕，從而節(jié)省您為默認(rèn) HTML 按鈕設(shè)置樣式的時(shí)間。
通過(guò)添加以下 HTML 標(biāo)記，可以使用 bootstrap 輕松構(gòu)建排列良好的導(dǎo)航欄：
<nav class= "navbar navbar-expand-lg navbar-light bg-light" >
<a class="navbar-brand" href="#" > Navbar </a> <button class= " navbar -toggler" type = “按鈕”數(shù)據(jù)切換= “折疊”數(shù)據(jù)目標(biāo)= “#navbarSupportedContent” aria-controls= “navbarSupportedContent” aria-expanded= “假” aria-label= “切換導(dǎo)航” > <span class= “navbar-toggler-圖標(biāo)" ></span></button> <div class= "collapse navbar-collapse" id=
"navbarSupportedContent" >
< ul class= "navbar-nav mr-auto" > < li class= "nav-item active" > <a class="nav-link" href="#" >主頁(yè)<span class= "sr -only" > (current) </span></a> < /li> <li class= "nav-item " > <a class="nav-link" href="#" > Link </a> < /li> <li class= "nav-item dropdown" > <a class= "nav-link dropdown-toggle"
href= "#" id= "navbarDropdown" role= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown
</a> <div class= "dropdown-menu " aria- labelledby = "navbarDropdown " > <a class="dropdown-item" href="#" >動(dòng)作</a> <a class="dropdown-item" href="#" >另一個(gè)動(dòng)作</a> <div class= "dropdown-divider" ></div> <a
class= "dropdown-item" href= "#" >這里有別的東西</a>
</div> </li> <li class= "nav-item" > <a class= "nav-link disabled" href= "#" tabindex= "-1" aria-disabled= "true" >禁用</a> </li> </ul> <form class= "form-inline my-2 my-lg-0" > <input類(lèi)= “表單控制mr-sm-2”類(lèi)型= “搜索”placeholder= "搜索" aria-label= "搜索" > <按鈕
class= "btn btn-outline-success my-2 my-sm-0" type= "submit" >搜索</button>
</form> </div> </nav>
此代碼生成以下樣式的導(dǎo)航欄，無(wú)需您自己編寫(xiě)單個(gè) CSS 或 JS!如果大家想了解更多相關(guān)知識(shí)，不妨來(lái)關(guān)注一下本站的HTML教程，里面還有更豐富的知識(shí)等著大家去學(xué)習(xí)，希望對(duì)大家能夠有所幫助。
Java實(shí)驗(yàn)班
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
Java就業(yè)班
有基礎(chǔ) 直達(dá)就業(yè)
Java夜校直播班
業(yè)余時(shí)間 高薪轉(zhuǎn)行
Java在職加薪班
工作1~3年，加薪神器
Java架構(gòu)師班
工作3~5年，晉升架構(gòu)
提交申請(qǐng)后，顧問(wèn)老師會(huì)電話與您溝通安排學(xué)習(xí)
京公網(wǎng)安備 11030102010736號(hào)