Bootstrap CSS Overview
In this chapter, we’ll cover key parts of Bootstrap’s underlying structure, including our best practices for making web development better, faster, and stronger.
HTML 5 Document Type (Doctype)
Bootstrap uses some HTML5 elements and CSS properties. In order for these to work properly, you need to use the HTML5 document type (Doctype). Therefore, include the following code snippet at the beginning of your project using Bootstrap.
<!DOCTYPE html> <html> .... </html>
If you do not use the HTML5 document type (Doctype) at the beginning of the web page created by Bootstrap, you may face some browser display inconsistencies, and you may even face inconsistencies in some specific situations, so that your The code cannot pass validation against W3C standards.
Mobile first
Mobile first is the most significant change in Bootstrap 3.
In previous Bootstrap versions (until 2.x), you needed to manually reference another CSS to make the entire project mobile-friendly.
It’s different now. Bootstrap 3’s default CSS itself is mobile-friendly.
Bootstrap 3 is designed with mobile first, desktop second. This is actually a very timely shift as more and more users are now using mobile devices.
In order to make the website developed by Bootstrap mobile-friendly and ensure proper drawing and touch screen scaling, the viewport meta tag needs to be added to the head of the web page, as shown below:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width The property controls the width of the device. Assuming that your website will be viewed by devices with different screen resolutions, setting it to device-width ensures that it renders correctly on different devices.
initial-scale=1.0 Ensure that when the web page is loaded, it will be rendered at a 1:1 ratio without any scaling.
On mobile browsers, zooming can be disabled by adding user-scalable=no to the viewport meta tag.
Typically, maximum-scale=1.0 is used with user-scalable=no. By disabling zoom, users can only scroll, making your website look more like a native app.
Note that we do not recommend this method for all websites, it still depends on your own situation!
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Responsive images
<img src="..." class="img-responsive" alt="响应式图像">
By adding the img-responsive class, images in Bootstrap 3 can be made more friendly to responsive layout support.
Next let’s take a look at what css attributes this class contains.
In the code below, you can see that the img-responsive class assigns the max-width: 100%; and height: auto; attributes to the image, which allows the image to be scaled proportionally. Does not exceed the dimensions of its parent element.
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}This indicates that the associated image is rendered as inline-block. When you set an element's display property to inline-block, the element is rendered inline relative to its surrounding content, but unlike inline, we can set the width and height in this case.
Setting height:auto, the height of related elements depends on the browser.
Setting max-width to 100% will override any width specified via the width attribute. This makes images more friendly to support responsive layouts.
Global display, layout and linking
Basic global display
Bootstrap 3 Use body {margin: 0;} to remove the edges of the body distance.
Please see the following settings for the body:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}The first rule sets the default font style of the body to "Helvetica Neue", Helvetica, Arial, sans-serif .
The second rule sets the default font size for text to 14 pixels.
The third rule sets the default row height to 1.428571429.
The fourth rule sets the default text color to #333333.
The last rule sets the default background color to white.
Typesetting
Use the @font-family-base, @font-size-base and @line-height-base properties as typography styles.
Link style
Set the color of the global link through the attribute @link-color.
For the default style of links, set it as follows:
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}So when the mouse is hovering over a link, or a clicked link, the color will be set to #2a6496. At the same time, an underline will appear.
In addition, the clicked link will display a thin dotted outline with the color code #333. Another rule is to set the outline to 5 pixels wide, and for webkit-based browsers have a -webkit-focus-ring-color browser extension. Outline Offset is set to -2 pixels.
All of the above styles can be found in scaffolding.less.
Avoid cross-browser inconsistency
Bootstrap uses Normalize to establish cross-browser consistency.
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.
Container (Container)
<div class="container"> ... </div>
Bootstrap 3’s container class is used to wrap the content on the page. Let’s take a look at this .container class in the bootstrap.css file.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}Through the above code, the left and right margins (margin-right, margin-left) of the container are determined by the browser.
Please note that because the padding is a fixed width, the container is not nestable by default.
.container:before,
.container:after {
display: table;
content: " ";
}This produces pseudo elements. Setting display to table will create an anonymous table-cell and a new block formatting context. :before The pseudo element prevents the top margin from collapsing, :after The pseudo element clears the float.
If the conteneditable attribute appears in HTML, due to some Opera bug, a space is created around the above element. This can be fixed by using content: " ".
.container:after {
clear: both;
}It creates a pseudo element and ensures that all containers contain all floated elements.
Bootstrap 3 CSS has a media query that applies for response, and max-width is set for the container within different media query thresholds to match the grid system.
@media (min-width: 768px) {
.container {
width: 750px;
}Bootstrap Browser/Device Support
Bootstrap works well in the latest desktop systems and mobile browsers.
Old browsers may not be well supported.
The following table shows the latest versions of browsers and platforms that Bootstrap supports:
| ##Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | YESYES | Not applicable | NO | Not applicable | |
| YES | Not applicable | Not applicable | NO | YES | |
| YES | YES | Not applicable | YES | YES | |
| YES | YES | YES* | YES | NO |
