7.響應(yīng)式表單
.form-group表單組樣式：將<lable>和表單元素包含其中绎巨，可以獲得更好的排列
.form-control表單元素樣式：常用于<input>、<textarea>陶冷、<select>元素
<form>
<div >
<label for="username">用戶名</label>
<input type="text" class="form-control" id="username" placeholder="請(qǐng)輸入用戶名">
</div>
<div class="form-group">
<label for="password">密碼</label>
<input type="email" class="form-control" id="password" placeholder="請(qǐng)輸入密碼">
</div>
</form>
.form-inline內(nèi)聯(lián)表單樣式（用于form表單）：可以使元素一行顯示
<form class="form-inline">
<div class="form-group">
<label for="username">用戶名</label>
<input type="text" class="form-control" id="username" placeholder="請(qǐng)輸入用戶名">
</div>
<div class="form-group">
<label for="password">密碼</label>
<input type="email" class="form-control" id="password" placeholder="請(qǐng)輸入密碼">
</div>
</form>
.input-group-addon在一側(cè)加入附加內(nèi)容
<div class="input-group">
<span class="input-group-addon"> 搜索</span>
<input type="search" class="form-control" id="password" placeholder="輸入搜索內(nèi)容">
</div>
.checkbox-inline或.radio-inline類(lèi)應(yīng)用到一系列的多選框（checkbox）或單選框（radio）控件上碴开，可以使這些控件排列在一行。
.btn-lg绿鸣、.btn-sm或.btn-xs就可以獲得不同尺寸的按鈕。
.btn-success等可以設(shè)置按鈕樣式 — 如下圖
按鈕樣式
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label" class="col-md-2 control-label" for="username">用戶名：</label>
<div class="col-md-10">
<input class="form-control" type="text" id="username" placeholder="請(qǐng)輸入用戶名">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="password">密碼：</label>
<div class="col-md-10">
<input class="form-control" type="text" id="password" placeholder="請(qǐng)輸入密碼">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">上傳圖片：</label>
<div class="col-md-10">
<input type="file">
<p class="help-block">上傳圖片格式：.png</p>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">專業(yè)課程：</label>
<div class="checkbox col-md-10">
<label class="checkbox-inline">
<input type="checkbox">軟件工程
</label>
<label class="checkbox-inline">
<input type="checkbox">軟件測(cè)試
</label>
<label class="checkbox-inline">
<input type="checkbox">java程序設(shè)計(jì)
</label>
<label class="checkbox-inline">
<input type="checkbox">計(jì)算機(jī)網(wǎng)絡(luò)
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">年級(jí)：</label>
<div class="radio col-md-10">
<label class="radio-inline">
<input type="radio">大一
</label>
<label class="radio-inline">
<input type="radio">大二
</label>
<label class="radio-inline">
<input type="radio">大三
</label>
<label class="radio-inline">
<input type="radio">大四
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="info">個(gè)人簡(jiǎn)介：</label>
<div class="col-md-10">
<textarea rows="8" class="form-control" placeholder="請(qǐng)輸入個(gè)人簡(jiǎn)介" id="info"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-success btn-group-sm">提交</button>
</div>
</div>
</form>
8.柵格系統(tǒng)
柵格參數(shù)
通過(guò)下表可以詳細(xì)查看 Bootstrap 的柵格系統(tǒng)是如何在多種屏幕設(shè)備上工作的暂氯。
<div class="container">
<div class="row">
<div class="col-md-12" style="height: 300px;background: gray">
</div>
</div>
<div class="row">
<div class="col-md-8" style="height: 500px;background: mediumpurple">
<div class="row">
<div class="col-md-4" style="height: 500px;background: deepskyblue">
</div>
<div class="col-md-4" style="height: 500px;background: hotpink">
</div>
<div class="col-md-4" style="height: 500px;background: palegoldenrod">
</div>
</div>
</div>
<div class="col-md-4" style="height: 500px; background: paleturquoise">
</div>
</div>
<div class="row">
<div class="col-md-12" style="height: 100px;background: black">
</div>
</div>
</div>
9.圖片樣式
.img-responsive類(lèi)可以讓圖片支持響應(yīng)式布局
.img-rounded圓角圖片潮模、.img-circle圓圖片、.img-thumbnail邊框圓角
<div class="container" style="background-color: white;padding: 50px;">
<div>
</div>
</div>
10.輔助類(lèi)
1.情境文本顏色
通過(guò)顏色來(lái)展示意圖痴施，Bootstrap 提供了一組工具類(lèi)擎厢。
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
2.情境背景色
和情境文本顏色類(lèi)一樣，使用任意情境背景色類(lèi)就可以設(shè)置元素的背景辣吃。
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
3.快速浮動(dòng)
通過(guò)添加一個(gè)類(lèi)动遭，可以將任意元素向左或向右浮動(dòng)
<div class="pull-left bg-danger">...</div>
<div class="pull-right bg-info">...</div>
11.下拉菜單
.dropdown將下拉菜單觸發(fā)器和下拉菜單都包裹在其中
.data-toggle屬性：下拉菜單觸發(fā)器，在按鈕上神得，內(nèi)容取值'dropdown'
.dropdown-menu給<ul>指定下拉菜單的樣式
.divider為下拉菜單添加分隔符
<div class="dropdown">
<button type="button" class="btn btn-success" data-toggle="dropdown">
菜單按鈕 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">javaEE</a></li>
<li><a href="#">html設(shè)計(jì)</a></li>
<li><a href="#">mysql應(yīng)用</a></li>
<li><a href="#">php應(yīng)用</a></li>
<li class="divider"></li>
<li><a href="#">c++應(yīng)用</a></li>
<li><a href="#">軟件測(cè)試</a></li>
</ul>
</div>
12.按鈕組
.btn-group:按鈕組（可實(shí)現(xiàn)將一組按鈕放在同一行）
.btn-toolbar按鈕工具欄 將多個(gè)按鈕組放在其中
<div class="btn-toolbar">
<div class="btn-group btn-group-sm">
<button type="button" class="btn-success btn">按鈕</button>
<button type="button" class="btn-primary btn">按鈕</button>
<button type="button" class="btn-danger btn">按鈕</button>
</div>
<div class="btn-group ">
<button type="button" class="btn-success btn">按鈕</button>
<button type="button" class="btn-success btn">按鈕</button>
<button type="button" class="btn-success btn">按鈕</button>
</div>
<div class="btn-group btn-group-lg btn-group-vertical">
<button type="button" class="btn-success btn">按鈕</button>
<button type="button" class="btn-success btn">按鈕</button>
<button type="button" class="btn-success btn">按鈕</button>
</div>
</div>
上篇：Bootstrap學(xué)習(xí)筆記（一）
