bootstrap5
bootstrap5
文章目录
- bootstrap5
-
- 介绍
-
- 下载
- 常用属性
- 基础使用
-
- 第一个demo
-
- 移动设备优先
- 容器类
-
- **.container** 类
- .container-fluid类
- 容器内边距
- 容器的边框和颜色
- 响应式容器
- 网格系统
-
- 偏移列
- 文字排版
-
- **Bootstrap 5 默认设置**
- \
- \
- \
- \
- \
- \
- **.list-inline**
- 颜色
- 表格
-
- 条纹表格
- 带边框表格
- 鼠标悬停状态表格
- 黑色背景表格
- 无边框表格
- 指定意义的颜色类
- 较小的表格
- 响应式表格
- 图像形状
-
- 圆角图片
- 椭圆图片
- 缩略图
- 图片对齐方式
- 图片居中
- 响应式图片
- 好使小工具
-
- 背景颜色
- 浮动与清除浮动
- 居中对齐
- 浮动与清除浮动
- 居中对齐
图片为本地图片，未加载出来，需要可联系我
Bootstrap v5 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)
介绍
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点
- **容易上手：**只要对 HTML 和 CSS 有基本了解的人都可以很快速的使用 Bootstrap。
- **响应式设计：**Bootstrap 可以根据不同平台（手机、平板电脑和台式机）进行调整。
- **移动优先：**在 Bootstrap 中，自适应移动端是框架的核心部分。
- **浏览器兼容性：**Bootstrap5 兼容所有主流浏览器（Chrome、Firefox、Edge、Safari 和 Opera）。 如果您需要支持 IE11 及以下版本，请使用 Bootstrap4 或 Bootstrap3。
下载
两种方式
- 使用 Bootstrap5 CDN。
- 从官网 getbootstrap.com 下载 Bootstrap 5。
常用属性
影响元素之间的间距是可以通过style的margin或padding属性来实现，但这两个属性本意并不相同；margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距；padding影响的元素本身与其内部子元素之间的距离，简称为内填充。
bootstrap提供了简写的class名，名称分别以m-开头和p-开头的类。
一、影响距离大小的值有
0,1,2,3,4,5,auto
(1)、margin值有
| class名 | 等价的style |
|---|---|
| m-0 | 等价于{margin:0 !important} |
| m-1 | 等价于{margin:0.25rem !important} |
| m-2 | 等价于{margin:0.5rem !important} |
| m-3 | 等价于{margin:1rem !important} |
| m-4 | 等价于{margin:1.5rem !important} |
| m-5 | 等价于{margin:3rem !important} |
| m-auto | 等价于{margin:auto !important} |
(2)、padding值有
| class名 | 等价的style |
|---|---|
| p-0 | 等价于{padding:0 !important} |
| p-1 | 等价于{padding:0.25rem !important} |
| p-2 | 等价于{padding:0.5rem !important} |
| p-3 | 等价于{padding:1rem !important} |
| p-4 | 等价于{padding:1.5rem !important} |
| p-5 | 等价于{padding:3rem !important} |
| p-auto | 等价于{padding:auto !important} |
二、调整某一侧的边距
有几个缩写,t,b,l,r,x,y含义分别是top,bottom,left,right,left和right,top和bottom
（1）、margin例子，距离大小可以0-5与auto,这里只用期中一个值来说明含义
| class名 | 等价的style |
|---|---|
| mt-2 | {margin-top: 0.5rem !important} |
| mb-2 | {margin-bottom: 0.5rem !important} |
| ml-2 | {margin-left: 0.5rem !important} |
| mr-2 | {margin-right: 0.5rem !important} |
| mx-2 | {margin-right: 0.5rem !important;margin-left: 0.5rem !important} |
| my-2 | {margin-top: 0.5rem !important;margin-bottom: 0.5rem !important} |
(2)padding例子
| class名 | 等价的style |
|---|---|
| pt-2 | {padding-top: 0.5rem !important} |
| pb-2 | {padding-bottom: 0.5rem !important} |
| pl-2 | {padding-left: 0.5rem !important} |
| pr-2 | {padding-right: 0.5rem !important} |
| px-2 | {padding-right: 0.5rem !important;margin-left: 0.5rem !important} |
| py-2 | {padding-top: 0.5rem !important;margin-bottom: 0.5rem !important} |
基础使用
第一个demo
移动设备优先
准备工作
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
容器类
bootstrap5需要容器包裹网站内容
我们可以使用以下两个容器类：
- .container 类用于固定宽度并支持响应式布局的容器。
- .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./bootstrap-5.1.3-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./bootstrap-5.1.3-dist/js/bootstrap.min.js">
<title>Documenttitle>
head>
<body>
<div class="container">
<h1>第一个demoh1>
<p>这是一些文本。p>
div>
body>
html>
container 和 container-fluid的区别：
container的行为复杂一些：
屏幕小于768时，容器宽度是满屏，与container-fluid效果一样
屏幕大于768小于992时，宽度设为750
屏幕大于992小于1200时，宽度为970
屏幕大于1200，宽度为1170
margin-left, margin-right都为 auto，保持container容器居中。
container-fluid的行为就简单：
margin:0 宽度：100%
.container 类
.container 类用于创建固定宽度的响应式页面。
**注意：**宽度 (max-width) 会根据屏幕宽度同比例放大或缩小
一般用这个类就行
.container-fluid类
.container-fluid 类用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度（width 始终为 100%）：
容器内边距
默认情况下，容器都有填充左右内边距，顶部和底部没有填充内边距。 Bootstrap 提供了一些间距类用于填充边距。 比如 .pt-5 就是用于填充顶部内边距：
容器的边框和颜色
Bootstrap 也提供了一些边框（border）和颜色（bg-dark、bg-primary等）类用于设置容器的样式：
响应式容器
响应式是指同一个页面在不同屏幕尺寸下有着不同的布局，可以兼容不同分辨率的设备，响应式web设计就是让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法，可以利用栅格系统，将一行平均分成12个格子来实现。
你可以使用 .container-sm|md|lg|xl 类来创建响应式容器。
容器的 max-width 属性值会根据屏幕的大小来改变。
| Class | 超小屏幕 <576px | 小屏幕 ≥576px | 中等屏幕 ≥768px | 大屏幕 ≥992px | 特大屏幕 ≥1200px | 超级大屏幕 ≥1400px |
|---|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
<div class="container-sm">.container-smdiv>
<div class="container-md">.container-mddiv>
<div class="container-lg">.container-lgdiv>
<div class="container-xl">.container-xldiv>
<div class="container-xxl">.container-xxldiv>
网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EKbMvjFC-1667727675661)(bootstrap5.assets/image-20221106150504699.png)]
Bootstrap 5 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
请确保每一行中列的总和等于或小于 12。
Bootstrap 5 网格系统有以下 6 个类:
- .col- 针对所有设备。
- .col-sm- 平板 - 屏幕宽度等于或大于 576px。
- .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px。
- .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px。
- .col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px。
- .col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px。
| 超小设备 <576px | 平板 ≥576px | 桌面显示器 ≥768px | 大桌面显示器 ≥992px | 特大桌面显示器 ≥1200px | 超大桌面显示器 ≥1400px | |
|---|---|---|---|---|---|---|
| 容器最大宽度 | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| 类前缀 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 列数量和 | 12 | |||||
| 间隙宽度 | 1.5rem （一个列的每边分别 .75rem） | |||||
| 可嵌套 | Yes | |||||
| 列排序 | Yes |
Bootstrap5 网格系统规则:
- 网格每一行需要放在设置了
.container(固定宽度) 或.container-fluid(全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。 - 使用行来创建水平的列组。
- 内容需要放置在列中，并且只有列可以是行的直接子节点。
- 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
- 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
- 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。
- Bootstrap 5 和 Bootstrap 4 使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。
<div class="row">
<div class="col-*-*">div>
div>
<div class="row">
<div class="col-*-*">div>
<div class="col-*-*">div>
<div class="col-*-*">div>
div>
<div class="row">
<div class="col">div>
<div class="col">div>
<div class="col">div>
div>
第一个例子：创建一行(
tip：一共分为12份，若数字和不满12则剩余部分空出，不放置元素
第二个例子: 不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等： 两个 “col” ，每个就为 50% 的宽度。三个 **“col”**每个就为 33.33% 的宽度，四个 **“col”**每个就为 25% 的宽度，以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。
一列等宽布局（不换行）
<div class="row">
<div class="col">.coldiv>
<div class="col">.coldiv>
<div class="col">.coldiv>
div>
等宽响应式列
宽度小于576px时换行
<div class="col-sm-3">.col-sm-3div>
<div class="col-sm-3">.col-sm-3div>
<div class="col-sm-3">.col-sm-3div>
<div class="col-sm-3">.col-sm-3div>
注意最后的数字之和要等于12
不等宽响应式列
宽度4:8分配，sm下，宽度低于576px换行
<div class="row">
<div class="col-sm-4">.col-sm-4div>
<div class="col-sm-8">.col-sm-8div>
div>
如果只设置一列的宽度，其他列会自动均分剩下的宽度。 以下实例将列宽度为 25%、50%、25%：
中间盒子设置宽度占12份中的六份，其余两个盒子自动分配剩余空间，且等宽
<div class="row">
<div class="col">coldiv>
<div class="col-6">col-6div>
<div class="col">coldiv>
div>
平板和桌面端
对盒子添加多组设备在不同环境下的空间占比
如下：在平板占比3:9，桌面占比1:1
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6">
<p>RUNOOBp>
div>
<div class="col-sm-9 col-md-6">
<p>菜鸟教程p>
div>
div>
div>
不同设备下宽度占比
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 p-3 bg-primary text-white">.coldiv>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 p-3 bg-dark text-white">.coldiv>
div>
嵌套列
未写响应设备直接写数字，分配比例，且嵌套
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6div>
<div class="col-6">.col-6div>
div>
div>
<div class="col-4">.col-4div>
div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c4j5q4p3-1667727675664)(bootstrap5.assets/image-20221106152504803.png)]
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./bootstrap-5.1.3-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./bootstrap-5.1.3-dist/js/bootstrap.min.js">
<title>Documenttitle>
head>
<body>
<div class="container-fluid">
<div class="row" style="background-color:aqua">
<div class="col-5" style="background-color:rgb(195, 217, 217)">5<div class="row">
<div class="col-3" style="background-color:rgb(198, 101, 109)">3div>
<div class="col-9" style="background-color:rgb(149, 34, 101)">9div>
div>
div>
<div class="col-7" style="background-color:rgb(132, 138, 138)">7<div class="row">
<div class="col-4" style="background-color:aqua">4div>
<div class="col-8" style="background-color:rgb(96, 102, 192)">8div>
div>
div>
div>
div>
div>
div>
body>
html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MoUNxE2H-1667727675665)(bootstrap5.assets/image-20221106153824628.png)]
偏移列
偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 ***** 列，其中 ***** 范围是从 1 到 11。
例如：.offset-md-4 是把.col-md-4 往右移了四列格
<div class="row">
<div class="col-md-4">.col-md-4div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4div>
div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3div>
div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3div>
div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nY6oGmYM-1667727675666)(bootstrap5.assets/image-20221106153911585.png)]
文字排版
Bootstrap 5 默认设置
Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
此外，所有的
元素 margin-top: 0 、 margin-bottom: 1rem (16px)。
-
字体大小会随着屏幕的变化而变化，可以重置浏览器大小查看效果
<div class="container">
<h1>h1 Bootstrap 标题h1>
<h2>h2 Bootstrap 标题h2>
<h3>h3 Bootstrap 标题h3>
<h4>h4 Bootstrap 标题h4>
<h5>h5 Bootstrap 标题h5>
<h6>h6 Bootstrap 标题h6>
div>
Bootstrap 5 定义 标签及 .mark 类为黄色背景及有一定的内边距:
<div class="container">
<h1>高亮文本h1>
<p>使用 mark 元素来 <mark>高亮mark> 文本。p>
div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cg97r7Ga-1667727675668)(bootstrap5.assets/image-20221106155642340.png)]
对于引用的内容可以在
上添加 .blockquote 类 :
<div class="container">
<h1>Blockquotesh1>
<p>The blockquote element is used to present content from another source:p>
<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.p>
<footer class="blockquote-footer">From WWF's websitefooter>
blockquote>
div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-znXp7zK0-1667727675669)(bootstrap5.assets/image-20221106155657130.png)]
<div class="container">
<h1>代码片段h1>
<p>可以将一些代码元素放到 code 元素里面:p>
<p>以下 HTML 元素: <code>spancode>, <code>sectioncode>, 和 <code>divcode> 用于定义部分文档内容。 p>
div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U8gd7kNv-1667727675670)(bootstrap5.assets/image-20221106160103457.png)]
Keyboard Inputs
To indicate input that is typically entered via the keyboard, use the kbd element:
Use ctrl + p to open the Print dialog box.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YjVp2jbS-1667727675672)(bootstrap5.assets/image-20221106160027228.png)]
.list-inline
<div class="container mt-3">
<h2>排版h2>
<p>The class .list-inline places all list items on a single line, when used together with the .list-inline-item:p>
<ul class="list-inline">
<li class="list-inline-item">Coffeeli>
<li class="list-inline-item">Teali>
<li class="list-inline-item">Milkli>
ul>
div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KIRDuJGs-1667727675673)(bootstrap5.assets/image-20221106160520772.png)]
| 类名 | 描述 | 实例 |
|---|---|---|
| .lead | 让段落更突出 | 尝试一下 |
| .small | 指定更小文本 (为父元素的 85% ) | 尝试一下 |
| .text-start | 左对齐 | 尝试一下 |
| .text-center | 居中 | 尝试一下 |
| .text-end | 右对齐 | 尝试一下 |
| .text-justify | 设定文本对齐,段落中超出屏幕部分文字自动换行 | 尝试一下 |
| .text-nowrap | 段落中超出屏幕部分不换行 | 尝试一下 |
| .text-lowercase | 设定文本小写 | 尝试一下 |
| .text-uppercase | 设定文本大写 | 尝试一下 |
| .text-capitalize | 设定单词首字母大写 | 尝试一下 |
| .initialism | 显示在 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母 | 尝试一下 |
| .list-unstyled | 移除默认的列表样式，列表项中左对齐 (
|
尝试一下 |
| .list-inline | 将所有列表项放置同一行 | 尝试一下 |
颜色
字体颜色
<div class="container">
<h2>代表指定意义的文本颜色h2>
<p class="text-muted">柔和的文本。p>
<p class="text-primary">重要的文本。p>
<p class="text-success">执行成功的文本。p>
<p class="text-info">代表一些提示信息的文本。p>
<p class="text-warning">警告文本。p>
<p class="text-danger">危险操作文本。p>
<p class="text-secondary">副标题。p>
<p class="text-dark">深灰色文字。p>
<p class="text-body">默认颜色，为黑色。p>
<p class="text-light">浅灰色文本（白色背景上看不清楚）。p>
<p class="text-white">白色文本（白色背景上看不清楚）。p>
div>
背景颜色
<div class="container">
<h2>背景颜色h2>
<p class="bg-primary text-white">重要的背景颜色。p>
<p class="bg-success text-white">执行成功背景颜色。p>
<p class="bg-info text-white">信息提示背景颜色。p>
<p class="bg-warning text-white">警告背景颜色p>
<p class="bg-danger text-white">危险背景颜色。p>
<p class="bg-secondary text-white">副标题背景颜色。p>
<p class="bg-dark text-white">深灰背景颜色。p>
<p class="bg-light text-dark">浅灰背景颜色。p>
div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RYEA0gVP-1667727675674)(bootstrap5.assets/image-20221106161534084.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1x1wkxuv-1667727675675)(bootstrap5.assets/image-20221106161604431.png)]
要使用的时候翻一下，这些颜色其实较为常用
表格
Bootstrap5 通过 .table 类来设置基础表格的样式，所有的表格种类都需要加上**.table**
下面介绍几种个人认为常用的表格
条纹表格
过添加 .table-striped 类，您将在 内的行上看到条纹，如下面的实例所示：
<table class="table table-striped">
<thead>
<tr>
<th>Firstnameth>
<th>Lastnameth>
<th>Emailth>
tr>
thead>
<tbody>
<tr>
<td>Johntd>
<td>Doetd>
<td>[email protected]td>
tr>
<tr>
<td>Marytd>
<td>Moetd>
<td>[email protected]td>
tr>
<tr>
<td>Julytd>
<td>Dooleytd>
<td>[email protected]td>
tr>
tbody>
table>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jO2dibPy-1667727675676)(bootstrap5.assets/image-20221106162444931.png)]
带边框表格
.table-bordered 类可以为表格添加边框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zXrdo233-1667727675677)(bootstrap5.assets/image-20221106162536297.png)]
鼠标悬停状态表格
.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：
黑色背景表格
.table-dark 类可以为表格添加黑色背景：
以上属性可以适当叠加使用
如：
黑色条纹表格
联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格：
<table class="table table-dark table-striped">table>
无边框表格
.table-borderless 类可以设置一个无边框的表格：
指定意义的颜色类
通过指定意义的颜色类可以为表格的行或者单元格设置颜色,也可以给表头添加颜色。
<table class="table">
<thead>
<tr>
<th>Firstnameth>
<th>Lastnameth>
<th>Emailth>
tr>
thead>
<tbody>
<tr>
<td>Defaulttd>
<td>Defaultsontd>
<td>[email protected]td>
tr>
<tr class="table-primary">
<td>Primarytd>
<td>Joetd>
<td>[email protected]td>
tr>
<tr class="table-success">
<td>Successtd>
<td>Doetd>
<td>[email protected]td>
tr>
<tr class="table-danger">
<td>Dangertd>
<td>Moetd>
<td>[email protected]td>
tr>
<tr class="table-info">
<td>Infotd>
<td>Dooleytd>
<td>[email protected]td>
tr>
<tr class="table-warning">
<td>Warningtd>
<td>Refstd>
<td>[email protected]td>
tr>
<tr class="table-active">
<td>Activetd>
<td>Activesontd>
<td>[email protected]td>
tr>
<tr class="table-secondary">
<td>Secondarytd>
<td>Secondsontd>
<td>[email protected]td>
tr>
<tr class="table-light">
<td>Lighttd>
<td>Angietd>
<td>[email protected]td>
tr>
<tr class="table-dark text-dark">
<td>Darktd>
<td>Botd>
<td>[email protected]td>
tr>
tbody>
table>
表头添加颜色
<thead class="table-light">thead>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0BNhnXnB-1667727675678)(bootstrap5.assets/image-20221106163026121.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yTlspCXu-1667727675679)(bootstrap5.assets/image-20221106163249865.png)]
类名
描述
.table-primary
蓝色: 指定这是一个重要的操作
.table-success
绿色: 指定这是一个允许执行的操作
.table-danger
红色: 指定这是可以危险的操作
.table-info
浅蓝色: 表示内容已变更
.table-warning
橘色: 表示需要注意的操作
.table-active
灰色: 用于鼠标悬停效果
.table-secondary
灰色: 表示内容不怎么重要
.table-light
浅灰色，可以是表格行的背景
.table-dark
深灰色，可以是表格行的背景
较小的表格
.table-sm 类用于通过减少内边距来设置较小的表格:
响应式表格
.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）:
注意.table-responsive类是在div外包裹一个div实现
你可以通过以下类设定在指定屏幕宽度下显示滚动条：
类名
屏幕宽度
.table-responsive-sm
< 576px
.table-responsive-md
< 768px
.table-responsive-lg
< 992px
.table-responsive-xl
< 1200px
.table-responsive-xxl
< 1400px
都是通过外部包裹div实现
<div class="table-responsive-sm">
<table class="table">
...
table>
div>
图像形状
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AfDeuc7x-1667727675680)(bootstrap5.assets/image-20221106164913962.png)]
圆角图片
.rounded 类可以让图片显示圆角效果：
椭圆图片
.rounded-circle 类可以设置椭圆形图片:
缩略图
.img-thumbnail 类用于设置图片缩略图(图片有边框):
<img decoding="async" src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
<img decoding="async" src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
<img decoding="async" src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
图片对齐方式
使用 .float-start 类来设置图片左对齐，使用 .float-end 类设置图片右对齐:
图片居中
使用 .mx-auto (margin:auto) 和 .d-block (display:block) 类来设置图片居中对齐：
注意，是两个一起使用
响应式图片
图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。
我们可以通过在 标签中添加 .img-fluid 类来设置响应式图片。
.img-fluid 类设置了 max-width: 100%; 、 height: auto; :
好使小工具
背景颜色
设置不同元素的背景颜色时，需要通过 .text-* 类来设置匹配的文本颜色，告别颜色焦虑
<div class="p-3 mb-2 bg-primary text-white">.bg-primarydiv>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondarydiv>
<div class="p-3 mb-2 bg-success text-white">.bg-successdiv>
<div class="p-3 mb-2 bg-danger text-white">.bg-dangerdiv>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warningdiv>
<div class="p-3 mb-2 bg-info text-dark">.bg-infodiv>
<div class="p-3 mb-2 bg-light text-dark">.bg-lightdiv>
<div class="p-3 mb-2 bg-dark text-white">.bg-darkdiv>
<div class="p-3 mb-2 bg-body text-dark">.bg-bodydiv>
<div class="p-3 mb-2 bg-white text-dark">.bg-whitediv>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparentdiv>
.bg-gradient 类可以设置背景颜色渐变的效果,这种渐变效果，是根据背景颜色而定
<div class="p-3 mb-2 bg-primary bg-gradient text-white">.bg-primarydiv>
<div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondarydiv>
<div class="p-3 mb-2 bg-success bg-gradient text-white">.bg-successdiv>
<div class="p-3 mb-2 bg-danger bg-gradient text-white">.bg-dangerdiv>
<div class="p-3 mb-2 bg-warning bg-gradient text-dark">.bg-warningdiv>
<div class="p-3 mb-2 bg-info bg-gradient text-dark">.bg-infodiv>
<div class="p-3 mb-2 bg-light bg-gradient text-dark">.bg-lightdiv>
<div class="p-3 mb-2 bg-dark bg-gradient text-white">.bg-darkdiv>
<div class="p-3 mb-2 bg-body bg-gradient text-dark">.bg-bodydiv>
<div class="p-3 mb-2 bg-white bg-gradient text-dark">.bg-whitediv>
<div class="p-3 mb-2 bg-transparent bg-gradient text-dark">.bg-transparentdiv>
浮动与清除浮动
元素向右浮动使用 .float-end 类，向左浮动使用 .float-start 类， .clearfix 类用于清除浮动:
<div class="clearfix">
<span class="float-start">Float leftspan>
<span class="float-end">Float rightspan>
div>
也可以根据屏幕尺寸来设置浮动效果(.float-*-left|right - * 表示 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):
<div class="float-sm-end">小屏幕向右浮动div><br>
<div class="float-md-end">中等屏幕向右浮动div><br>
<div class="float-lg-end">大屏幕向右浮动div><br>
<div class="float-xl-end">超大屏幕向右浮动div><br>
<div class="float-xxl-end">特大屏幕向右浮动div><br>
<div class="float-none">没有浮动div>
应对不同的屏幕可以多类共存
居中对齐
使用 .mx-auto 类来设置元素居中对齐 (添加 margin-left 和 margin-right 为 auto):
y
.bg-white
.bg-transparent
```
浮动与清除浮动
元素向右浮动使用 .float-end 类，向左浮动使用 .float-start 类， .clearfix 类用于清除浮动:
<div class="clearfix">
<span class="float-start">Float leftspan>
<span class="float-end">Float rightspan>
div>
也可以根据屏幕尺寸来设置浮动效果(.float-*-left|right - * 表示 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):
<div class="float-sm-end">小屏幕向右浮动div><br>
<div class="float-md-end">中等屏幕向右浮动div><br>
<div class="float-lg-end">大屏幕向右浮动div><br>
<div class="float-xl-end">超大屏幕向右浮动div><br>
<div class="float-xxl-end">特大屏幕向右浮动div><br>
<div class="float-none">没有浮动div>
应对不同的屏幕可以多类共存
居中对齐
使用 .mx-auto 类来设置元素居中对齐 (添加 margin-left 和 margin-right 为 auto):
剩余更多请到官方查看，用什么找什么
你可能感兴趣的:(bootstrap,前端,javascript)