Latest web development tutorials

Bootstrap 3 CSS Overview

aims

In this tutorial, we have discussed the Bootstrap 3 CSS points. Next we will explain Bootstrap 3 working several key factors.

HTML 5 doctype (Doctype)

Bootstrap 3 used some elements of HTML5 and CSS attributes. In order for these to work, you need to use the HTML5 document type (Doctype). 

<! DOCTYPE html>
<Html lang = "en">
  ...
</ 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

This is probably the most significant change in the Bootstrap 3. In previous versions of Bootstrap (until 2.x), you need to manually quote another CSS, in order to make the project together with the main mobile device-friendly CSS. Not anymore, Bootstrap 3 default CSS itself is mobile device friendly.

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 make sure 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, or depends on your own circumstances!

Responsive image

By adding img-responsive class lets Bootstrap 3 pictures to support responsive layout that is more friendly. Let's look at this class contains what css property. Its essence is to give the image a max-width: 100%; and height: auto; property allows image scaling, 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

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

Consider the following set of relevant 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.

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 3, like its previous version, use the Normalize, to create cross-browser consistency.

Container

Container class Bootstrap 3 for content on the package 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 the container by the browser decide. 

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