Bootstrap framework series, bootstrap framework

Source: Internet
Author: User
Tags bootstrap website

Bootstrap framework series, bootstrap framework

About Bootstrap, amount ~, Ah ~, Let's not talk about it much, just start with O (∩ _ ∩) O ~~

Install

You can download and install the SDK from the official bootstrap website.

You can install the Package Manager through the Bower (this article will not explain it in detail)

1 bower install bootstrap

You can install it through npm (for more information about npm)

1 npm install bootstrap

Introduce Bootstrap into the project

1 <! DOCTYPE html> 2 

Layout container

. Container class is used for fixed-width containers that support responsive Layout

1 <div class="container">2     3 </div>

. Container-fluid class is used for containers with a width of 100% and occupies all the viewports.

1 <div class="container-fluid">2     3 </div>

Raster System

Bootstrap provides a responsive, mobile-first streaming raster system, which is automatically divided into 12 copies based on the size of the screen or viewport;

The grid system creates a page layout by combining a series of rows and columns;

"Row" must be included in the. container or. container-fluid container,

Query media in the grid system

Parameters in the raster System

Case code

1 

The page effect varies with the screen size (col-lg-, col-md-, col-sm-, col-xs -).

Column offset (offsets) in the grid system)
Col-lg-offset-
1 

The effect is as follows (11 columns are offset)

Column nesting in the raster System

 1 <div class="container"> 2     <div class="row"> 3         <div class="col-lg-4 col-md-2  col-sm-3 col-xs-6">1</div> 4         <div class="col-lg-8 col-md-2  col-sm-3 col-xs-6">2 5             <div class="row"> 6                 <div class="col-lg-3 col-md-2  col-sm-3 col-xs-6">3</div> 7                 <div class="col-lg-3 col-md-2  col-sm-3 col-xs-6">4</div> 8                 <div class="col-lg-3 col-md-2  col-sm-3 col-xs-6">5</div> 9                 <div class="col-lg-3 col-md-2  col-sm-3 col-xs-6">6</div>10             </div>11         </div>12     </div>13 </div>

The effect is as follows:

Stream layout container

Change the outermost layout element. container to. container-fluid to convert the fixed grid layout to a 100%-width layout.

1 <div class="contaienr-fluid">2     <div class="row">3         4     </div>5 </div>

Please leave a message and correct it!

(First glance-end ~~)

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.