Bootstrap學習記錄點滴

1. 學習Bootstrap必進的學習網站

Bootstrap中文網：http://www.bootcss.com/

2. 表格

table 基本表格樣式

table-striped 條紋表格  類似斑馬線的表格樣式

           

   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" rel="external nofollow"  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" target="_blank" rel="external nofollow" >歌曲管理</a>
		</li>
		<li>
			<a id="singerTab" role="tab" data-toggle="tab" href="#singer" target="_blank" rel="external nofollow" >歌手管理</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>