Bootstrap study notes five
The core of Bootstrap is a CSS tool library, which defines a large number of general style classes, including margins, borders, colors, alignments, shadows, floats, display and hide, etc. It is not necessary for users to write a lot of CSS styles, and these styles can be used for rapid development .
1. Bootstrap text processing
a. Text alignment
The following 4 classes are defined in bootstrap to set the horizontal alignment of text.
† .text-left: Set left alignment.
† .text-center: Sets center alignment.
† .text-right: Sets right alignment.
† .text-justify: set justify
Case code:
|
<!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 "> text alignment</h3> |
|
|
<div class =" text-left border "> align left</div> |
|
|
<div class =" text-center border "> align center</div> |
|
|
<div class =" text-right border "> align right</div> |
|
|
</body> |
|
|
</html> |
Responsive alignment can be defined in conjunction with the grid system's responsive breakpoints. described as follows:
.text-(sm|md|lg|xl)-left: Left-align on sm|md|lg|xl type devices.
.text-(sm|md|lg|xl)-center: Center alignment on sm|md|lg|xl type devices.
.text-(sm|md|lg|xl)-right: Right-align on sm|md|lg|xl type devices.
b. Text wrapping
u If the text in the element exceeds the width of the element itself, it will wrap itself by default. In bootstrap 4 you can use the .text-nowrap class to prevent text wrapping.
u In bootstrap, for longer text content, if it exceeds the width of the element box, you can add the .text-truncate class to represent the excess text content in the form of ellipses.
l Note: Adding elements of the .text-truncate class can only achieve the effect if it contains the display: inline-block or display:block styles.
Code sample:
|
<!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 "> Text wrapping effect</h3> |
|
|
<div class =" border border-primary mb-5 " style =" width: 15rem; "> |
|
|
Going out of the front door alone and looking at Noda, the moonlight buckwheat flowers are like snow. ——Bai Juyi, "Village Night" |
|
|
</div> |
|
|
<h4> Prevent text wrapping:</h4> |
|
|
<div class =" text-nowrap border border-primary " style =" width: 15rem; "> |
|
|
Going out of the front door alone and looking at Noda, the moonlight buckwheat flowers are like snow. ——Bai Juyi, "Village Night" |
|
|
</div> |
|
|
</body> |
|
|
</html> |
c. Text conversion
In text containing letters, you can use the three classes defined in bootstrap to convert letter case. described as follows:
† .text-lowercase: Convert letters to lowercase.
† .text-uppercase: Convert letters to uppercase.
† .text-capitalize: Converts the first letter of each word to uppercase.
Note: .text-capitalize only changes the first letter of each word and does not affect other letters.
Code sample:
|
<!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 "> Letter case conversion</h3> |
|
|
<p class =" text-uppercase "> Convert to uppercase: hello world!</p> |
|
|
<p class =" text-lowercase "> Convert to lowercase: HELLO WORLD!</p> |
|
|
<p class =" text-capitalize "> Convert to capitalize the first letter of each word: hello world!</p> |
|
|
</body> |
|
|
</html> |
d. Thickness and italics
Bootstrap also defines style classes for text fonts, which can quickly change the bold, thin and oblique styles of text fonts.
described as follows:
† .font-weight-light: Sets a lighter font (relative to the parent element).
† .font-weight-lighter: Sets a lighter font.
† .font-weight-normal: Sets the normal weight of the font.
† .font-weight-bold: Sets a bold font.
† .font-weight-bolder: Sets a bolder font (relative to the parent element).
† .font-italic: Set italic font.
Code sample:
|
<!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 "> Font weight and italic effect</h3> |
|
|
<p class =" font-weight-light "> Looking out of the front door and looking at Noda, the moonlit buckwheat flowers are like snow. ——Bai Juyi's "Village Night" (font-weight-light)</p> |
|
|
<p class =" font-weight-lighter "> Looking out of the front door and looking at Noda, the buckwheat flowers in the moonlight are like snow. ——Bai Juyi, "Village Night" (font-weight-lighter)</p> |
|
|
<p class =" font-weight-normal "> Looking out of the front door and looking at Noda, the buckwheat flowers in the moonlight are like snow. ——Bai Juyi's "Village Night" (font-weight-normal)</p> |
|
|
<p class =" font-weight-bold "> Looking out of the front door and looking at Noda, the buckwheat flowers in the moonlight are like snow. ——Bai Juyi's "Village Night" (font-weight-bold)</p> |
|
|
<p class =" font-weight-bolder "> Looking out of the front door and looking at Noda, the buckwheat flowers in the moonlight are like snow. ——Bai Juyi, "Village Night" (font-weight-bolder)</p> |
|
|
<p class =" font-italic "> Looking out of the front door and looking at the wild fields, the buckwheat flowers in the moonlight are like snow. ——Bai Juyi, "Village Night" (font-italic)</p> |
|
|
</body> |
|
|
</html> |
e. Other text classes
The following three style classes may be used when developing with bootstrap, as follows:
† .text-reset: Color reset. Recolors the text or link, inheriting the color from the parent element.
† .text-monospace: Font class. Fonts include SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace.
† .text-decoration-none: Removes decoration lines.
Code sample:
|
<!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 "> Reset colors, add font classes, and remove decorations</h3> |
|
|
<div class =" text-muted "> |
|
| <p><a href =" # " class =" text-reset "> Looking out of the front door and looking at Noda, the moonlit buckwheat flowers are like snow. ——Bai Juyi's "Village Night"</a></p> | |
|
<p class =" text-monospace "> Looking out of the front door and looking at Noda, the buckwheat flowers in the moonlight are like snow. ——Bai Juyi's "Village Night"</p> |
|
| <p><a href =" # " class =" text-decoration-none "> Looking out of the front door and looking at the wild fields, the buckwheat flowers in the moonlight are like snow. ——Bai Juyi's "Village Night"</a></p> | |
|
</div> |
|
|
</body> |
|
|
</html> |
2. Bootstrap Colors
In web development, colors are used to convey different meanings and express different functions. There are a series of color styles in Bootstrap, including text color, link text color, background color and other state-related styles.
a. Text color
Bootstrap provides some representative text color classes, as follows:
† .text-primary: blue.
† .text-secondary: Gray.
† .text-success: Light green.
† .text-danger: Light red.
† .text-warning: Light yellow.
† .text-info: light blue.
† .text-light: light gray (not visible on white background).
† .text-dark: dark gray.
† .text-muted: Gray.
† .text-white: White (not visible on white background).
Code sample:
|
<!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 "> text color</h3> |
|
|
<p class =" text-primary "> .text-primary - blue</p> |
|
|
<p class =" text-secondary "> .text-secondary -gray</p> |
|
|
<p class =" text-success "> .text-success - light green</p> |
|
|
<p class =" text-danger "> .text-danger - light red</p> |
|
|
<p class =" text-warning "> .text-warning - light yellow</p> |
|
|
<p class =" text-info "> .text-info - light blue</p> |
|
|
<p class =" text-light bg-dark "> .text-light - light gray (not visible on white background)</p> |
|
|
<p class =" text-dark "> .text-dark - dark gray</p> |
|
|
<p class =" text-muted "> .text-muted - gray</p> |
|
|
<p class =" text-white bg-dark "> .text-white - white (not visible on white background)</p> |
|
|
</body> |
|
|
</html> |
b. Link text color
For the text color class introduced earlier, it can also be used normally on links. Combined with the suspension and focus styles provided by bootstrap (the color becomes darker when suspended), the link text is more suitable for the overall color matching of the web page.
Note: Like setting the text color, it is not recommended to use the .text-white and .text-light classes, because the style is not displayed, and the corresponding background color is needed to assist.
Code sample:
|
<!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 "> Link text color</h3> |
|
| <p><a href =" # " class =" text-primary "> .text-primary - blue link</a></p> | |
| <p><a href =" # " class =" text-secondary "> .text-secondary - gray link</a></p> | |
| <p><a href =" # " class =" text-success "> .text-success - light green link</a></p> | |
| <p><a href =" # " class =" text-danger "> .text-danger - light red link</a></p> | |
| <p><a href =" # " class =" text-warning "> .text-warning - buff link</a></p> | |
| <p><a href =" # " class =" text-info "> .text-info - light blue link</a></p> | |
| <p><a href =" # " class =" text-light bg-dark "> .text- light - light gray link (dark gray background added)</a></p> | |
| <p><a href =" # " class =" text-dark "> .text- dark - dark gray link</a></p> | |
| <p><a href =" # " class =" text-muted "> .text-muted - gray link</a></p> | |
| <p><a href =" # " class =" text-white bg-dark "> .text- white - white link (with dark gray background added)</a></p> | |
|
</body> |
|
|
</html> |
c. Background color
The background color classes Bootstrap provides are .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, and .bg-light. The background color is the same as the text class color, except that the background color is set here.
Note: The background color does not set the color of the text. It needs to be used in conjunction with the text color style in development. The .text-white (set to white text) class is often used to set the text color.
Code sample:
|
<!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 "> background color</h3> |
|
|
<p class =" bg-primary text-white "> .bg-primary - blue background</p> |
|
|
<p class =" bg-secondary text-white "> .bg-secondary - gray background</p> |
|
|
<p class =" bg-success text-white "> .bg-success - light green background</p> |
|
|
<p class =" bg-danger text-white "> .bg-danger - light red background</p> |
|
|
<p class =" bg-warning text-white "> .bg-warning - light yellow background</p> |
|
|
<p class =" bg-info text-white "> .bg-info - light blue background</p> |
|
|
<p class =" bg-light "> .bg-light - light gray background</p> |
|
|
<p class =" bg-dark text-white "> .bg-dark - dark gray background</p> |
|
|
<p class =" bg-white "> .bg-white - white background</p> |
|
|
</body> |
|
|
</html> |
3. Border
Using the border style classes provided by Bootstrap, you can quickly add and remove the border of an element, and you can also specify to add or remove a border on one side of an element.
a. Add a border
Borders are added by adding the .border class to the element. If you want to specify to add a certain side, you can choose to add from the following 4 categories.
†.border-top: Adds the top border of the element.
†.border-right: Adds the element's right border.
†.border-bottom: Adds the bottom border of the element.
†.border-left: Adds the left border of the element.
Code sample:
|
<!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 "> Add border</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> |
In the case that the element has a border, you need to delete the border, just add -0 after the border style class. For example: the .border-0 class means to delete the border on the four sides of the element.
b. Border color
The color class of the border is composed of .border plus the theme color, including .border-primary, .border-secondary, .border-success, .border-danger, .border-warning, .border-info, .border-light, . border-dark and .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 "> Close icon</h3> |
|
|
<button type =" button " class =" close " aria-label =" Close "> |
|
|
<span aria-hidden =" true "> ×</span> |
|
|
</button> |
|
|
</body> |
|
|
</html> |
