下载cmsv7,爱站工具seo综合查询,网站建设 安庆,美团网站建设1. 背景颜色
1.1 背景颜色样式
在Bootstrap 5中, 可以使用以下类来设置背景颜色:
* 1. .bg-primary: 设置为主要的背景颜色(#007bff, 深蓝色).
* 2. .bg-secondary: 设置为次要的背景颜色(#6c757d, 灰色).
* 3. .bg-success: 设置为成功的背景颜色(#28a745, 绿色).
* 4. …
1. 背景颜色
1.1 背景颜色样式
在Bootstrap 5中, 可以使用以下类来设置背景颜色:
* 1. .bg-primary: 设置为主要的背景颜色(#007bff, 深蓝色).
* 2. .bg-secondary: 设置为次要的背景颜色(#6c757d, 灰色).
* 3. .bg-success: 设置为成功的背景颜色(#28a745, 绿色).
* 4. .bg-danger: 设置为危险的背景颜色(#dc3545, 红色).
* 5. .bg-warning: 设置为警告的背景颜色(#ffc107, 黄色).
* 6. .bg-info: 设置为信息的背景颜色(#17a2b8, 青色).
* 7. .bg-light: 设置为浅色的背景颜色(#f8f9fa, 浅灰色).
* 8. .bg-dark: 设置为白色的背景颜色(#343a40, 深灰色).
* 9. .bg-dark: 用于将元素的背景颜色设置为白色.
* 10. .bg-transparent: 用于将元素的背景颜色设置为透明.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title背景颜色/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/scriptstyle.container div {margin-bottom: 10px;}/style
/head
body
div classcontainer mt-3div classbg-primary text-white.bg-primary/divdiv classbg-secondary text-white.bg-secondary/divdiv classbg-success text-white.bg-success/divdiv classbg-danger text-white.bg-danger/divdiv classbg-warning text-dark.bg-warning/divdiv classbg-info text-dark.bg-info/divdiv classbg-light text-dark.bg-light/divdiv classbg-dark text-white.bg-dark/div
/div
/body
/html1.2 颜色渐变
在bootstrap 5中, .bg-gradient类可以设置背景颜色渐变.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title背景颜色渐变/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script
/head
body
div classcontainer mt-3div classp-3 mb-2 bg-primary bg-gradient text-white.bg-primary/divdiv classp-3 mb-2 bg-secondary bg-gradient text-white.bg-secondary/divdiv classp-3 mb-2 bg-success bg-gradient text-white.bg-success/divdiv classp-3 mb-2 bg-danger bg-gradient text-white.bg-danger/divdiv classp-3 mb-2 bg-warning bg-gradient text-dark.bg-warning/divdiv classp-3 mb-2 bg-info bg-gradient text-dark.bg-info/divdiv classp-3 mb-2 bg-light bg-gradient text-dark.bg-light/divdiv classp-3 mb-2 bg-dark bg-gradient text-white.bg-dark/divdiv classp-3 mb-2 bg-white bg-gradient text-dark.bg-white/div
/div
/body
/html2. 边框
2.1 边框样式
在Bootstrap 5中, 用于设置边框的相关类名及其作用:* 1. border: 简单的边框样式, 通常与其他类一起使用, 如: border border-primary.
* 2. border-color: 设置特定颜色的边框, 如: border-primary、border-secondary等.
* 3. border-side: 设置特定边的边框, 如: border-top, border-start, border-bottom, border-end, 只应用于相应的边.
* 4. border-side-0: 移除特定边的边框, 如: border-top-0, border-right-0, border-bottom-0, border-left-0.
* 5. border-size: 设置特定尺寸的边框, 有几个预定义的尺寸类可用, 如: border-1, border-2, border-3等.border-start: 用于设置元素的开始边的边框样式. start对应元素的右边框.border-end: 用于设置元素的结束边的边框样式. end对应元素的左边框.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title边框/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/scriptstylespan {display: inline-block;width: 75px;height: 75px;margin: 6px;background-color: #f9f9f9;}/style
/head
bodydiv classcontainer mt-3span classborder border-primary/spanspan classborder border-primary/spanspan classborder border-primary border-top-0/spanspan classborder border-primary border-end-0/spanspan classborder border-primary border-bottom-0/spanspan classborder border-primary border-start-0/spanbrspan classborder-primary border-top /spanspan classborder-primary border-end/spanspan classborder-primary border-bottom/spanspan classborder-primary border-start/span
/div/body
/html2.2 圆角边框
在 Bootstrap 5中, 设置圆角边框的相关类名及其介绍:* 1. .rounded: 用于添加一个圆角边框效果, 将元素的边角变得更圆滑.rounded-x: 用于设置圆角的大小, x取值范围0-5.
* 2. .rounded-top: 用于添加一个圆角边框效果, 只影响元素的顶部边角, 使其变得更圆滑.
* 3. .rounded-end: 用于添加一个圆角边框效果, 只影响元素的尾部(朝向右侧的边)边角, 使其变得更圆滑.
* 4. .rounded-bottom: 用于添加一个圆角边框效果, 只影响元素的底部边角, 使其变得更圆滑.
* 5. .rounded-start: 用于添加一个圆角边框效果, 只影响元素的起始(朝向左侧的边)边角, 使其变得更圆滑.
* 6. .rounded-circle: 类用于将元素变为一个圆形, 效果就像是将矩形的边角完全变圆.
* 7. .rounded-pill: 用于将元素变为一个类似椭圆形的形状, 边角变得更圆滑.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title圆角/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/scriptstylediv div {display: inline-block;width: 75px;height: 75px;background-color: #7fbce1;margin: 10px 10px;}/style
/head
body
div classcontainerdiv classrounded/divdiv classrounded-top rounded-4/divdiv classrounded-end rounded-4/divdiv classrounded-bottom rounded-4/divdiv classrounded-start rounded-4/divdiv classrounded-circle /divdiv classrounded-pill styleheight: 75px; width: 120px/div
/div/body
/html3. 浮动
3.1 浮动样式
在Bootstrap 5中, 用于设置浮动的相关类名及其作用:
* 1. .float-end: 用于将元素向右浮动.通过将该类应用于元素, 可以让元素靠右侧对齐, 并允许其他元素环绕在其左侧.* 2. .float-start: 用于将元素向左浮动.通过将该类应用于元素, 可以让元素靠左侧对齐, 并允许其他元素环绕在其右侧.* 3. .float-none: 不设置浮动, 元素将按照正常文档流排列.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title浮动/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/scriptstylespan {display: inline-block;height: 100px;width: 100px;background-color: aqua;}/style
/head
body
div classcontainer mt-3div classborder border-1span classfloat-start border border-1/spanspan classfloat-end border border-1/span/div
/div
/body
/html3.2 清除浮动
在Bootstrap 5中, .clearfix类用于清除浮动效果.
当父元素包含浮动元素时, 可能会出现布局混乱的问题, 这时可以在父元素上应用.clearfix类来清除其子元素的浮动效果.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title清除浮动/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/scriptstylespan {display: inline-block;height: 100px;width: 100px;background-color: aqua;}/style
/head
body
div classcontainer mt-3div classclearfix border border-1span classfloat-start border border-1/spanspan classfloat-end border border-1/span/div
/div
/body
/html3.3 响应式浮动
在Bootstrap 5中, 响应式浮动相关的类名及其介绍:
* 1. .float-sm-end: 在小屏幕 (576px)时, 将元素向右浮动.
* 2. .float-md-end: 在中等屏幕 (768px)时, 将元素向右浮动.
* 3. .float-lg-end: 在大屏幕 (992px)时, 将元素向右浮动.
* 4. .float-xl-end: 在超大屏幕 (1200px)时, 将元素向右浮动.
* 5. .float-xxl-end: 在特大屏幕 (1400px)时, 将元素向右浮动.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title响应式浮动/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script
/head
body
div classcontainer mt-3div classrowdiv classcol-12div classfloat-sm-end m-2 bg-info小屏幕向右浮动/div/divdiv classcol-12div classfloat-md-end m-2 bg-info中等屏幕向右浮动/div/divdiv classcol-12div classfloat-lg-end m-2 bg-info大屏幕向右浮动/div/divdiv classcol-12div classfloat-xl-end m-2 bg-info超大屏幕向右浮动/div/div/div
/div
/body
/html4. 宽度
在Bootstrap 5中, 可以使用.w-*类名来设置元素的固定宽度或最大宽度.下面是一些常用的宽度类名的介绍:
- .w-25: 将元素的宽度设置为25%.
- .w-50: 将元素的宽度设置为50%.
- .w-75: 将元素的宽度设置为75%.
- .w-100: 将元素的宽度设置为100%.
- .mw-auto: 将元素的最大宽度设置为自动计算, 根据内容来确定宽度.
- .mw-100: 将元素的最大宽度设置为100%.这些类名可以与其他Bootstrap类名一起使用, 例如网格系统的类名.col-*, 以实现自定义的宽度布局.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title宽度/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
bodydiv classcontainer mt-3div classrowdiv classcol-12div classm-2 w-25 bg-info宽度为 25%/div/divdiv classcol-12div classm-2 w-50 bg-info宽度为 50%/div/divdiv classcol-12div classm-2 w-75 bg-info宽度为 75%/div/divdiv classcol-12div classm-2 w-100 bg-info宽度为 100%/div/div/div
/div/body
/html5. 高度
在Bootstrap 5中, 可以使用.h-*类名来设置元素的固定高度或最大高度.下面是一些常用的高度类名的介绍:
- .h-25: 将元素的高度设置为25%.
- .h-50: 将元素的高度设置为50%.
- .h-75: 将元素的高度设置为75%.
- .h-100: 将元素的高度设置为100%.
- .mh-auto: 将元素的最大高度设置为自动计算, 根据内容来确定高度.
- .mh-100: 将元素的最大高度设置为100%.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title高度/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3div classrowdiv classcol-12div class w-25 h-25 bg-info高度为 25%/div/divdiv classcol-12div class w-50 h-50 bg-info高度为 50%/div/divdiv classcol-12div class w-75 h-75 bg-info高度为 75%/div/divdiv classcol-12div class w-100 h-100 bg-info高度为 100%/div/div/div
/div
/body
/html6. 间距
间距设置可以通过以下方式进行:
- {property}{sides}-{size}: 设置小屏幕(xs)的间距.
- {property}{sides}-{breakpoint}-{size}: 设置特定屏幕宽度(sm, md, lg, xl或xxl)的间距.property: 表示属性, 可以是m(margin, 外间距), p(padding, 内间距).sides: 表示方向, 可以是tb(下), s(左), e(右), x(水平), y(垂直), 或blank(所有方向).size: 表示大小, 可以是 0, 1, 2, 3, 4, 5或auto.0 - 设置 margin 或 padding 为 01 - 设置 margin 或 padding 为 $spacer * .252 - 设置 margin 或 padding 为 $spacer * .53 - 设置 margin 或 padding 为 $spacer4 - 设置 margin 或 padding 为 $spacer * 1.55 - 设置 margin 或 padding 为 $spacer * 3$spacer是Bootstrap中预定义的间距变量(默认为: 1rem, 一般为16px)在实际使用中, 你可以根据需要自定义这些变量的值.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title间距/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3div classmx-auto bg-info w-25 text-center用户注册/divformdiv classform-rowdiv classform-group!-- 设置 margin-top--p classmt-2label fortext邮箱:/labelinput typetext classform-control-sm idtext placeholderemail/p!-- 设置 margin-top--label forcolor classmt-2颜色:/labelinput typecolor idcolor classform-control-sm stylewidth: 60px;padding: 4px;autocompleteoffvalue#656565/div/div/form
/div
/body
/html7. Flex布局
7.1 弹性布局样式
弹性盒子由容器和其内部的项目组成.
弹性容器内包含了一个或多个弹性子元素.在Bootstrap 5中, d-flex类用于创建一个弹性盒子容器.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title弹性布局/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3!-- 使用 d-flex 类创建一个弹性盒子容器, 并设置三个弹性子元素--div classd-flex p-3 bg-secondary text-whitediv classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/divdiv classp-2 bg-primaryFlex item 3/div/div
/div
/body
/html7.2 行内弹性容器
在Bootstrap 5中, d-inline-flex类用于创建一个行内的弹性容器, 该容器内的子元素将以弹性盒模型进行布局.
弹性盒模型可以让子元素在容器中自动调整大小, 并根据设定的规则进行排列.具体来说, d-inline-flex类将一个元素的display属性设置为inline-flex, 使其以行内的方式展示, 并具有弹性盒的特性.
使用d-inline-flex可以方便地创建一些灵活的布局, 比如一行排列的图标, 按钮, 文本等元素,
它们可以自动适应容器的大小, 并根据需要进行调整和重新排列.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title行内弹性容器/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3div classd-inline-flex p-3 bg-secondary text-whitediv classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/divdiv classp-2 bg-primaryFlex item 3/div/div
/div
/body
/html7.3 水平对齐
在Bootstrap 5中, 设置弹性子元素水平显示的相关类名及其介绍:
* 1. .flex-row: 默认, 设置子元素向右对齐.
* 2. .flex-row-reverse: 用于设置子元素向右对齐.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title水平方向对齐/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3div classd-flex flex-row bg-secondary mb-3div classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/divdiv classp-2 bg-primaryFlex item 3/div/divdiv classd-flex flex-row-reverse bg-secondarydiv classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/divdiv classp-2 bg-primaryFlex item 3/div/div
/div
/body
/html7.5 垂直对齐
在Bootstrap 5中, 用户设置弹性子元素垂直显示的相关类名及其介绍:
* 1. .flex-column: 默认, 子元素沿着垂直方向从上到下排列显示.
* 2. .flex-column-reverse: 子元素按照倒序的方式从下到上排列显示.* 设置之后, 子元素将会占据父容器的整行宽度, 并依次垂直排列显示.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title垂直方向对齐/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3div classd-flex flex-column mb-3div classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/divdiv classp-2 bg-primaryFlex item 3/div/divdiv classd-flex flex-column-reversediv classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/divdiv classp-2 bg-primaryFlex item 3/div/div
/div/body
/html7.6 内容排列
在Bootstrap 5中, .justify-content-*类用于修改弹性容器内子元素的排列方式.相关类名及其介绍:
* 1. .justify-content-start: 默认, 表示子元素在容器的起始位置对齐.
* 2. .justify-content-center: 用于将子元素在容器的中间位置对齐.
* 3. .justify-content-end: 用于将子元素在容器的末尾位置对齐.
* 4. .justify-content-between: 这个类将子元素平均分配在容器内, 并在首尾两端留下空白间距.
* 5. .justify-content-around: 这个类将子元素平均分配在容器内, 并在它们之间以及首尾两端留下相等的空白间距.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title内容排列/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3div classd-flex justify-content-start bg-secondary mb-3div classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/divdiv classp-2 bg-primaryFlex item 3/div/divdiv classd-flex justify-content-end bg-secondary mb-3div classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/divdiv classp-2 bg-primaryFlex item 3/div/divdiv classd-flex justify-content-center bg-secondary mb-3div classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/divdiv classp-2 bg-primaryFlex item 3/div/divdiv classd-flex justify-content-between bg-secondary mb-3div classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/divdiv classp-2 bg-primaryFlex item 3/div/divdiv classd-flex justify-content-around bg-secondary mb-3div classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/divdiv classp-2 bg-primaryFlex item 3/div/div
/div
/body
/html7.7 等宽
在Bootstrap 5中, .flex-fill类用于强制将弹性子元素的宽度设置为相等的值, 使它们在水平方向上占据相同的空间.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title等宽/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3div classd-flexdiv classp-2 bg-info flex-fillFlex item 1/divdiv classp-2 bg-warning flex-fillFlex item 2/divdiv classp-2 bg-primary flex-fillFlex item 3/div/div
/div/body
/html7.8 分配空间
7.8.1 扩展
在Bootstrap 5中, .flex-grow-*类用于设置弹性子元素在弹性容器中分配剩余空间的比例.相关类名及其介绍:
* 1. .flex-grow-0: 使弹性子元素不具有扩展能力, 即不会分配任何剩余空间给该元素.
* 2. .flex-grow-1: 使弹性子元素可以根据剩余空间进行等比例扩展.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title扩展/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3div classd-flex mb-3div classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/div!-- 设置子元素使用剩下的空间 --div classp-2 flex-grow-1 bg-primaryFlex item 3/div/div
/div
/body
/html7.8.2 收缩
在Bootstrap 5中, .flex-grow-*类用于定义弹性盒子项目在空间不足时的收缩比例.相关类名及其介绍:
* 1. flex-shrink-1: 默认, 所有项目都具有这个类, 表示项目将按比例收缩以适应容器的空间.
* 2. flex-shrink-0: 表示该项目不会收缩.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1titleTitle/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/scriptstyle.p-2 {width: 500px;}/style
/head
body
div classcontainer mt-3div classd-flexdiv classflex-shrink-1 bg-info p-2项目 1/divdiv classflex-shrink-1 bg-warning p-2项目 2/divdiv classflex-shrink-1 bg-primary p-2项目 3/div/divdiv classd-flexdiv classflex-shrink-0 bg-info p-2项目 1/divdiv classflex-shrink-0 bg-warning p-2项目 2/divdiv classflex-shrink-0 bg-primary p-2项目 3/div/div
/div
/body
/html7.9 排序
在Bootstrap 5中, .order-*类可用于设置弹性子元素的排序.相关类名及其介绍:
- .order-1: 将子元素的排序设置为1(最大的排序权重).
- ...
- .order-12: 将子元素的排序设置为12(最小的排序权重).!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title排序/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3div classd-flex mb-3div classp-2 order-3 bg-infoFlex item 1/divdiv classp-2 order-2 bg-warningFlex item 2/divdiv classp-2 order-1 bg-primaryFlex item 3/div/div
/div
/body
/html7.10 外边距
在Bootstrap 5中, 用于设置子元素外边距的类名及其介绍:
* 1. .ms-auto: 设置子元素右外边距为auto, 即: margin-right: auto!important;.
* 2. .me-auto: 设置子元素左外边距为auto, 即: margin-left: auto!important;.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title外边距/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3div classd-flex mb-3 bg-secondary!-- 设置最大左边距 --div classp-2 ms-auto bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/divdiv classp-2 bg-primaryFlex item 3/div/divdiv classd-flex mb-3 bg-secondarydiv classp-2 bg-infoFlex item 1/divdiv classp-2 bg-warningFlex item 2/div!-- 设置最大右边距 --div classp-2 me-auto bg-primaryFlex item 3/div/div
/div
/body
/html7.11 换行方式
在 Bootstrap 5中, 用于设置弹性容器的换行方式的相关类名及其介绍:
* 1. .flex-nowrap: 默认, 弹性容器的子元素将会在一行内保持水平排列, 不会自动换行到下一行.
* 2. .flex-wrap: 用于将弹性容器的子元素布局在单行或多行上, 以适应可用空间.
* 3. .flex-wrap-reverse 类用于将弹性容器的子元素布局在反向的多行上。也就是说, 它会从下到上依次排列子元素。!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title换行/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script
/head
bodydiv classcontainer mt-3pcode.flex-nowrap:/code/pdiv classd-flex flex-nowrap bg-lightdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/divdiv classp-2 borderFlex item 4/divdiv classp-2 borderFlex item 5/divdiv classp-2 borderFlex item 6/divdiv classp-2 borderFlex item 7/divdiv classp-2 borderFlex item 8/divdiv classp-2 borderFlex item 9/divdiv classp-2 borderFlex item 10/div/divbrpcode.flex-wrap:/code/pdiv classd-flex flex-wrap bg-lightdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/divdiv classp-2 borderFlex item 4/divdiv classp-2 borderFlex item 5/divdiv classp-2 borderFlex item 6/divdiv classp-2 borderFlex item 7/divdiv classp-2 borderFlex item 8/divdiv classp-2 borderFlex item 9/divdiv classp-2 borderFlex item 10/div/divbrpcode.flex-wrap-reverse:/code/pdiv classd-flex flex-wrap-reverse bg-lightdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/divdiv classp-2 borderFlex item 4/divdiv classp-2 borderFlex item 5/divdiv classp-2 borderFlex item 6/divdiv classp-2 borderFlex item 7/divdiv classp-2 borderFlex item 8/divdiv classp-2 borderFlex item 9/divdiv classp-2 borderFlex item 10/div/div
/div
/body
/html7.12 内容对齐
在 Bootstrap 5中, 可以使用.align-content-*类来控制弹性容器中子元素在垂直方向上的堆叠方式.相关类名及其介绍:
* 1. .align-content-start: 默认, 子元素堆叠在垂直方向上的起始位置.
* 2. .align-content-center: 子元素在垂直方向上居中对齐。
* 3. .align-content-end: 子元素堆叠在垂直方向上的结束位置.
* 4. .align-content-between:子元素均匀分布在垂直方向上, 两端贴紧容器边界.
* 5. .align-content-around: 子元素均匀分布在垂直方向上, 各元素之间有空隙.
* 6. .align-content-stretch:子元素在垂直方向上拉伸以填满整个容器.* 这些类在只有一行的弹性子元素中是无效的, 需要搭配flex-wrap或flex-wrap-reverse类使用, 也可以说它说多行内容的对齐方法.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title内容对齐/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3p.align-content-start (默认):/pdiv classd-flex flex-wrap align-content-start bg-light styleheight:100pxdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/divdiv classp-2 borderFlex item 4/divdiv classp-2 borderFlex item 5/divdiv classp-2 borderFlex item 6/divdiv classp-2 borderFlex item 7/divdiv classp-2 borderFlex item 8/divdiv classp-2 borderFlex item 9/divdiv classp-2 borderFlex item 10/div/divbrp.align-content-center:/pdiv classd-flex flex-wrap align-content-center bg-light styleheight:100pxdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/divdiv classp-2 borderFlex item 4/divdiv classp-2 borderFlex item 5/divdiv classp-2 borderFlex item 6/divdiv classp-2 borderFlex item 7/divdiv classp-2 borderFlex item 8/divdiv classp-2 borderFlex item 9/divdiv classp-2 borderFlex item 10/div/divbrp.align-content-end:/pdiv classd-flex flex-wrap align-content-end bg-light styleheight:100pxdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/divdiv classp-2 borderFlex item 4/divdiv classp-2 borderFlex item 5/divdiv classp-2 borderFlex item 6/divdiv classp-2 borderFlex item 7/divdiv classp-2 borderFlex item 8/divdiv classp-2 borderFlex item 9/divdiv classp-2 borderFlex item 10/div/divbrp.align-content-around:/pdiv classd-flex flex-wrap align-content-around bg-light styleheight:300pxdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/divdiv classp-2 borderFlex item 4/divdiv classp-2 borderFlex item 5/divdiv classp-2 borderFlex item 6/divdiv classp-2 borderFlex item 7/divdiv classp-2 borderFlex item 8/divdiv classp-2 borderFlex item 9/divdiv classp-2 borderFlex item 10/divdiv classp-2 borderFlex item 11/divdiv classp-2 borderFlex item 12/divdiv classp-2 borderFlex item 13/divdiv classp-2 borderFlex item 14/divdiv classp-2 borderFlex item 15/divdiv classp-2 borderFlex item 16/divdiv classp-2 borderFlex item 17/divdiv classp-2 borderFlex item 18/divdiv classp-2 borderFlex item 19/divdiv classp-2 borderFlex item 20/divdiv classp-2 borderFlex item 21/divdiv classp-2 borderFlex item 22/divdiv classp-2 borderFlex item 23/divdiv classp-2 borderFlex item 24/divdiv classp-2 borderFlex item 25/div/divbrp.align-content-stretch:/pdiv classd-flex flex-wrap align-content-stretch bg-light styleheight:300pxdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/divdiv classp-2 borderFlex item 4/divdiv classp-2 borderFlex item 5/divdiv classp-2 borderFlex item 6/divdiv classp-2 borderFlex item 7/divdiv classp-2 borderFlex item 8/divdiv classp-2 borderFlex item 9/divdiv classp-2 borderFlex item 10/divdiv classp-2 borderFlex item 11/divdiv classp-2 borderFlex item 12/divdiv classp-2 borderFlex item 13 /divdiv classp-2 borderFlex item 14/divdiv classp-2 borderFlex item 15/divdiv classp-2 borderFlex item 16/divdiv classp-2 borderFlex item 17/divdiv classp-2 borderFlex item 18/divdiv classp-2 borderFlex item 19/divdiv classp-2 borderFlex item 20/divdiv classp-2 borderFlex item 21/divdiv classp-2 borderFlex item 22/divdiv classp-2 borderFlex item 23/divdiv classp-2 borderFlex item 24/divdiv classp-2 borderFlex item 25/div/divbr
/div
/body
/html7.13 子元素对齐
在Bootstrap 5中, .align-items-*类来控制弹性容器中的子元素在单行中的垂直对齐方式.相关类名及其介绍:
* 1. .align-items-start: 子元素在单行中垂直对齐的起始位置.
* 2. .align-items-center子元素在单行中垂直居中对齐.
* 3. .align-items-end: 子元素在单行中垂直对齐的结束位置.
* 4. .align-items-baseline子元素在单行中以基线对齐.
* 5. .align-items-stretch子元素在单行中拉伸以填充垂直空间, 默认值。!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title子元素对齐/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3p.align-items-start:/pdiv classd-flex align-items-start bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/div/divbrp.align-items-center:/pdiv classd-flex align-items-center bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/div/divbrp.align-items-end:/pdiv classd-flex align-items-end bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/div/divbrp.align-items-baseline:/pdiv classd-flex align-items-baseline bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/div/divbrp.align-items-stretch (默认):/pdiv classd-flex align-items-stretch bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 borderFlex item 2/divdiv classp-2 borderFlex item 3/div/divbr
/div
/body
/html7.14 指定子元素对齐
在 Bootstrap 5中, 可以使用.align-self-*类单独控制特定子元素的对齐方式.相关类名及其介绍:
* 1. .align-self-start: 将特定子元素垂直对齐到起始位置.
* 2. .align-self-center: 将特定子元素垂直居中对齐.
* 3. .align-self-end: 将特定子元素垂直对齐到结束位置.
* 4. .align-self-baseline: 将特定子元素以基线对齐.
* 5. .align-self-stretch: 将特定子元素拉伸以填充垂直空间, 这是默认值.!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title指定子元素对齐/titlelink hrefbootstrap-5.3.2-dist/css/bootstrap.min.css relstylesheetscript srcbootstrap-5.3.2-dist/js/bootstrap.bundle.min.js/script/head
body
div classcontainer mt-3p.align-self-start:/pdiv classd-flex bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 border align-self-startFlex item 2/divdiv classp-2 borderFlex item 3/div/divbrp.align-self-center:/pdiv classd-flex bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 border align-self-centerFlex item 2/divdiv classp-2 borderFlex item 3/div/divbrp.align-self-end:/pdiv classd-flex bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 border align-self-endFlex item 2/divdiv classp-2 borderFlex item 3/div/divbrp.align-self-baseline:/pdiv classd-flex bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 border align-self-baselineFlex item 2/divdiv classp-2 borderFlex item 3/div/divbrp.align-self-stretch (默认):/pdiv classd-flex bg-light styleheight:150pxdiv classp-2 borderFlex item 1/divdiv classp-2 border align-self-stretchFlex item 2/divdiv classp-2 borderFlex item 3/div/divbr
/div
/body
/html7.15 响应式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 据不同屏幕设备, 延展一个单独子元素.
