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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值