Overview of CSS infrastructure layouts in bootstrap

1. Bootstrap uses HTML and CSS elements in HTML5, so use HTML5 's DocType property

<! DOCTYPE html> 2. Mobile First

Mobile device priority is the most significant change in Bootstrap 3.

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

In order for Bootstrap to develop a website that is mobile-friendly, to ensure proper drawing and touch-screen scaling, the viewport meta tag needs to be added to the head of the Web page as follows:

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

The Width property controls how wide the device is. Assuming your site will be browsed by a device with a different screen resolution, setting it to Device-width will ensure that it renders correctly on different devices. initial-scale=1.0 ensures that when the page loads, it is rendered at a scale of 1:1 without any scaling.

On the mobile device browser, you can disable the zoom (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 the zoom feature, users can only scroll the screen to make your site look more like the native app.

Note that this way we do not recommend the use of all sites, or to see your own situation depends on!

<meta name= "viewport" content= "Width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" >

3. Responsive images

img-responsive class gives the image a max-width:100%; and Height:auto; property allows you to scale the image proportionally, no more than the size of its parent element.

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

4. Global Display

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

See the following about body settings:

Body {

font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;

font-size:14px;

line-height:1.428571429;

Color: #333333;

Background-color: #ffffff;

}

5. Link Style

Sets the color of the global link through the property @link-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 the mouse hovers over the link, or the clicked link, the color is set to #2a6496. At the same time, an underscore is rendered.

In addition, the clicked link will present a thin dashed outline with a color code of #333. Another rule is to set the outline to a width of 5 pixels, and to have a -webkit-focus-ring-color browser extension for WebKit-based browsers. The contour offset is set to-2 pixels.

All of these styles can be found in scaffolding.less.

6. Flow-type layout container

Modifying the outermost layout element .container to convert a .container-fluid fixed-width raster layout to a 100%-width layout.

 

<div class="container-fluid">  <div class="row"> ... </div></div>

Overview of CSS infrastructure layouts in bootstrap