[Bootstrap Basics] 01 Bootstarp CSS, bootstrapbootstarp
Bootstrap uses some HTML5 elements and CSS attributes, so you need to use the HTML5 document type.
<!DOCTYPE html>To make the websites developed by Bootstrap friendly to mobile devices and ensure proper drawing and touch screen scaling, you need to add them to the head of the webpage.Viewport metaLabel:
<Meta name = "viewport" content = "width = device-width, // The device width is initial-scale = 1.0, // maximum-scale = 1.0, // maximum zoom level (optional) user-scalable = no "> // disable page zoom (optional)Bootstrap uses Normalize to establish cross-browser consistency. Normalize.css is a small CSS file that provides better cross-browser consistency in the default style of HTML elements.
About Layout
Bootstrap provides a responsive, mobile device-first streaming grid system. With the increase in the screen or viewport size, the system will automatically be divided into up to 12 columns.
Img-responsive for img Elements
Elements used by the container to wrap content on the page
<Div class = "container"> <div class = "row"> <div class = "col-xs-6 col-md-2 col-md-offset-1"> </div> <div class = "col-xs-6 col-md-3"> </div> <div class = "col-xs-6 col-md-3"> </div> <div class = "col-xs-6 col-md-3"> </div> <div class = "row" >... </div> <div class = "container"> .... <! -- The above Code is two rows and two columns on the mobile phone, and one row and four columns on the computer. The first column is blank and 1/3 in width than other columns -->
// Available. Col-md-push -*And. Col-md-pull -*This type of settings is displayed,Col-md-push-6 according to my personal understanding, is floating 6 columns on the left, and then insert the element,The col-md-pull-3 floats 3 columns on the right and inserts elements from right to left.
@ Media (min-width: @ screen-sm-min) and (max-width: @ screen-sm-max ){...} // For all devices with min-width: @ screen-sm-min, some processing is performed if the screen width is smaller than @ screen-sm-max.About typographical
<Small> the content of this line is in the tag </small> <br> <strong> the content of this line is in the tag </strong> <br> <em> the content of this line is in the tag inner, and displayed in italic </em> <br> <p class = "text-left"> align to left </p> <p class = "text-center"> center align text </p> <p class = "text-right"> align text to the right </p> <p class = "text-muted"> contents of this line are diminished </ p> gray <p class = "text-primary"> This row contains a primary class </p> blue <p class = "text-success"> This row contains a success class </p> green <p class = "text-info"> This row contains an info class </p> Deep Blue <p class = "text-warning"> This row contains warning class </p> yellow <p class = "text-danger"> This row contains a danger class </p> Red
<abbr title="World Wide Web">WWW</abbr><br><abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
<Blockquote> This is a reference with a source title. <Small> Someone famous in Source Title </small> </blockquote>
List-unstyled for undefined style list ul, list-inline for horizontal list ul
About tables
<Div class = "table-responsive"> <table class = "table"> <caption> responsive table layout </caption> <thead> <tr> <th> product </th> <th> payment date </th> <th> Status </th> </tr> </thead> <tbody> <tr> <td> product 1 </td> <td> 23/11/2013 </td> <td> to be delivered </td> </tr> </tbody> </table> </div>
About forms
About buttons
About Images
About Other style classes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
