前端学习之Bootstrap


阅读数: 次   

第一章 Bootstrap 概述

Bootstrap 是一个 HTML、CSS 和 JS 框架，基于jQuery框架。

用于开发响应式布局、移动设备优先的 WEB 项目。

特色： 1.响应式布局 2.基于flex的栅格系统 3.丰富的组件和工具方法 4.常见交互使用

官网：https://getbootstrap.com/

在<head></head>标签中引入bootstrap.css文件：

1
<link rel="stylesheet" href="./bootstrap-4.5.0/dist/css/bootstrap.css" />

0x01.CSS文件

Bootstrap包含一些选项，可以包含部分或全部已编译的CSS。

CSS文件 布局 内容 组件 实用工具
bootstrap.css bootstrap.min.css 已包含 已包含 已包含 已包含
bootstrap-grid.css bootstrap-grid.min.css 唯一的网格系统 不包含 不包含 仅Flex实用程序
bootstrap-reboot.css bootstrap-reboot.min.css 不包含 仅重启 不包含 不包含

0x02.JS文件

JS文件 Popper jQuery
bootstrap.bundle.js bootstrap.bundle.min.js 已包含 不包含
bootstrap.js bootstrap.min.js 不包含 不包含

第二章 布局

0x01.container

容器是Bootstrap中最基本的布局元素，在使用我们的默认网格系统时，容器是必需的。容器用于在其中容纳，填充和（有时）使内容居中。尽管可以嵌套容器，但是大多数布局不需要嵌套容器。

Bootstrap带有三个不同的容器：

  • .container，它max-width在每个响应断点处设置一个
  • .container-fluid，这是width: 100%所有断点
  • .container-{breakpoint}，width: 100%直到指定的断点为止

下表说明了每个容器max-width与原始容器.container以及.container-fluid每个断点之间的比较。

特小 <576px 小 ≥576px 中 ≥768px 大 ≥992px 特大 ≥1200px
.container 100％ 540px 720px 960px 1140px
.container-sm 100％ 540px 720px 960px 1140px
.container-md 100％ 100％ 720px 960px 1140px
.container-lg 100％ 100％ 100％ 960px 1140px
.container-xl 100％ 100％ 100％ 100％ 1140px
.container-fluid 100％ 100％ 100％ 100％ 100％

我们默认的.container类是响应式，固定宽度的容器，这意味着它max-width在每个断点处都会发生变化。

1
2
3
<div class="container">
  <!-- Content here -->
</div>

使用.container-fluid实现通栏，跨越视口的整个宽度。

1
2
3
<div class="container-fluid">
  ...
</div>

响应容器是Bootstrap v4.4中的新增功能。它们允许您指定100％宽的类，直到达到指定的断点为止，此后，我们max-width对每个较高的断点应用。例如，.container-sm100％宽开始直到sm到达断点，在那里将扩大同md，lg和xl。

1
2
3
4
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

0x02.响应节点（断点）

Bootstrap主要在源Sass文件中为布局，栅格系统和组件使用以下媒体查询范围（或断点）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

所有媒体查询都可以通过Sass mixins获得：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

媒体查询可能跨越多个断点宽度：

1
2
3
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

bootstrap.css中CSS代码：

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
56
57
58
59
60
61
62
63
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

0x03.Z-index

一些Bootstrap组件利用z-index的CSS属性，该CSS属性通过提供第三个轴来安排内容来帮助控制布局。Bootstrap中使用默认的z-index比例尺旨在适当地分层导航，工具提示和弹出窗口，模态等。

1
2
3
4
5
6
7
$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

为了处理重叠的组件（例如，按钮和输入组的输入）内的边界中，使用低单数位z-index的值1，2和3用于默认，悬停状态和活动状态。在悬停/焦点/活动上，我们将具有较高z-index值的特定元素置于最前列，以显示其在同级元素上的边界。

第三章 栅格系统

借助十二列的栅格系统，五个默认响应层，Sass变量和mixin以及数十个预定义类，使用Flexbox网格构建各种形状和大小的布局。

