Bootstrap 中 类别样式名称和标签（一）

每次看每次都觉得新鲜，用起来的时候却还是习惯性的忘记其原有的东西，自己再写出来一个自己都觉得是多余的内容。所以此次决定再捋一遍，记录每个class 和标签，具体的再不断的完善更新吧，下次再用直接查笔记，就不用去官网了。哈哈（想得美(─.─|||）

一、页面排版：

1.页面主体

  全局 font-size:14px; line-height:1.428(即20px)； color:#333;

  <p> 段落元素为 1/2 行高（即10px）;

1. 　lead　

.lead  {

          margin-bottom: 20px;

          font-size: 16px;

          font-weight: 300;

          line-height: 1.4;


　　}

@media (min-width: 768px){
　　.lead{
　　　　font-size:21px;
　　}
}

 

2.标题  ( 内联元素定义class=（.h1~h6）)

  <h1> //36px

  <h2> //30px

  <h3> //24px

  <h4> //18px

  <h5> //14px

  <h6> //12px

 可以嵌入 <small>元素作为副标题，h1~h3下的small, font-size:65%;(分别为23.4px ；19.5px; 15.6px) h4~h6下，font-size:75%;(分别为:13.5px;10.5px;9px;), 样式更改：color:#777;line-height:1;font-weight:400; 其余样式参考官网。

3.内联文本元素

  <mark>      // 添加标记

  <del>         // 删除文本

  <s>            // 无用本文

  <ins>         // 插入的文本

  <u>           // 下划线文本 效果同上

  <small>    // 标准字号的85%

  <strong>  // 加粗 700

  <em>       // 倾斜

4.对齐方式

  .text-left           //  居左

  .text-right        //  居右

  .text-center     //  居中

  .text-justify    //  两端对齐，支持度不佳

  .text-nowrap  //  不换行

5.英文文本大小写

  .text-lowercase     //  小写

  .text-uppercase    //  大写

  .text-capitalize    //  首字母大写

 

6.缩略语

   <abbr>  //  没有被复写，可添加 class=“initialism”

   .initialism

.initialism{
     font-size:90%;
     text-transform:uppercase;    
}

 

7.地址文本

   <address>  //  去掉倾斜，设置行高，底部20px

8.引用为本

   <blockquote>  //  border-left:5px solid #eee; font-size:17.5px; margin:0 0 20px; padding:10px 20px; 

    .blockquote-reverse      // 反向（border-right:5px solid #eee; border-left:0; padding-right:15px; padding-left:0; text-align:right;）

    blockquote.pull-right   //  反向 (效果同上)

9.列表

    .list-unstyled  //  ul 移除默认样式

    .list-inline      //  ul 设置成内联方式

    .dl-horizontal  //  dl 水平排列描述列表

10.代码

   <code>  //  内联代码 

   <kbd>  //  用户输入

   <pre>  //  代码块

   <var>  //  表示标记变量，没有复写css

   <samp>  //  代表程序输出，没有复写css

11.表格

   *基于table添加class*

    .table  //  基本的表格样式,以下类别要基于class=“table” 基础上出现

    .table-striped   //  条纹状的表格，<tbody>产生一行隔一行加单色背景效果

    .table-bordered  //  增加边框

    .table-hover  //  <tbody>下表格悬停鼠标实现背景效果

   *在tr上添加class，设置每一行的背景样式*

    .success      //  成功或者积极的动作

    .active        //   鼠标悬停在行或者单元格上

    .info           //  普通的提示信息或者动作

    .warning    //  警告或需要用户注意

    .danger      //  危险或潜在带来的负面影响的动作   

    .sr-only      //  隐藏行,不仅仅在tr用，可以在测试的地方用

   *响应式表格，父元素上设置，<768px出现边框*

    .table-responsive      //  缩小的时候会加上边框, 在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失

    fieldset      // Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。可使用针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中：    

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

 

 

 

 

12.按钮 （a,button,input 通用的）

    1) 都为按钮使用法:

<a href="#" class="btn">按钮</a>

<button class="btn">Button</button>

<input type="button" class="btn" value="input" > 

  P.s. 1、导航和导航组件只支持<button>元素

        2、<a>作为按钮使用，并有触发某些功能，不用于链接页面功能，那么，必设置 role="button" 属性。

        3、跨浏览器展现，尽可能的使用<button>元素，匹配各个浏览器的兼容的绘制效果， <input> line-height属性在firefox<30上出先bug。

   

      2) class 类名：

       .btn-default      //  默认样式

       .btn-success     //  成功样式     

       .btn-info          //  一般信息样式 

       .btn-warning   //  警告样式

       .btn-danger    //  危险样式  

       .btn-primary  //  首选项样式 

       .btn-link        //  链接样式 

     3）尺寸大小：   (从大到小)    

       .btn.btn-lg   

       .btn   

       .btn.btn-sm     

       .btn.btn-xs   

    4) 其他类别:

       .btn.btn-block      //块级换行
       .btn.active           //激活按钮，点击的样式
       .btn.disabled      //禁用按钮