Bootstrap CSS Overview

HTML5 Document Type (<! DOCTYPE html>)

The bootstrap front-end framework uses HTML5 and CSS properties, and in order for these to work, you need to use the HTML5 document type (<! DOCTYPE html>), if you do not use the HTML5 document type when you create a Web page using the bootstrap front-end framework, you may face inconsistencies in the browser display, or even under certain circumstances, so that your code cannot Validation of the standard.

Mobile device First

Mobile device first is Bootstrap is a significant feature, in order to make bootstrap development site for mobile device-friendly, to ensure proper drawing and touch screen scaling, you need to add the following code at the head tag of the webpage:

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

The Width property controls how wide the device is, and if your site will be browsed by a device with a different screen resolution, setting the Width property to Width=decive-width ensures that it will be displayed correctly on different devices.

Initial-scale=1 ensures that the page is loaded at a scale of 1:1 and does not scale.

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!

<metaName="viewport"content="width=device-width,initial-scale=1.0, Maximum-scale=1.0,user-scalable=no ">

Responsive images

By adding the img-responsive class, you can make the images in Bootstrap 3 more user-friendly with responsive layouts.

Let's take a look at what CSS properties this class contains.

In the following code, you can see that the 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-{ display:inline-block; height:auto; Max- width:%;}              

This indicates that the associated image is rendered as Inline-block. When you set the display property of an element to Inline-block, the element is rendered inline relative to the content around it, but unlike inline, we can set the width and height in this case.

Setting Height:auto, the height of the related element depends on the browser.

Setting max-width to 100% overrides any width specified by the Width property. This makes the picture more user-friendly with responsive layouts.

This unit did not write well, next time Add.

Bootstrap CSS Overview