BootStrap 5 保姆级教程(三):表格 图片

一、表格

1.1 基础表格

Bootstrap5 通过 .table 类来设置基础表格的样式,实例如下:

<div class="container mt-3">
  <h2>基础表格</h2>
  <p>.table 类来设置基础表格的样式:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

1.2 条纹表格

通过添加 .table-striped 类,您将在 <tbody> 内的行上看到条纹,如下面的实例所示:

<div class="container mt-3">
  <h2>条纹表格</h2>
  <p>通过添加 .table-striped 类,来设置条纹表格:</p>            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

1.3 带边框表格

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

<div class="container mt-3">
  <h2>带边框表格</h2>
  <p>.table-bordered 类可以为表格添加边框:</p>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>
</div>

1.4 鼠标悬停状态表格

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

<div class="container mt-3">
  <h2>鼠标悬停状态表格</h2>
  <p>.table-hover 类可以为表格的每一行添加鼠标悬停效果(灰色背景):</p>            
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

1.5 黑色背景表格

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

<div class="container mt-3">
  <h2>黑色背景表格</h2>
  <p>.table-dark 类可以为表格添加黑色背景:</p>            
  <table class="table table-dark">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

1.6 黑色条纹表格

联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格:

<div class="container mt-3">
  <h2>黑色条纹表格</h2>
  <p>联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格:</p>            
  <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

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

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

<table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

1.8 无边框表格

.table-borderless 类可以设置一个无边框的表格:

<div class="container mt-3">
    <h2>无边框表格</h2>
    <p>.table-borderless 类可以设置一个无边框的表格:</p>
    <table class="table table-borderless">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
            </tr>
            <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
            </tr>
        </tbody>
    </table>
</div>

1.9 指定意义的颜色类

通过指定意义的颜色类可以为表格的行或者单元格设置颜色:

<div class="container mt-3">
  <h2>指定意义的颜色类</h2>
  <p>通过指定意义的颜色类可以为表格的行或者单元格设置颜色:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>Secondson</td>
        <td>sec@example.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>Angie</td>
        <td>angie@example.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>Bo</td>
        <td>bo@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

下表列出了表格颜色类的说明: 

类名描述
.table-primary蓝色: 指定这是一个重要的操作
.table-success绿色: 指定这是一个允许执行的操作
.table-danger红色: 指定这是可以危险的操作
.table-info浅蓝色: 表示内容已变更
.table-warning橘色: 表示需要注意的操作
.table-active灰色: 用于鼠标悬停效果
.table-secondary灰色: 表示内容不怎么重要
.table-light浅灰色,可以是表格行的背景
.table-dark深灰色,可以是表格行的背景

1.10 表头颜色

我们也可以设置表头的颜色,例如 .table-dark 类用于给表头添加黑色背景, .table-light 类用于给表头添加灰色背景:

<div class="container mt-3">
  <h2>表头颜色</h2>
  <p>.table-dark 类用于给表头添加黑色背景,.table-light 类用于给表头添加灰色背景:</p>            
  <table class="table">
    <thead class="table-dark">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  <table class="table">
    <thead class="table-light">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

1.11 较小的表格

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

<div class="container mt-3">
  <h2>较小的表格</h2>
  <p>.table-sm 类用于通过减少内边距来设置较小的表格:</p>            
  <table class="table table-bordered table-sm">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

1.12 响应式表格

.table-responsive 类用于创建响应式表格:在屏幕宽度小于 992px 时会创建水平滚动条,如果可视区域宽度大于 992px 则显示不同效果(没有滚动条):

<div class="container mt-3">
  <h2>响应式表格</h2>
  <p>.table-responsive 类用于创建响应式表格:在屏幕宽度小于 992px 时会创建水平滚动条,如果可视区域宽度大于 992px 则显示不同效果(没有滚动条):</p>                                                                                      
  <div class="table-responsive">          
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
        <th>Sex</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

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

类名屏幕宽度
.table-responsive-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px
.table-responsive-xl< 1200px
.table-responsive-xxl< 1400px

二、图片

2.1 响应式图片

通过 Bootstrap 所提供的 .img-fluid 类让图片支持响应式布局。其原理是将 max-width: 100%; 和 height: auto; 赋予图片,以便随父元素的宽度变化一起缩放。

<div class="container mt-3">
  <img src="./img/bootstrap.png" class="img-fluid" alt="...">
</div>

2.2 图片边框

