bootstrap入门 css栅格系统

最新推荐文章于 2024-05-14 14:08:38 发布

小章鱼哥

最新推荐文章于 2024-05-14 14:08:38 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/u014787301/article/details/43970895

javascript 专栏收录该内容

107 篇文章

订阅专栏

本文介绍并演示了如何使用Bootstrap框架实现响应式网页布局，包括不同尺寸的列分布、偏移、嵌套及列之间的推拉效果。通过具体实例展示了栅格系统的灵活性和实用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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格互换