摘要：
一、浮动标签（Floating labels） 1、浮动标签 .form-floating <div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder 阅读全文
摘要：
一、输入框组 二、实例 1、基本用法（Basic example） <div class="input-group mb-3"> <span class="input-group-text" id="basic-addon1">@</span> <input type="text" class="f 阅读全文
摘要：
一、区间 区间 禁用 最小和最大 分步 二、效果展示 1、区间 .form-range <label for="customRange1" class="form-label">Example range</label> <input type="range" class="form-range" 阅读全文
摘要：
一、单选和复选 1、复选按钮（Checks） 2、单选按钮（Radios） 3、开关（Switch） 4、按钮（Button） 二、实例 复选按钮 2.1 复选按钮默认 form-check-input checked <!-- 复选按钮 --> <div class="form-check"> < 阅读全文
摘要：
一、选择（Select） 默认（Default） 大小（Sizing） 禁用（Disabled） 二、实例 1、默认下拉选项 form-select <!-- 默认下拉选项 --> <select class="form-select" aria-label="Default select exam 阅读全文
摘要：
一、表单控制（Form controls） 表单大小（Sizing） 表单可见性（Disabled） 只读纯文本（Readonly plain text） 文件上传（File input） 颜色（Color） 数据列表（Datalists） 二、实例 1、表单大小（Sizing） .form-con 阅读全文
摘要：
一、画像 通过 Bootstrap 的画像（figure）组件来显示相关联的图片和文本。.figure、.figure-img 和 .figure-caption 类为 HTML5 的 <figure> 和 <figcaption> 元素提供了一些基本样式。<figure> 标签内所包含的图片如果没 阅读全文
摘要：
一、表格 设置表格样式（.table）,表格头部（.table-light .table-dark ） 状态类给表格、行、单元格添加特殊的颜色（table-primary、table-secondary、table-success、table-danger、table-warning、table-i 阅读全文
摘要：
一、图片（Images） 响应式图片 图片的缩略图 对齐图片 二、代码实例 2.1 响应式图片 通过 Bootstrap 所提供的 .img-fluid 类让图片支持响应式布局。其原理是将 max-width: 100%; 和 height: auto; 赋予图片，以便随父元素一起缩放。 <img 阅读全文
摘要：
一、排版包括哪些内容 标题（Headings） 自定义标题（Customizing headings） 显示标题（Display headings） 段落突出显示（Lead） 内联文本元素（Inline text elements） 缩写（Abbreviations） 引用（Blockquotes） 阅读全文
摘要：
六、css布局（CSS Grid） 1、3列（Three columns） <div class="grid"> <div class="g-col-4">.g-col-4</div> <div class="g-col-4">.g-col-4</div> <div class="g-col-4"> 阅读全文
摘要：
五、水槽（Gutters） 1、水平水槽（Horizontal gutters） <div class="container px-4"> <div class="row gx-5"> <div class="col"> <div class="p-3 border bg-light">Custom 阅读全文
摘要：
四、列（Columns） 1、对齐（Alignment） 1.1 垂直对齐（Vertical alignment） 所有列整体垂直方向对齐方式： align-items-start 顶部对齐 align-items-center 中间对齐 align-items-end 底部对齐 <div clas 阅读全文
摘要：
三、网格系统（Grid system） 1、网格点（Grid options） 2、自动布局列（Auto-layout columns） 2.1 等宽度（Equal-width） <div class="container"> <div class="row"> <div class="col"> 阅读全文
摘要：
二、容器（Containers） 1、容器的网格对比 2、默认容器（Default container） <div class="container"> <!-- Content here --> </div> 3、响应式容器（Responsive containers） <div class="c 阅读全文