可以使用 .img-thumbnail 使图片的外观具有 1px 宽度的圆形边框

<div class="container mt-3">
  <img src="./img/bootstrap.png" class="img-thumbnail" alt="...">
</div>

2.3 图片对齐

<div class="container mt-3">
    <!-- 左对齐 -->
    <img src="./img/bootstrap.png" class="float-start" alt="...">

    <!-- 居中对齐 -->
    <img src="./img/bootstrap.png" class="float-end" alt="...">

    <!-- 右对齐 -->
    <img src="./img/bootstrap.png" class="float-end" alt="...">
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/537000.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

掌握 C# 爬虫技术:使用 HttpClient 获取今日头条内容

摘要/导言&#xff1a; 在本文中&#xff0c;我们将探讨如何使用 C# 中的 HttpClient 类和爬虫代理IP技术来获取今日头条的内容。我们还将实现多线程技术&#xff0c;以提高数据采集的效率。 背景/引言&#xff1a; 随着信息时代的到来&#xff0c;数据已经成为了一种非常宝…

电脑离线调用微信 ocr.exe 使用 python 调用 WeChatOCR.exe 附python代码

微信的OCR识别能力还是可以的,并且可以得到位置,速度也快,我想要把微信的这个exe 单独提取出来,可以供其他项目使用,目前已有的应该都是需要依赖微信运行状态的,我这个独一份 相当于把微信运行它的OCR的环境完全剥离出来,只需要几个代码文件加上几个模型文件就可以离线…

【算法刷题 | 回溯思想 01】4.11(回溯算法理论、组合、组合总和 ||| )

文章目录 回溯1.回溯算法理论基础1.1什么是回溯法&#xff1f;1.2回溯法的效率1.3回溯法解决的问题1.4如何理解回溯法&#xff1f;1.5回溯法模板 2.组合2.1问题2.2解法一&#xff1a;暴力解法&#xff08;循环次数不确定&#xff09;2.3解法二&#xff1a;回溯2.3.1回溯思路&am…

如何申请做快团团购帮卖团长?免费试用教程一学就会!

新手小白想要自己做快团团&#xff0c;有两种方法。 1、自己提供货源&#xff0c;自己开团做团长。 这种方法流程非常简单&#xff0c;从微信小程序中找到快团团&#xff0c;点击右上角“一键开团”&#xff0c;然后“创建普通团购”&#xff0c;按照操作设置就可以开团了。 …

【2024MathorCup妈妈杯建模】赛题 B:甲骨文智能识别中原始拓片单字自动分割与识别研究

【2024MathorCup妈妈杯建模】赛题 B&#xff1a;甲骨文智能识别中原始拓片单字自动分割与识别研究 加群可以享受定制等更多服务&#xff0c;或者搜索B站&#xff1a;数模洛凌寺 联络组织企鹅&#xff1a;904117571 问题重述 问题 1&#xff1a;对于附件 1&#xff08;Pre_…

实习记录小程序|基于SSM的实习记录小程序设计与实现(源码+数据库+文档)

知识管理 目录 基于SSM的习记录小程序设计与实现 一、前言 二、系统设计 三、系统功能设计 1、小程序端&#xff1a; 2、后台 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕…

Linux:软件包管理器 - yum

Linux&#xff1a;软件包管理器 - yum Linux的软件安装方式源代码安装rpm包安装yum安装 yum三板斧yum listyum installyum remove yum生态yum源 Linux的软件安装方式 源代码安装 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序 源代码安…

ARM内核、内核寄存器及作用、ARM最小系统、半导体器件、存储器、ARM工作方式、ARM寄存器个数、立即数、汇编指令的s/c后缀

我要成为嵌入式高手之4月10日51单片机第五天&#xff01;&#xff01; ———————————————————————————— 单片机最小系统板&#xff1a; 单片机内部的CPU&#xff1a; CPU定义的变量都在ram中、编写的程序代码都在rom中 CPU在次细化&#xff1a;ker…

AMD Tensile 简介与示例

按照知其然&#xff0c;再知其所以然的认知次序进行 1&#xff0c;下载代码 git clone --recursive https://github.com/ROCm/Tensile.git 2&#xff0c;安装 Tensile cd Tensile mkdir build cd build ../Tensile/bin/Tensile ../Tensile/Configs/rocblas_dgemm_nn_asm_full…

MongoDB快照(LVM)业务场景应用实战

