Bootstrap
1.概念
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-Bootstrap開篇</title> </head> <body> <script> /* 1.什么是Bootstrap? Bootstrap 是twitter公司推出的，專門用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 框架。 Bootstrap當(dāng)前最新的版本的Bootstrap4, 但當(dāng)下企業(yè)使用最多的是Bootstrap3 2.Bootstrap3和4的區(qū)別 2.1CSS預(yù)處理器不同, Bootstrap3采用Less, Bootstrap4采用SASS 2.2格柵種類不同, Bootstrap3提供4種格柵, Bootstrap4提供5種格柵 2.3使用單位不同, Bootstrap3使用px作為單位, Bootstrap4使用rem作為單位 2.4內(nèi)部布局方式不同, Bootstrap3使用float布局, Bootstrap4使用flexbox布局 2.5 ... ... 3.Bootstrap兼容性 Bootstrap 的目標(biāo)是在最新的桌面和移動(dòng)瀏覽器上有最佳的表現(xiàn)，也就是說，在較老舊的瀏覽器上可能會(huì)導(dǎo)致某些組件表現(xiàn)出的樣式有些不同，但是功能是完整的。 IE8以上都能完美使用, IE8以下需要通過一些額外的配置來保證其完整性 * */ </script> </body> </html>
2.Bootstrap3模板
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--可以讓部分國產(chǎn)瀏覽器默認(rèn)采用高速模式渲染頁面--> <meta name="renderer" content="webkit"> <!--為了讓 IE 瀏覽器運(yùn)行最新的渲染模式下--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--為了保證在移動(dòng)端能夠正常的顯示--> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>自己網(wǎng)頁的標(biāo)題</title> <!-- 導(dǎo)入Bootstrap的CSS文件 --> <link rel="stylesheet" href="css/bootstrap.css"> <!--導(dǎo)入respond.js文件的目的, 是為了能夠在IE8以及IE8以下的瀏覽器中使用媒體查詢--> <!--導(dǎo)入html5shiv.js文件的目的, 是為了能夠在IE8以及IE8以下的瀏覽器中使用H5新增的標(biāo)簽--> <!-- [if xxx] ![endif]這個(gè)是IE中的條件注釋, 只有在IE瀏覽器下才會(huì)執(zhí)行 以下代碼的含義: 如果當(dāng)前是IE9以下的瀏覽器, 那么就導(dǎo)入以下的兩個(gè)JS文件,但是現(xiàn)在大部分企業(yè)已經(jīng)拋棄了ie8及以下,所以作為了解 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.js"></script> <![endif]--> </head> <body> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="js/jquery-1.12.4.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --> <script src="js/bootstrap.js"></script> </body> </html>
4.Bootstrap4模板
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <!--為了保證在移動(dòng)端能夠正常的顯示--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 導(dǎo)入Bootstrap的CSS文件 --> <link rel="stylesheet" href="css/bootstrap.css"> <title>自己網(wǎng)頁的標(biāo)題</title> </head> <body> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="js/jquery-3.1.1.js"></script> <!--在Bootstrap4中很多的提示/彈窗都是通過popper.min.js實(shí)現(xiàn)的, 所以需要導(dǎo)入--> <script src="js/popper.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --> <script src="js/bootstrap.js"></script> </body> </html>
5.Bootstrap容器
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <!--為了保證在移動(dòng)端能夠正常的顯示--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 導(dǎo)入Bootstrap的CSS文件 --> <link rel="stylesheet" href="css/bootstrap.css"> <title>04-Bootstrap容器</title> <style> *{ margin: 0; padding: 0; } div{ height: 100px; background: red; } </style> </head> <body> <div class="container"></div> <!-- 1.Bootstrap容器 1.1在Bootstrap中容器是響應(yīng)式布局的基礎(chǔ), Bootstrap推薦將所有內(nèi)容都定義在容器之中 1.2并且容器是啟用Bootstrap柵格系統(tǒng)必不可少的前置條件 2. Bootstrap中提供了兩個(gè)容器: container/container-fluid 2.1container容器(固定容器): 只要給標(biāo)簽添加了container類名, 這個(gè)標(biāo)簽就變成了Bootstrap的container容器 只要這個(gè)標(biāo)簽變成了Bootstrap的container容器, 在不同視口大小下就會(huì)有不同的固定寬度 2.2container-fluid(自適應(yīng)寬度容器) 只要給標(biāo)簽添加了container-fluid類名, 這個(gè)標(biāo)簽就變成了Bootstrap的container-fluid容器 只要這個(gè)標(biāo)簽變成了Bootstrap的container-fluid容器, 那么容器的寬度永遠(yuǎn)都是100%自適應(yīng) 3.Bootstrap對視口劃分 Bootstrap4將視口劃分為了5鐘 超小屏幕(xs): <576px 小屏幕(sm): >=576px 中等屏幕(md):>=768 大屏幕(lg): >=992px 超大屏幕(xl): >= 1200px --> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="js/jquery-3.1.1.js"></script> <!--在Bootstrap4中很多的提示/彈窗都是通過popper.min.js實(shí)現(xiàn)的, 所以需要導(dǎo)入--> <script src="js/popper.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --> <script src="js/bootstrap.js"></script> </body> </html>
6.Bootstrap柵格系統(tǒng)
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <!--為了保證在移動(dòng)端能夠正常的顯示--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 導(dǎo)入Bootstrap的CSS文件 --> <link rel="stylesheet" href="css/bootstrap.css"> <title>06-Bootstrap柵格系統(tǒng)</title> <style> *{ margin: 0; padding: 0; } body>div{ height: 100px; background: red; } .container>.row{ height: 100%; background: blue; } .row>div{ background: skyblue; } .row>div:nth-child(2){ background: deeppink; } .row>div:nth-child(3){ background: orangered; } </style> </head> <body> <!-- ..................... 1 ................................--> <div class="container"> <span class="row"> <div class="col-6">我是第1列</div> <div class="col-4">我是第2列</div> <div class="col-6">我是第3列</div> </span> </div> <!-- 1.Bootstrap柵格系統(tǒng) Bootstrap的柵格系統(tǒng)使用一系列的"行"和"列"來實(shí)現(xiàn)復(fù)雜的響應(yīng)式布局 默認(rèn)情況下柵格系統(tǒng)會(huì)將一行的內(nèi)容等分為12份, 然后我們可以通過綁定類名的方式指定這一行中的每一列占用多少分 2.Bootstrap柵格系統(tǒng)格式 <容器> <行> <列>我們的內(nèi)容</列> <列>我們的內(nèi)容</列> ... ... </行> </容器> 3.Bootstrap柵格系統(tǒng)特點(diǎn) 3.1默認(rèn)情況下行的寬度和所在容器一樣 3.2默認(rèn)情況下所有列的寬度是等分所在行的寬度 3.3可以通過col-num方式指定當(dāng)前列占用12分之幾 3.4如果一行中內(nèi)容的寬度超過了12分, 那么將自動(dòng)換行 --> <!-- ..................... 2 ................................--> <div class="container"> <span class="row"> <!--<div class="col-6">我是第1列</div> <div class="col-4">我是第2列</div> <div class="col-2">我是第3列</div>--> <!--<div class="col-xl-6">我是第1列</div> <div class="col-xl-4">我是第2列</div> <div class="col-xl-2">我是第3列</div>--> <div class="col-lg-2 col-xl-6">我是第1列</div> <div class="col-lg-4 col-xl-4">我是第2列</div> <div class="col-lg-6 col-xl-2">我是第3列</div> </span> </div> <!-- 1.柵格系統(tǒng)列的尺寸設(shè)置 1.1Bootstrap的固定寬度容器提供了5種響應(yīng)的尺寸, 同樣Bootstrap也給列提供了5種響應(yīng)的尺寸 col-*: 設(shè)置超小屏幕 col-sm-*:設(shè)置小屏幕 col-md-*:設(shè)置中等屏幕 col-lg-*:設(shè)置大屏幕 col-xl-*:設(shè)置超大屏幕 2.柵格系統(tǒng)列的尺寸特點(diǎn) 1.如果只設(shè)置了小屏幕的大小, 那么大屏幕也會(huì)采用小屏幕設(shè)置的大小 2.如果值設(shè)置了大屏幕的大小, 那么小屏幕默認(rèn)100% 3.如果大小屏幕都設(shè)置了大小, 那么在什么屏幕就顯示什么尺寸 --> <!-- ..................... 3 ................................--> <!--<div class="container px-0"> <span class="row no-gutters"> <div class="col-6">我是第1列</div> <div class="col-2">我是第2列</div> <div class="col-2">我是第3列</div> </span> </div>--> <div class="container"> <!--<span class="row justify-content-between">--> <span class="row align-items-center"> <div class="col-6">我是第1列</div> <div class="col-2">我是第2列</div> <div class="col-2">我是第3列</div> </span> </div> <!-- 1.柵格系統(tǒng)-溝槽 BootStrap默認(rèn)的柵格和列間有間隙溝槽，一般是左右-15px的margin或padding處理，您可以使用.no-gutters類來消除它，這將影響到.row行、列平行間隙及所有子列 2.柵格系統(tǒng)列-對齊方式 Bootstrap4的格柵系統(tǒng)是使用伸縮布局實(shí)現(xiàn)的, 所以也可以通過類名快速的設(shè)置伸縮項(xiàng)的在主軸和側(cè)軸對齊方式 --> <!-- ..................... 4 ................................--> <!-- <div class="container" style="margin-top: 20px"> <span class="row"> <div class="col-2 offset-3">1</div> <div class="col-2">2</div> <div class="col-2">3</div> </span> </div> --> <div class="container"> <span class="row"> <div class="col-2 order-3">1</div> <div class="col-2 order-2">2</div> <div class="col-2 order-1">3</div> </span> </div> <!-- 1.柵格系統(tǒng)-列偏移 offset-*: 相對于前列偏移多少份位置 注意點(diǎn): 寫在那一列就是那一列偏移，也可以用于實(shí)現(xiàn)居中顯示等 2.柵格系統(tǒng)列-列排序 order-*: 從小到大順序排序, 小的在前面, 大的在后面 注意點(diǎn): 沒有排序的列位置不會(huì)發(fā)生變化, 只有排序的列才參與位置變化 --> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="js/jquery-3.1.1.js"></script> <!--在Bootstrap4中很多的提示/彈窗都是通過popper.min.js實(shí)現(xiàn)的, 所以需要導(dǎo)入--> <script src="js/popper.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --> <script src="js/bootstrap.js"></script> </body> </html>
7.Bootstrap常用公共樣式
公共樣式非常多,只寫一下常用的
7.1 顏色和邊框
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <!--為了保證在移動(dòng)端能夠正常的顯示--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 導(dǎo)入Bootstrap的CSS文件 --> <link rel="stylesheet" href="css/bootstrap.css"> <title>11-Bootstrap公共樣式-顏色和邊框</title> <style> div{ width: 100px; height: 100px; margin-left: 10px; } </style> </head> <body> <!-- 1.文字顏色 柔和灰（text-muted） 主要藍(lán)（text-primary） 次要灰（text-secondary） 成功綠（text-success） 危險(xiǎn)紅（text-danger） 警告黃（text-warning） 危息綠（text-info） 黑白對比（text-dark） 注意點(diǎn): .text-white 、 .text-muted這兩個(gè)樣式不支持鏈接上使用 --> <p class="text-success">知播漁</p> <p class="text-danger">知播漁</p> <p class="text-warning">知播漁</p> <!-- 2.背景顏色 主要藍(lán)（bg-primary） 次要灰（bg-secondary） 成功綠（bg-success） 危險(xiǎn)紅（bg-danger） 警告黃（bg-warning） 危息綠（bg-info） 黑白對比（bg-dark） --> <p class="bg-success">知播漁</p> <p class="bg-danger">知播漁</p> <p class="bg-warning">知播漁</p> <!-- 3.邊框相關(guān) 3.1快速添加邊框 border / border-* 3.2快速刪除邊框 border-0 / border-*-0 3.3快速指定邊框顏色 border-color 3.4快速添加邊框圓角 rounded / rounded-* --> <!--<div class="border-top border-left border-warning"></div>--> <div class="border border-warning rounded-circle"></div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="js/jquery-3.1.1.js"></script> <!--在Bootstrap4中很多的提示/彈窗都是通過popper.min.js實(shí)現(xiàn)的, 所以需要導(dǎo)入--> <script src="js/popper.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --> <script src="js/bootstrap.js"></script> </body> </html>
7.2 顯示模式和布局方式
<body> <!-- 1.顯示模式 d-* d-屏幕尺寸-* --> <!--<div class="bg-success d-inline d-sm-inline-block d-md-block">我是div</div>--> <!-- 2.浮動(dòng)和清除浮動(dòng) float-* float-屏幕尺寸-* 3.清除浮動(dòng) clearfix --> <!--<div class="bg-success clearfix"> <div class="float-left">左邊</div> <div class="float-right">右邊</div> </div>--> <!-- 3.定位 position-* --> <div class="position-relative">我是div</div> </body>
7.3 其他
<body> <!-- 1.在Bootstrap中可以通過m-* / p-* 快速添加間隙 2.在Bootstrap中可以通過 list-unstyled 快速去除項(xiàng)目符號(hào) 3.在Bootstrap中可以通過 img-fluid快速設(shè)置等比拉伸圖片 4.在Bootstrap中可以通過 img-thumbnail快速設(shè)置縮略圖樣式 --> <!--<div class="bg-success m-auto" style="width: 200px; height: 200px"></div>--> <!--<div class="bg-success pt-5" style="width: 200px; height: 200px">我是div</div>--> <!--<ol class="list-unstyled"> <li>我是第1個(gè)li</li> <li>我是第2個(gè)li</li> <li>我是第3個(gè)li</li> </ol>--> <!--<img src="images/img1.jpg" class="img-fluid">--> <div class="bg-success"> <img src="images/lnj.jpg" class="img-thumbnail"> </div> </body>
8.常用組件
需要使用哪個(gè)就去網(wǎng)站里面找就行
8.1 提示框
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <!--為了保證在移動(dòng)端能夠正常的顯示--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 導(dǎo)入Bootstrap的CSS文件 --> <link rel="stylesheet" href="css/bootstrap.css"> <title>14-Bootstrap常用組件</title> <style> .alert{ padding: 0; } </style> </head> <body> <!-- 1.什么是role? role屬性用于增強(qiáng)語義性, 當(dāng)現(xiàn)有的HTML標(biāo)簽不能充分表達(dá)語義性的時(shí)候，就可以借助role來說明 比如用div做button，那么設(shè)置div 的 role=“button”，輔助工具就可以認(rèn)出這實(shí)際上是個(gè)button 2.什么是aria-xxx? aria全稱: Accessible Rich Internet Applications 這一套協(xié)定是w3和apple為了"殘疾人士"無障礙使用網(wǎng)站的 3.什么是aria-hidden? 為了避免屏幕識(shí)讀設(shè)備抓取非故意的和可能產(chǎn)生混淆的輸出內(nèi)容（尤其是當(dāng)圖標(biāo)純粹作為裝飾用途時(shí)），我們?yōu)檫@些圖標(biāo)設(shè)置了 aria-hidden=“true” 屬性 上面這些東西都可以不寫,是不會(huì)影響樣式的 --> <div class="alert alert-success" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <img src="images/ad.jpg" class="container-fluid p-0 m-0"> <!-- data-dismiss="alert" 告訴bt需要關(guān)閉誰 --> <button type="button" class="close" data-dismiss="alert"> <span>×</span> </button> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="js/jquery-3.1.1.js"></script> <!--在Bootstrap4中很多的提示/彈窗都是通過popper.min.js實(shí)現(xiàn)的, 所以需要導(dǎo)入--> <script src="js/popper.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --> <script src="js/bootstrap.js"></script> </body> </html>
8.2 按鈕
<body> <!-- button input a標(biāo)簽可以作為按鈕 --> <button type="button" class="btn btn-primary">Primary</button> <input type="button" value="我是按鈕" class="btn btn-success"> <a href="#" class="btn btn-danger">我是按鈕</a> <!-- 下為分頁的按鈕 --> <div class="btn-group"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> </div> </body>
8.3 卡片
<body> <!-- 這種布局方式在電商網(wǎng)站中經(jīng)常見到,只要是一個(gè)獨(dú)立地小塊內(nèi)容就能用作卡片布局 --> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="images/img1.jpg"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </body>
8.4 輪播圖
<body> <!-- 1.class="carousel slide" 創(chuàng)建一個(gè)輪播圖組件 2.data-ride="carousel" 自動(dòng)輪播 --> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <!-- 1.class="carousel-indicators" 創(chuàng)建指示器 2.data-target="#carouselExampleIndicators" 告訴bootstrap當(dāng)前的索引屬于哪一個(gè)輪播圖 3.data-slide-to="0" 指定當(dāng)前指示器的索引 4.class="active" 設(shè)置默認(rèn)選中的指示器索引 --> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <!-- 1.class="carousel-inner" 創(chuàng)建輪播圖的內(nèi)容部分 2.class="carousel-item" 指定輪播圖的每一頁 --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/img1.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="images/img2.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="images/img3.jpg" class="d-block w-100" alt="..."> </div> </div> <!-- 1.class="carousel-control-prev" 創(chuàng)建上一頁的控制按鈕 2. href="#carouselExampleIndicators" 指定控制按鈕可用控制哪一個(gè)輪播圖 --> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="js/jquery-3.1.1.js"></script> <!--在Bootstrap4中很多的提示/彈窗都是通過popper.min.js實(shí)現(xiàn)的, 所以需要導(dǎo)入--> <script src="js/popper.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --> <script src="js/bootstrap.js"></script> <script> //指定輪播圖自動(dòng)切換的時(shí)間 $('.carousel').carousel({ interval: 1000 }); </script> </body>
8.6 折疊面板
<body> <!-- 1.data-toggle="collapse" 告訴bootstrap需要切換的是折疊面板 2.href="#collapseExample" 告訴bootstrap需要切換的是哪一個(gè)折疊面板 --> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"> 我是按鈕 </a> <!-- 1.class="collapse" 創(chuàng)建一個(gè)折疊面板 注意點(diǎn): 折疊面板默認(rèn)情況下是不會(huì)顯示的 --> <div class="collapse bg-danger" id="collapseExample"> <p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> <p>我是段落4</p> <p>我是段落5</p> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="js/jquery-3.1.1.js"></script> <!--在Bootstrap4中很多的提示/彈窗都是通過popper.min.js實(shí)現(xiàn)的, 所以需要導(dǎo)入--> <script src="js/popper.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --> <script src="js/bootstrap.js"></script> </body>
8.7 下拉菜單
<body> <!-- 1.class="dropdown" 創(chuàng)建一個(gè)下拉菜單的容器 --> <div class="dropdown"> <!-- 1.dropdown-toggle: 指定菜單按鈕的小箭頭 2.data-toggle="dropdown": 告訴bootstrap需要切換的是下拉菜單 --> <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"> 我是按鈕 </button> <!-- 1.class="dropdown-menu": 創(chuàng)建一個(gè)彈出的下拉菜單 2.class="dropdown-item": 指定菜單項(xiàng) --> <div class="dropdown-menu container-fluid"> <a class="dropdown-item" >Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="js/jquery-3.1.1.js"></script> <!--在Bootstrap4中很多的提示/彈窗都是通過popper.min.js實(shí)現(xiàn)的, 所以需要導(dǎo)入--> <script src="js/popper.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --> <script src="js/bootstrap.js"></script> </body>
8.8 模態(tài)彈窗
<body> <!-- 模態(tài)彈窗就是比如在登陸的時(shí)候,會(huì)彈出一個(gè)登錄框,后邊有模板,這時(shí)就不能進(jìn)行其他操作 1.data-toggle="modal": 告訴bootstrap需要切換的是模態(tài)彈窗 2.data-target="#exampleModal": 告訴bootstrap需要切換的是哪一個(gè)模態(tài)彈窗 --> <button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 我是按鈕 </button> <!-- class="modal fade": 創(chuàng)建模態(tài)彈窗的容器 --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"> <!-- 1.class="modal-dialog": 創(chuàng)建真正彈出的內(nèi)容 --> <div class="modal-dialog" role="document"> <div class="bg-danger"> <p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> <p>我是段落4</p> <p>我是段落5</p> </div> </div> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="js/jquery-3.1.1.js"></script> <!--在Bootstrap4中很多的提示/彈窗都是通過popper.min.js實(shí)現(xiàn)的, 所以需要導(dǎo)入--> <script src="js/popper.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --> <script src="js/bootstrap.js"></script> </body>
8.9 提示氣泡
<body> <div style="margin: 200px"> <!-- 1.data-toggle="tooltip": 告訴bootstrap需要切換的是提示氣泡 2.data-placement="top": 告訴bootstrap提示氣泡出現(xiàn)的位置 3.title="Tooltip on top": 告訴bootstrap提示氣泡中提示的內(nèi)容是什么 --> <!-- <button class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="內(nèi)容是什么"> 我是按鈕 </button> --> <!-- 1.data-container="body": 當(dāng)你在一個(gè)父元素上有一些樣式與提示框產(chǎn)生樣式干擾，你可以指定一個(gè)自定義的container容器，這樣提示框的HTML將出現(xiàn)在這個(gè)元素內(nèi)部了。 2.data-toggle="popover": 告訴bootstrap需要切換的是提示氣泡 3.data-placement="top": 告訴bootstrap提示氣泡出現(xiàn)的位置 4.data-content="": 告訴bootstrap提示氣泡中提示的內(nèi)容是什么 --> <button class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="我是內(nèi)容我是內(nèi)容"> 我是按鈕 </button> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="js/jquery-3.1.1.js"></script> <!--在Bootstrap4中很多的提示/彈窗都是通過popper.min.js實(shí)現(xiàn)的, 所以需要導(dǎo)入--> <script src="js/popper.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --> <script src="js/bootstrap.js"></script> <script> /* $(function () { $('[data-toggle="tooltip"]').tooltip() }) */ $('button').popover() </script> </body>
8.10 響應(yīng)式導(dǎo)航欄
<body> <!-- 1.class="navbar": 告訴Bootstrap需要?jiǎng)?chuàng)建一個(gè)響應(yīng)式的導(dǎo)航欄 2.class="navbar-expand-lg": 告訴Bootstrap在哪一種屏幕尺寸上需要展示完整的導(dǎo)航欄 3.class="navbar-light bg-light": 設(shè)置導(dǎo)航欄的主題樣式 --> <nav class="navbar navbar-expand-xl navbar-light bg-light"> <!-- 1.class="navbar-brand": 指定導(dǎo)航欄中公司的品牌信息(公司名稱/LOGO) --> <a class="navbar-brand" href="#">知播漁</a> <!-- 1.class="navbar-toggler": 創(chuàng)建一個(gè)移動(dòng)端的菜單按鈕 2.data-toggle="collapse": 告訴bootstrap需要切換的是折疊面板 3.data-target="#navbarSupportedContent": 告訴bootstrap需要切換的是哪一個(gè)折疊面板 4.class="navbar-toggler-icon": 設(shè)置按鈕的字體圖標(biāo) --> <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent"> <span class="navbar-toggler-icon"></span> </button> <!-- 1.class="collapse": 創(chuàng)建一個(gè)折疊面板 注意點(diǎn): 折疊面板默認(rèn)情況下是不會(huì)顯示的 2.class="navbar-collapse":用于通過父斷點(diǎn)進(jìn)行分組和隱藏導(dǎo)航列內(nèi)容 --> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- 1. class="navbar-nav": 創(chuàng)建導(dǎo)航欄的菜單 2. class="nav-item": 創(chuàng)建導(dǎo)航來的菜單項(xiàng) --> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item active"> <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="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="js/jquery-3.1.1.js"></script> <!--在Bootstrap4中很多的提示/彈窗都是通過popper.min.js實(shí)現(xiàn)的, 所以需要導(dǎo)入--> <script src="js/popper.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --> <script src="js/bootstrap.js"></script> </body>
