Bootstrap
0 簡介
-
Bootstrap是美國Twitter公司的設(shè)計師 Mark Otto 和 Jacob Thornton 合作基于HTML、CSS、JavaScript 開發(fā)的簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，使得 Web 開發(fā)更加快捷。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動態(tài)CSS語言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。
-
2013年
-
前端框架，快速構(gòu)建好看的網(wǎng)頁
-
與Vue不同，BootStrap是一個前端開發(fā)框架，而Vue是一個Js庫組件化開發(fā)框架
1 如何使用
- 導(dǎo)入jQuery
- 導(dǎo)入Bootstrap的css
- 導(dǎo)入Bootstrap的js
- 需要什么控件直接網(wǎng)站考入添加對應(yīng)的class即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap/3.3.6/bootstrap.min.css">
<script src="../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<body>
<!-- 標(biāo)準(zhǔn)的按鈕 -->
<button type="button" class="btn btn-default">默認(rèn)按鈕</button>
<!-- 提供額外的視覺效果，標(biāo)識一組按鈕中的原始動作 -->
<button type="button" class="btn btn-primary">原始按鈕</button>
<!-- 表示一個成功的或積極的動作 -->
<button type="button" class="btn btn-success">成功按鈕</button>
<!-- 信息警告消息的上下文按鈕 -->
<button type="button" class="btn btn-info">信息按鈕</button>
<!-- 表示應(yīng)謹(jǐn)慎采取的動作 -->
<button type="button" class="btn btn-warning">警告按鈕</button>
<!-- 表示一個危險的或潛在的負(fù)面動作 -->
<button type="button" class="btn btn-danger">危險按鈕</button>
<!-- 并不強(qiáng)調(diào)是一個按鈕，看起來像一個鏈接，但同時保持按鈕的行為 -->
<button type="button" class="btn btn-link">鏈接按鈕</button>
</body>
</html>
2 柵格系統(tǒng)
Bootstrap柵格系統(tǒng)將頁面等比例劃分為12份
- 首先需要一個
div class="caontainer" - 內(nèi)層需要一個
div class="row" - 在內(nèi)存div中，對于元素控件
col-xl-列數(shù)來及控制占用的列數(shù) - 當(dāng)占的列數(shù)超過總列數(shù)時，會直接換行
等比例劃分，一份代碼適用于各種平臺：pc、mobile文章來源：http://www.zghlxwxcb.cn/news/detail-508121.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap/3.3.6/bootstrap.min.css">
<script src="../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
div.container div.row {
margin: 5px 0px;
background-color: aqua;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
一共12列，我占12列
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-1">一共12列，我占1列</div>
<div class="col-xs-1">一共12列，我占1列</div>
<div class="col-xs-1">一共12列，我占1列</div>
<div class="col-xs-1">一共12列，我占1列</div>
<div class="col-xs-1">一共12列，我占1列</div>
<div class="col-xs-1">一共12列，我占1列</div>
<div class="col-xs-1">一共12列，我占1列</div>
<div class="col-xs-1">一共12列，我占1列</div>
<div class="col-xs-1">一共12列，我占1列</div>
<div class="col-xs-1">一共12列，我占1列</div>
<div class="col-xs-1">一共12列，我占1列</div>
<div class="col-xs-1">一共12列，我占1列</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-3">一共12列，我占3列</div>
<div class="col-xs-3">一共12列，我占3列</div>
<div class="col-xs-3">一共12列，我占3列</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-8">一共12列，我占8列</div>
<div class="col-xs-6">一共12列，我占6列</div>
</div>
</div>
</body>
</html>
3 日期控件
根據(jù)日期控件里的例子來使用文章來源地址http://www.zghlxwxcb.cn/news/detail-508121.html
<div class="form-group">
<label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
<div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy"
data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" 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>
<input type="hidden" id="dtp_input2" value="" /><br />
<link rel="stylesheet" href="../bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<script src="../bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script src="../bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<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
});
})
</script>
4 輪播圖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap/3.3.6/bootstrap.min.css">
<script src="../js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style type="text/css">
div.item img {
width: 100%;
}
div#lunbo {
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="carousel slide" data-ride="carousel" interval="3000" id="lunbo">
<ol class="carousel-indicators">
<li data-target="lunbo" data-slide-to="0" class="active"></li>
<li data-target="lunbo" data-slide-to="1"></li>
<li data-target="lunbo" data-slide-to="2"></li>
<li data-target="lunbo" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><img src="../img/lunbo/1.jpg"></div>
<div class="item"><img src="../img/lunbo/2.jpg"></div>
<div class="item"><img src="../img/lunbo/3.jpg"></div>
<div class="item"><img src="../img/lunbo/4.jpg"></div>
</div>
</div>
</body>
</html>
到了這里，關(guān)于一篇隨筆會用Bootstrap的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
