bootstrap相关

bootstrap是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

bootstrap 默认为我们写好了一些css样式和javascript。我们在使用的时候只需要引入它。然后使用它里面的一些class名就可以实现相对应的效果。
因为他是基于Jquery的。所以在引入之前要先引入jquery。
bootstrap默认为我们设置了一些基本的样式。

栅格系统

bootstrap提供了一套响应式的栅格系统，即随着屏幕或视口尺寸的增加。系统会自动分为12列。
根据屏幕大小的不同。栅格系统有不同的类前缀来实现。

超小屏幕 手机 (<768px)    
小屏幕 平板 (≥768px) 
中等屏幕 桌面显示器 (≥992px) 
大屏幕 大桌面显示器 (≥1200px) 分别对应
.col-xs-    .col-sm-    .col-md-    .col-lg-

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

页面主体

bootstrap 针对页面主体也有一些效果
比如添加.lead类可以让段落突出显示
使用
<mark>标签</mark>可以实现以下效果
标签
还有针对删除文本

<del>hanshengzhao</del>
<s>hanshengzhao</s>

hanshengzhao
hanshengzhao
还有其他一些就不一一举例了。

表格

.table 类可以为<table>标签赋予基本的样式
一些padding和分割线

a	b
a	b
a	b

.table-striped可以增加斑马条纹

a	b
a	b
a	b

.table-bordered 为每个单元格增加边框

a	b
a	b
a	b

.table-hover 可以让鼠标悬停的时候做出响应

a	b
a	b
a	b

.table-condensed 让表格更加紧凑

a	b
a	b
a	b

还可以给不同的单元格设置不同的颜色

a	b
a	b
a	b
a	b
a	b

表单

所有设置了 .form-control 类的 、 和 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

表单和input的后面再补充，先说下按钮的。

按钮

Link

<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">
虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。
如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。

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>

按钮的尺寸
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button> 上（包含 aria-pressed="true" 属性)），并通过编程的方式使其处于激活状态。

辅助类

<p class="text-muted">hanshengzhao</p>
<p class="text-primary">hanshengzhao</p>
<p class="text-success">hanshengzhao</p>
<p class="text-info">hanshengzhao</p>
<p class="text-warning">hanshengzhao</p>
<p class="text-danger">hanshengzhao</p>

hanshengzhao

hanshengzhao

hanshengzhao

hanshengzhao

hanshengzhao

hanshengzhao

还有背景色的

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

关闭按钮，这个小X
×

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

三角按钮

<span class="caret"></span>

快速浮动，一个在左，一个在右

<div class="pull-left">...</div>
<div class="pull-right">...</div>

韩生曌

韩生曌

居中的 。
<div class="center-block">韩生曌</div>

清除浮动，之前是使用clear：both。
现在直接可以添加.clearfix类
显示和隐藏直接可以用.show 和.hidden类。