我為什么需要Bootstrap全家桶
我們?cè)谧鰉vvm（前后端分離模式）開發(fā)的時(shí)候顿膨，一般會(huì)考慮使用vue全家桶。但是做mvc開發(fā)（不分離開發(fā)叽赊，通常適用于后端管理系統(tǒng)開發(fā)恋沃，或者沒有兩個(gè)頁面還需要考慮seo的單頁開發(fā)）再使用vue就不是那么合適了。
所以回過頭來看必指，我們還是需要mvc模式的前端開發(fā)套路囊咏，需要bootstrap一套。bootstrap本身是基于jquery庫開發(fā)的，所以jquery是必須先加載的梅割。
全家桶都哪些霜第？
| 組件名稱 | 組件作用 | 文件 |
|---|---|---|
| bootstrap | 核心文件，包括ui和核心組件 | bootstrap.css户辞，bootstrap.js |
| jquery | 核心文件泌类，所有組件幾乎都依賴于jquery | jquery.js |
| datetimepicker | 時(shí)間選擇器組件 | bootstrap-datetimepicker.css，bootstrap-datetimepicker.js底燎，bootstrap-datetimepicker.zh-CN.js |
| bootstrap-paginator | 分頁器組件 | bootstrap-paginator.js |
| bootstrap-star-rating | 星星評(píng)級(jí)組件 | star-rating.css刃榨，star-rating.js |
| ztree | 樹狀折疊菜單組件 | bootstrapStyle.css，jquery.ztree.core.js双仍，jquery.ztree.excheck.js枢希，jquery.ztree.exedit.js |
| scojs | bootstrap增強(qiáng)組件，包括頂部下拉彈框提示等組件 | scojs.css朱沃，sco.message.css苞轿，sco.message.js |
| bootstrapValidator | 表單驗(yàn)證組件 | bootstrapValidator.min.js |
| echarts | 圖表展示組件 | echarts.js |
引入頁面實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap全家桶終極整合</title>
<!--css-->
<!--bootstrap 核心樣式表-->
<link rel="stylesheet" media="screen">
<!--datetimepicker 核心樣式表 -->
<link rel="stylesheet">
<!--bootstrap-star-rating 評(píng)級(jí)樣式表-->
<link rel="stylesheet" media="screen">
<!--soc.js bootstrop增強(qiáng)組件樣式表-->
<link rel="stylesheet" media="screen">
<link rel="stylesheet" media="screen">
<!--ztree v3 樹組件樣式表-->
<link rel="stylesheet" media="screen">
<!--js-->
<!--jquery 3.3.7 核心組件-->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js" charset="UTF-8"></script>
<!--jquery-migrate jquery兼容性組件 解決ztree中的msie錯(cuò)誤-->
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<!--bootstrap 核心組件-->
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--datetimepicker 時(shí)間選擇器-->
<!-- 時(shí)間選擇器前置腳本 -->
<script src="https://cdn.bootcss.com/moment.js/2.22.1/moment-with-locales.min.js"></script>
<!-- 時(shí)間選擇器核心腳本 -->
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<!--star-rating 評(píng)級(jí)組件-->
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-star-rating/4.0.2/js/star-rating.min.js" charset="UTF-8"></script>
<!--echarts 圖表組件-->
<script src="https://cdn.bootcss.com/echarts/3.2.1/echarts.min.js"></script>
<!--bootstrapvalidator 驗(yàn)證組件-->
<script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
<!--sco bootstrap增強(qiáng)組件-->
<script src="https://cdn.bootcss.com/sco.js/1.1.0/js/sco.message.js"></script>
<!--ztree-->
<script src="https://cdn.bootcss.com/zTree.v3/3.5.39/js/jquery.ztree.core.js"></script>
<script src="https://cdn.bootcss.com/zTree.v3/3.5.39/js/jquery.ztree.excheck.js"></script>
<script src="https://cdn.bootcss.com/zTree.v3/3.5.39/js/jquery.ztree.exedit.js"></script>
<!--paginator 分頁組件-->
<script type="text/javascript" src="src/js/paginator/js/bootstrap-paginator.js" charset="UTF-8"></script>
</head>
<body>
<!-- 時(shí)間選擇器用法-->
<!-- <div class="col-sm-6">
<input type="text" id="datetime" />
</div>
<script>
$("#datetime").datetimepicker({
format: 'YYYY-MM-DD HH:mm',
locale: moment.locale('zh-CN')
});
</script> -->
<!-- 分頁用法 -->
<!-- <div>
<table class="table table-bordered">
<tr id="trhead">
<td>id</td>
<td>name</td>
<td>icon</td>
<td>k</td>
<td>d</td>
<td>a</td>
<td>tank</td>
<td>warrior</td>
<td>shooter</td>
<td>wizard</td>
<td>auxiliary</td>
<td>continuous</td>
<td>state</td>
</tr>
</table>
</div>
<div id="example" style="text-align:center">
<ul id="pageLimit"></ul>
</div>
<style type="text/css">
.imgicon {
width: 40px;
height: 40px;
}
</style>
<script type="text/javascript">
//生成html
function Refresh(arr){
var html = "";
$.each(arr,function(index,items){
html+="<tr>"+
"<td>"+items.id+"</td>"+
"<td>"+items.name+"</td>"+
"<td><img src="+items.icon+" class='imgicon'></td>"+
"<td>"+items.k+"</td>"+
"<td>"+items.d+"</td>"+
"<td>"+items.a+"</td>"+
"<td>"+items.tank+"</td>"+
"<td>"+items.warrior+"</td>"+
"<td>"+items.shooter+"</td>"+
"<td>"+items.wizard+"</td>"+
"<td>"+items.auxiliary+"</td>"+
"<td>"+items.continuous+"</td>"+
"<td>"+items.state+"</td>"+
+"</tr>"
})
$('#trhead').after(html);
}
//獲取分頁
function goPages(){
$.ajax({
url: 'https://api.dangyunlong.com:3004/api/query',
type: 'GET',
data: {
page: 1
},
dataType: 'JSON',
success: function(data) {
//把獲取到的內(nèi)容放到html中
Refresh(data.data)
//分頁
//獲取當(dāng)前頁數(shù)
var currentPage = data.currentPage;
//獲取總頁數(shù)
var totalPages = data.totalPages;
//生成分頁
$('#pageLimit').bootstrapPaginator({
currentPage: currentPage, //當(dāng)前頁。
totalPages: totalPages, //總頁數(shù)为流。
size: "normal", //應(yīng)該是頁眉的大小呕屎。
bootstrapMajorVersion: 3, //bootstrap的版本要求。
alignment: "right",
numberOfPages: 5, //顯示的頁數(shù)
itemTexts: function(type, page, current) { //如下的代碼是將頁眉顯示的中文顯示我們自定義的中文敬察。
switch (type) {
case "first":
return "首頁";
case "prev":
return "上一頁";
case "next":
return "下一頁";
case "last":
return "末頁";
case "page":
return page;
}
},
onPageClicked: function(event, originalEvent, type, page) { //給每個(gè)頁眉綁定一個(gè)事件秀睛，其實(shí)就是ajax請(qǐng)求，其中page變量為當(dāng)前點(diǎn)擊的頁上的數(shù)字莲祸。
$.ajax({
url: 'https://api.dangyunlong.com:3004/api/query',
type: 'GET',
data: {
page: page
},
dataType: 'JSON',
success: function(data) {
//刪除所有兄弟節(jié)點(diǎn)
$("#trhead").nextAll().remove();
Refresh(data.data)
}
})
}
});
}
})
}
//頁面初始化的時(shí)候 執(zhí)行一個(gè)獲取分頁
goPages();
//列表位置
//https://api.dangyunlong.com:3004/api/query?page=1
</script> -->
</body>
</html>
一些常見問題（更新中）
1.bootstrap如何5等分?
因?yàn)閎ootstrap默認(rèn)是12等份的柵格無法分成5等份所以要使用一些特殊的方法:
<style>
@media (min-width: 1200px) {
.col-zdlg-2-5{
float: left;
width:20%;
}
}
h2{
font-family: "Microsoft Yahei";
font-weight: 500;
line-height: 1.1;
color:#000;
}
.col-red-border{
border:1px solid red;
}
</style>
<div class="container-fluid">
<div class="rows">
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
</div>
</div>
