Bootstrap5快速入门

创建2022-02-13更新2022-02-18阅读时间24m

快速构建响应式页面，可以随窗口自行变换网格！
学习链接

完成页面
01

预备知识

lorem
快速填充字符
lorem + tab
lorem3 // 三个单词
lorem*3 // 三段

！
ide快速构建基础模板

.test
.test>a#test

1
2
<div class="test"></div>
<div class="test"><a href="" id="test"></a></div>

为什么要有框架 - 统一设计实现。
更整体，更高效！

底层类 - 只有一种样式

边距系统 / 颜色系统 - 预设值

&copy; - 版权符号

学习链接

Bootstrap

常用属性

codepen测试！

布局:

fixed-top - 固定位置

container - 边界 - 中心布局

which sets a max-width at each responsive breakpoint

d-flex - flex布局
d-none - 消失
d-md-block - md - 显示 - 和消失没有顺序，先写那个都行
d-md-flex

row - 包含的flex，可以直接用flex的属性
g-4
col
col-md - md大小，启动栅格系统，否则流式布局

p-5 - padding
my-4 - y 轴 margin-top + margin-bottom
mt-2
w-50 - width 50%
mb-3
ms-auto - margin start = margin left

collapse

组件：

card
accordion - 手风琴组件
list-group - 联系我们
btn

  • btn-light
  • btn-dark
  • btn-primary
  • btn-lg

文字：

text-center - 文字 - 居中
text-light - 文字 - 白色
text-warning - 文字 - 橘黄色
text-sm-start - sm - 左对齐
fs-4 - font-size - 数字越小尺寸越大。1 - 7

lead - 自带

Make a paragraph stand out by adding .lead.

图标：

<span class="navbar-toggler-icon"></span>

图片：

img-fluid - 这样就不会超出div了
rounded-circle - 圆形

事件：

data-bs-toggle=’collapse’ // 以什么类型触发
data-bs-target=’#navmenu’ // 事件触发目标

响应式：

nav-expend-lg - 如果有collapse，屏幕到lg显示出来。

d-md-flex justify-content-between align-items-center // 这里都是 -

d-md-block d-none // 小于md隐藏，大于md出现

text-center text-sm-start // 小于sm 居中！ 默认靠左

col-md - 大于md才生效 - 水平/垂直
row g-4 - 每行的间距 - gap

01

注：
不支持在w-50中间设置md
不支持在md尺寸下，宽度为50%，需要自己设置

实现细节

导航栏

class=”container” - 左右边界容器

navbar-expand-lg - lg尺寸下，显示collapse navbar-collapse

fixed-top - 固定头部，下面的组件会往上走 - 解决方案

1
2
3
4
5
body::before{
	display: block;
	content: '';
	height: 56px;
}

data-bs-toggle=’collapse’ data-bs-target=’#navmenu’ - 点击事件 - 处理collapse
id=’navmenu’

ms-auto - margin-left:auto代替float:right实现右对齐 - 左侧占据剩余空间！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- navbar-expand-lg - 到lg显示collapse -->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
	<div class="container">
		<a href="#" class="navbar-brand">开始</a>
		
		<button class="navbar-toggler" type="button" data-bs-toggle='collapse' data-bs-target='#navmenu'><span
				class="navbar-toggler-icon"></span>
		</button>
				
		<div class="collapse navbar-collapse" id='navmenu'>
			<!-- ms-auto = margin left -->
			<ul class="navbar-nav ms-auto ">
				<li class="nav-item">
					<div class="nav-link">test</div>
				</li>
				<li class="nav-item">
					<div class="nav-link">test</div>
				</li>
				<li class="nav-item">
					<div class="nav-link">test</div>
				</li>
			</ul>
		</div>
	</div>
</nav>

02

<section class="p-5 bg-dark text-light text-center text-sm-start">
p-5 // padding
text-sm-start // 超过sm尺寸，左对齐

d-flex // display flex

my-4 // y 轴 margin-top + margin-bottom

w-50 // 宽度50%

d-md-block d-none // 超过md尺寸显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 小于sm 居中！ 默认靠左-->
<section class="p-5 bg-dark text-light text-center text-sm-start">
	<!-- 包裹 -->
	<div class="container">
		<!-- flex布局 -->
		<div class="d-flex">
			<!-- 左边 -->
			<div>
				<h1>博客<span class="text-warning">天天都要写！</span></h1>
				<!-- y 轴 margin-top + margin-bottom -->
				<p class="my-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem fugiat aperiam
					velit cumque nam iste sint dignissimos tenetur dolorum officia nobis dolores in quo amet
					accusantium explicabo porro. Qui dignissimos!</p>
				<button class="btn btn-primary btn-lg">开始</button>
			</div
			<!-- 右边 --
			<img src="./img/showcase.svg" alt="" class="w-50  d-md-block d-none">
		</div>
	</div>
</section>

03

mb-3 // margin-bottom

d-md-flex justify-content-between align-item-center // 这里用 -

news-input // 自建的类 - 超过md尺寸，显示50%

1
2
3
4
5
@media (min-width: 768px) {
	.news-input {
		width: 50%;
	}
}
1
2
3
4
5
6
7
8
9
10
11
<section class="p-5 bg-primary text-light">
	<div class="container">
		<div class="d-md-flex justify-content-between align-item-center">
			<h3 class="mb-3">现在开始注册账号开始编程之旅</h3>
			<div class="input-group news-input">
				<input type="text" class="form-control" placeholder="请输入您的邮箱">
				<button class="btn btn-dark btn-lg">注册</button>
			</div>
		</div>
	</div>
