Bootstrap CSS Overview

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 priority is the most significant change in Bootstrap 3.
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">
Responsive images
<img 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-Responsive {  Display:inline-block;  Height:auto;  Max%;}
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, typography, and linking
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, sans-  SERIF;  Font -SIZE:14PX;  Line -height: 1.428571429  ;  Color: #  333333  ; Background -color: #ffffff;}  
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;   -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.
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)
class="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;}
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:after {  display:table;   " " ;}
This produces pseudo-elements. Setting display to table will 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:after {  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) {   . container {      width:750px;}
Bootstrap CSS Overview