Bootstrap learning record bit by bit

 

1. A must-have learning site for Bootstrap

 

Bootstrap Chinese website: http://www.bootcss.com/

 

2.  Forms

table basic table style

 

table-striped 条纹表格  类似斑马线的表格样式

table-hover  鼠标悬停表格（鼠标悬停时会变色）

   table-bordered table with borders

table-condensed condensed table Bootstrap default table style cells are particularly large, using this style can reduce the size of the cells

 

  Example:

 

<table class="table table-bordered table-hover">
					<thead>
						<tr><th>serial number</th><th>contract name</th><th>company name</th><th>date</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. Forms

 

form-inline: form in one line

form-horizontal class, and combined with Bootstrap's preset grid class, you can  label lay out labels and control groups horizontally side by side

 

 4. Pagination

 

pagination is used on ul.

 

5. Popup window:

 

An example of a change password popup:

 

<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">Change password</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>