Bootstrap Learning: Bootstrap CSS Overview

This chapter is a key part of Bootstrap's underlying structure, which allows us to make web development a better, faster, and stronger best practice.

Next, we started our bootstrap study.

HTML 5 Document Type (DOCTYPE)

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

<! 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 inconsistencies in specific situations so that your code cannot be validated by the standard.
Mobile device First
The most significant change in Bootstrap 3. In previous versions of Bootstrap (up to 2.x), it was necessary to manually reference another CSS so that the project could be combined with the main CSS for the mobile device. And bootstrap 3 The default CSS itself is mobile-friendly.
Bootstrap 3 is designed to be mobile-first, then desktop.
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:
< content= "" >
The Width property controls how wide the device is. Assuming that 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 depends on your own situation! 
Responsive images
By adding the img-responsive class, you can make the images in Bootstrap 3 more user-friendly with responsive layouts. Here's what CSS properties this class contains.
. img-responsive {display:inline-block;  Height:auto; max-width:100%;}
Properties Set  display:inline-block, where elements are 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:100% overrides any width specified by the Width property. This makes the picture more user-friendly with responsive layouts.
Global display, typography, and linking
Bootstrap 3 uses body {margin:0;} to remove the body margin.
Basic body Style:
Body {font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;  font-size:14px;  line-height:1.428571429;  Color: #333333; Background-color: #ffffff;}
1. Set the body's default font style to "Helvetica Neue", Helvetica, Arial, Sans-serif.
2. Set the default font size for text to 14 pixels.
3. Set the default row height to 1.428571429.
4. Set the default text color to #333333.
5. Set the default background color to white.
Typesetting
Use the @font-family-base, @font-size-base, and @line-height-base properties as typographic styles. (This is not clear to me)
Link Style
Sets the color of the global link through the property @link-color.
Default link Style:
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;}
1. Hover over the link, or click on the link, the color will be set to #2a6496. At the same time, an underscore is rendered.
2. The clicked link will present a thin dashed outline with a color code of #333
3. Set the contour to 5 pixels wide;
4. There is a -webkit-focus-ring-color browser extension for WebKit based browsers;
5. The profile offset is set to-2 pixels.

 
 

  
  

    650) this.width=650; "src=" Http://www.w3cschool.cc/images/quote.png "alt=" Quote.png "/> 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)
<div class= "Container" > ...</div>
Bootstrap 3 's container class is used to wrap content on the page.
The default . Container class in the Bootstrap.css file.
. container {padding-right:15px;   padding-left:15px;   Margin-right:auto; Margin-left:auto;}
The above code, the left and right margin of container (margin-right, margin-left) to the browser to decide. Note that because of the padding (padding) and the fixed width, the container is not nested by default
. container:before,.container:after {display:table; Content: "";}
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 Learning: Bootstrap CSS Overview