1. 学习Bootstrap必进的学习网站
Bootstrap中文网:http://www.bootcss.com/
2. 表格
table 基本表格样式
table-striped 条纹表格 类似斑马线的表格样式
table-hover 鼠标悬停表格(鼠标悬停时会变色)
table-bordered 有边框的表格
table-condensed 紧缩的表格 Bootstrap默认的表格样式单元格特别大,使用这个样式可以减少单元格的大小
实例:
<table class="table table-bordered table-hover">
<thead>
<tr><th>序号</th><th>合同名称</th><th>公司名称</th><th>日期</th></tr>
</thead>
<tbody>
<tr v-for="(m,index) in modelList">
<td>{{index+1}}</td>
<td><a :href="getUrl(m.id)" target="_blank">{{m.q_name}}</a></td>
<td>{{m.q_company}}</td><td>{{m.q_date}}</td>
</tr>
</tbody>
</table>
3. 表单
form-inline: 表单在一行内
form-horizontal
类,并联合使用 Bootstrap 预置的栅格类,可以将 label
标签和控件组水平并排布局
4. 分页
pagination 使用在ul上。
5. 弹出窗口:
一个修改密码弹出窗口的示例:
<div class="modal fade" tabindex="-1" role="dialog" id="changePassModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">修改密码</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" v-model="password">
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" v-model="password2">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" @click="confirm">确认修改</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
6. Tab 页签切换
<ul class="nav nav-tabs">
<li class="active">
<a id="musicTab" role="tab" data-toggle="tab"
href="#music">歌曲管理</a>
</li>
<li>
<a id="singerTab" role="tab" data-toggle="tab" href="#singer">歌手管理</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="music">
music
</div>
<div role="tabpanel" class="tab-pane" id="singer">
singer
</div>
</div>