Bootstrap CSS Overview

In this chapter, we will explain the key parts of Bootstrap's underlying structure, including our best practices for making web development better, faster, and stronger.

HTML5 Doctype

Bootstrap uses some HTML5 elements and CSS properties. To make these work properly, you need to use the HTML5 doctype. Therefore, include the following code snippet at the beginning of any project using Bootstrap.

<!DOCTYPE html>
<html>
....
</html>

If you do not use the HTML5 doctype at the beginning of a web page created with Bootstrap, you may face some browser display inconsistencies, and even some inconsistencies in specific situations, which may prevent your code from passing W3C standard validation.

Mobile First

Mobile first is the most significant change in Bootstrap 3.

In previous versions of Bootstrap (up to 2.x), you needed to manually reference another CSS to make the entire project support mobile devices in a friendly way.

Now it's different: Bootstrap 3's default CSS itself supports mobile devices in a friendly way.

Bootstrap 3 is designed to be mobile first, then desktop. This is actually a very timely shift because more and more users are using mobile devices now.

To make Bootstrap-developed websites mobile-friendly, ensure proper rendering and touch zooming, you need to add theviewport metatag in the head of the web page, as follows:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

widthThe attribute controls the device width. Assuming your website will be viewed on devices with different screen resolutions, setting it todevice-widthcan ensure it renders correctly on different devices.

initial-scale=1.0Ensure that when the page loads, it is rendered at a 1:1 ratio without any zooming.

On mobile device browsers, by addingviewport metathe attribute to the taguser-scalable=noyou can disable its zooming functionality.

Typically,maximum-scale=1.0it is used together with user-scalable=no. With zooming disabled, users can only scroll the screen, which makes your website feel more like a native app.

Note that we do not recommend this method for all websites; it 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="....html" class="img-responsive" alt="响应式图像">

By addingimg-responsivethe .img-responsive class, images in Bootstrap 3 become more friendly to responsive layouts.

Next, let's look at what CSS properties this class contains.

In the following code, you can seeimg-responsivethe class gives the image the properties max-width: 100%; and height: auto;, allowing the image to scale proportionally without exceeding the size of its parent element.

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

This means the related image is rendered asblockblock. When you set the display property of the element to block, it is displayed as a block-level element.

Settingheight:autoheight: auto, the height of the related element depends on the browser.

Settingmax-widthwidth to 100% will override any width specified via the width attribute. This makes images more friendly to responsive layouts.

If you need to horizontally center an image using the .img-responsive class, use the .center-block class, not .text-center.

Global Display, Typography, and Links

Basic Global Display

Bootstrap 3 usesbody {margin: 0;}to remove the margin of the body.

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 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.

Typography

Use the @font-family-base, @font-size-base, and @line-height-base properties for typographic styles.

Link Styles

Set the global link color via the @link-color property.

For the default link styles, set 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 hovering over a link, or for a visited link, the color is set to #2a6496. At the same time, an underline is displayed.

Additionally, visited links display a thin dotted 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.

Avoiding Cross-Browser Inconsistencies

Bootstrap usesNormalizeto establish cross-browser consistency.

Normalize.css is a very small CSS file that provides better cross-browser consistency in the default styles of HTML elements.

Containers

<div class="container">
  ...
</div>

Bootstrap 3'scontainerclass is used to wrap content on a page. Let's take a look at this in the bootstrap.css file..container class。

.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 left to the browser to decide.

Note that since the padding is a fixed width, containers are not nestable by default.

.container:before,
.container:after {
  display: table;
  content: " ";
}

This creates pseudo-elements. Settingdisplayistablecreates an anonymous table-cell and a new block formatting context.:beforeThe pseudo-element prevents margin-top collapse,:afterThe pseudo-element clears floats.

Ifconteneditablethe attribute appears in the HTML, due to some Opera bugs, a space is created around the above 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 a responsive media query that sets max-width for the container within different media query breakpoints to match the grid system.

@media (min-width: 768px) {
   .container {
      width: 750px;
}

Bootstrap Browser/Device Support

Bootstrap works well in the latest desktop and mobile browsers.

Older browsers may not be well supported.

The following table lists the browsers and platforms supported by Bootstrap in their latest versions:

	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.

Other extensions

Bootstrap CSS

Bootstrap Layout Components

Bootstrap Plugin

Bootstrap Other