Home > Developer > JavaScript
The first time I got started with the Bootstrap framework and the first time I got started with bootstrap
For more information about Bootstrap, go directly to the topic:
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)
Bower install bootstrap
You can install it through npm (for more information about npm)
Npm install bootstrap
Introduce Bootstrap into the project
<! DOCTYPE html>Layout container
. Container class is used for fixed-width containers that support responsive Layout
<div class="container"> </div>. Container-fluid class is used for containers with a width of 100% and occupies all the viewports.
<div class="container-fluid"> </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
<Head> <meta charset = "UTF-8"> <title> Title </title> <! -- Step1: Set viewport --> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no"> <! -- Step 2: Introduce Bootstrap --> <link rel = "stylesheet" href = "css/bootstrap.css"> <style>. container. row div {background-color: gray; border: 1px solid red ;} </style>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-<Head> <meta charset = "UTF-8"> <title> Title </title> <! -- Step1: Set viewport --> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no"> <! -- Step 2: Introduce Bootstrap --> <link rel = "stylesheet" href = "css/bootstrap.css"> <style>. container. row div {background-color: gray; border: 1px solid red ;} </style>The effect is as follows (11 columns are offset)
Column nesting in the raster System
<div class="container"> <div class="row"> <div class="col-lg-4 col-md-2 col-sm-3 col-xs-6">1</div> <div class="col-lg-8 col-md-2 col-sm-3 col-xs-6">2 <div class="row"> <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">3</div> <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">4</div> <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">5</div> <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">6</div> </div> </div> </div></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.
<div class="contaienr-fluid"> <div class="row"> </div></div>The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
If you want to learn more, click here to learn more. Then, we will attach two wonderful topics: Bootstrap learning tutorial Bootstrap practical tutorial.
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
