"Bootstrap Basic Learning" Bootstarp CSS

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

<! DOCTYPE HTML > <  lang= "ZH-CN">   ... </ HTML >

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:

<name= "Viewport"  content= "width=device-width,//viewport width is device width                                     initial-scale=1.0,//Zoom                                     maximum-scale=1.0,//MAX zoom level (optional)                                     user-scalable=no ">// Disable page scaling (optional)

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.

About layouts

Bootstrap provides a responsive, mobile-first streaming grid system that is automatically divided into up to 12 columns as the screen or viewport (viewport) size increases.

• Img-responsive for IMG Elements

• Container elements used to wrap content on a page

• Rows need to be placed in container and used to create a horizontal group of columns.
• predefined grid classes, such as . Row and . Col-xs-4, that can be used to quickly create a grid layout .
• Rows and columns can be nested with each other, and the adaptive after nesting takes precedence over the parent element, not the device width
• to create three equal columns, use three col-xs-4and 12 columns for 12 col-xs-1.

  <Divclass= "Container">   <Divclass= "Row">      <Divclass= "col-xs-6 col-md-2 col-md-offset-1"></Div>      <Divclass= "Col-xs-6 col-md-3"></Div>      <Divclass= "Col-xs-6 col-md-3"></Div>      <Divclass= "Col-xs-6 col-md-3"></Div>   </Div>   <Divclass= "Row">...</Div></Div><Divclass= "Container">....    <!--the above code on the phone is two rows of two columns, on the computer is a row of four columns, where the first column preceded by a blank, less than the width of the other columns One-third- 
  //you can use . col-md-push-* and . col-md-pull-* This kind of settings show,col-md-push-6 as I personally understand, is on the left floating 6 columns, and then insert elements, col-md-pull-3 is floating 3 columns on the right, then inserting elements from right to left

• Media queries are a very chic "conditional CSS rule." It only applies to some CSS based on certain conditions. If those conditions are met, the appropriate style is applied.

  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {...} For all devices with Min-width: @screen-sm-min, some processing occurs if the screen width is less than the @screen-sm-max.

About typography

• About text

  <Small>Our content is within the label</Small><BR><Strong>Our content is within the label</Strong><BR><em>The bank content is within the label and rendered as italic</em><BR><Pclass= "Text-left">Align to the left</P><Pclass= "Text-center">Center Align the book</P><Pclass= "Text-right">Align the right-pointing book</P><Pclass= "text-muted">The bank's content is weakened</P> Ash<Pclass= "Text-primary">Our content is provided with a primary class</P> Blue<Pclass= "Text-success">Our content is provided with a success class</P> Green<Pclass= "Text-info">Our content is provided with an info class</P> Navy<Pclass= "Text-warning">Our content is provided with a warning class</P> Yellow<Pclass= "Text-danger">Our content is provided with a danger class</P> Red

• The style of the Bootstrap definition <abbr> element is a dashed border that appears at the bottom of the text, and the full text is displayed when the mouse hovers over it (as long as you add text to the <abbr> title property). In order to get text for a smaller font, add. initialism to <abbr>.

  <title= "World Wide Web">WWW</abbr> <br><title= "Real Simple Syndication" class = "initialism" > RSS</abbr>

• With the <address> tab, you can display contact information on a Web page.
• Use the <Blockqoute> tag as a reference

  < blockquote > This is a reference with the source header. < Small > Someone famous in Source Title</small></blockquote>

• list-unstyled used for undefined style list UL, List-inline for Level list ul

• Pre-scrollable to make the pre scrollable
• <code> Inline Display code,<pre> display multiple lines of code

About tables

• By putting any of the. TablePackage in. Table-responsiveClass, you can let the table scroll horizontally to accommodate small devices (less than 768px). When viewed on large devices larger than 768px wide, you will not see any difference.

  <Divclass= "Table-responsive">   <Tableclass= "Table">      <caption>Responsive table Layout</caption>      <thead>         <TR>            <th>Products</th>            <th>Payment Date</th>            <th>State</th>         </TR>      </thead>      <tbody>         <TR>            <TD>Product 1</TD>            <TD>23/11/2013</TD>            <TD>Pending delivery</TD>         </TR>      </tbody>   </Table></Div>      

About Forms

About Buttons

About the picture

about other style classes

"Bootstrap Basic Learning" Bootstarp CSS