表格
基础表格
.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