BootStrap（1）——排版、代码、表格和按钮

从今天开始，正式地开始记录一些关于前端的笔记，前端还是能够很好很快地反映出自己学过的东西，立等可见的东西最容易有成就感。基本的html、css、js、jQuery的概念都有，所以就直接从bootstrap开始了，当然因为都是一带而过，所以基础并不牢靠，如果出现关于基础知识的疑惑，我会倒回去看，然后再记录过来，所有的知识都按部就班学实在太过费时费力。

BootStrap的排版

1. 标题（.page-header）

2. 段落（.lead）

3. mark标记

4. 删除线<del>

5. 无用文本删除线<s>

6. 插入文本下划线<ins>

7. 小号字体<small>

8. 斜体<em>这里也可以放心使用html的<i>标签

9. 文本对齐，例<p class="text-left"></p>

10. 大小写，例<p class="text-lowercase"></p>

11. 列表，和HTML基本一致。可以记一记无样式列表。

12. 描述，或者可以看做是自定义列表

13. 水平排列列表

BootStrap中的代码块

<pre> <code>标签，该标签中的内容将视作代码
<var>该标签中的内容视作变量
<samp>标记程序输出的内容
<kbd>标记用户通过键盘输入的内容

BootStrap中的表格

表格：<table class="table">
条纹状表格：<table class="table table-striped">
表格的边框：<table class="table table-bordered">
表格中的鼠标悬浮：<table class="table table-hover">
紧缩表格：<table class="table table-condensed">其效果是让内边距缩小一半
响应式表格：将表格用<div class="table-responsive"></div>包含
表格行或者单元格的颜色：行<tr class="warning">...</tr>，单元格<tr><td class="success"></td></tr>，颜色选项一共有：”info”,”active”,”warning”,”danger”。

BootStrap中的按钮

可以作为按钮的标签或者元素

<a>/<button>/<input>标签上添加按钮类之后，均可以实现bootstrap按钮。
以下面的为例

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

这里要注意：
1. 虽然说可以将按钮类运用到<a>标签上，但是导航和导航条只支持<button>标签。
2. 如果将<a>作为按钮用于触发当前页面的某些效果，那么记得设置role=”button”。

按钮的样式

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

尺寸

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>