bootstrap总结

bootstrap在reset.css文件中设置margin为0，因此其他的标签需要重新设计margin。

1.h

<h>标签和普通使用方法一样。

定义了.h1~.h6六个类名，样式和标题样式一样。

副标题用<small>标签指出，必须包含在h标签内。

<h1>标题1</h1>

<div class="h1">标题1</div>

2.p

定义<body>的字体库、字号、行高、颜色，<p>标签继承这些设置，单独设置margin-bottom为10px，使用方法同普通方法。

强调内容

增大：.lead;

加粗：<strong>; <b>（设置font-weight: bold）

斜体：<em>;<i> （设置font-style: italic）

不变：<cite>

变小：<small>,.small

强调类（颜色）

• .text-muted：提示，使用浅 灰色（#999）

• .text-primary：主要，使用 蓝色（#428bca）

• .text-success：成功，使用 浅绿色(#3c763d)

• .text-info：通知信息，使用 浅蓝色（#31708f）

• .text-warning：警告，使用 黄色（#8a6d3b）

• .text-danger：危险，使用 褐色（##a94442）

• 文本对齐

• （设置text-align：center、left、right、justify）

  .text-left：左对齐

  .text-center：居中对齐

  .text-right：右对齐

  .text-justify：两端对齐

• 表单

• 1、宽度变成了100%

  2、设置了一个浅灰色（#ccc）的边框

  3、具有4px的圆角

  4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

  5、设置了placeholder的颜色为#999

• 水平风格表单：标签在左，控件在右

  1、在<form>元素是使用类名“form-horizontal”。

  2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）

  内联表单：控件一行显示

  在<form>元素中添加类名“form-inline”

  表单控件

  select：<select multiple class="form-control"> 选择多个

  textarea： <textarea class="form-control" rows="3"></textarea>

  radio，checkbox：div包着label包着input

• <div class="checkbox">
• <lable>
• <input type="checkbox" value="">
• </lable>
• </div>

• radio，checkbox：水平排列

  div（class=”form-group”）包着label（class=”checkbox-inline”or“radio-inline”）包着input

  禁用控件：在控件上添加disabled属性

  <input class="input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>

  验证状态：form-group容器添加has-success等类;若想label同步变色需要在label上加.control-label;显示icon需要在form-group加.has-feedback，最后加一个span存放icon

  表单提示信息：

  在form-group容器后加一个span，添加类名.help-block

• button：四种方式，bootstrap用button实现，建议用button和a标签来制作按钮

  <input type="button">

  <input type="reset">

  <input type="submit">

  <button></button>

  button样式

  .btn

  .btn-default