学习周记4（bootstrap）

Bootstrap 表格

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

<h2>表格</h2>
	<p> .table 为任意表格添加基本样式 (只有横向分隔线):</p>            
	<table class="table">
		<thead>
			<tr>
				<th>#</th>
				<th>Firstname</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Anna</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Debbie</td>
			</tr>
			<tr>
				<td>3</td>
				<td>John</td>
			</tr>
		</tbody>
	</table>
</div>

Bootstrap 按钮

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

Bootstrap 图片

.img-rounded：添加 border-radius:6px 来获得图片圆角。

.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">

BootStrap组件和插件

导航栏

创建一个默认的导航栏的步骤如下：
向 <nav> 标签添加 class .navbar、.navbar-default。
向上面的元素添加 role="navigation"，有助于增加可访问性。
向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

<ul class="dropdown-menu">
					<li><a href="#">jmeter</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">Jasper Report</a></li>
					<li class="divider"></li>
					<li><a href="#">分离的链接</a></li>
					<li class="divider"></li>
					<li><a href="#">另一个分离的链接</a></li>
				</ul>

结果：

页面标题

<div class="page-header">
    <h1>大标题
        
		<small>小标题</small>
		<small>小标题</small>
    </h1>
</div>

结果：

Bootstrap 列表组

向元素 <ul> 添加 class .list-group。
向 <li> 添加 class .list-group-item。

<ul class="list-group">
	<li class="list-group-item">这是什么</li>
	<li class="list-group-item">这是列表组</li>
	<li class="list-group-item">一共有五行</li>
	<li class="list-group-item">这是第四行</li>
	<li class="list-group-item">这是最后一行</li>
</ul>

运行结果：

• 这是什么
• 这是列表组
• 一共有五行
• 这是第四行
• 这是最后一行

多媒体对象

> 在 <div> 元素上添加 .media 类来创建一个多媒体对象。
> 
> 使用 .media-left 类让多媒体对象(图片)来实现左对齐，同样 .media-right 类实现了右对齐。
> 
> 文本内容放在 class="media-body" 的 div 中，图片左对齐则放在 class="media-body"
> 之前，图片右对齐则放在 class="media-body" 之后。
> 
> 此外，你还可以使用 .media-heading 类来设置标题。 

置顶、居中、置底

<div class="container">
  <h2>多媒体对象</h2>
  <p>多媒体对象可以设置头部、居中、底部对齐，对应的类分别是 "media-top"、 "media-middle" 、 "media-bottom":</p><br>
  <div class="media">
    <div class="media-left media-top">
      <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:80px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">置顶</h4>
      <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
      <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
      <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    </div>
  </div>
  <hr>
  <div class="media">
    <div class="media-left media-middle">
      <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:80px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">居中</h4>
      <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
      <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
      <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    </div>
  </div>
  <hr>
  <div class="media">
    <div class="media-left media-bottom">
      <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:80px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">置底</h4>
      <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
      <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
      <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    </div>
  </div>
</div>