Bootstrap Introductory tutorial (ii) Fixed built-in style _javascript tips

Related reading:

Bootstrap Introductory Tutorial (i) Visual layout

HTML5 Document Type (Doctype)

Bootstrap uses some HTML5 elements and CSS properties, so you need to use HTML5 document types.

<! DOCTYPE html>
 
 

Mobile device Preferred

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

The width is set to device-width to ensure that it renders correctly on different devices.

initial-scale=1.0 make sure that the page is loaded with a 1:1 representation.

You can add user-scalable=no to the viewport meta tag to prevent its scaling capabilities.

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

Responsive images

 
bootstrap.css Set the properties of Img-responsive:
. img-responsive {
display:inline-block;
Height:auto;
max-width:100%;
}

Basic Global Display

Body {
font-family: "Helvetica neue", Helvetica, Arial, Sans-serif;
font-size:14px;
line-height:1.428571429;
Color: #333333;
Background-color: #ffffff;
}
Body {margin:0}

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

The default settings are good and bad, it is inevitable.

If you don't want an underscore, you can add a class named Btn to the A link, which defaults to the following settings:

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

Avoid cross-browser inconsistencies

NORMALIZE.CSS provides better cross-browser consistency.

Container (Container)

<div class= "Container" >.
</div>

. Container style:

. container {
padding-right:15px;
padding-left:15px;
Margin-right:auto;
Margin-left:auto;
}

The left and right margins are decided by the browser.

Because the inner margin is fixed width, the container is not nested by default.

. container:before,.container:after {
display:table;
Content: "";
}

Setting display as table creates an anonymous Table-cell and a new block formatting context. : The before pseudo element prevents the top margin from collapsing: After the pseudo element clears the float. Content: "Fix some opera bugs."

. container:after {
clear:both;

There are also requests for appropriate media inquiries:

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

Bootstrap Browser/device support

* Bootstrap supports Internet Explorer version 8 and later for IE browsers.

Reference: http://www.runoob.com/bootstrap/bootstrap-css-overview.html

The above is a small set to introduce the bootstrap introductory tutorial (ii) The fixed built-in style, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!