Bootstrap響應式前端框架筆記三——代碼與表格

Bootstrap響應式前端框架筆記三——代碼與表格

1、代碼

    在技術博客文章類頁面的開發中，經常須要在文本總插入說明代碼，使用code便籤能夠建立這種效果，示例以下：

<p>code標籤用於在文本中插入代碼</p>
		<div>定義變量a:<code>int a = 3; </code></div>

效果以下：

kbd標籤能夠用來提示進行鍵盤輸入，示例以下：

<p>kbd標籤能夠建立用戶鍵盤輸入的效果</p>
		<div>使用鍵盤上的<kbd>control</kbd>+<kbd>v</kbd>來進行文本的粘貼</div>

效果：

能夠使用pre標籤來進行成段代碼的插入，同時能夠使用pre-scrollable類來將代碼塊修飾爲可滾動的，示例以下：

<pre class="pre-scrollable">
		&lt;head&gt;
			&lt;meta charset="UTF-8"&gt;
			&lt;link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css" /&gt;
			&lt;title&lt;代碼與表格&lt;/title&gt;
		&lt;/head&gt;
		</pre>

效果以下：

除了上面描述的標籤和類外，通常狀況下，程序中的變量會以斜體來顯示，也能夠使用var標籤來包裹，程序輸出結果能夠使用samp標籤來包裹。

2、表格

    爲H5標籤table添加table類能夠使用Bootstrap定義的表格樣式，示例以下:

<p>使用table標籤添加table類能夠進行表格的建立</p>
		<table class="table">
			<thead>學生表</thead>
			<tr>
				<th>班級</th>
				<th>姓名</th>
				<th>年齡</th>
			</tr>
			<tr>
				<th>3年1班</th>
				<th>jaki</th>
				<th>24</th>
			</tr>
		</table>

效果以下：

爲表格添加tabke-striped類能夠實現斑馬紋樣式的表格，示例以下：

<p>使用table-striped類能夠爲表格添加斑馬紋</p>
		<table class="table table-striped">
			<thead>學生表</thead>
			<tr>
				<th>班級</th>
				<th>姓名</th>
				<th>年齡</th>
			</tr>
			<tr>
				<th>3年1班</th>
				<th>jaki</th>
				<th>24</th>
			</tr>
			<tr>
				<th>3年2班</th>
				<th>Annay</th>
				<th>22</th>
			</tr>
		</table>

效果以下：

Bootstrap默認的列表樣式是不帶邊框的，能夠使用table-bordered類來爲列表添加邊框，示例以下：

<p>使用table-boardered類能夠爲表格添加邊框</p>
		<table class="table table-striped table-bordered">
			<thead>學生表</thead>
			<tr>
				<th>班級</th>
				<th>姓名</th>
				<th>年齡</th>
			</tr>
			<tr>
				<th>3年1班</th>
				<th>jaki</th>
				<th>24</th>
			</tr>
			<tr>
				<th>3年2班</th>
				<th>Annay</th>
				<th>22</th>
			</tr>
		</table>

效果以下：

使用table-hover類修飾的列表，當鼠標懸停時會有高亮效果，示例以下：

<p>使用table-hover類修飾的列表，當鼠標懸停時 會有高亮效果</p>
		<table class="table table-hover">
			<thead>學生表</thead>
			<tr>
				<th>班級</th>
				<th>姓名</th>
				<th>年齡</th>
			</tr>
			<tr>
				<th>3年1班</th>
				<th>jaki</th>
				<th>24</th>
			</tr>
			<tr>
				<th>3年2班</th>
				<th>Annay</th>
				<th>22</th>
			</tr>
		</table>

使用.table-condensed類能夠是默認的列表padding減半。

    對於行標籤tr與列表前th，開發者也能夠使用以下類來修飾，爲其指定狀態：

.active類：將此行或者此列標記爲高亮狀態。

.success類：將此行或者此列標記爲成功狀態。

.info類：將此行或者此列標記爲詳情狀態。

.warning類：將此行或者此列標記爲警告狀態。

.danger類：將此行或者此列標記爲危險狀態。

示例代碼以下：

<p>爲列表設置狀態</p>
		<table class="table table-hover table-condensed">
			<thead>學生表</thead>
			<tr>
				<th>班級</th>
				<th>姓名</th>
				<th>年齡</th>
			</tr>
			<tr class="active">
				<th>3年1班</th>
				<th>jaki</th>
				<th>24</th>
			</tr>
			<tr class="success">
				<th>3年2班</th>
				<th>Annay</th>
				<th>22</th>
			</tr>
			<tr class="info">
				<th>3年1班</th>
				<th>CJ</th>
				<th>19</th>
			</tr>
			<tr class="warning">
				<th>3年1班</th>
				<th>jaki</th>
				<th>24</th>
			</tr>
			<tr>
				<th>3年2班</th>
				<th class="danger">Annay</th>
				<th>22</th>
			</tr>
		</table>

效果以下：

列表元素也能夠包裹在table-responsive類內，此時列表會變成響應式列表，當屏幕尺寸小於768px時，會自動出現水平滾動條。

   另外，本篇博客中全部的實例代碼及顯示效果，在以下地址中，須要的能夠自行對照學習。

http://zyhshao.github.io/bootStrapDemo/codeAndGroup.html。

前端學習新人，有志同道合的朋友，歡迎交流與指導，QQ羣:541458536