Bootstrap学习笔记五
Bootstrap核心是一个CSS工具库，定义了大量的通用样式类，包含边距、边框、颜色、对齐方式、阴影、浮动，显示与隐藏等，无须用户编写大量CSS样式，可以使用这些样式快速的开发。
1. Bootstrap文本处理
a. 文本对齐
在bootstrap中定义了以下4个类，来设置文本的水平对齐方式。
.text-left：设置左对齐。
.text-center：设置居中对齐。
.text-right：设置右对齐。
.text-justify：设置两端对齐
案例代码：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-3">文本对齐</h3> |
|
|
<div class="text-left border">左对齐</div> |
|
|
<div class="text-center border">居中对齐</div> |
|
|
<div class="text-right border">右对齐</div> |
|
|
</body> |
|
|
</html> |
可以结合网格系统的响应断点来定义响应的对齐方式。说明如下:
.text-(sm|md|lg|xl)-left:在sm|md|lg|xl型设备上左对齐。
.text-(sm|md|lg|xl)-center:在sm|md|lg|xl型设备上居中对齐。
.text-(sm|md|lg|xl)-right:在sm|md|lg|xl型设备上右对齐。
b. 文本换行
u 如果元素中的文本超出了元素本身的宽度，默认情况下会自行换行。在bootstrap 4中可以使用.text-nowrap类来阻止文本换行。
u 在bootstrap中，对于较长的文本内容，如果超出了元素盒子的宽度，可以添加.text-truncate类，以省略号的形式表示超出的文本内容。
l 注意：添加.text-truncate类的元素，只有包含display: inline-block或display:block样式，才能实现效果。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
<body class="container"> |
|
|
<h3 class="mb-4">文本换行效果</h3> |
|
|
<div class="border border-primary mb-5" style="width: 15rem;"> |
|
|
独出前门望野田，月明荞麦花如雪。——白居易《村夜》 |
|
|
</div> |
|
|
<h4>阻止文本换行：</h4> |
|
|
<div class="text-nowrap border border-primary" style="width: 15rem;"> |
|
|
独出前门望野田，月明荞麦花如雪。——白居易《村夜》 |
|
|
</div> |
|
|
</body> |
|
|
</html> |
c. 文本转换
在含有字母的文本中，可以使用bootstrap中定义的三个类来转换字母大小写。说明如下：
.text-lowercase：将字母转换为小写。
.text-uppercase：将字母转换为大写。
.text-capitalize：将每个单词的第一个字母转换为大写。
注意：.text-capitalize只更改每个单词的第一个字母，不影响其他字母。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">字母转换大小写</h3> |
|
|
<p class="text-uppercase">转换成大写：hello world!</p> |
|
|
<p class="text-lowercase">转换成小写：HELLO WORLD!</p> |
|
|
<p class="text-capitalize">转换为每个单词的首字母大写：hello world!</p> |
|
|
</body> |
|
|
</html> |
d. 粗细和斜体
Bootstrap 中还定义了关于文本字体的样式类，可以快速改变文本字体的粗、细和倾斜样式。
说明如下：
.font-weight-light：设置较细的字体（相对于父元素）。
.font-weight-lighter：设置细的字体。
.font-weight-normal：设置正常粗细的字体。
.font-weight-bold：设置粗的字体。
.font-weight-bolder：设置较粗的字体（相对于父元素）。
.font-italic：设置斜体字。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">字体的粗细和斜体效果</h3> |
|
|
<p class="font-weight-light">独出前门望野田，月明荞麦花如雪。——白居易《村夜》（font-weight-light）</p> |
|
|
<p class="font-weight-lighter">独出前门望野田，月明荞麦花如雪。——白居易《村夜》（font-weight-lighter）</p> |
|
|
<p class="font-weight-normal">独出前门望野田，月明荞麦花如雪。——白居易《村夜》（font-weight-normal）</p> |
|
|
<p class="font-weight-bold">独出前门望野田，月明荞麦花如雪。——白居易《村夜》（font-weight-bold）</p> |
|
|
<p class="font-weight-bolder">独出前门望野田，月明荞麦花如雪。——白居易《村夜》（font-weight-bolder）</p> |
|
|
<p class="font-italic">独出前门望野田，月明荞麦花如雪。——白居易《村夜》（font-italic）</p> |
|
|
</body> |
|
|
</html> |
e. 其他文本类
以下三个样式类，在使用bootstrap 进行开发时可能会用到，说明如下：
.text-reset：颜色复位。重新设置文本或链接的颜色，继承来自父元素的颜色。
.text-monospace：字体类。字体包括SFMono-Regular，Menlo，Monaco，Consolas，"Liberation Mono"，"Courier New"，monospace。
.text-decoration-none：删除修饰线。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">复位颜色、添加字体类和删除修饰</h3> |
|
|
<div class="text-muted"> |
|
| <p><a href="#" class="text-reset">独出前门望野田，月明荞麦花如雪。——白居易《村夜》</a></p> | |
|
<p class="text-monospace">独出前门望野田，月明荞麦花如雪。——白居易《村夜》</p> |
|
| <p><a href="#" class="text-decoration-none">独出前门望野田，月明荞麦花如雪。——白居易《村夜》</a></p> | |
|
</div> |
|
|
</body> |
|
|
</html> |
2. Bootstrap颜色
在网页开发中，通过颜色来传达不同的意义和表达不同的功能。在Bootstrap中有一系列的颜色样式，包括文本颜色、链接文本颜色、背景颜色等与状态相关的样式。
a. 文本颜色
Bootstrap提供了一些有代表意义的文本颜色类，说明如下：
.text-primary：蓝色。
.text-secondary：灰色。
.text-success：浅绿色。
.text-danger：浅红色。
.text-warning：浅黄色。
.text-info：浅蓝色。
.text-light：浅灰色（白色背景上看不清楚）。
.text-dark：深灰色。
.text-muted：灰色。
.text-white：白色（白色背景上看不清楚）。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">文本颜色</h3> |
|
|
<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-muted">.text-muted——灰色</p> |
|
|
<p class="text-white bg-dark">.text-white——白色（白色背景上看不清楚）</p> |
|
|
</body> |
|
|
</html> |
b. 链接文本颜色
对于前面介绍的文本颜色类，在链接上也能正常使用。再配合bootstrap提供的悬浮和焦点样式（悬浮时颜色变暗），使链接文本更适合网页整体的颜色搭配。
注意：和设置文本颜色一样，不建议使用.text-white和.text-light这两个类，因为不显示样式，需要相应的背景色来辅助。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">链接的文本颜色</h3> |
|
| <p><a href="#" class="text-primary">.text-primary——蓝色链接</a></p> | |
| <p><a href="#" class="text-secondary">.text-secondary——灰色链接</a></p> | |
| <p><a href="#" class="text-success">.text-success——浅绿色链接</a></p> | |
| <p><a href="#" class="text-danger">.text-danger——浅红色链接</a></p> | |
| <p><a href="#" class="text-warning">.text-warning——浅黄色链接</a></p> | |
| <p><a href="#" class="text-info">.text-info——浅蓝色链接</a></p> | |
| <p><a href="#" class="text-light bg-dark">.text-light——浅灰色链接（添加了深灰色背景）</a></p> | |
| <p><a href="#" class="text-dark">.text-dark——深灰色链接</a></p> | |
| <p><a href="#" class="text-muted">.text-muted——灰色链接</a></p> | |
| <p><a href="#" class="text-white bg-dark">.text-white——白色链接（添加了深灰色背景）</a></p> | |
|
</body> |
|
|
</html> |
c. 背景颜色
Bootstrap 提供的背景颜色类有.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger、.bg-secondary、.bg-dark和.bg-light。背景颜色与文本类颜色一样，只是这里设置的是背景颜色。
注意：背景颜色不会设置文本的颜色，在开发中需要与文本颜色样式结合使用，常使用.text-white（设置为白色文本）类设置文本颜色。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">背景颜色</h3> |
|
|
<p class="bg-primary text-white">.bg-primary——蓝色背景</p> |
|
|
<p class="bg-secondary text-white">.bg-secondary——灰色背景</p> |
|
|
<p class="bg-success text-white">.bg-success——浅绿色背景</p> |
|
|
<p class="bg-danger text-white">.bg-danger——浅红色背景</p> |
|
|
<p class="bg-warning text-white">.bg-warning——浅黄色背景</p> |
|
|
<p class="bg-info text-white">.bg-info——浅蓝色背景</p> |
|
|
<p class="bg-light">.bg-light——浅灰色背景</p> |
|
|
<p class="bg-dark text-white">.bg-dark——深灰色背景</p> |
|
|
<p class="bg-white">.bg-white——白色背景</p> |
|
|
</body> |
|
|
</html> |
3. 边框
使用Bootstrap提供的边框样式类，可以快速添加和删除元素的边框，也可以指定添加或删除元素某一边的边框。
a. 添加边框
通过给元素添加.border类来添加边框。如果想指定添加某一边，可以从以下4个类中选择添加。
.border-top：添加元素上边框。
.border-right：添加元素右边框。
.border-bottom：添加元素下边框。
.border-left：添加元素左边框。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
<style> |
|
|
div{ |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
float: left; |
|
|
margin-left: 30px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">添加边框</h3> |
|
|
<div class="border border-primary bg-light">border</div> |
|
|
<div class="border-top border-primary bg-light">border-top</div> |
|
|
<div class="border-right border-primary bg-light">border-right</div> |
|
|
<div class="border-bottom border-primary bg-light">border-bottom</div> |
|
|
<div class="border-left border-primary bg-light">border-left</div> |
|
|
</body> |
|
|
</html> |
在元素有边框的情况下，需要删除边框，只需要在边框样式类后面添加-0.例如：.border-0类表示删除元素四边的边框。
b. 边框颜色
边框的颜色类是.border加上主题颜色组成，包括.border-primary、.border-secondary、.border-success、.border-danger、.border-warning、.border-info、.border-light、.border-dark和.border-white。
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
<style> |
|
|
div{ |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
float: left; |
|
|
margin: 15px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">边框颜色</h3> |
|
|
<div class="border border-primary">border-primary</div> |
|
|
<div class="border border-secondary">border-secondary</div> |
|
|
<div class="border border-success">border-success</div> |
|
|
<div class="border border-danger">border-danger</div> |
|
|
<div class="border border-warning">border-warning</div> |
|
|
<div class="border border-info">border-info</div> |
|
|
<div class="border border-light">border-light</div> |
|
|
<div class="border border-dark">border-dark</div> |
|
|
<div class="border border-white">border-white</div> |
|
|
</body> |
|
|
</html> |
c. 圆角边框
在bootstrap中给元素添加.rounded类来实现圆角边框效果，也可以指定某一边的圆角边框。
说明如下：
.rounded-top:设置元素左上和右下的圆角边框。
.rounded-bootom:设置元素左下和右下的圆角边框。
.rounded-left:设置元素左上和左下的圆角边框。
.rounded-right:设置元素右上和右下的圆角边框。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
<style> |
|
|
div{ |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
float: left; |
|
|
margin: 15px; |
|
|
padding-top: 20px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">圆角边框</h3> |
|
|
<div class="border border-primary rounded">rounded</div> |
|
|
<div class="border border-primary rounded-0">rounded-0</div> |
|
|
<div class="border border-primary rounded-top">rounded-top</div> |
|
|
<div class="border border-primary rounded-right">rounded-right</div> |
|
|
<div class="border border-primary rounded-bottom">rounded-bottom</div> |
|
|
<div class="border border-primary rounded-left">rounded-left</div> |
|
|
<div class="border border-primary rounded-circle">rounded-circle</div> |
|
|
<div class="border border-primary rounded-pill">rounded-pill</div> |
|
|
</body> |
|
|
</html> |
4. 宽度和高度
在Bootstrap中，宽度和高度的设置分两种。一种是相对于父元素宽度和高度来设置，以百分比来表示；另一种是相对于视口的宽度和高度来设置，单位为vw(视口宽度)和vh（视口高度）。宽度用w表示，高度用h表示。
a. 相对于父元素
相对于父元素的宽度和高度样式类是由_variables.scss文件中$sizes变量来控制的，默认值包括25%、50%、75%、100%和auto。用户可以调整这些值，定制不同的规格。
提示：.w-auto为宽度自适应类，.h-auto为高度自适应类。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-2">宽度</h3> |
|
|
<div class="bg-secondary text-white mb-4"> |
|
|
<div class="w-25 p-3 bg-success">w-25</div> |
|
|
<div class="w-50 p-3 bg-success">w-50</div> |
|
|
<div class="w-75 p-3 bg-success">w-75</div> |
|
|
<div class="w-100 p-3 bg-success">w-100</div> |
|
|
<div class="w-auto p-3 bg-success border-top">w-auto</div> |
|
|
</div> |
|
|
<h3 class="mb-2">高度</h3> |
|
|
<div class="bg-secondary text-white" style="height: 100px;"> |
|
|
<div class="h-25 d-inline-block bg-success text-center" style="width: 120px;">h-25</div> |
|
|
<div class="h-50 d-inline-block bg-success text-center" style="width: 120px;">h-50</div> |
|
|
<div class="h-75 d-inline-block bg-success text-center" style="width: 120px;">h-75</div> |
|
|
<div class="h-100 d-inline-block bg-success text-center" style="width: 120px;">h-100</div> |
|
|
<div class="h-auto d-inline-block bg-success text-center" style="width: 120px;">h-auto</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
使用.mw-100类设置最大宽度，.mh-100类设置最大高度。这两个类多用来设置图片。使图片不会因为尺寸过大而撑破元素盒子，影响页面布局
b. 相对于视口
vw和vh是CSS3中的新知识，是相对于视口（viewport）宽度和高度的单位。不论怎么调整视口的大小，视口的宽度都等于100vw，高度都等于100vh。也就是把视口平均分成100份，1vw等于视口宽度的1%，1vh等于视口高度的1%。
使用.min-vw-100类的元素，当元素的宽度大于视口的宽度时，按照该元素本身宽度来显示，出现水平滚动条；当宽度小于视口的宽度时，元素自动调整，元素的宽度等于视口的宽度。
使用.min-vh-100类的元素，当元素的高度大于视口的高度时，按照该元素本身高度来显示，出现竖向滚动条；当高度小于视口的高度时，元素自动调整，元素的高度等于视口的高度。
使用.vw-100类的元素，元素的宽度等于视口的宽度。
使用.vh-100类的元素，元素的高度等于视口的高度。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="text-white"> |
|
|
<h3 class="text-right text-dark mb-4">.min-vw-100类和.vw-100类的对比效果</h3> |
|
|
<h2 style="width: 1200px;" class="min-vw-100 bg-primary text-center">.min-vw-100</h2> |
|
|
<h2 style="width: 1200px;" class="vw-100 bg-success text-center">vw-100</h2> |
|
|
</body> |
|
|
</html> |
5. 边距
Bootstrap定义了许多关于边距的类，使用这些类可以快速设置网页的外观，使页面布局更加协调，还可以根据需要添加响应式的操作。
a. 边距的定义
在CSS中，通过margin（外边距）和padding（内边距）来设置元素的边距。在bootstrap 4中，用m来表示margin，用p来表示padding。
关于设置哪一边的边距，说明如下:
n t:用于设置margin-top或padding-top
n b:用于设置margin-bottom或padding-bottom
n l:用于设置margin-left或padding-left
n r:用于设置margin-right或padding-right
n x:用于设置左右两边的类*-left和*-right(*代表margin或padding)
n y:用于设置左右两边的类*-top和*-bottom(*代表margin或padding)
Bootstrap中，margin和padding定义了6个值，说明如下：
*-0：设置margin或padding为0
*-1：设置margin或padding为0.25rem
*-2：设置margin或padding为0.5rem
*-3：设置margin或padding为1rem
*-4：设置margin或padding为1.5rem
*-5：设置margin或padding为3rem
此外，.max-auto类，多用于固定宽度的块级元素的水平居中。还定义了负的margin样式，说明如下:
m-n1:设置margin为-0.25rem
m-n2:设置margin或padding为-0.5rem
m-n3:设置margin或padding为-1rem
m-n4:设置margin或padding为-1.5rem
m-n5:设置margin或padding为-3rem
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
<style> |
|
|
div{width: 200px;height: 50px;} |
|
|
</style> |
|
|
</head> |
|
|
<body class="container"> |
|
|
<!--mx-auto设置<h3>水平居中，mb-4设置<h3>底外边距为1.5rem--> |
|
|
<h3 class="mb-4 mx-auto border border-primary" style="width:150px">mx-auto</h3> |
|
|
<!--ml-4设置左外边距为1.5rem--> |
|
|
<div class="ml-4 border border-primary">ml-4</div> |
|
|
<div class="border border-primary">正常的盒子</div> |
|
|
<!--ml-n4设置左外边距为-1.5rem--> |
|
|
<div class="ml-n4 border border-primary">ml-n4</div> |
|
|
</body> |
|
|
</html> |
b. 响应式边距
边距样式可以结合网格断点来设置响应式的边距，在不同的断点范围显示不同的边距值。格式如下所示：
{m|p}{t|b|l|r|x|y}-{sm|md|lg|xl}-{0|1|2|3|4|5}
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">响应式的边距</h3> |
|
|
<div class="mx-auto mr-sm-2 border border-primary" style="width:150px">mx-auto mr-sm-2</div> |
|
|
</body> |
|
|
</html> |
6. 浮动：
使用Bootstrap中提供的float浮动通用样式，可以快速实现浮动，还可在任何网格断点上切换浮动。
a. 实现浮动：
在bootstrap 4中，可以使用以下两个类来实现左浮动和右浮动。
.float-left：元素向左浮动。
.float-right：元素向右浮动。
设置浮动后，为了不影响网页的整体布局，需要清除浮动。bootstrap 4中使用.clearfix类来清除浮动，只需把.clearfix添加到父元素中即可。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">浮动效果</h3> |
|
|
<div class="clearfix text-white border border-primary p-3"> |
|
|
<div class="float-left bg-primary">左浮动</div> |
|
|
<div class="float-right bg-primary">右浮动</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
b. 响应式浮动
可以在网格不相同的视口断点上来设置元素不同的浮动。例如，在小型设备（sm）上设置右浮动，可添加.float-sm-right类来实现；在中型设备（md）上设置左浮动，可添加.float-md-left类来实现。
.float-sm-right和.float-md-left称为响应式的浮动类。浮动类说明如下：
.float-sm-left:在小型设备上(sm)向左浮动
.float-sm-right:在小型设备上(sm)向右浮动
.float-md-left:在中型设备上(md)向左浮动
.float-md-right:在中型设备上(md)向右浮动
.float-lg-left:在大型设备上(lg)向左浮动
.float-lg-right:在大型设备上(lg)向右浮动
.float-xl-left:在超大型设备上(xl)向左浮动
.float-xl-right:在超大型设备上(xl)向右浮动
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h2 class="mb-4">响应式的浮动</h2> |
|
|
<div class="clearfix text-white"> |
|
|
<div class="bg-success w-50">box1</div> |
|
|
<div class="float-md-left bg-danger w-50">box2</div> |
|
|
<div class="float-md-right bg-primary w-50">box3</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
7. Display属性类
使用display属性类，可以快速、有效地切换组件的显示和隐藏状态。
a. 实现display属性
在CSS中隐藏和显示通常使用display属性来实现，在bootstrap 4中也是通过它来实现的。只是在bootstrap 4中用d来表示，表达方式如下：
.d-{sm、md、lg或xl}-{value}
value的取值如下所示：
none：隐藏元素。
inline：显示为内联元素，元素前后没有换行符。
inline-block：行内块元素。
block：显示为块级元素，此元素前后带有换行符。
table：元素会作为块级表格来显示，表格前后带有换行符。
table-cell：元素会作为一个表格单元格显示（类似<td>和<th>）。
table-row：此元素会作为一个表格行显示（类似<tr>）。
flex：将元素作为弹性伸缩盒显示。
inline-flex：将元素作为内联块级弹性伸缩盒显示。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h2>内联元素和块级元素的转换</h2> |
|
|
<p>div显示为内联元素（一行排列）</p> |
|
|
<div class="d-inline bg-primary text-white">div——d-inline</div> |
|
|
<div class="d-inline m-5 bg-danger text-white">div——d-inline</div> |
|
|
<p>span显示为块级元素（独占一行）</p> |
|
|
<span class="d-block bg-success text-white">span——d-block</span> |
|
|
<span class="d-block bg-dark text-white">span——d-block</span> |
|
|
</body> |
|
|
</html> |
b. 响应式的隐藏或显示元素
在实际开发中，可以根据需要自由组合显示和隐藏的类，经常使用的组合类如表所示：
|
组合类 |
说明 |
|
.d-none |
在所有的设备上都隐藏 |
|
.d-none .d-sm-block |
仅在超小型设备（xs）上隐藏 |
|
.d-sm-none .d-md-block |
仅在小型设备（sm）上隐藏 |
|
.d-md-none .d-lg-block |
仅在中型设备（md）上隐藏 |
|
.d-lg-none .d-xl-block |
仅在大型设备（lg）上隐藏 |
|
.d-xl-none |
仅在超大型屏幕（xl）上隐藏 |
|
.d-block |
在所有的设备上都显示 |
|
.d-block .d-sm-none |
仅在超小型设备（xs）上显示 |
|
.d-none .d-sm-block .d-md-none |
仅在超小型设备（sm）上显示 |
|
.d-none .d-md-block .d-lg-none |
仅在超小型设备（md）上显示 |
|
.d-none .d-lg-block .d-xl-none |
仅在超小型设备（lg）上显示 |
|
.d-none .d-xl-block |
仅在超小型设备（xl）上显示 |
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h2>响应式的显示和隐藏</h2> |
|
|
<div class="d-md-none bg-primary text-white">在xs、sm设备上显示（蓝色背景）</div> |
|
|
<div class="d-none d-md-block bg-danger text-white">在md、lg、xl设备上显示（浅红色背景）</div> |
|
|
</body> |
|
|
</html> |
8. 嵌入
在页面中通常使用<iframe>、<embed>、<video>、<object>标签来嵌入视频、图像、幻灯片等。在bootstrap 4中不仅可以使用这些标签，还添加了一些相关的样式类，以便在任何设备上能友好的扩展显示。
.embed-responsive:实现同比例的收缩。
.embed-responsive-16by9:定义16:9的长宽比例。还有.embed-responsive-21by9、.embed-responsive-3by4、.embed-responsive-1by1
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">嵌入图像</h3> |
|
|
<div class="embed-responsive embed-responsive-16by9"> |
|
| <iframe src="images/dog.jpg"></iframe> | |
|
</div> |
|
|
</body> |
|
|
</html> |
9. 内容溢出
在bootstrap 4中定义了以下两个类来处理内容溢出的情况：
.overflow-auto：在固定宽度和高度的元素上，如果内容溢出了元素，将生成一个垂直滚动条，通过滚动滚动条可以查看溢出的内容。
.overflow-hidden：在固定宽度和高度的元素上，如果内容溢出了元素，溢出的部分将被隐藏。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container p-3"> |
|
|
<h4>内容溢出：overflow-auto和overflow-hidden的效果</h4> |
|
|
<div class="overflow-auto border float-left" style="width: 200px;height: 100px;"> |
|
|
转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。——苏轼《水调歌头》 |
|
|
</div> |
|
|
<div class="overflow-hidden border float-right" style="width: 200px;height: 100px;"> |
|
|
转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。——苏轼《水调歌头》 |
|
|
</div> |
|
|
</body> |
|
|
</html> |
10. 定位
在bootstrap 4中，定位元素可以使用以下类来实现：
.position-static：无定位。
.position-relative：相对定位。
.position-absolute：绝对定位。
.position-fixed：固定定位。
.position-sticky：粘性定位。
.sticky-top类适用于一些特殊的场景，例如头部导航栏固定。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body> |
|
|
<div class="container text-white"> |
|
|
<nav class="sticky-top bg-primary p-5 mb-5">头部导航栏固定</nav> |
|
|
<div class=" bg-secondary p-3"> |
|
|
<p>内容栏1</p> |
|
|
<p>内容栏2</p> |
|
|
<p>内容栏3</p> |
|
|
<p>内容栏4</p> |
|
|
<p>内容栏5</p> |
|
|
<p>内容栏6</p> |
|
|
<p>内容栏7</p> |
|
|
<p>内容栏8</p> |
|
|
<p>内容栏9</p> |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
11. 阴影
在bootstrap 4定义了4个关于阴影的类，可以用来添加阴影或去除阴影。包括.shadow-none和三个默认大小的类，CSS样式代码如下所示：
.shadow-none {box-shadow: none !important;}
.shadow-sm {box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;}
.shadow {box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;}
.shadow-lg {box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;}
说明如下：
.shadow-none：去除阴影。
.shadow-sm：设置很小的阴影。
.shadow：设置正常的阴影。
.shadow-lg：设置更大的阴影。
代码样例：
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">阴影效果</h3> |
|
|
<div class="shadow-sm p-3 mb-5">小的阴影</div> |
|
|
<div class="shadow p-3 mb-5">正常的阴影</div> |
|
|
<div class="shadow-lg p-3 mb-5">大的阴影</div> |
|
|
</body> |
|
|
</html> |
12. 关闭图标
在bootstrap4中使用通用的.close类定义关闭图标。可以使用关闭图表来关闭模态框提示和alert提示组件的内容。
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> |
|
|
<title>Title</title> |
|
| <link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css"> | |
| <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css"> | |
| <script src="jquery-3.3.1.slim.js"></script> | |
| <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script> | |
| <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script> | |
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">关闭图标</h3> |
|
|
<button type="button" class="close" aria-label="Close"> |
|
|
<span aria-hidden="true">×</span> |
|
|
</button> |
|
|
</body> |
|
|
</html> |
文章评论