MongoDB和LVM快照概述 MongoDB的重要性&#xff1a;MongoDB支持的灵活的文档模型&#xff0c;使其成为处理大量分散数据的理想选择&#xff0c;特别是在需要快速迭代和频繁更改数据结构的应用中。 LVM&#xff08;逻辑卷管理&#xff09;快照技术基本概念&#xff1a;LVM允许…

CY7.5-COOH荧光属性Cyanine7.5花菁染料

CY7.5-COOH&#xff0c;作为一种Cyanine 7.5花菁染料&#xff0c;在荧光属性上表现出色。其独特的化学结构赋予了它荧光性质&#xff0c;使其在生物标记、荧光成像和光学传感等领域具有诸多应用前景。 CY7.5-COOH具有出色的荧光量子产率&#xff0c;这意味着在激发光的照射下&…

C#/.NET/.NET Core拾遗补漏合集(24年4月更新)

前言 在这个快速发展的技术世界中&#xff0c;时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NET Core拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节&#xff0c;以帮助大家更全面地了解这些技术栈的特性和发展方向。 GitHub开源地…

微信小程序搜索排名优化的八个套路

微信小程序的搜索优化排名是一个综合性的工作&#xff0c;需要针对多个维度进行操作。小柚给各位新老客户列出一些关键步骤和策略&#xff0c;帮助老板利用微信小程序的搜索排名规则进行优化。 1.选择合适的关键词 深入研究目标用户的搜索习惯&#xff0c;选择高搜索量、低竞争…

Java List基础篇

目录 前言一、常用List1.1 List1.1.1 特点1.1.2 常用API 1.2 ArrayList1.2.1 特点1.2.2 使用 1.3 LinkedList1.3.1 特点1.3.2 使用 1.4 CopyOnWriteArrayList1.4.1 特点1.4.2 使用 1.5 Arrays.asList()1.5.1 特点1.5.2 使用 二、对比总结 前言 一、常用List 1.1 List List是…

Day93:云上攻防-云服务篇对象存储Bucket桶任意上传域名接管AccessKey泄漏

目录 云服务-对象存储-权限配置不当 权限控制-公共读或公共读写&#xff1a;可完整访问但不显示完整结构目录 权限控制-Bucket授权策略&#xff1a;设置ListObject显示完整结构目录 权限控制-Bucket公共读写权限&#xff1a;公共读写直接PUT文件任意上传 云服务-对象存储-…

手写ArrrayList

需求 自定义的MyArrayList import java.util.Arrays; import java.util.Objects;public class MyArrayList<E> {private Object[] elementData ; // 存储元素的数组private int size; // 记录 的元素个数private static final int DEFAULT_CAPACITY 10; // 默认容量// …

Java高频面试之JVM篇

说一下 Jvm 的主要组成部分&#xff1f;及其作用&#xff1f; 类加载器执行器运行时数据区域本地接口 谈谈对运行时数据区的理解&#xff1f; 堆和栈的区别是什么&#xff1f; 堆中存什么&#xff1f;栈中存什么&#xff1f; 堆总存对象,栈中存局部变量,引用 为什么要把堆…

最新php投票系统源码下载 二维码投票生成器系统 源码开源可二开

在当今数字化时代&#xff0c;投票系统已成为各类活动、选举、调查等场景中不可或缺的工具。为了满足广大用户对于高效、便捷投票系统的需求&#xff0c;分享一款最新版的PHP投票系统源码&#xff0c;带二维码投票生成器功能&#xff0c;为用户提供了更为灵活和多样化的投票体验…

说说你对栈、队列的理解?应用场景?

一、栈 栈&#xff08;stack&#xff09;又名堆栈&#xff0c;它是一种运算受限的线性表&#xff0c;限定仅在表尾进行插入和删除操作的线性表 表尾这一端被称为栈顶&#xff0c;相反地另一端被称为栈底&#xff0c;向栈顶插入元素被称为进栈、入栈、压栈&#xff0c;从栈顶删…

【Python实践应用】使用Python加载栅格数据

下面的代码实现的是加载伊宁市NDVI数据&#xff0c;首先进行相关的python包的导入&#xff0c;然后定义和读取我们需要加载的数据&#xff0c;这里我们使用的NDVI数据是将伊宁23年的NDVI数据合并成为了一张栅格图像&#xff0c;每个波段表示一年的 NDVI&#xff0c;我们这里显示…