电商网站建设,网络平台宣传方案,宁波十大口碑最好的装饰公司,norris wordpressBootstrap 简介
什么是 Bootstrap#xff1f;
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。 Bootstrap是前端开发中比较受欢迎的框架#xff0c;简洁且灵活。它基于HTML、CSS和JavaScript#xff0c;HTML定义页面元素#xff0c;CSS定义页面布局#x…Bootstrap 简介
什么是 Bootstrap
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。 Bootstrap是前端开发中比较受欢迎的框架简洁且灵活。它基于HTML、CSS和JavaScriptHTML定义页面元素CSS定义页面布局而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件用起来简洁灵活使得 Web 开发更加快捷。
Bootstrap5 目前是 Bootstrap 的最新版本利用提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统能够快速为你的想法开发出原型或者构建整个 app 。
浏览器兼容性Bootstrap5 兼容所有主流浏览器Chrome、Firefox、Edge、Safari 和 Opera。 如果您需要支持 IE11 及以下版本请使用 Bootstrap4 或 Bootstrap3。
Bootstrap安装
官网下载 Bootstrap5 资源库
下载下来的文件是压缩包解压之后可以看到文件的结构。下载的文件包括
编译并压缩过的 CSS 集成包 编译并压缩过的 JavaScript 插件
下载并解压后将看到文件夹中包含如下文件
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── bootstrap-grid.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js/├── bootstrap.bundle.js├── bootstrap.bundle.js.map├── bootstrap.bundle.min.js├── bootstrap.bundle.min.js.map├── bootstrap.esm.js├── bootstrap.esm.js.map├── bootstrap.esm.min.js├── bootstrap.esm.min.js.map├── bootstrap.js├── bootstrap.js.map├── bootstrap.min.js└── bootstrap.min.js.map下载了预编辑的Bootstrap解压出来得到了Bootstrap文件夹只要把html与Bootstrap文件夹放在一起然后用相对路径引用bootstrap.bundle.min.js和 bootstrap.min.css 文件即可。
1、下载已编译版js和css文件解压缩后将目录改名称为bootstrap5放在你的网站目录。
2、在网页 之间添加
3、在网页 之前添加
Bootstrap 自带的大部分组件都需要依赖 JavaScript 才能起作用。将
注意要确保bootstrap.min.css和bootstrap.bundle.min.js确实在这个路径。
Bootstrap5的html模板
!DOCTYPE html
html
headmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1meta namekeywords contentmeta namedescription content!-- Bootstrap 的 CSS 文件 --link href./css/bootstrap.min.css relstylesheettitle/title/headbody!-- 包含 Popper 的 Bootstrap 集成包 --script src./js/bootstrap.bundle.min.js /script/body
/html响应式布局相关的 标签
Bootstrap 采用的是 移动设备优先mobile first 的开发策略因此我们首先为移动设备优化代码然后根据需要并利用 CSS 媒体查询功能来缩放组件。为了确保所有设备都能支持正确的渲染和触屏缩放请务必在 标签中 添加让 viewport视口支持响应式布局的 标签。
meta nameviewport contentwidthdevice-width, initial-scale1Bootstrap 5 CDN
!-- 新 Bootstrap5 核心 CSS 文件 --
link relstylesheet hrefhttps://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css!-- 最新的 Bootstrap5 核心 JavaScript 文件 --
script srchttps://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js/scriptBootstrap5 容器
容器是Bootstrap一个基本的构建块, 它包含、填充和对齐给定设备或视口中的内容。
Bootstrap 需要一个容器元素来包裹网站的内容
我们可以使用以下两个容器类
.container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用于 100% 宽度占据全部视口viewport的容器。
固定宽度
.container 类用于创建固定宽度的响应式页面。
**注意**宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。
超级小屏幕 576px小屏幕 ≥576px中等屏幕 ≥768px大屏幕 ≥992px特大屏幕 ≥1200px超级大屏幕 ≥1400pxmax-width100%540px720px960px1140px1320px
100% 宽度
.container-fluid 类用于创建一个全屏幕尺寸的容器容器始终跨越整个屏幕宽度width 始终为 100%
二者之间的共同点为两者都可以将高度设置成auto即自动模式。最大的不同就是宽度的设定上。
container根据屏幕宽度利用媒体查询已经设定了固定的宽度作用为阶段性的改变宽度所以在改变浏览器的大小时页面是一个阶段一个阶段变化的。
container-fluid则是将宽度设定为auto所以当缩放浏览器时它会保持全屏大小始终保持100%的宽度。
响应式容器
可以使用 .container-sm|md|lg|xl 类来创建响应式容器。
容器的 max-width 属性值会根据屏幕的大小来改变。
Class超小屏幕 576px小屏幕 ≥576px中等屏幕 ≥768px大屏幕 ≥992px特大屏幕 ≥1200px超级大屏幕 ≥1400px.container-sm100%540px720px960px1140px1320px.container-md100%100%720px960px1140px1320px.container-lg100%100%100%960px1140px1320px.container-xl100%100%100%100%1140px1320px.container-xxl100%100%100%100%100%1320px div classcontainer-sm.container-sm/divdiv classcontainer-md.container-md/divdiv classcontainer-lg.container-lg/divdiv classcontainer-xl.container-xl/divdiv classcontainer-xxl.container-xxl/divBootstrap5 表格
创建一个简单的表格
Bootstrap5 通过 .table 类来设置基础表格的样式
div classcontainertable classtabletheadtrth编号/thth姓名/thth年龄/thth手机号/th/tr/theadtbodytrtd1/tdtd张三/tdtd22/tdtd13333445566/td/trtrtd2/tdtd李四/tdtd21/tdtd13211223344/tdtrtd3/tdtd王五/tdtd22/tdtd13555667788/td/tr /tbody/table
/div表格颜色
通过指定意义的颜色类名可以为表格的行或者单元格设置颜色。表格颜色类的说明:
类名描述.table-primary蓝色: 指定这是一个重要的操作.table-success绿色: 指定这是一个允许执行的操作.table-danger红色: 指定这是可以危险的操作.table-info浅蓝色: 表示内容已变更.table-warning橘色: 表示需要注意的操作.table-active灰色: 用于鼠标悬停效果.table-secondary灰色: 表示内容不怎么重要.table-light浅灰色可以是表格行的背景.table-dark深灰色可以是表格行的背景
table classtabletheadtrth编号/thth姓名/thth年龄/thth手机号/th/tr/theadtbodytr classtable-primarytd1/tdtd张三/tdtd22/tdtd13333445566/td/trtr classtable-secondarytd2/tdtd李四/tdtd21/tdtd13211223344/tdtr classtable-successtd3/tdtd王五/tdtd22/tdtd13555667788/td/tr /tbody
/table创建带条纹行的表格
通过添加 .table-striped 类可在 内的行上看到条纹即在基础表格的代码上为标签 添加
.table-striped 类 table classtable table-stripedtheadtrth编号/thth姓名/thth年龄/thth手机号/th/tr/theadtbodytrtd1/tdtd张三/tdtd22/tdtd13333445566/td/trtrtd2/tdtd李四/tdtd21/tdtd13211223344/tdtrtd3/tdtd王五/tdtd22/tdtd13555667788/td/tr /tbody
/table带边框表格
通过将类 .table-bordered添加到 .table类创建的表格上就可以在表格和单元格的所有边上添加边框
table classtable table-borderedtheadtrth编号/thth姓名/thth年龄/thth手机号/th/tr/theadtbodytrtd1/tdtd张三/tdtd22/tdtd13333445566/td/trtrtd2/tdtd李四/tdtd21/tdtd13211223344/tdtrtd3/tdtd王五/tdtd22/tdtd13555667788/td/tr /tbody
/table无边框表格
通过添加 .table-borderless 类可以取消表格和单元格所有边的边框
table classtable table-borderlesstheadtrth编号/thth姓名/thth年龄/thth手机号/th/tr/theadtbodytrtd1/tdtd张三/tdtd22/tdtd13333445566/td/trtrtd2/tdtd李四/tdtd21/tdtd13211223344/tdtrtd3/tdtd王五/tdtd22/tdtd13555667788/td/tr /tbody
/table鼠标悬停状态表格
.table-hover 类可以为表格的每一行添加鼠标悬停效果灰色背景
table classtable table-hovertheadtrth编号/thth姓名/thth年龄/thth手机号/th/tr/theadtbodytrtd1/tdtd张三/tdtd22/tdtd13333445566/td/trtrtd2/tdtd李四/tdtd21/tdtd13211223344/tdtrtd3/tdtd王五/tdtd22/tdtd13555667788/td/tr /tbody
/table创建较小的表格
.table-sm 类用于通过减少内边距来设置较小的表格使表格更紧凑并节省空间
table classtable table-smtheadtrth编号/thth姓名/thth年龄/thth手机号/th/tr/theadtbodytrtd1/tdtd张三/tdtd22/tdtd13333445566/td/trtrtd2/tdtd李四/tdtd21/tdtd13211223344/tdtrtd3/tdtd王五/tdtd22/tdtd13555667788/td/tr /tbody
/table响应式表格
要使任何表格具有响应性只需将 .table 元素包裹在 .table-responsive 元素内即可创建响应式表格。 还可以使用类 .table-responsive{-sm|-md|-lg|-xl} 根据视口宽度指定表格何时应具有滚动条。
注意.table-responsive类是在div外包裹一个div实现
div classtable-responsivetable classtable......./table
/div可以通过以下类设定在指定屏幕宽度下显示滚动条
类名屏幕宽度.table-responsive-sm 576px.table-responsive-md 768px.table-responsive-lg 992px.table-responsive-xl 1200px.table-responsive-xxl 1400px
总结
类名作用.table普通表格.table-sm小表格.table-bordered表格边框.table-borderless无边框.table-striped条纹型表格.table-hover光标悬浮时行样式变化.table-primary背景色为主色调的表格.table-secondary背景色为次要色调的表格.table-success边框颜色为success颜色的表格.table-info背景色为info颜色的表格.table-warning背景色为警告颜色的表格.table-danger背景色为危险颜色的表格.table-light背景色为亮色的表格.table-dark背景色为深色的表格.table-active背景色为活跃的颜色的表格.thead-dark深色的表头.thead-light亮色的表头.table-responsive[-*]*可选 sm、md、lg 、xl或xxl
Bootstrap5 图像
圆角图片
.rounded类为图像添加圆角
img src1.png classrounded圆形
.rounded-circle类可以设置椭圆形图片
img src1.png classrounded-circle缩略图
.img-thumbnail类用于设置图片缩略图(图片有边框)
img src1.png classimg-thumbnail对齐图像
使用 .float-start类将图像向左浮动或使用 .float-end向右浮动
img src1.png classfloat-start
img src2.png classfloat-end图片居中
使用 .mx-auto (margin:auto) 和 .d-block (display:block) 类来设置图片居中对齐注意是两个一起使用
img src1.png classmx-auto d-block响应式图片
图像有各种各样的尺寸我们需要根据屏幕的大小自动适应。
我们可以通过在 标签中添加 .img-fluid 类来设置响应式图片。
此类主要将样式 max-width: 100%;和 height: auto;应用于图像以便它很好地缩放以适合包含元素。
img src1.png classfloat-startBootstrap5 按钮
Bootstrap 按钮样式
Bootstrap 内置了几种预定义的按钮样式每种样式都有自己的语义目的并添加了一些额外的按钮。
任何带有 class .btn 的元素都会继承圆角按钮的默认外观
button typebutton classbtn基本按钮/button
button typebutton classbtn btn-primary主要按钮/button
button typebutton classbtn btn-secondary次要按钮/button
button typebutton classbtn btn-success成功/button
button typebutton classbtn btn-info信息/button
button typebutton classbtn btn-warning警告/button
button typebutton classbtn btn-danger危险/button
button typebutton classbtn btn-dark黑色/button
button typebutton classbtn btn-light浅色/button
button typebutton classbtn btn-link链接/button按钮类可用于 a、button 或 input 元素
a href# classbtn btn-success链接按钮/a
button typebutton classbtn btn-success按钮/button
input typebutton classbtn btn-success value输入按钮
input typesubmit classbtn btn-success value提交按钮
input typereset classbtn btn-success value重置按钮按钮设置边框
Bootstrap 5 还提供了八个轮廓/边框按钮。鼠标移动到按钮上添加突出到效果
button typebutton classbtn btn-outline-primary主要/button
button typebutton classbtn btn-outline-secondary次要/button
button typebutton classbtn btn-outline-success成功/button
button typebutton classbtn btn-outline-info信息/button
button typebutton classbtn btn-outline-warning警告/button
button typebutton classbtn btn-outline-danger危险/button
button typebutton classbtn btn-outline-dark深色/button
button typebutton classbtn btn-outline-light text-dark浅色/button按钮尺寸
Bootstrap 5 可以设置按钮的大小使用 .btn-lg 类设置大按钮使用 .btn-sm 类设置小按钮
button typebutton classbtn btn-primary btn-lg 大号按钮/button
button typebutton classbtn btn-primary btn-sm小号按钮/button块级按钮
如需创建跨越父元素整个宽度的块级按钮通过添加 .btn-block 类可以设置块级按钮.d-grid 类设置在父级元素中
div classd-gridbutton typebutton classbtn btn-primary btn-block100% 宽度的按钮/button
/divClass描述.btn-lg这会让按钮看起来比较大。.btn-sm这会让按钮看起来比较小。.btn-block这会创建块级的按钮会横跨父元素的全部宽度。
活动/禁用按钮
按钮可设置为激活或者禁止点击的状态。
.active 类可以设置按钮是可用的 disabled 属性可以设置按钮是不可点击的。 注意 元素不支持 disabled 属性你可以通过添加 .disabled 类来禁止链接的点击。
button typebutton classbtn btn-primary active点击后的按钮/button
button typebutton classbtn btn-primary disabled禁止点击的按钮/button
a href# classbtn btn-primary disabled禁止点击的链接/a.disabled类只会使链接在视觉上看起来像已禁用但是除非从中删除 href属性否则该链接将保持可点击状态。
Bootstrap5 按钮组
要创建一个按钮组只需将一系列具有 .btn类的按钮包装在
元素中然后在其上应用 .btn-group类。 还可以在单个按钮上应用 .active类以指示活动状态。 基本的按钮组
div classbtn-groupbutton typebutton classbtn btn-success active按钮一/buttonbutton typebutton classbtn btn-warning按钮二/buttonbutton typebutton classbtn btn-danger按钮三/button/div按钮组的大小
以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小可应用到整个按钮组的大小调整而不需要对每个按钮进行大小调整。
div classbtn-group btn-group-lgbutton typebutton classbtn btn-success按钮一/buttonbutton typebutton classbtn btn-warning按钮二/buttonbutton typebutton classbtn btn-danger按钮三/button
/div垂直按钮组
可以使按钮组显示为垂直堆叠而不是水平堆叠。 为此只需将类 .btn-group替换为类 .btn-group-vertical
div classbtn-group-verticalbutton typebutton classbtn btn-primary标题一/buttonbutton typebutton classbtn btn-primary标题二/buttonbutton typebutton classbtn btn-primary标题二/button
/divBootstrap5 加载器
使用Bootstrap读取图标以表示元件加载状态这些读取图标完全使用HTMLCSS。要创建 spinner/加载器可以使用 .spinner-border 类
div classspinner-border/div可以使用文本颜色类设置不同的颜色
div classspinner-border text-muted/div
div classspinner-border text-primary/div
div classspinner-border text-success/div
div classspinner-border text-info/div
div classspinner-border text-warning/div
div classspinner-border text-danger/div
div classspinner-border text-secondary/div
div classspinner-border text-dark/div
div classspinner-border text-light/div闪烁的加载效果
使用 .spinner-grow 类来设置闪烁的加载效果
div classspinner-grow text-muted/div
div classspinner-grow text-primary/div
div classspinner-grow text-success/div
div classspinner-grow text-info/div
div classspinner-grow text-warning/div
div classspinner-grow text-danger/div
div classspinner-grow text-secondary/div
div classspinner-grow text-dark/div
div classspinner-grow text-light/div设置加载效果大小
使用.spinner-border-sm 或 .spinner-grow-sm 类来创建加载效果的大小:
div classspinner-border spinner-border-sm/div
div classspinner-grow spinner-grow-sm/div加载按钮
button classbtn btn-primaryspan classspinner-border spinner-border-sm/span加载..
/buttonbutton classbtn btn-primary disabledspan classspinner-border spinner-border-sm/span禁用..
/buttonBootstrap5 进度条
进度条可用于向用户显示任务或操作的进度。进度条progress bar支持堆叠、动画背景和文本标签。
工作原理:
我们使用 .progress作为最外层元素用于指示进度条progress bar的最大值。我们在内部使用 .progress-bar来指示到目前为止的进度。.progress-bar 需要通过内联样式、工具类或自定义 CSS 属性来设置其宽度。
下面的示例将展示如何创建一个带有垂直渐变的简单进度条。
div classprogressdiv classprogress-bar stylewidth: 50%/div
/div进度条的高度
进度条的高度默认为 1rem通常为 16px)但我们也可以根据需要通过在 .progress 元素上设置 CSS height 属性来设置其高度
注意必须为进度容器和进度条设置相同的高度
!-- 2px 高度进度条--
div classprogress styleheight: 2px;div classprogress-bar stylewidth: 50%;/div
/div
!-- 20px 高度进度条 --
div classprogress styleheight: 20px;div classprogress-bar stylewidth: 50%;/div
/div进度条标签
通过在 .progress-bar元素内添加文本就可以为进度条progress bar添加标签以显示可见的百分比。
div classprogressdiv classprogress-bar stylewidth: 60%60%/div
/div进度条颜色
可以使用背景颜色实用程序类来创建各种颜色的进度条以便通过不同颜色传达不同的含义。默认情况下进度条为蓝色主要。
div classprogressdiv classprogress-bar bg-info stylewidth: 20%/div
/div
div classprogressdiv classprogress-bar bg-success stylewidth: 40%/div
/div
div classprogressdiv classprogress-bar bg-warning stylewidth: 80%/div
/div
div classprogressdiv classprogress-bar bg-danger stylewidth: 90%/div
/div条纹的进度条
要创建条纹的进度条只需向 .progress-bar元素添加一个额外的类 .progress-bar-striped
条纹是通过进度条背景颜色上的 CSS 渐变生成的。与纯色类似还可以使用相同的背景色实用程序类创建不同颜色的带条纹的进度条
div classprogressdiv classprogress-bar progress-bar-striped stylewidth: 40%;/div
/div
!-- Orange --
div classprogressdiv classprogress-bar bg-warning progress-bar-striped stylewidth: 50%;/div
/div
!-- Red --
div classprogressdiv classprogress-bar bg-danger progress-bar-striped stylewidth:60%/div
/div进度条动画
将类 .progress-bar-animated添加到带有类 .progress-bar的元素上可以为条纹的进度条设置动画它将通过 CSS3 动画从右到左为条纹设置动画。
div classprogressdiv classprogress-bar progress-bar-striped progress-bar-animated stylewidth: 60%/div
/div混合色彩进度条
可以在一个进度组件中放置多个进度条来使它们并排在一起进度条也可以堆叠
div classprogressdiv classprogress-bar bg-success stylewidth: 40%空闲空间 (40%)/divdiv classprogress-bar bg-warning stylewidth: 25%警告 (25%)/divdiv classprogress-bar bg-danger stylewidth: 15%危险 (15%)/div
/div Bootstrap5 小工具
Bootstrap 5 提供了很多有用的类来帮助我们快速实现效果不需要重复写一些 CSS 代码可以在不使用任何 CSS 代码的情况下快速设置元素样式。
边框类
使用边框类为元素添加或删除边框
div classborder bg-light border-primary/div 边框颜色
div classborder border-3/div 边框宽度
div classborder border-top-0/div 顶部无边框
div classborder border-right-0/div 右侧无边框
div classborder border-bottom-0/div 底部无边框
div classborder border-left-0/div 左侧无边框div classborder-top/div 顶部边框
div classborder-end/div 右侧边框
div classborder-bottom/div 底部边框
div classborder-start/div 左侧边框边框圆角
使用 rounded类为元素添加圆角
div classrounded bg-dark/div
div classrounded-top bg-dark/div
div classrounded-end bg-dark/div
div classrounded-bottom bg-dark/div
div classrounded-start bg-dark/div
div classrounded-circle bg-dark/div
div classrounded-pill bg-dark stylewidth:130px/div
div classrounded-0 bg-dark/div
div classrounded-1 bg-dark/div
div classrounded-2 bg-dark/div
div classrounded-3 bg-dark/div类名作用.border在元素的所有边添加边框.border-top顶部边框.border-end右侧边框.border-bottom底部边框.border-start左侧边框.border-**取值为0~5.border-top-0顶部无边框.border-right-0右侧无边框.border-bottom-0底部无边框.border-left-0左侧无边框.border-primary主色调边框 蓝色.border-secondary次要色调边框 灰色.border-success成功边框 绿色.border-info信息边框 蓝绿色.border-warning警告边框 黄色.border-danger危险边框 红色.border-light浅色边框 浅灰色.border-dark深灰色边框.border-white白色边框.rounded边框圆角.rounded-top圆形元素的左上角和右上角。.rounded-end圆形元素的右上角和右下角。.rounded-bottom圆形元素的左下角和右下角。.rounded-start圆形元素的左上角和左下角。.rounded-circle椭圆形边框.rounded-pill胶囊型边框.rounded-0从元素中删除圆角。.rounded-1将元素的边界半径设置为 0.2rem。.rounded-2将元素的边界半径设置为 0.25rem。.rounded-3将元素的边界半径设置为 0.3rem。
浮动与清除浮动
元素向右浮动使用 .float-end 类向左浮动使用 .float-start 类 .clearfix 类用于清除浮动
div classclearfixspan classfloat-start向左浮动/spanspan classfloat-end向右浮动/span
/div响应式浮动
可以根据屏幕尺寸来设置浮动效果.float-*-left|right - * 表示
sm( 576px)md ( 768px)lg( 992px)xl ( 1200px)xxl ( 1400px)
div classfloat-sm-end在小型屏幕或更宽的屏幕上向右浮动/div
div classfloat-md-end在中型屏幕或更宽的屏幕上向右浮动/div
div classfloat-lg-end在大型屏幕或更宽的屏幕上向右浮动/div
div classfloat-xl-end在超大型屏幕或更宽的屏幕上向右浮动/div
div classfloat-xxl-end在特大型屏幕或更宽的屏幕上向右浮动/div居中对齐
使用 .mx-auto 类来设置元素居中对齐 (添加 margin-left 和 margin-right 为 auto)
div classmx-auto bg-primary stylewidth:150px居中对齐/div文本对齐类
Class描述.text-start文本左对齐。.text-center文本居中对齐。.text-end文本右对齐。.text-wrap隐藏溢出的文本.text-nowrap防止文本换行.text-truncate使用省略号截断文本。.text-break将长文本截断防止溢出。.text-lowercase将文本转换为小写.text-uppercase将文本转换为大写.text-capitalize将每个单词的第一个字母转换成大写。.fw-bold将元素的字体设置为粗体.fw-bolder将元素的字体粗细设置为更粗相对于父元素。.fw-normal将元素的字体设置为正常。.fw-light将元素的字体设置为细体。.fw-lighter将元素的字体粗细设置为更细相对于父元素。.fst-italic将元素的字体样式设置为斜体。.fst-normal将元素的字体样式设置为正常。.text-decoration-none从文本中删除文本修饰例如下划线。.text-decoration-underline给文本添加下划线。.text-decoration-line-through在文本中间添加一行。
宽度
使用 w-* 类.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100设置元素的宽度
div classw-25 bg-primary宽度为 25%/div
div classw-50 bg-primary宽度为 50%/div
div classw-75 bg-primary宽度为 75%/div
div classw-100 bg-primary宽度为 100%/div
div classw-auto bg-primary自动设置宽度/div
div classmw-100 bg-primary最大宽度为 100%/div高度
使用 h-* 类.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100设置元素的高度
div classbg-light styleheight:300pxdiv classh-25 bg-warning高度为 25%/divdiv classh-50 bg-warning高度 50%/divdiv classh-75 bg-warning高度 75%/divdiv classh-100 bg-warning高度 100%/divdiv classh-auto bg-warning自动高度/div
/div类名作用.w-25宽度25%.w-50宽度50%.w-75宽度75%.w-100宽度100%.w-auto宽度自动.mw-100最大宽度100%.min-vw最小宽度100vw.vw-100宽度100vw.h-25高度25%.h-50高度50%.h-75高度75%.h-100高度100%.h-auto高度自动.mh-100最大高度100%.min-vh-100最小高度100vh.vh-100高度100vh
间距
在元素中涉及使用内间距或者外间距时p-内间距这个Class属性会设定 padding值m-外间距这个Class属性会设定 margin值
m - 用来设置 marginp - 用来设置 padding
间距的方向
t - 用来设置 margin-top或 padding-top b- 用来设置 margin-bottom或 padding-bottom s- 用来设置 margin-left或 padding-left e- 用来设置 margin-right或 padding-right x - 用来设置 left和 right y - 用来设置 top和 bottom blank - 用来设置元素在四个方向的 margin或 padding
间距的距离
0 - 把 margin 或 padding 设置为 0 1 - 把 margin 或 padding 设置为 .25rem 2 - 把 margin 或 padding 设置为 .5rem 3 - 把 margin 或 padding 设置为 1rem 4 - 把 margin 或 padding 设置为 1.5rem 5 - 把 margin 或 padding 设置为 3rem auto - 把 margin 设置为 auto
div classpt-4 bg-warning我只有上内边距 (1.5rem)/div
div classp-5 bg-success我在所有边都有内边距 (3rem)/div
div classm-5 pb-5 bg-info我在所有边都有外边距 (3rem) 和下内边距 (3rem)/div.m-**可取值为0~5外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem.mt-**可取值为0~5顶部外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem.me-**可取值为0~5右侧外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem.mb-**可取值为0~5底部外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem.ms-**可取值为0~5左侧外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem.mx-**可取值为0~5左右外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem.mx-auto居中对齐.my-**可取值为0~5上下外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem.p-**可取值为0~5内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem.pt-**可取值为0~5顶部内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem.pb-**可取值为0~5右侧内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem.ps-**可取值为0~5底部内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem.pe-**可取值为0~5左侧内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem.px-**可取值为0~5左右内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem.py-**可取值为0~5上下内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem
响应式 margin x 实用工具调整浏览器窗口大小以查看效果
div classmx-sm-5 bg-primary在 SM 屏幕上的 Margin x 5/div
div classmx-md-5 bg-primary在 MD 屏幕上的 Margin x 5/div
div classmx-lg-5 bg-primary在 LG 屏幕上的 Margin x 5/div
div classmx-xl-5 bg-primary在 XL 屏幕上的 Margin x 5/div阴影
可以使用 shadow-类为元素添加阴影
类说明.shadow为元素添加阴影。.shadow-sm为元素添加一个小阴影。.shadow-lg为元素添加更大的阴影。.shadow-none从元素中移除阴影。
div classshadow p-4 mt-4没有阴影/divBootstrap 5 Flex
弹性盒子是 CSS3 的一种新的布局模式更适合响应式的设计。
创建一个弹性盒子容器
使用 d-flex类创建 flexbox 容器并将直接子项转换为 flex 项
div classd-flex p-3 bg-info text-whitediv classp-2 bg-secondary弹性项目 1/divdiv classp-2 bg-secondary弹性项目 2/divdiv classp-2 bg-secondary弹性项目 3/div
/div使用d-inline-flex类创建行内 flexbox 容器
div classd-inline-flex p-3 bg-info text-whitediv classp-2 bg-secondary弹性项目 1/divdiv classp-2 bg-secondary弹性项目 2/divdiv classp-2 bg-secondary弹性项目 3/div
/div水平方向
.flex-row 可以设置弹性子元素水平显示这是默认的。
使用 .flex-row-reverse 类用于设置右对齐显示即与 .flex-row 方向相反。
div classd-flex p-3 bg-info text-white flex-row-reversediv classp-2 bg-secondary弹性项目 1/divdiv classp-2 bg-secondary弹性项目 2/divdiv classp-2 bg-secondary弹性项目 3/div
/div垂直方向
使用 .flex-column垂直显示 flex 项目彼此堆叠或使用 .flex-column-reverse反转垂直方向
div classd-flex flex-columndiv classp-2 bg-danger弹性项目 1/divdiv classp-2 bg-warning弹性项目 2/divdiv classp-2 bg-primary弹性项目 3/div
/divdiv classd-flex mt-3 flex-column-reversediv classp-2 bg-danger弹性项目 1/divdiv classp-2 bg-warning弹性项目 2/divdiv classp-2 bg-primary弹性项目 3/div
/div换行
默认情况下项目都排在一条线又称”轴线”上。flex-wrap属性定义如果一条轴线排不下如何换行。
flex-nowrap默认不换行。 flex-wrap换行第一行在上方。 flex-wrap-reverse换行第一行在下方。
div classd-flex mt-3 flex-wrap bg-infodiv classp-2 bg-danger弹性项目 1/divdiv classp-2 bg-warning弹性项目 2/divdiv classp-2 bg-primary弹性项目 3/divdiv classp-2 bg-danger弹性项目 1/divdiv classp-2 bg-warning弹性项目 2/divdiv classp-2 bg-primary弹性项目 3/div
/div对齐内容
使用 .justify-content-* 类可改变弹性项目的对齐方式。***** 号允许的值有
start默认endcenterbetweenaround
div classd-flex mt-3 justify-content-centerdiv classp-2 bg-danger弹性项目 1/divdiv classp-2 bg-warning弹性项目 2/divdiv classp-2 bg-primary弹性项目 3/div
/div使用 .align-items-* 类控制单行弹性项目的垂直对齐方式***** 号允许的值有
startendcenterbaselinestretch默认值
div classd-flex mt-3 align-items-center bg-info styleheight: 300pxdiv classp-2 bg-danger弹性项目 1/divdiv classp-2 bg-warning弹性项目 2/divdiv classp-2 bg-primary弹性项目 3/div
/div使用 .align-content-* 用于控制多行项目的对齐方式***** 号允许的值有
startendcenterbetweenaroundstretch默认值
div classd-flex mt-3 flex-wrap bg-info align-content-between styleheight:300px; width:500pxdiv classp-2 bg-danger弹性项目 1/divdiv classp-2 bg-warning弹性项目 2/divdiv classp-2 bg-primary弹性项目 3/divdiv classp-2 bg-danger弹性项目 1/divdiv classp-2 bg-warning弹性项目 2/divdiv classp-2 bg-primary弹性项目 3/divdiv classp-2 bg-danger弹性项目 1/divdiv classp-2 bg-warning弹性项目 2/divdiv classp-2 bg-primary弹性项目 3/div
/div顺序
使用 .order类可更改特定 flex 项的视觉顺序其中最低的数字具有最高的优先级order-1 显示在 order-2 之前以此类推默认为0。
div classd-flexdiv classp-2 bg-secondary弹性项目 1/divdiv classp-2 bg-warning order-3弹性项目 2/divdiv classp-2 bg-primary order-1弹性项目 3/div
/div等宽
在 flex 项目上使用 .flex-fill可强制它们等宽
div classd-flexdiv classp-2 bg-secondary flex-fill弹性项目 1/divdiv classp-2 bg-warning flex-fill弹性项目 2/divdiv classp-2 bg-primary flex-fill弹性项目 3/div
/div伸展
在 flex 项目上使用 .flex-grow-1可占用多余的空间
div classd-flex bg-info styleheight:300px; width:500pxdiv classp-2 bg-secondary弹性项目 1/divdiv classp-2 bg-warning弹性项目 2/divdiv classp-2 bg-primary flex-grow-1弹性项目 3/div
/div指定子元素对齐
要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制align-self-*属性允许单个项目有与其他项目不一样的对齐方式
startendcenterbaselinestretch默认值
div classbox d-flex bg-info styleheight:300px; width:500pxdiv classp-2 bg-secondary弹性项目 1/divdiv classp-2 bg-warning align-self-center弹性项目 2/divdiv classp-2 bg-primary弹性项目 3/div
/div响应式 flex 类
可以根据不同的设备设置 flex 类从而实现页面响应式布局 * 号可以的值有sm, md, lg 或 xl, 对应的是小型设备、中型设备大型设备超大型设备。
类实例弹性容器.d-*-flex根据不同的屏幕设备创建弹性盒子容器.d-*-inline-flex根据不同的屏幕设备创建行内弹性盒子容器方向.flex-*-row根据不同的屏幕设备在水平方向显示弹性子元素.flex-*-row-reverse根据不同的屏幕设备在水平方向显示弹性子元素且右对齐.flex-*-column根据不同的屏幕设备在垂直方向显示弹性子元素.flex-*-column-reverse根据不同的屏幕设备在垂直方向显示弹性子元素且方向相反内容对齐.justify-content-*-start根据不同屏幕设备在开始位置显示弹性子元素 (左对齐).justify-content-*-end根据不同屏幕设备在尾部显示弹性子元素 (右对齐).justify-content-*-center根据不同屏幕设备在 flex 容器中居中显示子元素.justify-content-*-between根据不同屏幕设备使用 “between” 显示弹性子元素.justify-content-*-around根据不同屏幕设备使用 “around” 显示弹性子元素等宽.flex-*-fill根据不同的屏幕设备强制等宽扩展.flex-*-grow-0不同的屏幕设备不设置扩展.flex-*-grow-1不同的屏幕设备设置扩展包裹.flex-*-nowrap不同的屏幕设备不设置包裹元素.flex-*-wrap不同的屏幕设备设置包裹元素.flex-*-wrap-reverse不同的屏幕设备反转包裹元素内容排列.align-content-*-start根据不同屏幕设备在起始位置堆叠元素.align-content-*-end根据不同屏幕设备在结束位置堆叠元素.align-content-*-center根据不同屏幕设备在中间位置堆叠元素.align-content-*-around根据不同屏幕设备使用 “around” 堆叠元素.align-content-*-stretch根据不同屏幕设备通过伸展元素来堆叠排序.order-*-*0-12*在小屏幕尺寸上修改排序元素对齐.align-items-*-start根据不同屏幕设备让元素在头部显示在同一行。.align-items-*-end根据不同屏幕设备让元素在尾部显示在同一行。.align-items-*-center根据不同屏幕设备让元素在中间位置显示在同一行。.align-items-*-baseline根据不同屏幕设备让元素在基线上显示在同一行。.align-items-*-stretch根据不同屏幕设备让元素延展高度并显示在同一行。单独一个子元素的对齐方式.align-self-*-start据不同屏幕设备让单独一个子元素显示在头部。.align-self-*-end据不同屏幕设备让单独一个子元素显示在尾部.align-self-*-center据不同屏幕设备让单独一个子元素显示在居中位置.align-self-*-baseline据不同屏幕设备让单独一个子元素显示在基线位置.align-self-*-stretch据不同屏幕设备延展一个单独子元素
Bootstrap5 字体图标
字体图标是在 Web 项目中使用的图标字体。
使用字体图标的好处是可以通过应用 CSS color 属性来创建任何颜色的图标。 此外要更改图标的大小只需使用 CSS font-size 属性即可。
获取字体图标
在网页中包含 Bootstrap5 图标的最简单方法是使用 CDN 链接。 此 CDN 链接基本上指向一个远程 CSS 文件其中包含生成字体图标所需的所有类。
我们可以在 Bootstrap 模板以及简单的网页中包含 Bootstrap5 图标而无需使用 Bootstrap 框架。利用提供的公共 CDN 服务并将图标字体的样式表添加到网站的 head 标签内
步骤 一: 在HTML文档的head部分包含下面的 Bootstrap CDN 链接。
link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap-icons1.10.0/font/bootstrap-icons.css步骤 二: 要将图标放置到网页中使用语法 i classbi-*/i 其中 * 代表特定图标的类名。
i classbi-archive-fill/i
