bootstrap入门 css栅格系统

来源：互联网发布：棉麻旗袍知乎专栏编辑：程序博客网时间：2024/05/21 17:28

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link  rel="stylesheet" href="bootstrap.min.css">    <style>        .row{            margin-bottom: 20px;        }        .row.row{            margin-top: 10px;            margin-bottom: 0px;        }        [class*="col-"]{            padding-top:15px;            padding-bottom: 15px;            background-color: #eee;            background-color: rgba(86,61,124,.15);            border:1px solid #ddd;            border:1px solid rgba(86,61,124,.2);        }    </style></head><body>   <div class="container">        <div class="row">            <div class="col-md-1">.col-md-1</div>            <div class="col-md-1">.col-md-1</div>            <div class="col-md-1">.col-md-1</div>            <div class="col-md-1">.col-md-1</div>            <div class="col-md-1">.col-md-1</div>            <div class="col-md-1">.col-md-1</div>            <div class="col-md-1">.col-md-1</div>            <div class="col-md-1">.col-md-1</div>            <div class="col-md-1">.col-md-1</div>            <div class="col-md-1">.col-md-1</div>            <div class="col-md-1">.col-md-1</div>            <div class="col-md-1">.col-md-1</div>        </div>       <div class="row">           <div class="col-md-3">.col-md-3</div>           <div class="col-md-3">.col-md-3</div>           <div class="col-md-3">.col-md-3</div>           <div class="col-md-3">.col-md-3</div>       </div>       <div class="row">           <div class="col-md-4 col-md-offset-3">.col-md-4</div>       </div>       <div class="row">           <div class="col-sm-9">               one               <div class="row">                   <div class="col-xs-8">                       first                   </div>                   <div class="col-xs-4">                       second                   </div>               </div>           </div>       </div>       <div class="row">           <div class="col-md-9 col-md-push-3">.col-md-9</div>           <div class="col-md-3 col-md-pull-9">.col-md-3</div>       </div>    </div></body></html>

<link  rel="stylesheet" href="bootstrap.min.css">  导入bootstrap的外部样式表
     <div class="row">         <div class="col-md-1">.col-md-1</div>         <div class="col-md-1">.col-md-1</div>         <div class="col-md-1">.col-md-1</div>         <div class="col-md-1">.col-md-1</div>         <div class="col-md-1">.col-md-1</div>         <div class="col-md-1">.col-md-1</div>         <div class="col-md-1">.col-md-1</div>         <div class="col-md-1">.col-md-1</div>         <div class="col-md-1">.col-md-1</div>         <div class="col-md-1">.col-md-1</div>         <div class="col-md-1">.col-md-1</div>         <div class="col-md-1">.col-md-1</div>     </div>    <div class="row">        <div class="col-md-3">.col-md-3</div>        <div class="col-md-3">.col-md-3</div>        <div class="col-md-3">.col-md-3</div>        <div class="col-md-3">.col-md-3</div>    </div>
栅格系统最多可以存放12列，以上为12列1和4列3
<div class="row">    <div class="col-md-4 col-md-offset-3">.col-md-4</div></div>
右移3格
<div class="row">    <div class="col-sm-9">        one        <div class="row">            <div class="col-xs-8">                first            </div>            <div class="col-xs-4">                second            </div>        </div>    </div></div>
栅格的嵌套  
<div class="row">    <div class="col-md-9 col-md-push-3">.col-md-9</div>    <div class="col-md-3 col-md-pull-9">.col-md-3</div></div>
9格与3格互换

0 0