</section>

04

row g-4 // gap
col-md // 超过md尺寸，使用col，否则，流式布局

mt-2 // margin-top

card bg-dark text-light // 卡片组件
card-body text-center
card-title
card-text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<section class="p-5">
	<div class="container">
		<!-- 栅格系统 -->
		<div class="row g-4">
			<div class="col-md ">
				<div class="card bg-dark text-light">
					<div class="card-body  text-center">
						<div class="card-title">前端</div>
						<div class="card-text">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime nesciunt architecto
							inventore voluptates perspiciatis
						</div>
						<a href="#" class="btn btn-primary mt-2">学习</a>
					</div>
				</div>
			</div>
			<div class="col-md">
				<div class="card bg-secondary text-light">
					<div class="card-body  text-center">
						<div class="card-title ">前端</div>
						<div class="card-text">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime nesciunt architecto
							inventore voluptates perspiciatis
						</div>
						<a href="#" class="btn btn-dark mt-2">学习</a>
					</div>
				</div>
			</div>
			<div class="col-md">
				<div class="card bg-dark text-light">
					<div class="card-body text-center">
						<div class="card-title ">前端</div>
						<div class="card-text">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime nesciunt architecto
							inventore voluptates perspiciatis
						</div>
						<a href="#" class="btn btn-primary mt-2">学习</a>
					</div>
				</div>
			</div>
		</div>
</section>

05

accordion // 手风琴组件

accordion-collapse collapse show // 默认展开 - show

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<section class="p-5">
	<div class="container">
		<h2 class="text-center">常见问题</h2>
		<div class="accordion accordion-flush" id="accordionFlushExample">
			<div class="accordion-item">
				<h2 class="accordion-header" id="flush-headingOne">
					<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
						data-bs-target="#flush-collapseOne" aria-expanded="false"
						aria-controls="flush-collapseOne">
						Accordion Item #1
					</button>
				</h2>
				<div id="flush-collapseOne" class="accordion-collapse collapse"
					aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
					<div class="accordion-body">Placeholder content for this accordion, which is intended to
						demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion
						body.</div>
				</div>
			</div>
			<div class="accordion-item">
				<h2 class="accordion-header" id="flush-headingTwo">
					<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
						data-bs-target="#flush-collapseTwo" aria-expanded="false"
						aria-controls="flush-collapseTwo">
						Accordion Item #2
					</button>
				</h2>
				<div id="flush-collapseTwo" class="accordion-collapse collapse"
					aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
					<div class="accordion-body">Placeholder content for this accordion, which is intended to
						demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion
						body. Let's imagine this being filled with some actual content.</div>
				</div>
			</div>
			<div class="accordion-item">
				<h2 class="accordion-header" id="flush-headingThree">
		   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
						data-bs-target="#flush-collapseThree" aria-expanded="false"
						aria-controls="flush-collapseThree">
						Accordion Item #3
					</button>
				</h2>
				<!-- 加个show 默认展开 -->
				<div id="flush-collapseThree" class="accordion-collapse collapse show"
					aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
					<div class="accordion-body">Placeholder content for this accordion, which is intended to
						demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion
						body. Nothing more exciting happening here in terms of content, but just filling up the
						space to make it look, at least at first glance, a bit more representative of how this
						would look in a real-world application.</div>
				</div>
			</div>
		</div>
	</div>
</section>

06

row g-4 // gap

col-md-6 col-lg-3 // 一共分成12分，md占6分 - 一半，lg占3分，四分之一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- 06 -->
<section class="p-5 bg-primary">
	<div class="container">
		<h2 class="text-center text-light">讲师</h2>
		<p class="mb-5 lead text-center text-white">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		</p
		<div class="row g-4">
			<!-- 一共分成12分，md占6分 - 一半，lg占3分，四分之一 -->
			<div class="col-md-6 col-lg-3">
				<div class="card bg-light">
					<div class="card-body text-center">
						<img src="img/01-man.jpeg" alt="01" class="mb-3 rounded-circle">
						<h3 class="card-title">张三</h3>
						<p class="card-text">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus labore
							perferendis delectus eos quidem nisi esse laudantium nemo cumque asperiores facilis
							maxime beatae est blanditiis fuga sequi magni similique natus.
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>


07

list-group list-group-flush // list-group 组件

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 07 -->
<section class="p-5">
	<div class="container">
		<h2 class="text-center">联系我们</h2
		<ul class="list-group list-group-flush">
			<li class="list-group-item">电话：120**********</li>
			<li class="list-group-item">邮箱：163.@163.com</li>
			<li class="list-group-item">地址：天津******</li>
		</ul>
	</div>
</section>

08

Copyright &copy; 2022-2-2 // copyright

1
2
3
4
5
6
<!-- 08 -->
<footer class="p-5 bg-dark text-center text-light">
	<div class="container">
		<p class="lead">Copyright &copy; 2022-2-2</p>
	</div>
</footer>

总结

构建页面，先有内容 - 图片 / 文字（lorem）

然后考虑尺寸 - sm / md / lg

尺寸的修改是做加法，在什么尺寸下，处理成什么样子。先从小的开始，在到大的尺寸。