English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In this chapter, we will explain the key parts of Bootstrap's underlying structure, including our best practices to make web development better, faster, and stronger.
Bootstrap uses some HTML5 Elements and CSS properties. To make these work normally, you need to use HTML5 Document type (Doctype). Therefore, please include the following code snippet at the beginning of your Bootstrap project.
<!DOCTYPE html> <html> .... </html>
If you do not use HTML at the beginning of a web page created with Bootstrap5 document type (Doctype), you may encounter some inconsistencies in browser display, even some specific situations that may lead to inconsistencies, so that your code cannot pass W3C standard validation.
mobile-first is Bootstrap 3 most significant change.
previous Bootstrap versions (up to 2.x), you need to manually reference another CSS to make the entire project friendly to mobile devices.
Now it's different, Bootstrap 3 The default CSS itself supports mobile devices well.
Bootstrap 3 design goal is mobile-first, followed by desktop devices. This is actually a very timely shift, as more and more users are using mobile devices now.
To make Bootstrap-developed websites friendly to mobile devices, ensure proper rendering and touch screen zoom, and add viewport meta tag tag, as shown below:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Width property controls the width of the device. Assuming your website will be viewed on devices with different screen resolutions, set it to device-Width can ensure that it is displayed correctly on different devices.
initial-scale=1.0 Ensure that the web page loads with 1:1 to scale, there will be no zooming.
In mobile device browsers, by setting viewport meta tag tag user-scalable=no can disable its zoom (zooming) feature.
In most cases,maximum-scale=1.0 with user-scalable=no together. By disabling the zoom feature, users can only scroll the screen, making your website look more like a native app.
Note that we do not recommend using this method for all websites; it should be determined based on your own situation!
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<img src="..." alt="Responsive Image">
By adding img-responsive The class allows Bootstrap 3 images are more friendly to responsive layouts.
Next, let's take a look at which CSS properties this class includes.
In the following code, you can seeimg-responsive The class assigns a max-width: 100%; and height: auto; properties allow images to scale proportionally without exceeding the size of their parent element.
.img-responsive {
display: block;
height: auto;
Max-width: 100%;
}This indicates that the related images are presented as block. When you set the display property of an element to block, it is displayed as a block-level element.
Set height: auto, the height of related elements depends on the browser.
Set Max-Width for 100% will overwrite any width specified through the width attribute. This makes the image more friendly to responsive layouts.
If you need to make images that use .img-Images with the responsive class should be horizontally centered, please use .center-block class, do not use .text-center.
Bootstrap 3 Use body {margin: 0;} to remove the margin of body.
Please see the following settings related to 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 body to "Helvetica Neue", Helvetica, Arial, sans-serif.
The second rule sets the default font size of the text to 14 pixels.
The third rule sets the default line height to 1.428571429.
The fourth rule sets the default text color to #333333.
The last rule sets the default background color to white.
Use @font-Family-Base, @font-Size-Base and @line-Height-Base attribute as typesetting style.
Through the attribute @link-Color sets the global link color.
For the default link style, the following settings are 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;
}Therefore, when the mouse hovers over the link or a clicked link, the color will be set to #2a6496. At the same time, an underline will appear.
In addition, clicked links will display a color code of #333 Another rule is to set the outline to 5 Pixel width, and has a thin dashed outline for webkit-based browsers. -webkit-focus-ring-color browser extension. The outline offset is set to -2 pixels.
All of the above styles can be found in scaffolding.less.
Bootstrap uses Normalize to establish cross-browser consistency.
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styles of HTML elements.
<div> ... </div>
Bootstrap 3 of container class is used to wrap the content on the page. Let's take a look at this .container class.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}Through the above code, the left and right outer margins (margin-right, margin-left) is left to the browser to decide.
Please note that due to the fixed width of the inner padding (padding)
.container:before,
.container:after {
display: table;
content: " ";
}This will generate pseudo-elements. Set display for table, it will create an anonymous table-cell and a new block formatting context.:before pseudo-element prevents the collapse of the top margin,:after pseudo-element to clear floating.
If conteneditable Property appears in HTML, due to some Opera bugs, creates a space around the above elements. This can be done by using content: " " to fix.
.container:after {
clear: both;
}It creates a pseudo-element and ensures that all containers contain all floating elements.
Bootstrap 3 CSS has a responsive media query that sets max for container within different media query threshold ranges.-width, used to match the grid system.
@media (min-width: 768px) {
.container {
width: 750px;
}Bootstrap works well in the latest desktop and mobile browser systems.
Old browsers may not support it well.
The following table lists the latest browsers and platforms supported by Bootstrap:
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | YES | YES | Not applicable | Not applicable | Not applicable |
| iOS | YES | Not applicable | Not applicable | Not applicable | YES |
| Mac OS X | YES | YES | Not applicable | YES | YES |
| Windows | YES | YES | YES* | YES | Not applicable |
* Bootstrap supports Internet Explorer 8 and higher versions of IE browsers.