bootstrap小总结

1、bootstrap 排版

全局样式style.css：

1、移除body的margin声明

2、设置body的背景色为白色

3、为排版设置了基本的字体、字号和行高

4、设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式

标题 h1-h6

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类选择器，为的是给内联（inline）属性的文本赋予标题的样式。

1、重新设置了margin-top和margin-bottom的值

2、h1_{h3重置后的值都是20px；h4}h6重置后的值都是10px

3、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体

4、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px

在标题内还可以包含<small> 标签或赋予 .small 类的元素，可以用来标记副标题。

<h2>Bootstrap heading <small>Secondary Text</small></h2>

<h2>Bootstrap heading <small style="color:gray;"> Secondary text</small></h2>

p 标签

<p> (段落)元素还被设置底部外边距（margin）10px。
<pre>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
</pre>
通过添加 .lead 类可以让段落突出显示。
<pre style="font-size:21px;font-family:宋体">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
</pre>

强调内容的标签

<lead>一般配合段落标签使用

<small>

<strong>

<em> <i> <cite>

强调相关的类

text-muted：  提示，使用浅灰色（#999）
text-primary：主要，使用蓝色（#428bca）
text-success：成功，使用浅绿色(#3c763d)
text-info：   通知信息，使用浅蓝色（#31708f）
text-warning：警告，使用黄色（#8a6d3b）
text-danger： 危险，使用褐色（#a94442）

文本对齐风格

text-left：   左对齐
text-center： 居中对齐
text-right：  右对齐
text-justify：两端对齐

列表

1、ul 、 ol <span style="color:red;">去序列</span>：

class=“list-unstyled“

2、ul 、 ol <span style="color:red;">水平排列</span>（把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示）

class=“list-inline”

3、dl水平列表（屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果）

class=“dl-horizontal”

图片

使用方法非常简单，只需要在<img>标签上添加对应的类名
img-responsive：响应式图片，主要针对于响应式设计

img-rounded：   圆角图片
img-circle：    圆形图片
img-thumbnail： 缩略图片

自己动手添加并查看相应的效果吧~ ~ ~

bootstrap图标

Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

任何行级元素都可以，通常使用span标签做图标容器

<span style="color:blue;">可登陆bootstrap网站查看 http://v3.bootcss.com/components/#thumbnails<span>

用法很简单，只需将图标下的英文复制粘贴到class里即可：

<span class="glyphicon glyphicon-ok"></span>

2、bootstrap-表格

基础实例

<table class="table"></table>

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

状态类

通过这些状态类可以为行或单元格设置颜色。

Class 描述

.active     鼠标悬停在行或单元格上时所设置的颜色
.success    标识成功或积极的动作
.info       标识普通的提示信息或动作
.warning    标识警告或需要用户注意
.danger     标识危险或潜在的带来负面影响的动作

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
    <table class="table">
    ...
    </table>
</div>

3、bootstrap表单

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group中可以获得最好的排列。

<form role="form">告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单</form>

<form role="button">告诉设备，这是个按钮，可以点击。本质上是增强语义性，增强组件的可访问性、可用性</form>

不要将表单组合输入框组混合使用，建议将输入框组嵌套到表单组中使用。

<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>

多个控件可以排列在同一行:

<form class="form-inline">
    <div class="form-group">
         <label for="exampleInputName2">Name</label>
         <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    </div>
    <div class="form-group">
          <label for="exampleInputEmail2">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
    </div>
    <button type="submit" class="btn btn-default">Send invitation</button>
</form>

水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

单选和多选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

设置了disabled属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 <label> 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。

多选框：

<div class="checkbox">
     <label>
         <input type="checkbox" value="">
        Option one is this and that—be sure to include why it's great
     </label>
</div>
<div class="checkbox disabled">
     <label>
          <input type="checkbox" value="" disabled>
         Option two is disabled
    </label>
</div>

单选框：

<div class="radio">
     <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      Option two can be something else and selecting it will deselect option one
    </label>
</div>
<div class="radio disabled">
     <label>
          <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
          Option three is disabled
     </label>
</div>

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。