bootstrap及删格系统

vGuYi

已于 2022-05-19 21:29:54 修改

阅读量264

点赞数 2

CC 4.0 BY-SA版权

文章标签： bootstrap javascript css

于 2022-05-19 20:52:34 首次发布

本文链接：https://blog.csdn.net/vGuYi/article/details/124870873

本文深入探讨了Bootstrap的删格系统，详细讲解了如何利用它来创建响应式的网页布局。通过实例，展示了如何配置列宽、响应式断点以及如何调整移动端和桌面端的显示效果，为前端开发者提供了实用的技巧和最佳实践。

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

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定

HTML 结构及 JavaScript ，快速编写功能完善的网页及常见交互效果。

bootstrap中文官网

首页 → BootStrap3中文文档 → 下载BootStrap

使用步骤

1. 引入： BootStrap提供的CSS代码

2. 调用类：使用BootStrap提供的样式

container ：响应式布局版心类

栅格系统 (grid systems),也叫“网格系统，它就是通过一系列的行（row）与列（column）的组合创建页面布局。

我们的内容可以直接放入BootStrap栅格系统里面。

栅格化是指将整个网页的宽度分成若干等份

BootStrap3默认将网页分成 12等份

.container 是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

.container-fluid 也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100% 。

分别使用.row类名和 .col类名定义栅格布局的行和列。

注意:

1. container类自带间距15px;

2. row类自带间距-15px

 <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        /* 版心 */
        .container {

            height: 500px;
        }

        .container .row .col-lg-6>div {

            height: 100px;
            background-color: coral;
        }

        .container .row .col-lg-6>div:nth-child(2n+1) {
            background-color: chartreuse;
        }
    </style>
</head>


<body>
    <div class="container">

        <div class="row">
            <div class="col-lg-6">
                <!-- lg时一行12/3个,md时一行12/4个,sm时一行12/2个 ,xs时一行12/12个-->
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">5</div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">6</div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">7</div>
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">5</div>
            </div>
        </div>
    </div>
</body>

后期效果:

 <!-- 栅格布局 -->
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a href="">
                    <img src="./images/omi.png" alt="">
                    <h3>OMG</h3>
                    <p>开发现代化的web组件化框架</p>
                </a>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a href="">
                    <img src="./images/omi.png" alt="">
                    <h3>OMG</h3>
                    <p>开发现代化的web组件化框架</p>
                </a>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a href="">
                    <img src="./images/omi.png" alt="">
                    <h3>OMG</h3>
                    <p>开发现代化的web组件化框架</p>
                </a>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a href="">
                    <img src="./images/omi.png" alt="">
                    <h3>OMG</h3>
                    <p>开发现代化的web组件化框架</p>
                </a>
            </div>

        </div>