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>