Javascript Bootstrap的網格系統,導航欄和輪播詳解
阿新 • • 發佈：2021-11-23
目錄
- bootstrap簡介及其相關內容
- 網格系統
- 列巢狀
- 列偏移
- 列排序
- 導航欄
- 輪播
- 總結
bootstrap簡介及其相關內容
Bootstrap 是一個用於快速開發 Web 應用程式和的前端框架。引用其時需要具備一定的基本模板：
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1//bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim 和 Respond. 是為了讓 IE8 支援 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
網格系統
bootstrap將頁面或容器化氛圍橫向的12等份，行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。利用col-lg-(“number”）對橫向的12等份進行分配。
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
列巢狀
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- col-md-6預設是水平分開兩個盒子，如果只是單純的div則會顯示為上下分佈 -->
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
</div>
列偏移
使用.col-md-offset-*可以將列向右偏移
<div class="container">
<div class="row">
<div class="col-md-4">坐廁</div>
<!-- 總共十二等份，兩個盒子本來是隻佔了8列，還有四列未被使用，
故col-md-offset-4,所以右側的盒子會繼續向右偏移4列 -->
<div class="col-md-4 col-md-offset-4">右側</div>
</div>
</div>
</div>
列排序
一般用於盒子調換順序
<div class="container">
<div class="row">
<!-- 左右兩個盒子同時使用push和pull元素，盒子才不會被壓住 -->
<div class="col-md-4 col-md-push-8">坐廁</div>
<div class="col-md-8 col-md-pull-4">右側</div>
</div>
</div>
</div>
導航欄
- 向
<nav>標籤新增class .navbar、.navbar-default。 - 向上面的元素新增
role="navigation"，有助於增加可訪問性。 - <div> 元素新增一個標題
class .navbar-header，內部包含了帶有class navbar-brand的 <a> www.cppcns.com元素。這會讓文字看起來更大一號。 - 為了嚮導航欄新增連結，只需要簡單地新增帶有
class .nav、.navbar-nav的無序列表即可。
演示如下：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 這兩個script都必須要寫否則就會下拉選單無法出來 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs//2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<!-- 這是一個響應式佈局，當螢幕處於最大化時與螢幕縮小時的佈局不一樣 -->
<body>
<!-- role="navigation"有助於增加可訪問性 -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- "navbar-header"，內部包含了帶有classnav-brand的<a>元素，會使文字看起來更大一號 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<!-- data-toggle用於告訴需要對按鈕做什麼，icon-target指示要切換到哪一個元素，三個icon代表要建立所謂的漢堡按鈕 -->
<span class="sr-only">切換導航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">菜鳥教程</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret">
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分離的連結</a></li>
<li class="divider"></li>
<li><a href="#">另一個分離的連結</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
全域性介面
小窗介面
輪播
Bootstrap 輪播（Carousel）外掛是一種靈活的響應式的向站點新增滑塊的方式。除此之外，內容也是足夠靈活的，可以是影象、內嵌框架、視訊或者其他您想要放置的任何型別的內容。
例項演示：
<body&gNVIxgIvt;
<div id="myCarousel" class="carousel slide">
<!-- 輪播（Carousel）指標 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 輪播（Carousel）專案 -->
<div class="carousel-inner">
<div class="item active">
<!-- 圖片引用絕對路徑，相對路徑會出錯 -->
<img src="1.jpg" alt="First slide" style="width: 100%;height: 200px;">
</div>
<div class="item">
<img src="2.jpg" alt="Second slide" style="width: 100%;height: 200px;">
</div>
<div class="item">
<img src="3.jpg" alt="Third slide" style="width: 100%;height: 200px;">
</div>
</div>
<!-- 上下跳轉控制，跳轉控制可以前進貨後退 -->
<a class="left carousel-control" href="#myCawww.cppcns.comrousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!