第五周学习周记——学习BootStrap

---

前言

在上一周初步了解了BootStrap的基本介绍后，这一周将进一步学习BootStrap的相关内容。

---

一、BootStrap样式

Bootstrap支持以两种方式显示代码：
第一种是code标签，用来内联显示代码；
第二种是pre标签，用来显示为一个独立的块元素或者代码有多行。

1. BootStrap表格

Bootstrap提供了一个清晰的创建表格的布局，下表列出了Bootstrap支持的一些表格元素：

标签	描述
table	为表格添加基础样式。
thead	表格标题行的容器元素（tr），用来标识表格列。
tbody	表格主体中的表格行的容器元素（tr）。
table	为表格添加基础样式。
tr	一组出现在单行上的表格单元格的容器元素（td或th）。
td	默认的表格单元格。
th	特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在thead内使用。
caption	关于表格存储内容的描述或总结。

基本表格

代码：

<table class="table">
	<caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Hu</td>
         <td>Beijing</td>
      </tr>
      <tr>
         <td>Jx</td>
         <td>Shanghai</td>
      </tr>
   </tbody>
</table>

运行结果：

带边框的表格

代码：

<table class="table table-bordered">
	<caption>边框表格布局</caption>
	<thead>
		<tr>
			<th>名称</th>
			<th>城市</th>
			<th>邮编</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Hu</td>
			<td>Beijing</td>
			<td>666666</td>
		</tr>
		<tr>
			<td>Ji</td>