Bootstrap全局CSS之排版&代码&表格

• 排版
  • 页面主体
    • Bootstrap将全局font-size设置为14px,line-height设置为20px 段落的行高设置为10px,颜色设置为#333【通过F12查看】
    • 段落突出显示：通过.lead类可以让段落突出显示
    • 案例1：通过F12演示Bootstrap页面主体，并演示段落突出显示
  • 标题
    • 标签：<h1>...<h6>
    • 副标题：在<h1><small>副标题</small></h1>
    • 样式：class="h1"....class="h6"
    • 案例2：使用标签和样式方式演示标题
  • 内联文本元素
    • 标记 class="mark"
    • 线条
      • 删除文本 <del>或<s>
      • 下划线 <u>或<ins>
    • 强调文本
      • 小字体 <small>：标准字号的85%
      • 加粗<strong>
      • 倾斜<em>
    • 案例3：演示排版中的 内联文本元素
  • 对齐
    • 居左：class="text-left"
    • 居中：class="text-center"
    • 居右：class="text-right"
    • 案例4：演示排版中的对齐
  • 改变大小写
    • 大写 class="text-uppercase"
    • 首字母大写 class="text-capitalize"
    • 小写 class="text-lowercase"
    • 案例5：演示改变大小写
  • 缩略语
    • 当鼠标悬停在缩写和缩写词上就会显示完整内容
    • 基本缩略语<abbr title="完整内容">
    • 首字母缩略语<abbr title="完整内容 class="initialism">
    • 案例6：演示缩略语【注意对比两种缩略语区别，通过F12查看】
  • 地址
    • 让联系信息以最接近日常使用格式呈现
    • <address>地址</address>
    • 案例7：演示地址
  • 引用
    • 在你的文档中引用其他来源的内容
    • 默认样式的引用：<blockquote>
    • 右对齐样式引用:<blockquote class="blockquote-reverse">
    • 命名引用来源
      • 添加<footer>用于标明引用来源 来源的名称可以包裹进<cite title="">中
    • 案例8：演示引用
  • 列表
    • 有序列表<ol><li>
    • 无序列表<ul><li>
    • 无样式列表<ul class="list-unstyled">
    • 内联列表<ul class="list-inline">
    • 描述列表
      • 格式： <dl> <dt>...</dt> <dd>...</dd> </dl>
    • 水平排列的描述：<dl class="dl-horizontal">
    • 案例9：演示列表
• 代码
  • 内联代码：通过<code>标签包裹内联样式的代码片段
  • 用户输入：通过<kbd>标签标记用户通过键盘输入的内容
  • 基本代码块：多行代码可以使用<pre>标签 垂直方向展示滚动条：<pre class="pre-scrollable">
  • 程序输出：通过 <samp> 标签来标记程序输出的内容
  • 案例10：演示代码
• 表格
  • 基本表格<table class="table">
  • 条纹状表格<table class="table table-striped">
  • 带边框表格<table class="table table-bordered">
  • 鼠标悬停<table class="table table-hover">
  • 紧缩表格<table class="table-condensed">
  • 状态类
    • class="active":鼠标悬停在行或者单元格上时设置的颜色
    • class="success":标识成功或积极的动作
    • class="info":标识普通的提示信息或动作
    • class="warning":标识警告或需要用户注意
    • class="danger":标识危险或潜在的带来负面影响的动作
  • 响应式表格：<table class="table">，给包括<table>的元素添加class="table-responsive"