bootstrap< Basic One > CSS overview

Original:bootstrap< Basic one > 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 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:
<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
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-width:100%;}
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, 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)
<div 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 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: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 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.
Series Articles:Bootstrap < Fundamentals > CSS Overview
bootstrap< Basic two > network system
bootstrap< Basic three > typesetting
bootstrap< basic Four > code
Bootstrap < Fundamentals five > forms
bootstrap< basic six > form
Bootstrap < basic seven > button
Bootstrap < basics eight > pictures
bootstrap< Basic Nine > Auxiliary class
bootstrap< Basic 10 > responsive Utility
bootstrap< Basic 11 > Font icons (glyphicons)
Bootstrap < Basics 12 > drop-down menu (dropdowns)
bootstrap< Basic 13 > button Group
bootstrap< Basic 14 > button drop-down menu
bootstrap< Basic 15 > Input Frame Group
bootstrap< basic 16 > Navigation elements
bootstrap< basic 17 > Navigation Bar Bootstrap < basic 18 > Breadcrumb navigation (Breadcrumbs) Bootstrap < Fundamentals 19 > Pagination bootstrap< Basics 20 > Tags Bootstrap < fundamentals 21 > badges (Badges) Bootstrap < basic 22 > Oversized screen (Jumbotron) Bootstrap < basic 23 > page title Header) bootstrap< Basic 24 > Thumbnail Bootstrap < basic 25 > Warning (Alerts) Bootstrap < basic 26 > progress bar
bootstrap< Basic One > CSS overview