Bootstrap Getting Started

Bootstrap in the background management system used more, a few previous projects are also used bootstrap framework, but did not learn bootstrap system, the recent work is not so busy, so plan to learn a system. Let's share the bootstrap form briefly.

Using bootstrap, first download the bootstrap package on the official website, and provide a variety of ways to download. Website address: http://getbootstrap.com/

After entering the website, go to the download page, the first is a precompiled version download, including Css,js,font. The second is the source code download, need to compile themselves. The third is the sass version, according to their own needs, to download, here, we downloaded the precompiled version, because, for the time being less and sass have not learned.

Web pages created with bootstrap need to use the HTML5 document type (Doctype), or there may be inconsistencies in the browser display, or even under certain circumstances, so that the code cannot be verified by the standard. So please use the following page header:

<! DOCTYPE html>....  

  Bootstrap relies on jquery, so before introducing bootstrap.min.js, you need to introduce jquery.js

   In order for Bootstrap to develop a website that is mobile-friendly, to ensure proper drawing and touch-screen scaling, you need to add   in the head of the page viewport meta    Tags:       <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.

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

Global Display

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.

Global Link Style

Sets the color of the global link through the property @link-color.

The following are the default styles for links:

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;}

Container (Container)
class = "Container" >   ... </div>
Bootstrap 3 's container class is used to wrap content on the page. The. 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;  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: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;}

Introduce bootstrap to start using bootstrap. The difference between bootstrap.min.js and bootstrap.js is only to compress, and here we all introduce a compressed

<!doctype html>


Bootstrap Getting Started