?? 歡迎大家來到景天科技苑??
???? 養(yǎng)成好習(xí)慣，先贊后看哦~????
所屬的專欄：前端泛海
景天的主頁：景天科技苑
Bootstrap
Bootstrap官網(wǎng)
1.Bootstrap介紹
-
一、什么是Bootstrap？
bootstrap是一個(gè)基于HTML、CSS和Javascript語言編寫的框架，具有簡(jiǎn)單、靈活的特性，擁有樣式庫、組件和插件，bootstrap常用來開發(fā)響應(yīng)式布局和移動(dòng)設(shè)備優(yōu)先的Web項(xiàng)目，能夠幫助開發(fā)者快速搭建前端頁面。
Bootstrap誕生于2011年，來自Twitter公司，是目前最受歡迎的前端框架
是一個(gè)用于快速開發(fā)Web應(yīng)用程序和網(wǎng)站的前端框架
Bootstrap是基于HTML、CSS、JS的，簡(jiǎn)潔靈活，使得Web開發(fā)更加快捷
概述：Bootstrap是一個(gè)建立一個(gè)頁面，就可以在三個(gè)終端(PC端、平板、手機(jī))上完美展示的響應(yīng)式前端框架 -
二、為什么要用Bootstrap
因?yàn)锽ootstrap是一個(gè)簡(jiǎn)潔、直觀、強(qiáng)悍的前端開發(fā)框架，讓web開發(fā)更迅速、更容易上手。
封裝了常用的css樣式，js動(dòng)態(tài)效果。直接調(diào)用
使用bootstrap的宗旨就是 ctrl c / ctrl v -
三、如何使用Bootstrap
1.下載Bootstrap庫 https://v4.bootcss.com/(Bootstrap管網(wǎng))
2.頁面中引入庫
jquery-3.3.1.js：jQuery庫【注意：必須在Bootstrap核心庫引入之前引入jQuery庫】
bootstrap.css：Bootstrap核心樣式【添加到head標(biāo)簽中】
使用最新版
下載
并且提供CDN加速在線引入
解壓后包含兩個(gè)文件夾
不管是css，還是js，帶min的都是壓縮過的。生產(chǎn)中使用壓縮過的
解壓后，在項(xiàng)目中引入
2.簡(jiǎn)單使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
適配IE瀏覽器的edge瀏覽器
<meta http-equiv="X-UA-Compatible" content="IE=edge">
適配手機(jī)端，自適應(yīng)手機(jī)屏幕大小，調(diào)整分辨率，方便手機(jī)觀看
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap簡(jiǎn)單使用</title>
<script src="jquery.js"></script>
<!-- 引入外部bootstrap樣式-->
<link rel="stylesheet" href="bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" />
</head>
沒做手機(jī)屏幕適配之前，很小看不清
做了手機(jī)屏幕適配后，等比例縮放，但是這樣縮放可能會(huì)導(dǎo)致頁面顯示不完內(nèi)容。因此這就需要做響應(yīng)式
我們不用設(shè)置任何樣式，只需引入bootstrap自帶的css樣式即可
<body>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>孫堅(jiān)</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>王濤</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>王舒展</td>
<td>女</td>
<td>20</td>
</tr>
<tr>
<td>劉亦菲</td>
<td>女</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
瀏覽器顯示效果
</html>
3.布局容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.c1{
background-color:tan;
height:100px;
}
.c2{
background-color:pink;
height:100px;
}
.c3{
background-color:green;
height:100px;
}
</style>
</head>
<body>
<!-- container-fluid占滿整個(gè)屏幕 -->
<!-- container 左右兩邊有留白 -->
<div class="container-fluid">
<div class="row">
<!-- // col-md-offset-3 柵格偏移,向右偏移3個(gè)柵格的意思-->
<!-- // col-md-6 占6個(gè)柵格,默認(rèn)從左邊開始-->
<div class="col-md-6 c1 col-md-offset-3">
<div class="row">
<div class="col-md-6 c3"></div>
</div>
</div>
<!-- <div class="col-md-8 c2"></div>-->
</div>
</div>
<!--<div class="container c1"></div>-->
柵格單位，鋪滿是12個(gè)柵格，各占6個(gè)
如果是占不滿，留空白
如果兩個(gè)加起來超過12個(gè)，則第二個(gè)換行
新版的柵格偏移，默認(rèn)從左邊開始，設(shè)置了柵格偏移可以從指定柵格開始
具體使用方法，可以參照官網(wǎng)使用說明，很詳細(xì)
縮小屏幕等分，不會(huì)換行
</body>
<script src="jquery.js"></script>
</html>
4.Bootstrap實(shí)現(xiàn)輪播圖
輪播圖必須引入在bootstrap.js之前引入jQuery.js
設(shè)置輪播圖輪換圖片間隔時(shí)間，默認(rèn)是5秒
還可以通過js方法控制輪播時(shí)間
輪播圖完整代碼：文章來源：http://www.zghlxwxcb.cn/news/detail-838445.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>輪播圖</title>
<script src="jquery.js"></script>
<link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css" />
<script src="bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div
id="carouselExampleCaptions"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleCaptions"
data-slide-to="0"
class="active"
></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="1.jpg" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="2.jpg" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="3.jpg" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-target="#carouselExampleCaptions"
data-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-target="#carouselExampleCaptions"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</body>
<script>
$(".carousel").carousel({
interval: 2000,
});
</script>
</html>
效果，圖片輪換播放：
文章來源地址http://www.zghlxwxcb.cn/news/detail-838445.html
到了這里，關(guān)于學(xué)會(huì)Web UI框架--Bootstrap，快速搭建出漂亮的前端界面的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[Java Web]element | 一個(gè)由餓了么公司開發(fā)的前端框架，讓你快速構(gòu)建現(xiàn)代化、美觀的 Web 應(yīng)用程序。](https://imgs.yssmx.com/Uploads/2024/02/752527-1.png)