0x01.平分三列

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>
  • 容器提供了一种使您的网站内容居中和水平填充的方法。使用.container了应答像素宽度或.container-fluid用于width: 100%在所有视窗和器件尺寸。
  • 行是列的包装。每列都有水平padding（称为装订线），用于控制它们之间的间距。padding然后在具有负边距的行上抵消此错误。这样，列中的所有内容在视觉上都在左侧向下对齐。
  • 在网格布局中，必须将内容放置在列中，并且只有列可以是行的直接子代。
  • 多亏了flexbox，没有指定的网格列width将自动按等宽列布局。
  • 列类表示每行可能使用的12列中的列数。因此，如果您要横穿三个等宽的列，则可以使用.col-4。
  • 列widths以百分比设置，因此相对于其父元素，它们始终是可变的且大小合适。
  • 列具有水平padding创建单独的列之间的排水沟，然而，你可以删除margin从行，padding从列与.no-gutters上.row。
  • 为了使网格响应，有五个网格断点，每个响应断点一个：所有断点（超小），小，中，大和特大。
  • 网格断点基于最小宽度的媒体查询，这意味着它们适用于该断点及其上方的所有断点（例如，.col-sm-4适用于小型，中型，大型和超大型设备，但不适用于第一个xs断点）。
  • 可以使用预定义的网格类（如.col-4）或Sass mixins获得更多的语义标记。

*注意flexbox的局限性和错误，例如:无法将某些HTML元素用作flex容器。

本节示例：

