Bootstrap 3 CSS Overview
Goals
In this tutorial, we have discussed the essentials of Bootstrap 3 CSS. Next, we will explain several key factors in how Bootstrap 3 works.
HTML5 Doctype
Bootstrap 3 uses some HTML5 elements and CSS properties. To make these work properly, you need to use the HTML5 Doctype.
<!DOCTYPE html> <html lang="en"> ... </html>
If you do not use the HTML5 Doctype at the beginning of a web page created with Bootstrap, you may face browser display inconsistencies and even specific situational inconsistencies, which may cause your code to fail W3C standard validation.
Mobile First
This may be the most significant change in Bootstrap 3. In previous Bootstrap versions (up to 2.x), you had to manually reference another CSS file, along with the main CSS, to make the project mobile-friendly. Now it's different: Bootstrap 3's default CSS is itself mobile-friendly.
Bootstrap 3 is designed with a mobile-first approach, with desktop devices as secondary. This is actually a very timely shift, as more and more users are now using mobile devices.
To make websites developed with Bootstrap mobile-friendly and ensure proper rendering and touchscreen zooming, you need to add the viewport meta tag in the head of the web page, as shown below:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
widthThe attribute controls the width of the device. Assuming your website will be browsed on devices with different screen resolutions, set it todevice-widthwill ensure that it renders correctly on different devices.
initial-scale=1.0Ensure that when the web page loads, it is displayed at a 1:1 ratio and there is no scaling.
On mobile device browsers, by adding to the viewport meta taguser-scalable=noyou can disable its zooming functionality. Usually,maximum-scale=1.0It is used together with user-scalable=no. After disabling the zoom function, users can only scroll the screen, which can make your website look more like a native app. Note that we do not recommend this approach for all websites; it depends on your own situation!
Responsive Images
By addingimg-responsiveclass can make images in Bootstrap 3 more friendly to responsive layouts. Let's see what CSS properties this class contains. In essence, it gives images the `max-width: 100%;` and `height: auto;` properties, allowing images to scale proportionally without exceeding the size of their parent element.
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
This indicates that the related image is rendered asinline-block. When you set the element's display property to inline-block, the element appears inline relative to the surrounding content, but unlike inline elements, in this case we can set width and height.
Settingheight:auto, the height of the related element depends on the browser.
Settingmax-widthto 100% will override any width specified via the width attribute. This makes images more friendly to responsive layouts.
Global Display, Typography, and Links
Bootstrap 3 usesbody {margin: 0;}to remove the margin of the body.
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 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.
For the default style of links, the 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 a link, or for a clicked link, the color is set to #2a6496. At the same time, an underline will be displayed.
In addition, visited links will display a thin dashed outline with a color code of #333. Another rule sets the outline to 5 pixels wide, and for webkit-based browsers there is a-webkit-focus-ring-colorbrowser extension. The outline offset is set to -2 pixels.
All of these styles can be found in scaffolding.less.
Avoid Cross-Browser Inconsistencies
Bootstrap 3, like its predecessors, uses Normalize to establish cross-browser consistency.
Container
Bootstrap 3'scontainerclass is used to wrap content on the page. Let's take a look at the following class
.container {
margin-right: auto;
margin-left: auto;
}
Through the above code, the left and right margins of container are left to the browser's discretion.
.container:before,
.container:after {
display: table;
content: " ";
}
This generates pseudo-elements. Settingdisplayistablecreates an anonymous table-cell and a new block formatting context.:beforeThe pseudo-element prevents top margin collapse,:afterThe pseudo-element clears floats.
Ifconteneditablethe attribute appears in HTML, due to some Opera bugs, a space is created around the aforementioned element. This can be fixed by usingcontent: " "to fix it.
.container:after {
clear: both;
}
It creates a pseudo-element and ensures that all containers contain all floated elements.
Bootstrap 3 CSS has an applied responsive media query that sets max-width for container within different media query thresholds, in order to match the grid system.
Other extensions