bootstrap记录

学习bootstrap就像重温css一样！

               各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高

1.标题

   定义标题都是使用标签<h1>到<h6>,class：h1-h6

2.标题（2）

  <small>,class:small

3.段落 <p> 

  让一个段落p突出显示，可以通过添加类名“lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理

4.使用<b>和<strong>标签让文本直接加粗。

5.使用标签<em>或<i>来实现斜体

6.强调类

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

7.文本对齐风格(text-align)

     .text-left：左对齐

     .text-center：居中对齐

     .text-right：右对齐

     .text-justify：两端对齐

8.列表结构主要有三种：有序列表、无序列表和定义列表

    类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

    类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表

    <dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

9.代码

    1、<code>：一般是针对于单个单词或单个句子的代码
    2、<pre>：一般是针对于多行代码（也就是成块的代码）。<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格

            类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
    3、<kbd>:一般是表示用户要通过键盘输入的内容

10.表格table

      ☑  .table：基础表格

  ☑  .table-striped：斑马线表格

  ☑  .table-bordered：带边框的表格

  ☑  .table-hover：鼠标悬停高亮的表格

  ☑  .table-condensed：紧凑型表格

  ☑  .table-responsive：响应式表格

11.表格行tr:颜色不同

      .active: 表示当前活动的信息

      .success:表示成功或者正确的行为

      .info:表示中立的信息或行为

      .warning:表示警告，需要特别注意

      .danger:表示危险或者可能是错误的行为

 12.表单form

     正常表单：是垂直分布的。

     水平表单：要实现水平表单效果，必须满足以下两个条件：

                在<form>元素是使用类名“form-horizontal”。
                 配合Bootstrap框架的网格系统。（后面讲解）

     内联表单：要将表单的控件都在一行内显示：<form>元素中添加类名“form-inline”

  13.复选框和单选框

       1、不管是checkbox还是radio都使用label包起来了
       2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
       3、radio连同label标签放置在一个名为“.radio”的容器内
               在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。

  14.水平排列复选框或单选框

        1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
        2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

  15.按钮button

       .btn        btn-default        btn-primary      btn-info       btn-success      btn-warning      btn-danger      btn-inverse      btn-link

       类定义按钮的背景颜色：与text类似。

       多标签支持：a   span   div    input的submit  

       按钮大小：btn-lg    btn-sm    btn-xs

       类名“btn-block”按钮使用这个类名就可以让按钮充满整个容器：块状按钮

      活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）。禁用状态：disabled

   16.表单的大小

      input-sm:让控件比正常大小更小
      input-lg:让控件比正常大小更大

   17.form-control

      <input><legend><fieldset><textarea>...类名`form-control`，也就是说表单元素使用了类名“form-control”。

               将会实现一些设计上的定制效果 width:100%  .<input>表单的类型type必须有。

               产生焦点状态的效果

               表单控件：添加disabled属性。 禁用手型变成了不准输入的形状。对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的 。

    18.表单验证

         .has-warning:警告状态（黄色）
          .has-error：错误状态（红色）
           .has-success：成功状态（绿色） 

          表单验证的时候，不同的状态会提供不同的 icon。 添加类名“has-feedback”即可追加结果图标.

                       <span class="glyphicon glyphicon-ok form-control-feedback"></span>图标代码

           "help-block"样式，将提示信息以块状显示，并且显示在控件底部。与表单在一个块中。<span>标签中写提示信息。

           "help-inline"样式，行内提示信息。可以用网格系统代替。

   19.图像

         1、img-responsive：响应式图片，主要针对于响应式设计
          2、img-rounded：圆角图片
           3、img-circle：圆形图片
            4、img-thumbnail：缩略图片

   20.图标

         类名：glyphicon   glyphicon-search...<span class="glyphicon glyphicon-search"></span>一种搜索图标