Bootstrap学习笔记五

2022年7月26日 322点热度 0人点赞 0条评论
图片
点击上面蓝色字关注我们

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">&times;</span>

</button>

</body>

</html>

图片

62170Bootstrap学习笔记五

这个人很懒,什么都没留下

文章评论