Bootstrap介紹
Bootstrap是美國Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發(fā)的簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，使得 Web 開發(fā)更加快捷。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動態(tài)CSS語言Less寫成。Bootstrap中包含了豐富的Web組件，根據(jù)這些組件，可以快速的搭建一個(gè)漂亮、功能完備的網(wǎng)站。其中包括以下組件：下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航、導(dǎo)航條、路徑導(dǎo)航、分頁、排版、縮略圖、警告對話框、進(jìn)度條、媒體對象等。
思路（我對Bootstrap的理解）
1）Bootstrap框架通過標(biāo)簽選擇器（元素選擇器）綁定樣式相關(guān)的代碼（比如：我們發(fā)現(xiàn)引入了Bootstrap后，界面上的鏈接是沒有下劃線的）
2）Bootstrap框架通過類選擇器，id選擇器，組合選擇器（由基本選擇器組成）綁定處理樣式的css代碼和js代碼，我們可以給元素設(shè)置class和id，這樣的話，處理樣式的代碼就能夠?qū)@些元素真正生效。
使用Bootstrap設(shè)計(jì)導(dǎo)航
1）引入Bootstrap框架
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
注意：先引入jQuery框架，再引入Bootstrap的js框架
2）設(shè)計(jì)html代碼
<!--導(dǎo)航層-->
<div>
<!--菜單列表-->
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="javascript:void(0);">設(shè)為首頁</a></li>
<li><a href="javascript:void(0);">手機(jī)新浪網(wǎng)</a></li>
<li><a href="javascript:void(0);">移動客戶端</a></li>
</ul>
</div>
使用Bootstrap設(shè)計(jì)帶圖標(biāo)的按鈕
設(shè)計(jì)html代碼
<div>
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> 向左對齊
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> 贊
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> 贊
</button>
</div>
使用Bootstrap設(shè)計(jì)帶徽章的列表
設(shè)計(jì)html代碼
<div>
<ul class="list-group">
<li class="list-group-item"><a href="#">
<span class="badge" style="background-color: red">1</span> 第一名</a>
</li>
<li class="list-group-item">
<a href="#"><span class="badge" style="background-color: orange;">2</span> 第二名</a>
</li>
<li class="list-group-item"><a href="#">
<span class="badge" style="background-color: green;">3</span> 第三名</a>
</li>
<li class="list-group-item">
<a href="#"><span class="badge">4</span> 第四名</a>
</li>
<li class="list-group-item">
<a href="#"><span class="badge">5</span> 第五名</a>
</li>
</ul>
</div>
使用Bootstrap設(shè)計(jì)日期控件
引入bootstrap-datetimepicker框架
<link rel="stylesheet" type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"/>
<script src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
設(shè)計(jì)HTML代碼
<div class="input-group date form_date col-md-3" data-date="" data-date-format="yyyy MM dd" data-link-field="birth" data-link-format="yyyy-mm-dd">
<input name="birth" class="form-control" type="text" value="" readonly>
<span class="input-group-addon">
<span class="glyphicon glyphicon-remove"></span>
</span>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
設(shè)計(jì)JS代碼
<script type="text/javascript">
$(function(){
$('.form_date').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
});
$('.form_date').datetimepicker("setDate", new Date());
})
</script>
參考資料
[01] Bootstrap下載及使用
https://v3.bootcss.com/getting-started/
[02] Bootstrap組件
https://v3.bootcss.com/components/
[03] 導(dǎo)航
https://v3.bootcss.com/components/#nav
[04] Glyphicons 字體圖標(biāo)
https://v3.bootcss.com/components/#glyphicons
[05] Bootstrap徽章
https://v3.bootcss.com/components/#badges
[06] Bootstrap表單
http://www.lxweimin.com/p/ffbc36965840
[07] 下載bootstrap-datetimepicker
https://github.com/smalot/bootstrap-datetimepicker
[08] Bootstrap日期和時(shí)間表單組件
https://www.bootcss.com/p/bootstrap-datetimepicker
[09] Bootstrap3 datetimepicker控件的使用
https://blog.csdn.net/u011127019/article/details/51725081
[10] bootstrap3使用bootstrap datetimepicker日期插件
https://www.jb51.net/article/114598.htm
[11] bootstrap-datetimepicker 初始值
https://blog.csdn.net/shenwb110/article/details/81386523
微信掃一掃關(guān)注該公眾號【測試開發(fā)者部落】
點(diǎn)擊鏈接加入群聊【軟件測試學(xué)習(xí)交流群】
https://jq.qq.com/?_wv=1027&k=5eVEhfN
軟件測試學(xué)習(xí)交流QQ群號：511619105
