Bootstrap Basic Tutorial (Part 2) - Fixed Built-in Styles

Related Reading:

Bootstrap Basic Tutorial (Part 1) - Visual Layout

HTML5document type (Doctype)

Bootstrap uses some HTML5elements and CSS properties, so HTML needs to be used5Document type.

<!DOCTYPE html>
<html>
....
</html>

Mobile-first

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

　　　Width is set to device-width to ensure that it can be displayed correctly on different devices.

　initial-scale=1.0 to ensure that the webpage loads at1:1proportions.

　　You can add user-scalable=no to disable its zoom function.

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

Responsive Image

<img src="..." class="img-responsive" alt="[#0#]"> 
　　bootstrap.css sets img-Responsive properties:
.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 Styles

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

　　Default settings are good and bad, unavoidable.

　　If you don't want underlines, you can add a class named 'btn' to the a link, with the default settings as follows:

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>

　　The styles of .container:

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

　　The left and right outer margins are determined by the browser.

　　Since the inner padding is fixed width, the container is not nestable by default.

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

　　Setting display to table creates an anonymous table-cell and a new block formatting context. The :before pseudo-element prevents the collapse of the top margin, and the :after pseudo-element clears the float. content: " " fixes some Opera bugs.

.container:after {
clear: both;
}

　　In addition, there are media queries for application:

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

Bootstrap Browser/Device Support

* Bootstrap supports Internet Explorer 8 and higher versions of IE browsers.

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

The above is the Bootstrap入门 tutorial (Part Two) introduced by the editor, the fixed built-in styles, hoping to be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. Also, I would like to express my heartfelt thanks to everyone for supporting the Runoob tutorial website!

Basic Tutorial