Bootstrap（二）

表格

基础表格

      .table 类来设置基础表格的样式

条纹表格

      .table-striped 类，<tbody>内的行上添加条纹

带边框表格

      .table-bordered 类可以为表格添加边框

鼠标悬停状态表格

      .table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）

黑色背景表格

      .table-dark 类可以为表格添加黑色背景

鼠标悬停效果 - 黑色背景表格

      联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果

指定意义的颜色类

       .table-primary      蓝色: 指定这是一个重要的操作

      .table-success      绿色: 指定这是一个允许执行的操作

      .table-danger        红色: 指定这是可以危险的操作

      .table-info             浅蓝色: 表示内容已变更

      .table-warning      橘色: 表示需要注意的操作

      .table-active         灰色: 用于鼠标悬停效果

      .table-secondary  灰色: 表示内容不怎么重要

      .table-light            浅灰色，可以是表格行的背景

      .table-dark           深灰色，可以是表格行的背景

表头颜色

      在 Bootstrap v4.0.0-beta.2 中 .thead-dark 类用于给<thead>添加黑色背景， .thead-light 类用于给表头添加灰色背景。

      在 Bootstrap v4.0.0-beta.2 这个版本中，.thead-inverse 类用于给表头添加黑色背景，.thead-default 类用于给表头添加灰色背景。

较小的表格

      .table-sm 类用于通过减少内边距来设置减小的表格

响应式表格

      .table-responsive 类用于创建相应式表格：在屏幕宽度小于992px时创建水平滚动条，如果可视区域宽度大于992px则显示不同效果（没有滚动条）

通过以下类设定在指定屏幕宽度下显示滚动条

      .table-responsive-sm < 576px

      .table-responsive-md < 768px

      .table-responsive-lg < 992px

      .table-responsive-xl < 1200px

图像形状

圆角图片

      .rounded

椭圆图片

      .rounded-circle

缩略图

      .img-thumbnail

图片对齐方式

      .float-right 和 .float-left

响应式图片

      图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应

      通过在<img>标签中添加 .img-fluid 类来设置相应式图片

      .img-fluid 类设置了 max-width: 100%;、height: auto;

Jumbotron

Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。

提示：Jumbotron 里头可以放一些 HTML 标签，也可以是 Bootstrap 的元素。

在<div>元素中添加 .jumbotron 类来创建 jumbotron

<div class="jumbotron">
    <h1>网星软件</h1>
    <p>学的不仅是技术，更是梦想！！！</p>
  </div>

全屏幕的 Jumbotron

<div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1>网星软件</h1>
      <p>学的不仅是技术，更是梦想！！！</p>
    </div>
  </div>

信息提示框

可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class=“close” 和 data-dismiss=“alert” 类来设置提示框的关闭操作

<div class="container">
    <h2>提示框</h2>
    <p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:</p>
    <div class="alert alert-success">
      <strong>成功!</strong> 指定操作成功提示信息。
    </div>
    <div class="alert alert-info">
      <strong>信息!</strong> 请注意这个信息。
    </div>
    <div class="alert alert-warning">
      <strong>警告!</strong> 设置警告信息。
    </div>
    <div class="alert alert-danger">
      <strong>错误!</strong> 失败的操作
    </div>
    <div class="alert alert-primary">
      <strong>首选!</strong> 这是一个重要的操作信息。
    </div>
    <di