内容主要包括以下三个大块
- 布局
- 页面内容
- 表单
前置准备:到官网或者中文网下载好bootstrap5.x的包。其次是页面的基本文件引入,css文件在头部引入,js文件在底部引入确保能读取到节点。如下:
<!doctype html>
<html lang="en">
<head>
<!-- 必须要引入 viewport的规则 确保实现正确的响应式布局行为 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- 方式 1: 直接引入打包后的文件 ,确保路径是正确 -->
<script src="dist/js/bootstrap.bundle.min.js" ></script>
<!-- O方式2: 分开引入文件,最终的效果和方式1一样 -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->
</body>
</html>
一、布局
断点(熟记)
断点即临界点。例如说手机端屏幕分辨率最大为576px,那么576px就是一个断点,一旦超过了576px,那么就判定设备不是手机。
响应式不是逐渐变化的,而是达到临界点瞬间变化的。倘若我们某个单元格占12个位置,设置了临界值sm(屏幕大小>=576px)时单元格6个位置。那么在576px之前,单元格默认占12个位置,一旦超过了576px,单元格就变为占用6个格子
bootstrap中定义了如下几个临界点:
断点 | 中缀 | 范围(px) |
Small(小,平板或者老笔记本) | sm | >=576 |
Medium(中,窄屏电脑) | md | >=768 |
Large(大,宽屏电脑) | lg | >=992 |
Extra large(超大,宽屏电脑) | xl | >=1200 |
Extra extra large(特大,高清电脑或广告设备) | xxl | >=1400 |
容器(了解一下)
容器是bootstrap最基本的布局元素。它的容器类型有以下三种:
- container, 默认容器,其宽度为在每个响应断点处之前,都是前一个断点的最大宽度。
- container-fluid, 流式容器,始终占浏览器宽度的100%
- container-{breakpoint}, 断点容器,在到达该断点前,其宽度始终占浏览器宽度的100%,在到达断电后,其宽度始终为断点最大宽度。其中断点值为以下几个值
{breakpoint}: 断点中缀。可用值: sm、md、lg、xl、xxl
栅格系统(重点来了)
首先,栅格系统需要包裹在容器内!<div class="container"></div>
栅格系统把容器横切为了一个或个行<div class="row"></div>
然后!每个行被划分为了12个位置,根据需要对单元格进行划分,比如说一个单元格要占3个位置,那么就是:<div class="col-6"></div>
,当然,我们也可以做响应式,小屏幕设备(sm)占6个位置,中设备上占3个位置那么:<div class="col-sm-6 col-md-3"></div>
具体上个代码容易理解一点
...
<style type="text/css">
div{
border:1px solid red;
}
</style>
<div class="container">
<div class="row">
<div class="col-1">1</div>
<div class="col-1">1</div>
<div class="col-1">1</div>
<div class="col-1">1</div>
<div class="col-1">1</div>
<div class="col-1">1</div>
<div class="col-1">1</div>
<div class="col-1">1</div>
<div class="col-1">1</div>
<div class="col-1">1</div>
<div class="col-1">1</div>
<div class="col-1">1</div>
</div>
<div class="row">
<div class="col-4">4</div>
<div class="col-4">4</div>
<!-- 没有的话规定占用多少则自动填充剩下部分 -->
<div class="col">4</div>
</div>
<!-- 单元格里可以嵌套行,行的宽度取决于父级单元格的大小 -->
<div class="row">
<div class="col-4">
<div class="row">
<div class="col-1">1</div>
<div class="col-2">2</div>
<div class="col-9">9</div>
</div>
</div>
</div>
</div>
...
效果如下,(栅格布局的高度是有内容撑起的)
间隙
这部分我没搞懂,待续~~
布局通用类
元素显示方式
语法: d-{value},d-{break-point}-{value}
value可用值 : none``inline``inline-block``block``grid``table``table-cell``table-row``flex``inline-flex
例子 :
// 默认隐藏,到中屏幕设备时显示
<div class="d-none d-md-block"></div>
边距
语法设定: {m|p}{r|l|b|t|x|y|}-{size} (例如:mr-4、m-4、mt-4…)
翻译一下:m:margin,p:padding,r:right ,l:left,t:top,b:bottom,x:(r+l),y:(t+b)
size范围设定:
值 | 范围 |
0 | 0 |
1 | $spacer * .25 |
2 | $spacer * .5 |
3 | $spacer |
4 | $spacer * .1.5 |
5 | $spacer * 3 |
例子:
// 左右外边距为3
<div class="mx-3"></div>
// 四边的外边距为3
<div class="m-3"></div>
显示和隐藏
带有.invisible类别的元素,属性将都在视觉上与屏幕阅读器的用户中隐藏。只是隐藏,还是会占着位置
语法: invisible|visible
例子:
// 隐藏
<div class="invisible">...</div>
// 隐藏反的反操作
<div class="visible">...</div>
堆叠层级(z-index)(这部分要求我们熟知,但不鼓励定制这些数值)
我们需要在我们的分层组件(工具提示、弹出框、导航栏、下拉菜单、模式)中使用这些标准集,以便我们可以在行为上保持合理一致。bootstra给这些组件定义了不同的层级:
$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-offcanvas: 1050;
$zindex-modal: 1060;
$zindex-popover: 1070;
$zindex-tooltip: 1080;
二、页面内容
reboot(了解即可)
当你引入bootstrap.css后发现页面发生了写微妙的变化, bootstrap为页面的将页面的基础元素做了一些优化,使得它更加更能为我们接受。
它重写了包括但不限于p、div、ul、li、input、form、section的标签样式
文字排版(Typography)重要
- 标题
h1-h6 例如 :<h1>最大标题</h1>
。除此之外,如果你想突出标题,可以考虑用display heading以获得更大、更细、稍具有风格化的标题样式
语法: display-{size}
size范围: 1-6 (数值越大字体越小)
例如 : <div class="display-1">display head</div>
- 前导主题
使用.lead
让一个段落脱颖而出。
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
- 内联文本元素【这里不做多演示】
-
.mark
高亮 -
.small
小字体 -
.text-decoration-underline
下划线 -
.text-decoration-line-through
删除线
- 来源引用【例如引用了鲁迅先生的话】
语法:用
例子:
<figure>
<blockquote class="blockquote">
我没有说过这话,不过确实有理
</blockquote>
<figcaption class="blockquote-footer">
鲁迅
</figcaption>
</figure>
效果:
- 列表
a. 去除列表项符号
语法: .list-unstyled
例子: <ul class=”list-unstyled“><li></li></ul>
b. 去除ul的列表项符号,并添加少许margin
例子:
<ul class="list-inline">
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
<li class="list-inline-item"></li>
</ul>
图片
通过 Bootstrap 所提供的.img-fluid
类让图片支持响应式布局。其原理是将max-width: 100%;
和 height: auto;
赋予图片,以便随父元素一起缩放
例子:
<img src="..." class="img-fluid" alt="...">`
除了它提供的 border-radius utilities 外,我们还可以使用.img-thumbnail
使图片的外观具有 1px 宽度的圆形边框。
<img src="..." class="img-thumbnail" alt="...">
表格(熟练)
由于<table>
横跨其他第三方套件广泛的使用,像是calendars和date pickers,因此可选择使用Bootstrap的表格。在任何<table>
加上基本类别 .table
,接着使用我们的可选修饰类别或是自定义样式进行扩展。
- 给表格定义颜色
语法: table-{style}
style:可用值:
primary、secondary、success、danger、warning、info、light、dark
例子: <table class="table table-primary"></table>
- 表格的条纹(一行深色一行浅色),可与style搭配食用
语法: table-striped
例子:<table class="table table-danger table striped"></table>
- 表格行悬停效果(hover)
语法: table-hover
例子: <table class="table table-hover"></table>
- 通过添加
.table-active
高亮显示表行或单元格
例子:
<table class="table">
<thead>
...
</thead>
<tbody>
<tr class="table-active">
...
</tr>
<tr>
...
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2" class="table-active">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
三、表单(重要)
bootstrap在表单上为我们分了以下几大类:控件类、下拉列表、范围选择。功能上:有输入组合、浮动标签、表单验证
控件类(包括:文本框、文本域、数字、文件、颜色、邮箱、手机号)
a. 基础类: form-control
b. 设置大小(大小是额外的类):form-control-{size}
size取值:lg、sm、{默认,即不加}
例如:<input class="form-control form-control-sm" />
其他属性: 禁用和只读文本
禁用使用原生的disabled
属性、只读使用readonly
只读输入看起来更轻(就像禁用的输入一样)。只读文本的话,除了加上只读属性还要添加form-control-plaintext
类名
例子:
<div class="mb-3">
<!-- 普通控件 -->
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<!-- 只读文本 -->
<input type="email" class="form-control-plaintext" readonly/>
</div>
<div class="mb-3">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
c. 文件:也是控件类
d. 颜色:
颜色和大小一样,是属于额外的类。颜色选择器type要改为color
基础类:form-control-color
例如:
<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
下拉列表
基础类: form-select
例子:
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
-设置大小
语法: form-select-{size code}。取值: sm、lg(设置大小是额外的类)
例子:如上例子
-禁用
标签加入disabled
属性即可
单选和多选
基类: form-check
先看案例:
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
Indeterminate checkbox
</label>
</div>
是否有点疑惑?前面的控件直接加类名即可,这里为什么需要多一层div呢?答案是:因为引入了开关组件(switch)【本质上还是多选\单选】。如下
<div class="form-check form-switch">
<input class="form-check-input" name="ckb[]" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
<div class="form-check form-switch">
<input class="form-check-input" name="ckb[]" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Checked switch
</label>
效果大概是这样的
-内联,假如说你希望单选个多选再同一行上(bootstrap默认改为了块级元素),那么:
通过将.form-check-inline
添加到.form-check
,将复选框或单选框在同一水平行上分组显示。
例如:
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
总结就是:需要一个外层的form-check
,input还需要添加form-check-input
类名,关联文本需要添加form-check-label
类名
范围选择(Range)
语法: 使用 <input type="range">
创建自定义控件。需要添加类名form-range
- 禁用: 一样是添加添加
disabled
属性 - 最大值、最小值和间距:
max
设置最大值,min
设置最小值,step
设置间距
需要说明的是间距
,间距就是每次滑动选择器的最小增量或减量。看一个完整案例:
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
效果如下:
输入组合
输入组合是把一个或活个表单元素组合到一块。每个表单组件都是有四边圆角的,组合后会消除掉除了多余圆角。
效果如下,示例中每行都是一个组合:
- 定义一个组合的语法类名为:
input-group
组合内直接放入表单元素即可。如果需要添加组合文本,需要添加组合文本类input-group-text
,上面示例中,灰色背景的字体即组合文本。
- 定义输入组合的大小,定义大小是额外的类名
语法:input-group-{size}
size取值: sm、lg
例子:<div class="input-group input-group-sm"></div>
看一个案例来消化一下:
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
效果如下:
浮动标签
在.form-floating
中包装一对<input class="form-control">
和<label>
元素,以启用带有Bootstrap文本表单字段的浮动标签。<input>
必须放在第一位!!!
可使用的地方:文本域、下拉框、布局中
例子:
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
表单的验证
验证类:
- 用于input提示:
is_valid
(正确提示)、is_invalid
(错误提示) - 用于输入框下边的提示框的:
invalid-feedback
、valid-feedback
。注意:必须跟在input之后
<form class="row g-3">
<div class="col-md-4">
<label for="validationServer01" class="form-label">First name</label>
<input type="text" class="form-control is-invalid" id="validationServer01" value="Mark" required="" />
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
invalid!
</div>
</div>
</form>
关于验证类,需要说明一下,文档里面距离挺多看的挺复杂的。bootstrap为我们提供的是验证的静态样式,动态的样式还需要添加一点js。
input提示类和文本提示类两者的同步关联是通过input的验证类来实现的。
流程是:判断input中的验证类是is-invalid
还是is-valid
。假如说使用了is-valid
,input边框变为绿色,还会追加成功的icon,在输入框之后有文本提示类valid-feedback
,的话,会显示出来;另一种情况,is-invalid
,input边框变为警告色,追加警告icon,在输入框之后有文本提示类invalid-feedback
的话,会将该该提示显示出来,然后隐藏掉valid-feedback
end:第一部分结束,后续还有第二部分:组件和统用类