Bootstrap 3 是 Twitter 推出的一款前端框架,它能讓我們快速開發出兼容不同設備的現代化 Web 應用。Bootstrap 3 將 HTML、CSS 和 JavaScript 組件強大地結合在一起,可以減輕我們的前端開發負擔,讓我們更好關注業務邏輯的實現。下面讓我們從多個方面來對 Bootstrap 3 做詳細的闡述。
一、基礎內容
Bootstrap 3 最基礎的內容為網格系統、排版樣式與預處理器等。
1、網格系統
Bootstrap 3 柵格系統基於類名 col-xs-*、col-sm-*、col-md-*、col-lg-* 。從名字上我們就能猜出,”xs” 表示小屏幕,”sm” 表示中屏幕,”md” 表示大屏幕,”lg” 表示超大屏幕,而 * 號指定該列占屏幕總列的百分比。
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>
該示例代碼中,「container」為容器,寬度固定且居中,在其內部通過「row」類新建一行,再用「col-md-*」來決定每一列的佔比。
2、排版樣式
Bootstrap 3 中提供了很多的排版樣式,例如:Μarkdown 與區塊、表格、代碼等。使用這些樣式可以更加規範化和簡潔化你的代碼。下面給出一個表格的實例代碼:
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
二、組件
Bootstrap 3 也內置了很多組件,例如:導航欄、麵包屑、下拉菜單,還有模態框等。使用這些組件可以讓你的網站變得更加生動有趣。
1、導航欄
Bootstrap 3 中的導航欄可以自適應不同的屏幕尺寸,無需複雜的 CSS 樣式,可直接在 HTML 基礎上完成。下面給出一個示例代碼:
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關於我們</a></li>
</ul>
</div>
</div>
</nav>
2、模態框
模態框是 Bootstrap 3 中比較常見的組件,可以通過它彈出一個對話框,提示或讓用戶進行一些操作。
<div class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">
標題
</h4>
</div>
<div class="modal-body">
內容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">
提交
</button>
</div>
</div>
</div>
</div>
三、JavaScript 插件
Bootstrap 3 還提供了一些 JavaScript 插件,例如:輪播圖、模態框等。
1、輪播圖
Bootstrap 3 中的輪播組件很容易使用,只需要定義 3 個基本元素:<div class=”carousel-inner”>、<a class=”left carousel-control”>、<a class=”right carousel-control”>。
<div id="carousel-example-generic" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic"
data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic"
data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x200"
alt="First slide">
</div>
<div class="item">
<img src="http://placehold.it/1200x200"
alt="Second slide">
</div>
</div>
<a class="left carousel-control"
href="#carousel-example-generic"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control"
href="#carousel-example-generic"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
2、類型·選擇器
Bootstrap 3 中還提供了一些類型選擇器,例如:日期 timepicker、下拉選擇框 selectpicker 等。
<input type="text" class="form-control timepicker"
data-date-format="yyyy-mm-dd hh:ii" />
<select class="selectpicker form-control">
<option value="1">選項1</option>
<option value="2">選項2</option>
<option value="3">選項3</option>
</select>
<script>
$('.selectpicker').selectpicker();
</script>
綜上可知,Bootstrap 3 的強大和靈活性是其最突出的特點,總的來說,它的優點有:易用、響應式、兼容、擴展性強、內置組件和插件豐富、文檔詳盡,可以說 Bootstrap 3 是我們最好的前端開發幫手,相信在實際開發中,你也會對它愛不釋手。
原創文章,作者:VBLXC,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/368914.html