Basic introduction
1. Bootstrap provides a responsive, mobile-first streaming grid system that automatically divides the system into up to 12 columns as the screen or viewport (viewport) size increases
2. The raster system is used to create a page layout with a series of rows (row) and columns (column) combinations
3, row must be included .container (fixed width) or .container-fluid (100% width) in order to give it the appropriate arrangement (aligment) and inner complement (padding).
Basic case
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head> <MetaCharSet= "Utf-8"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1"> <!--The above 3 meta tags * must be * first, and any other content * must be followed! - <title>Bootstrap 101 Template</title> <!--Bootstrap - <Linkhref= "Css/bootstrap.min.css"rel= "stylesheet"> <style>. Row Div{Border:1px solid #000; } </style> <!--HTML5 Shim and Respond.js for IE8 support of HTML5 elements and media queries - <!--WARNING:Respond.js doesn ' t work if you view the page via file:// - <!--[If Lt IE 9]> <script src= "Https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js" ></script> &L T;script src= "Https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js" ></script> <! [EndIf] -</Head><Body><Divclass= "Container"> <Divclass= "Row"> <Divclass= "Col-lg-1">1</Div> <Divclass= "Col-lg-1">1</Div> <Divclass= "Col-lg-10">10</Div> </Div> <Divclass= "Row"> <Divclass= "Col-md-1">1</Div> <Divclass= "Col-md-1">1</Div> <Divclass= "Col-md-10">10</Div> </Div> <Divclass= "Row"> <Divclass= "Col-sm-1">1</Div> <Divclass= "Col-sm-1">2</Div> <Divclass= "Col-sm-10">10</Div> </Div> <Divclass= "Row"> <Divclass= "Col-xs-1">1</Div> <Divclass= "Col-xs-1">1</Div> <Divclass= "Col-xs-10">10</Div> </Div></Div><BR><BR><Divclass= "Container-fluid"> <Divclass= "Row"> <Divclass= "col-xs-12 col-sm-6 col-md-4 col-lg-3">Introduction 1</Div> <Divclass= "col-xs-12 col-sm-6 col-md-4 col-lg-3">Introduction 2</Div> <Divclass= "col-xs-12 col-sm-6 col-md-4 col-lg-3">Introduction 3</Div> <Divclass= "col-xs-12 col-sm-6 col-md-4 col-lg-3">Introduction 4</Div> <Divclass= "col-xs-12 col-sm-6 col-md-4 col-lg-3">Introduction 5</Div> <Divclass= "col-xs-12 col-sm-6 col-md-4 col-lg-3">Introduction 6</Div> <Divclass= "col-xs-12 col-sm-6 col-md-4 col-lg-3">Introduction 7</Div> <Divclass= "col-xs-12 col-sm-6 col-md-4 col-lg-3">Introduction 8</Div> </Div></Div><!--jQuery (necessary for Bootstrap ' s JavaScript plugins) -<Scriptsrc= "Js/jquery.min.js"></Script><!--include all compiled plugins (below), or include individual files as needed -<Scriptsrc= "Js/bootstrap.min.js"></Script></Body></HTML>
Mobile Web--bootstrap Grid System
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
