(ii) Bootstrap CSS Overview

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

HTML 5 Document Type (DOCTYPE)

Bootstrap uses some HTML5 elements and CSS properties. In order for these to work properly, you need to use the HTML5 document type (Doctype). Therefore, include the following code snippet at the beginning of the project that uses Bootstrap.

<! DOCTYPE html>.   

If you do not use the HTML5 document type (Doctype) at the beginning of a page created by Bootstrap, you may face some inconsistencies in the browser display, and may even face inconsistency in certain situations, so that your code cannot be verified by the standard.

Mobile device First

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

In previous versions of Bootstrap (until 2.x), you would need to manually reference another CSS to allow the entire project to support mobile devices in a friendly way.

It's not the same now, Bootstrap. 3 The default CSS itself is friendly to mobile device support.

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:

<metaName="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!

<metaName="viewport"content="Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no ">      

Responsive images

src="..."class="Img-responsive"alt="responsive image"> 

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.

Global display, layout, and link basic 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,< Span class= "PLN" > Sans-serif; Font-size: 14px  Line-height: 1.428571429; Color:  #333333;  Background-color: Span class= "com" > #ffffff; }             /span>                

The first rule sets the body's default font style to "Helvetica Neue", Helvetica, Arial, Sans-serif.

The second rule sets the default font size for text to 14 pixels.

The third rule sets the default row height to 1.428571429.

The fourth rule sets the default text color to #333333.

The last rule sets the default background color to white.

Typesetting

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

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; : 5px auto -webkit-focus -ring-color;-offset: -< Span class= "lit" >2px;                /span>                

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.

Avoid cross-browser inconsistencies

Bootstrap uses Normalize to establish cross-browser consistency.

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

Container (Container)

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

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

. Container { Padding-right : 15px; Padding-left: 15px  Margin-right: auto; Margin-left : auto;               /span>                

By the above code, the left and right margins of container (Margin-right, margin-left) are determined by the browser.

Note that because the padding (padding) is a fixed width, the container is not nested by default .

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

This produces pseudo-elements. Setting display to tablewill create an anonymous Table-cell and a new block formatting context. : Before pseudo element prevents top margin collapse: after pseudo element clears float.

If the conteneditable attribute appears in HTML, create a space around the above element due to some Opera bugs. This can be fixed by using the content: "" .

. container:{ clear: both;}       

It creates a pseudo-element and ensures that all the containers contain all the floating elements.

Bootstrap 3 CSS has a request to respond to the media query, in different media query threshold range for the container set up max-width, to match the grid system.

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

Bootstrap Browser/Device Support

Bootstrap can work well in the latest desktop systems and mobile browsers.

The old browser may not be very well supported.

The following table supports the latest versions of browsers and platforms for Bootstrap:

	Chrome	Firefox	IE	Opera	Safari
Android	YES	YES	Not applicable	NO	Not applicable
Ios	YES	Not applicable	Not applicable	NO	YES
Mac OS X	YES	YES	Not applicable	YES	YES
Windows	YES	YES	Yes*	YES	NO

* Bootstrap supports Internet Explorer 8 and later versions of IE browser.

(ii) Bootstrap CSS Overview