Bootstrap CSS Overview
In this chapter, we will explain the underlying structure of a key part of Bootstrap, including our web developers make better, faster, stronger best practices.
HTML 5 doctype (Doctype)
Bootstrap uses some HTML5 elements and CSS properties. In order for these to work, you need to use the HTML5 document type (Doctype). Thus, in the beginning of the use Bootstrap project contains the following code segment.
<!DOCTYPE html> <html> .... </html>
If the beginning of the page in Bootstrap created does not use the HTML5 document type (Doctype), you might face some browsers display inconsistency problems that may even face inconsistent certain situations under that can not pass W3C standard validation in your code .
Mobile device priority
Priority mobile devices is the most significant change in the Bootstrap 3.
In previous versions of Bootstrap (until 2.x), you need to manually quote another CSS, to make the entire project a friendly support for mobile devices.
Not anymore, Bootstrap 3 default CSS itself is friendly support for mobile devices.
Bootstrap 3 is designed mobile device priority, followed by the desktop. This is actually a very timely shift, as more and more people use mobile devices.
To make Bootstrap Development website for mobile devices friendly to ensure proper rendering and touch-screen zoom, you need to add viewport meta tags into the page's head, as follows:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width property width control equipment. Suppose your site will be with a different screen resolution devices to browse, then set it to device-width to ensure it renders correctly on different devices.
initial-scale = 1.0 to ensure the page loads, the ratio of 1: 1 presentation, there will be no scaling.
On the mobile device browser, by adding user-scalable = no for the viewport meta tag to disable its scaling (zooming) function.
Typically, maximum-scale = 1.0 and user-scalable = no together. After this zoom function is disabled, the user can scroll the screen, you can make your site look more like a native application feel.
Note that, in this way we do not recommend the use of all sites, will depend on your own circumstances!
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
Responsive image
<img src="..." class="img-responsive" alt="响应式图像">
By adding img-responsive class Bootstrap 3 allows the image to support responsive layout that is more friendly.
Let's look at what this class contains the css property.
In the code below, you can see the image img-responsive class gives max-width: 100%; and height: auto; property can be scaled so that the image does not exceed the size of the parent element.
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
This indicates that the associated image rendered as inline-block. When you set the display properties of the element is inline-block, inline element with respect to the content of the presentation form around it, but with the inline difference is that in this case we can set the width and height.
Setting height: height auto, related elements depends on the browser.
Set max-width is 100% overrides any width specified by width property. It allows pictures to support responsive layout that is more friendly.
Global Display, layout and links
Basic global display
Bootstrap 3 using body {margin: 0;} to remove the body of margins.
Consider 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 to set the default font style for the body "Helvetica Neue", Helvetica, Arial , sans-serif.
The second rule of the text of the default font size of 14 pixels.
The third rule is to set the default row height is 1.428571429.
The fourth rule sets the default text color to # 333333.
Final rule sets the default background color is white.
typesetting
Use @ font-family-base, @ font-size-base and @ line-height-base property as typography.
Link Style
Set the color through the global linkage property @ link-color.
The default style for a 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 the mouse hovers over the link or links you click, the color is set to # 2a6496. At the same time, there will be an underscore.
In addition, the links you click, there will be a color code for the thin dashed outline # 333. Another rule is to set the outline to 5 pixels wide, and for webkit-based browser has a -webkit-focus-ring-color browser extensions. Contour offset is set to -2 pixels.
All of these styles can be found in the scaffolding.less.
Avoid cross-browser inconsistencies
Bootstrap use Normalize to build cross-browser consistency.
Normalize.css is a small CSS file that provides a better cross-browser consistency in the default style HTML elements.
Container (Container)
<div class="container"> ... </div>
Container class Bootstrap 3 for content on the package page. Let's take a look at this file bootstrap.css .container class.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Through the above code, the container's left and right margins (margin-right, margin-left) decided by the browser.
Please note that due to padding (padding) are fixed-width, default containers can not be nested.
.container: before,
.container: after {
display: table;
content: "";
}
This generates pseudo-elements. Setting the display table, it will create an anonymous table-cell and a new block formatting context. : before pseudo-element to prevent the margin collapse,: after pseudo-elements to clear float.
If conteneditable attribute appears in HTML, since some of the Opera bug, create a space around these elements. This can be done using the content: "" to repair.
.container: after {
clear: both;
}
It creates a pseudo-element, and ensures that all floating vessel that contains all the elements.
Bootstrap 3 CSS has an application in response to media queries, media queries in different threshold values are set max-width for the container, in order to match the grid system.
@media (min-width: 768px) {
.container {
width: 750px;
}
Bootstrap Browser / Device Support
Bootstrap can work well in the latest desktop and mobile terminal browser.
Older browsers may not be well supported.
The following table Bootstrap support 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 support for Internet Explorer 8 and later versions of IE.