bootstrap css样式起步

Bootstrap是一个HTML/CSS/JS框架，用于开发移动设备优先的响应式网页。由Twitter两位工程师编写，主要涉及：

  HTML: 为已有的H5标签添加自定义属性

  CSS: CSSReset、添加了几百个class

  JS: 基于jQuery编写了插件

Bootstrap提供的class	含义或作用	示例
.container	使用媒体查询，在不同的屏幕宽度下，设置了不同的固定宽度和水平居中，并使用:after内容生成了清除浮动影响的空格(display:table)，以及:before内容生成了一个防止子元素布局陷阱的空格(display:table)
.container-fluid	宽度为父容器的100%，并使用:after内容生成了清除浮动影响的空格(display:table)，以及:before内容生成了一个防止子元素布局陷阱的空格(display:table)
.btn	通常用于button/input/a元素

 

1. 与按钮相关的样式class：

   .btn        设定按钮的基本样式，如背景色、边框、圆角、填充、active

   ---------------

   .btn-default    灰色边框、白色背景、hover

   .btn-danger

   .btn-info

   .btn-primary

   .btn-success

   .btn-warning

   -----------------

   .btn-lg

   .btn-sm

   .btn-xs

   -----------------

   .btn-block

   .btn-link

    

2. Bootstrap中几个基本词汇：

   large:            lg           >1200的屏幕（大型PC显示器）

   medium:         md（默认） >992的屏幕(普通PC显示器)

   small:             sm  >768的屏幕(平板)

   extra-small:    xs <768的屏幕(手机)

   primary()/ warning() / info() / success() / danger()

    

3. 与图片相关的样式class

   .img-responsive:          响应式图片max-width:100%; display:block;

   -------------------------------------

   .img-circle:                   图片显示为圆形

   .img-rounded:               圆角图片

   .img-thumnail:               缩略图片（会添加图片边框）

    

4. 辅助类

         .text-primary

   .text-danger

   .text-info

   .text-success

   .text-warning

   -----------------

   .bg-primary

   .bg-danger

   .bg-info

   .bg-success

   .bg-warning

   ------------------

   .caret      插入符号(向下的小三角)，可以使用文本颜色控制三角的颜色

   ------------------

   .pull-left         让区块元素向左浮动(自动变为行内块)  float:left  

   .pull-right       让区块元素向右浮动(自动变为行内块)  float:right

   .center-block  让区块元素在父元素中水平居中   margin-left/right: auto;

   .clearfix          clear:both

   ------------------

   .show             display:auto;

   .hide                     display: none;

   .sr-only           ScreenReader Only 仅屏幕阅读器可见

    

   NVDA: 屏幕阅读软件

    

5. 全局CSS样式——与代码相关的标签

   <code></code>   以粉色底粉色字突出显示一段代码

   <kbd></kbd>      以黑底白字突出显示一个键盘击键操作

   <pre></pre>        以灰底灰框原始格式显示一段代码

   .pre-scrollable              声明pre元素可以竖直方向上显现滚动条

   <var></var>         以斜体形式显示一个代码中的变量名

   <samp></samp>以特殊字体显示一段代码的输出结果

    

6. 全局CSS样式——与排版有关的标签和class

   <h1></h1>

   <h2></h2>

   <h3></h3>

   <h4></h4>

   <h5></h5>

   <h6></h6>

   .h1~.h6

   <small></small>   用在h1~h6内部，显示一个副标题

   .small

   .lead              把文字显示为导读效果

   ---------------------

   .text-left         文本左对齐

   .text-right       文本右对齐

   .text-center    文本居中对齐

   .text-justify     文本调整对齐(两端对齐)

   .text-lowercase      文本中每个单词都小写

   .text-uppercase     文本中每个单词都大写

   .text-capitalize              文本中每个单词首字母大写

   ----------------------

   <blockquote></blockquote>

   .blockquote-reverse

   <footer></footer>

   ------------------------

   <ul><li></li></ul>

   <ol><li></li></ol>

   .list-unstyled          去除列表项前的圆点/数字

   .list-inline               将所有的li显示在一行中并添加填充

   <dl>

   <dt></dt>           Definition Title/Type

   <dd></dd>          Definition Detail/Description

   </dl>

   .dl-horizontal         定义列表水平显示

    

    

7. 全局CSS样式——栅格布局系统(Grid System)

     传统的页面布局方式： (1)table  (2)div+css

    

    Bootstrap采用的布局方式将上述两种思路整合在一起：

      <divclass="container/container-fluid">

   <divclass="row">

   <div class="col"></div>

   <div class="col"></div>

   </div>

   <divclass="row">

   <div class="col"></div>

   <div class="col"></div>

   <div class="col"></div>

   </div>

     </div>

    此布局方式，简单灵活，且不容易出错误。

    使用此布局方式，应注意：

     (1).row必须放在.container/.container-fluid内部

     (2)一个.row默认会分为12个等宽的列

     (3)一个.row中只能放置用于布局的.col-lg-*  .col-md-* .col-sm-*  .col-xs-*列：

     (4).col-lg-*设置只对lg的屏幕有效

   .col-md-*设置只对md/lg的屏幕有效

   .col-sm-*设置对sm/md/lg的屏幕有效

   .col-xs-*设置对xs/sm/md/lg的屏幕都有效

     (5)若某中屏幕下某个元素无需显示，可以使用

   .hidden-lg  .hidden-md  .hidden-sm   .hidden-xs

    

   .col-lg-1         .col-md-1       .col-sm-1        .col-xs-1

   .col-lg-2         .col-md-2       .col-sm-2        .col-xs-2

   .col-lg-3         .col-md-3       .col-sm-3        .col-xs-3

   .col-lg-4         .col-md-4       .col-sm-4        .col-xs-4

   .col-lg-5         .col-md-5       .col-sm-5        .col-xs-5

   .col-lg-6         .col-md-6       .col-sm-6        .col-xs-6

   .col-lg-7         .col-md-7       .col-sm-7        .col-xs-7

   .col-lg-8         .col-md-8       .col-sm-8        .col-xs-8

   .col-lg-9         .col-md-9       .col-sm-9        .col-xs-9

   .col-lg-10        .col-md-10     .col-sm-10      .col-xs-10

   .col-lg-11        .col-md-11     .col-sm-11      .col-xs-11

   .col-lg-12        .col-md-12     .col-sm-12      .col-xs-12

    

   .col-lg-offset-1       ...

   .col-lg-offset-2       ...

   .col-lg-offset-3       ...

   .col-lg-offset-4       ...

   .col-lg-offset-5       ...

   .col-lg-offset-6       ...

   .col-lg-offset-7       ...

   .col-lg-offset-8       ...

   .col-lg-offset-9       ...

   .col-lg-offset-10     ...

   .col-lg-offset-11     ...

   .col-lg-offset-12     ...