今天尝试了下bootstrap组件的使用，感觉跟之前使用的semantic UI差不多，还有好多没有尝试，在界面上我感觉都大同小异，也不知道是不是还有不多不同的地方我还没有探索到。不过听说以后我们要用esay UI，有空的时候再试试那个上面的例子。
bootstrap小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动条</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
/*<!--::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的-->*/
/*::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的*/
/*::-webkit-scrollbar-track 外层轨道*/
/*::-webkit-scrollbar-track-piece 内层滚动槽*/
/*::-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>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
<li>出现滚动条吧</li>
</ol>
</pre>
<div class="text-center">好像还不错的样子！</div>
<h3>表格</h3>
<h5>基础表格</h5>
<table class="table">
<th>表格标题1</th>
<th>表格标题2</th>
<th>表格标题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>表格标题1</th>
<th>表格标题2</th>
<th>表格标题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>表格标题1</th>
<th>表格标题2</th>
<th>表格标题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">
<th>表格标题1</th>
<th>表格标题2</th>
<th>表格标题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>表格标题1</th>
<th>表格标题2</th>
<th>表格标题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>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<th>表格标题1</th>
<th>表格标题2</th>
<th>表格标题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>表格标题1</th>
<th>表格标题2</th>
<th>表格标题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>基础表单</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>数学</option>
<option>英语</option>
<option>物理</option>
</select>
</div>
<div class="form-group">
<select multiple class="form-control">
<option>语文</option>
<option>数学</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>
