bootstrap排版、代码、表格

bootstrap的排版、代码、表格

bootstrap的排版、代码、表格主要就是介绍bootstrap提供的预置的类供使用。

排版：

1 标题 。 

    h1-h6   small标签代表副标题

2 页面主体 。

    bootstrap将全局font-size设置为14px，line-height设置为1.428.这些属性直接赋予<bodu>元素和所有段落元素。另外<p>元素还被设置了等于1/2行高（10px）的底部外边距（margin）。

3 中心内容。

   <lead>标签 可以让段落突出显示

4 内联文本元素 

   <mark>标签 可以使得文本高亮

5 被删除的文本

   <del>标签 

6 无用文本

   <s>标签 跟被删除的文本样式一样

7 插入文本 

   <ins>  文本下方有删除线

8 带下划线的文本

   <u>

9 小号文本

  <small> 文本的大小将被设置为父容器字体大小的85%

10 着重 

  <strong> 通过增加font-weight强调文本

11 斜体

  <em>  用斜体强调一段文本

12 代替的元素

  在html5中可以放心使用<b>和<i>标签。<b>用于高亮单词或短语，不带有任何着重的意味；儿<i>标签主要用于发音、技术词汇等。

13 对齐

   .text-left  左对齐
   .text-right 右对齐
   .text-center 中心对齐
   .text-justify  文本过多换行
   .text-nowrap  文本过多不换行

 14 改变大小写

    .text-lowercase 全部小写
    .text-uppercase 全部大小
    .text-capitalize  首字母大写

 15 缩略语

     当鼠标悬停在缩写和缩写词上时就会显示完整内容，bootstrap实现了对html的<abbr>元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想查看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见），但需要包含title属性。

 16 基本缩略语

     <abbr>

 17 首字母缩略语

     .initialism   可以让缩略语的font-size变得稍微小些。

 18 地址

      <address>  在每行结尾添加<br>可以保留需要的样式

 19 引用

      <blockquote> 引用样式，文本左侧会出现一个竖线

  20 引用----命名来源

     <footer> <cite> footer标明引用来源，来源的名称在cite标签中

  21 引用-----另一种展示风格

      .blockquote-reverse  可以让引用呈现右对齐的效果

  22 列表-----无序列表,有序列表

       <ul><li>    <ol><li>

  23 列表------无样式列表

      .list-unstyled

  24 列表-----内联列表

   .list-inline  将所有元素放置于同一行


 25 描述

    <dl><dt></dt><dd></dd></dl>


   26 水平排列的描述

         .dl-horizontal 可以让<dl>内的短语及其描述排在一行

代码：

    1 内联代码

      <code> 代码片段样式，使得标签内文本变红色

    2 用户输入

      <kbd>  增加键盘输入的样式，黑窗口的样式

    3 代码块

      <pre> 代码块样式，增加外部框

    4 变量

       <var> 变量的样式

    5 程序输出

       <samp> 程序输出的样式

表格：

      1 基本实例

         .table

      2 条纹状表格

         .table-striped 给表格每一行增加斑马条纹样式

      3 带边框的表格

          .table-bordered 增加边框

      4 鼠标悬停

          .table-hover 增加鼠标悬停状态

       5 紧缩表格

          .table-condensed  让表格更加紧凑

      6 状态类

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

        7 响应式表格

          .table-responsive  响应式表格，在小屏幕设备上水平滚动。  不加则会换行