May 04, 2021 Bootstrap
2. HTML 5 Document Type (Doctype)
3. Mobile devices take precedence
5. Global display, typography, and links
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.
Bootstrap uses some HTML5 elements and CSS properties. F or these to work properly, you need to use HTML5 document types (Doctype). Therefore, include the following snippppy code at the beginning of the Bootstrap project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
</html>If you don't use HTML5 document types (Doctype) at the beginning of a Web page created by Bootstrap, you may face some browser display insanity, and you may even face insanity in certain situations where your code cannot be validated by the W3C standard.
Mobile device first is the most significant change in Bootstrap 3.
In previous Bootstrap releases (until 2.x), you needed to manually reference another CSS to make the entire project-friendly support mobile device.
Now, Bootstrap 3's default CSS is itself mobile-friendly.
Bootstrap 3 is designed to prioritize mobile devices, followed by desktop devices. This is actually a very timely shift, as more and more users are now using mobile devices.
In order for Bootstrap to develop a mobile-friendly website that ensures proper drawing and touch-screen scaling, you need to add a viewport meta tag to the head of the page, as follows:
<meta name="viewport" content="width=device-width, initial-scale=1.0">The width property controls the width of the device. Assuming that your site will be browsed by a device with a different screen resolution, setting it to device-width ensures that it renders correctly on different devices.
initial-scale-1.0 ensures that when the page loads, it is rendered at a 1:1 scale without any scaling.
On a mobile device browser, you can disable the zooming feature 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 through the screen to make your site look more like a native app.
Note that we do not recommend all websites in this way, depending on your own circumstances!
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><img src="..." class="img-responsive" alt="响应式图像">By adding img-responsive class, you can make the images in Bootstrap 3 more user-friendly in support of responsive layouts.
Let's look at which css properties are included in this class.
In the following code, you can see that img-responsive class gives the image max-width: 100%; A nd height: auto; Property, which allows the image to scale proportionally to no more than the size of its parent element.
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}This indicates that the relevant image is rendered as inline-block. When you set the display property of an element to inline-block, the element is rendered inline relative to the content around it, but unlike inline, in this case we can set the width and height.
Set height:auto, the height of the related element depends on the browser.
Setting max-width to 100% overrides any width specified by the width property. This makes the picture more friendly to the support for responsive layouts.
Bootstrap Programming Battle: Make pictures fit for mobile phone display!
Bootstrap 3 uses body s margin: 0; to remove the margins of the body.
Take a look at the following settings for 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 body's default font style 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 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 properties as typography styles.
The color of @link link is set by the property, the property-color.
For the default style of the link, the following settings:
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 you hover over a link, or click a link, the color is set to #2a6496. At the same time, an underscore is presented.
In addition, the clicked link presents a thin dotted outline #333 color code of the color code. A nother rule is to set the profile to 5 pixels wide and have a -webkit-focus-ring-color browser extension for webkit-based browsers. The profile offset is set to -2 pixels.
All of these styles can be found in scaffolding.less.
Bootstrap uses Normalize to establish cross-browser consistency.
Normalize .css is a very small CSS file that provides better cross-browser consistency in the default style of HTML elements.
<div class="container">
...
</div>Bootstrap 3's container class is used to wrap the content on the page. Let's take a look at .css .container class in the Bootstrap file.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}Using the code above, the left and right margins (margin-right, margin-left) of the container are left to the browser.
Note that containers are not nestable by default because padding is a fixed width.
.container:before,
.container:after {
display: table;
content: " ";
}This results in pseudo-elements. S etting display to table creates an anonymous table-cell and a new block formatting context. :before pseudo-elements prevent the top margin from collapsing, :after pseudo-elements clear floats.
If the conteneditable property appears in HTML, a space is created around the above elements due to some Opera bugs. This can be fixed by using content: .
.container:after {
clear: both;
}It creates a pseudo-element and ensures that all containers contain all floating elements.
Bootstrap 3 CSS has a media query that requests a response, and max-width is set up for containers to match the grid system within different media query thresholds.
@media (min-width: 768px) {
.container {
width: 750px;
}Bootstrap 4 in addition to the use of . The container class wraps the contents of the page, and you can also use the .container-fluid class, which is used for containers that are 100% wide and occupy all viewports.
The following example shows the container that occupies the entire viewport:
Bootstrap works well in the latest desktop systems and mobile browsers.
Older browsers may not be well supported.
The following table shows that Bootstrap supports the latest versions of browsers and platforms:
| Chrome | Firefox | Ie | Opera | Safari | |
|---|---|---|---|---|---|
| Android | YES | YES | Not applicable | NO | Not applicable |
| Ios | YES | Not applicable | Not applicable | NO | YES |
| Mac OS X | YES | YES | Not applicable | YES | YES |
| Windows | YES | YES | YES* | YES | NO |
Bootstrap supports Internet Explorer 8 and later IE browsers.
Note: Bootstrap4 has abandoned support for IE8 and iOS 6 and now only supports browsers above IE9 and iOS 7.