代码：

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title></title>
		<link rel="stylesheet" href="./bootstrap-4.5.0/dist/css/bootstrap.css" />
		<style>
			[class*=col]{
				border: 1px solid #096;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col">aaaaa</div>
				<div class="col">bbbbb</div>
				<div class="col">ccccc</div>
			</div>
			<div class="row">
				<div class="col-sm">ddddd</div>
				<div class="col-sm">eeeee</div>
				<div class="col-sm">fffff</div>
			</div>
		</div>
	</body>
</html>

0x02.Grid options

Bootstrap使用ems或rems来定义大多数大小，而px s 则用于网格断点和容器宽度。这是因为视口宽度以像素为单位，并且不会随字体大小而变化。

Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

0x03.自动布局列 响应式

利用特定于断点的列类来轻松调整列大小，而无需使用显式编号的类。如：.col-sm-6。

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css"/>
		<style>
			.container{
				border: 1px solid red;
				height: 500px;
			}
			[class*="col-"]{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-sm-6 col-sm-offset-1">
					<p>row1 left</p>
				</div>
				<div class="col-sm-4 col-sm-offset-1">
					<p>row1 right</p>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-3">
					<p>row2 left</p>
				</div>
				<div class="col-sm-8 col-sm-offset-1">
					<p>row2 right</p>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-7">
					<p>row3 left</p>
				</div>
				<div class="col-sm-4 col-sm-offset-1">
					<p>row3 right</p>
				</div>
			</div>
		</div>
	</body>
</html>

0x04.Alignment

使用flexbox对齐工具可垂直和水平对齐列。当flex容器具有min-height如下所示的内容时，Internet Explorer 10-11不支持flex项的垂直对齐。

垂直对齐:

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
<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

水平对齐:

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
<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

0x05.重新排序

使用.order-类来控制内容的视觉顺序。

这些类是响应式的，因此您可以order按断点设置（例如.order-1.order-md-2）。包括支持1通过12所有五格层。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

还有响应式.order-first和.order-last类分别order通过应用order: -1和order: 13（order: $columns + 1）来更改元素的。这些类也可以.order-*根据需要与编号的类混合。

抵消列：可以通过两种方式偏移网格列：响应.offset-网格类和边距实用程序。

网格类的大小可匹配列，而边距对于偏移宽度可变的快速布局更有用。

使用.offset-md-*类将列向右移动。这些类逐*列增加一列的左边距。例如，.offset-md-4移至.col-md-4四列。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

随着v4中向flexbox的迁移，可以使用margin实用程序，例如，.mr-auto将同级列彼此拉开。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

第四章 content

0x01.重置默认样式

单个文件中特定于元素的CSS更改的集合，使用kickstart Bootstrap提供一个优雅，一致且简单的基准。

重置默认样式建立在Normalize的基础上，仅使用元素选择器即可为许多HTML元素提供一些样式。其他样式仅对类进行。例如，重置了一些<table>样式以简化基线，然后提供.table，.table-bordered等等。

0x02.预格式化文字

<pre> 重置该元素以删除其元素并将其 margin-top 使用 rem 单位 margin-bottom。

1
2
3
.example-element { 
  margin-bottom：1rem; 
}

0x03.表格 表单

表格已针对样式 <caption> s 进行了略微调整，并折叠了边框，并确保整体一致 text-align。为边框，填充其他的变化，更配备了.table 类。

表单重新引导了各种表单元素，以简化基本样式。以下是一些最值得注意的更改：

  • <fieldset>s没有边界，填充或边距，因此可以轻松用作单个输入或输入组的包装。
  • <legend>与字段集一样，s也已重新设置样式以显示为各种标题。
  • <label>设置为display: inline-block允许margin应用。
  • <input> s，<select> s，<textarea>s和<button> s 主要由Normalize解决，但是Reboot也删除了它们margin和set line-height: inherit。
  • <textarea>将s修改为只能垂直调整大小，因为水平调整大小通常会“破坏”页面布局。
  • <button>s和<input>button元素具有cursor: pointer [ :not(:disabled) ]。

第五章 组件

0x01.Alerts

适用于任何长度的文本，以及可选的关闭按钮。为了获得适当的样式，请使用八个必需的上下文类之一（例如.alert-success）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="alert alert-primary" role="alert">
  一个简单的主要警报—检查一下!
</div>
<div class="alert alert-secondary" role="alert">
  一个简单的辅助警报—检查一下!
</div>
<div class="alert alert-success" role="alert">
  一个简单的成功警报—检查一下!
</div>
<div class="alert alert-danger" role="alert">
  一个简单的危险警报—检查一下!
</div>
<div class="alert alert-warning" role="alert">
  一个简单的警告警报—检查一下!
</div>
<div class="alert alert-info" role="alert">
  一个简单的信息警报—检查一下!
</div>
<div class="alert alert-light" role="alert">
  一个简单的灯光警报—检查一下!
</div>
<div class="alert alert-dark" role="alert">
  一个简单的黑暗警报—检查一下!
</div>

使用.alert-link实用程序类可在任何警报中快速提供匹配的彩色链接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

0x02.徽章

徽章通过使用相对字体大小和 em 单位来缩放以匹配直接父元素的大小。

1
2
3
4
5
6
<h1>标题示例 <span class="badge badge-secondary">新</span></h1>
<h2>标题示例 <span class="badge badge-secondary">新</span></h2>
<h3>标题示例 <span class="badge badge-secondary">新</span></h3>
<h4>标题示例 <span class="badge badge-secondary">新</span></h4>
<h5>标题示例 <span class="badge badge-secondary">新</span></h5>
<h6>标题示例 <span class="badge badge-secondary">新</span></h6>

徽章可以用作链接或按钮的一部分，以提供计数器。

1
2
3
<button type="button" class="btn btn-primary">
  通知事项 <span class="badge badge-light">4</span>
</button>

注意：根据使用方式的不同，徽章可能会使屏幕阅读器和类似辅助技术的用户感到困惑。虽然徽章的样式提供了有关其用途的视觉提示，但将仅向这些用户显示徽章的内容。根据具体情况，这些标记在句子，链接或按钮的末尾可能看起来像是随机附加的单词或数字。除非上下文清楚（如“通知”示例一样，理解为“ 4”是通知的数量），否则需要考虑在视觉上隐藏的附加文本中包含附加上下文。

可以添加下面提到的任何修饰符类，以更改徽章的外观。

1
2
3
4
5
6
7
8
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

使用.badge-pill修饰符类使徽章更圆（具有更大border-radius和更多的水平padding）。

1
2
3
4
5
6
7
8
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

.badge-*在<a>元素上使用上下文类可以快速提供具有悬停和焦点状态的可操作徽章。

1
2
3
4
5
6
7
8
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

0x03.面包屑

指示当前页面在导航层次结构中的位置，该层次结构会通过CSS自动添加分隔符。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

分隔符通过::before和自动添加到CSS中content。可以通过更改来更改它们$breadcrumb-divider。需要使用quote函数生成字符串周围的引号，因此，如果要 > 用作分隔符，可以使用以下命令：

1
$breadcrumb-divider: quote(">");

可以通过设置$breadcrumb-divider为来删除分隔符none：

1
$breadcrumb-divider: none;

由于面包屑提供了导航，因此最好添加一个有意义的标签，例如aria-label="breadcrumb"描述<nav>元素中提供的导航的类型，并在aria-current="page"集合的最后一项上应用，以指示它表示当前页面。

0x04.按钮 按钮组

将Bootstrap的自定义按钮样式用于表单，对话框等中的操作，并支持多种尺寸，状态等。

Bootstrap包括几种预定义的按钮样式，每种样式都有其自己的语义目的，并添加了一些其他控件，以进行更多控制。

1
2
3
4
5
6
7
8
9
10
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

通过按钮组将一系列按钮分组在一起，并使用JavaScript对它们进行超级处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

第六章 Utilities

0x01.边框

1
2
3
4
5
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

1
2
3
4
5
6
7
8
9
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

0x02.Clearfix

通过添加clearfix实用程序，可以快速轻松地清除容器中的浮动内容。

float通过添加.clearfix 到父元素轻松清除。也可以用作mixin。

1
<div class="clearfix">...</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
// Mixin itself
@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

// Usage as a mixin
.element {
  @include clearfix;
}

以下示例显示了如何使用clearfix。如果没有clearfix，则环绕div不会在按钮周围散开，这会导致布局损坏。

1
2
3
4
<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-left">示例按钮向左浮动</button>
  <button type="button" class="btn btn-secondary float-right">示例按钮向右浮动</button>
</div>

0x03.关闭按钮

1
2
3
<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

0x04.颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

注意：.text-white和.text-muted类除了下划线外没有其他链接样式。

1
2
3
4
5
6
7
8
9
10
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

0x05.显示

隐藏元素：

为了更快地进行移动友好型开发，可使用响应式显示类来按设备显示和隐藏元素。避免为同一网站创建完全不同的版本，而应针对每个屏幕尺寸相应地隐藏元素。

要隐藏元素，只需对任何响应屏幕变化使用.d-none该类或这些类之一即可.d-{sm,md,lg,xl}-none。

要仅在给定的屏幕尺寸间隔上显示元素，可以将一个.d-*-none类与一个.d-*-*类结合使用，例如，.d-none .d-md-block .d-xl-none将隐藏所有屏幕尺寸的元素，但在中型和大型设备上除外。

屏幕尺寸 类
隐藏在所有 .d-none
仅在xs上隐藏 .d-none .d-sm-block
仅在sm上隐藏 .d-sm-none .d-md-block
仅在md上隐藏 .d-md-none .d-lg-block
仅在LG隐藏 .d-lg-none .d-xl-block
仅在xl上隐藏 .d-xl-none
所有人可见 .d-block
仅在xs上可见 .d-block .d-sm-none
仅在sm上可见 .d-none .d-sm-block .d-md-none
仅在md上可见 .d-none .d-md-block .d-lg-none
仅在LG上可见 .d-none .d-lg-block .d-xl-none
仅在xl上可见 .d-none .d-xl-block

0x06.定位

使用这些速记实用程序可以快速配置元素的位置。

1
2
3
4
5
6
7
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>

0x07.阴影

使用box-shadow实用程序向元素添加或删除阴影。

虽然默认情况下在Bootstrap中禁用了组件的阴影，并且可以通过启用$enable-shadows阴影，但也可以使用我们的box-shadow实用程序类快速添加或删除阴影。包括对.shadow-none和三种默认大小（具有匹配的关联变量）的支持。

1
2
3
4
<div class="shadow-none p-3 mb-5 bg-light rounded">没有阴影</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">小阴影</div>
<div class="shadow p-3 mb-5 bg-white rounded">常规阴影</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">较大的阴影</div>

##参考 Bootstrap官方文档 菜鸟教程 B站视频BV1r64y1T7J8 UP @千锋教育

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码
载入天数...载入时分秒...
本站总访问量次 |

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家