溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Bootstrap是一種web框架，是基于HTML,CSS和JS的一種目前較為流行的前端框架。
Bootstrap包含有豐富的組件，根據提供的組件，開發者可以更加快速、便捷地搭建自己心儀的網站。通常包括有以下常用組件：下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等。此外，bootstrap還包含有眾多jQuery插件：莫泰局昂、標簽頁、滾動條、彈出框等。
有關bootstrap的下載和文檔可到bootstrap中文網：www.bootcss.com查看。
那么使用bootstrap的優勢在哪里？第一、利于開發響應式網站，解決不同設備的兼容性問題。第二、提高了網站的開發速度和開發效率。
參考：如何使用Bootstrap的modal組件自定義alert，confirm和modal對話框
Bootstrap學習系列之使用 Bootstrap Typeahead 組件實現百度下拉效果
本篇文章將總結常用組件及其屬性。
1.1柵格系統
1、柵格系統是一種行和列構成的一種布局。隨著，屏幕分辨率的變大，最多可展示12個列。
PC端：
PAD端：
手機終端：
2、柵格參數：
col-lg-*:(屏幕>=1200px) PC
col-md-*:（992px-1200px）
col-sm-*:（768px-992px）小平板
col-xs-*:（小于768px）手機
3.代碼示例：
<div class="container" >
<div class="row">
<div class="col-lg-3 col-sm-4 col- xs-6">
<div class="thumbnail">
<img src="img/codeguide.png">
<h3>靠譜研究所</h3>
<p>我們的口號是：靠譜、有趣、有料</p>
</div>
</div>
<div class="col-lg-3 col-sm-4 col- xs-6">
<div class="thumbnail">
<img src="img/codeguide.png">
<h3>靠譜研究所</h3>
<p>我們的口號是：靠譜、有趣、有料</p>
</div>
</div>
</div>
</div>
1.2輔助類
1.文本顏色：
<span > </span> <h2 class="text-primary">text-primary靠譜研究所</h2> <h2 class="text-success">text-success靠譜研究所</h2> <h2 class="text-warning">text-warning靠譜研究所</h2> <h2 class="text-danger">text-danger靠譜研究所</h2> <h2 class="text-info">text-info靠譜研究所</h2> <h2 class="text-muted">text-muted靠譜研究所</h2>
2、背景顏色：
<span > </span> <h2 class="bg-primary">text-primary靠譜研究所</h2> <h2 class="bg-success">text-success靠譜研究所</h2> <h2 class="bg-warning">text-warning靠譜研究所</h2> <h2 class="bg-danger">text-danger靠譜研究所</h2> <h2 class="bg-info">text-info靠譜研究所</h2> <h2 class="bg-muted">text-muted靠譜研究所</h2>
3、關閉按鈕&三角圖標：
<span > </span> <!--關閉按鈕--> <button class="close"><span>×</span></button> <!--三角圖標--> <span class="caret"></span>
4、快速浮動：
左浮動：pull-left
右浮動：pull-right 清除浮動：clearfix
浮動會將塊元素轉換成行內元素
<div class="pull-left bg-primary">這是左邊的內容</div> <div class="pull-right bg-danger">這是右邊的內容</div>
5、塊元素居中、文字居中：
<!--塊元素垂直居中-->
<style>
#div2{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);//平移
}
</style>
<span > </span><!--實現塊元素水平居中-->
<div id="div1" class="center-block text-center" >塊元素水平居中</div>
<!--實現塊元素垂直居中-->
<div id="div2" class="center-block text-center" >塊元素垂直居中</div>
1.3表格
1.表格顏色：active,warning,danger,info,danger
2.鼠標懸停效果：table-hover
3.帶邊框表格：table-bordered
4.各行換色：table-striped
<table class="table table-striped table-hover table-bordered"><!--隔行換色、鼠標懸停、表格邊框-->
<thead>
<tr class="danger"><!--表格顏色-->
<th>姓名：</th>
<th>性別：</th>
<th>年齡：</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>23</td>
</tr>
</tbody>
</table>
1.4列表：
class屬性：ul:list-group
li:list-group-item 徽章：span:badge
列表項顏色：list-group-item-(success/warning/danger)
<ul class="list-group"> <li class="list-group-item"> 靠譜研究所 <!--列表徽章--><span class="badge">10</span> </li> <li class="list-group-item list-group-item-success">IT研究所</li> <li class="list-group-item list-group-item-warning">美食研究所</li> <li class="list-group-item list-group-item-info">美妝研究所</li> </ul>
1.5表單：
表單分組：form-group
表單項：(input/span/textarea):form-control
<style>
.container{
width:450px;
height:300px;
background:#ffffff;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:20px;
}
</style>
<span > </span><form role="form">
<h4 class="text-center">靠譜研究所后臺管理系統</h4>
<div class="form-group has-success has-feedback">
<label for="user">用戶名</label>
<input type="text" id="user" placeholder="請輸入用戶名" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label for="pass">密碼</label>
<input type="text" id="pass" placeholder="請輸入密碼" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="checkbox">
<label>
<input type="checkbox">請記住我
</label>
</div>
<button type="submit" class="btn btn-success btn-block">提交</button>
</form>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
