1

Bootstrap-2栅格系统

　　栅格系统（使用最新版本bootstrap）

　　　　Grid options(网格配置)

　　　　Responsive classes（响应式class）

　　　　Gutters（间距）

　　　　Alignment（对齐方式）

　　　　Reordering（排序）

　　　　Offsetting（位置间距）

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="bootstrap.css"/>
        <title></title>
        <style type="text/css">
            
            .col{
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="" class="container">
            <div id="" class="row" >
                <div id="" class="col">aaa</div>
                <div id="" class="col">bbb</div>
                <div id="" class="col">ccc</div>
            </div>
            <div class="row">
                <!--sm、md、lg、xl-->
                <div class="col-sm">ddd</div>
                <div class="col-sm">eee</div>
                <div class="col-sm">fff</div>
            </div>
        </div>
    </body>
</html>

 

　　效果如下：

　　

 

 

 

　　

 

　　

 

 　　

 

　　　　...

posted @ 2020-11-19 15:53  small_zhouzhou  阅读(92)  评论(0)    收藏  举报
TOP