今天嘗試了下bootstrap組件的使用，感覺跟之前使用的semantic UI差不多，還有好多沒有嘗試，在界面上我感覺都大同小異，也不知道是不是還有不多不同的地方我還沒有探索到。不過聽說以后我們要用esay UI，有空的時候再試試那個上面的例子。
bootstrap小練習(xí)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滾動條</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
/*<!--::-webkit-scrollbar 滾動條整體部分，可以設(shè)置寬度啥的-->*/
/*::-webkit-scrollbar 滾動條整體部分，可以設(shè)置寬度啥的*/
/*::-webkit-scrollbar-track 外層軌道*/
/*::-webkit-scrollbar-track-piece 內(nèi)層滾動槽*/
/*::-webkit-scrollbar-thumb 滾動的滑塊*/
/*::-webkit-scrollbar-corner 邊角*/
/*::-webkit-resizer 定義右下角拖動塊的樣式*/
::-webkit-scrollbar{width:10px;background-color: red;}
::-webkit-scrollbar{background-color:pink;border-radius: 10px;width: 8px;height: 8px;}
::-webkit-scrollbar-track{background-color: #2a6496;}
::-webkit-scrollbar-track-piece{background-color: red;}
::-webkit-scrollbar-thumb{background-color: black;}
::-webkit-scrollbar-corner{color: blue;}
</style>
</head>
<body>
<h5>bootstrap里的滾動條的使用</h5>
<pre class="pre-scrollable">
<ol>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
<li>出現(xiàn)滾動條吧</li>
</ol>
</pre>
<div class="text-center">好像還不錯的樣子！</div>
<h3>表格</h3>
<h5>基礎(chǔ)表格</h5>
<table class="table">
<th>表格標(biāo)題1</th>
<th>表格標(biāo)題2</th>
<th>表格標(biāo)題3</th>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<h5>斑馬線表格</h5>
<table class="table table-striped">
<th>表格標(biāo)題1</th>
<th>表格標(biāo)題2</th>
<th>表格標(biāo)題3</th>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<h5>帶邊框的表格</h5>
<table class="table table-striped table-bordered">
<th>表格標(biāo)題1</th>
<th>表格標(biāo)題2</th>
<th>表格標(biāo)題3</th>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<h5>鼠標(biāo)懸浮高亮表格</h5>
<table class="table table-striped table-bordered table-hover">
<th>表格標(biāo)題1</th>
<th>表格標(biāo)題2</th>
<th>表格標(biāo)題3</th>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<h5>緊湊型表格</h5>
<table class="table table-striped table-bordered table-hover table-condensed">
<th>表格標(biāo)題1</th>
<th>表格標(biāo)題2</th>
<th>表格標(biāo)題3</th>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<h5>響應(yīng)式表格</h5>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<th>表格標(biāo)題1</th>
<th>表格標(biāo)題2</th>
<th>表格標(biāo)題3</th>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.333333333333333333333333333333333333333333</td>
</tr>
</table>
</div>
<h5>表格-行控制</h5>
<table class="table table-striped table-bordered">
<th>表格標(biāo)題1</th>
<th>表格標(biāo)題2</th>
<th>表格標(biāo)題3</th>
<tr class="active">
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr class="success">
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr class="info">
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
<tr class="waring">
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
</tr>
<tr class="danger">
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
<h5>基礎(chǔ)表單</h5>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">郵箱：</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="請輸入郵箱"/>
</div>
<div class="form-group">
<label for="examplePassword1">密碼</label>
<input type="password" class="form-control" id="examplePassword1" placeholder="請輸入密碼"/>
</div>
</form>
<input type="checkbox">記住密碼
<button type="submit" class="btn btn-default">登錄郵箱</button>
<h5>水平表單</h5>
<form role="form" class="form-horizontal" >
<div class="form-group">
<label for="exampleInputEmail2" class="col-sm-2 control-label">郵箱：</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="請輸入郵箱"/>
</div>
</div>
<div class="form-group">
<label for="examplePassword2" class="col-sm-2 control-label">密碼：</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="examplePassword2" placeholder="請輸入密碼"/>
</div>
</div>
</form>
<h5>水平表單</h5>
<form role="form" class="inline" >
<div class="form-group">
<label for="exampleInputEmail3" class="col-sm-2 control-label">郵箱：</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="請輸入郵箱"/>
</div>
</div>
<div class="form-group">
<label for="examplePassword3" class="col-sm-2 control-label">密碼：</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="examplePassword3" placeholder="請輸入密碼"/>
</div>
</div>
</form>
<h5>下拉列表</h5>
<form>
<div class="form-group">
<select class="form-control">
<option>語文</option>
<option>數(shù)學(xué)</option>
<option>英語</option>
<option>物理</option>
</select>
</div>
<div class="form-group">
<select multiple class="form-control">
<option>語文</option>
<option>數(shù)學(xué)</option>
<option>英語</option>
<option>物理</option>
</select>
</div>
</form>
<button class="btn">btn</button>
<button class="btn btn-primary">btn btn-primary</button>
<button class="btn btn-default">btn btn-default</button>
<button class="btn btn-block">btn btn-block</button>
<button class="btn btn-danger">btn btn-danger</button>
<button class="btn btn-link">btn btn-link</button>
<button class="btn btn-info">btn btn-info</button>
<button class="btn btn-success">btn btn-success</button>
<br/><br/><br/><br/>
</body>
</html>
