Bootstrap学习记录点滴

 

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">&times;</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>