BootStarp栅格系统_css col-md-4-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_69793485/article/details/124882449

本文介绍了BootStrap，一个由Twitter开发的前端UI框架，它提供了CSS样式和JavaScript，用于快速构建功能丰富的网页。文章重点讨论了BootStrap的栅格系统，该系统将页面分为12等份，允许根据屏幕尺寸动态调整布局。内容包括如何导入和使用BootStrap，以及如何利用列嵌套和偏移创建灵活的页面布局。

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

Bootstrap

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网: Bootstrap中文网

下载安装包。

开发中，我们都是按需导入，简单理解，需要用到啥，我们复制那个文件，没有必要都放入，提高性能。

使用步骤：

1.复制css文件

：引入到html中

<link rel="stylesheet" href="./css/bootstrap.min.css">

2.复制字体图标文件夹

3.如果需要js，则复制js文件，并引入html文件中

<script src="./js/bootstrap.min.js"></script>

4.使用BootStarp内部预定义好的类即可。

<div class="container">内容</div>

栅格系统

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

简单说，栅格系统也是一种布局方式。 BootStrap 给咱们内置好了一套布局系统。

BootStrap3默认将网页分成12等份

关于BootStarp的屏幕大小


/* 超小屏幕（手机，小于等于 768px） */
/*  Bootstrap 中是默认的代码*/
.col-xs-
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
.col-sm-

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
.col-md-

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
.col-lg-

1.比如，超大屏幕下我们想要独占一行的大盒子

 /* 带版心类 */
<div class="container">
    <div class="col-lg-12">在大屏下独占一行</div>
  </div>

所以一般我们先写行(row)再写列(col)

2.超大屏幕下，我们一行左右来分

<div class="container">
    <div class="col-lg-6">我占左边6个</div>
    <div class="col-lg-6">我站右边6个</div>
</div>

3.超大屏下，一行放4个.

4.如果实现不同屏幕下，不同的显示个数，可以通过使用不同类名。

超大屏下，如果一行放4个，中等屏幕下放3个

<div class="container">
    <div class="col-lg-3 col-md-4">盒子内容</div>
    <div class="col-lg-3 col-md-4">盒子内容</div>
    <div class="col-lg-3 col-md-4">盒子内容</div>
    <div class="col-lg-3 col-md-4">盒子内容</div>
  </div>

5.超大屏下，如果一行放4个，中等屏幕下放3个，小屏放2个。

<div class="container">
    <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
    <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
    <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
    <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
  </div>

6.超大屏下，如果一行放4个，中等屏幕下放3个，小屏放2个，超小屏放1个。

 <div class="container">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
    </div>

列偏移通过 col-lg-offset-*

让盒子往右侧走，左边有几份

比如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入BootStrap.css -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .first div {
            height: 100px;
            background-color: pink;
        }

        .second div {
            background-color: purple;
            height: 100px;
        }

        .third div {
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row first">
            <div class="col-lg-4">左侧</div>
            <!-- 往左偏移四格 -->
            <div class="col-lg-4 col-lg-offset-4">右侧</div>
        </div>
        <div class="row second">
            <!-- 往左偏移三格 -->
            <div class="col-lg-3 col-lg-offset-3">左侧</div>
            <!-- 往左偏移三格 -->
            <div class="col-lg-3 col-lg-offset-3">右侧</div>
        </div>
        <div class="row third">
            <!-- 往左偏移三格 -->
            <div class="col-lg-6 col-lg-offset-3"></div>
        </div>
    </div>

</body>

</html>

列嵌套

一个盒子里面可以再嵌套其他的盒子，在这个盒子的基础上，它又分为了12份。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入BootStrap.css -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .row {
            height: 200px;
            background-color: red;
        }

        .row>div:nth-child(n+2) {
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <p class="col-lg-6">1</p>
                <p class="col-lg-6">2</p>
            </div>
            <!-- 继续嵌套的盒子 -->
            <div class="col-lg-4">
                <p class="col-lg-3">1</p>
                <p class="col-lg-3">2</p>
                <p class="col-lg-3">1</p>
                <p class="col-lg-3">2</p>
            </div>
        </div>
    </div>

</body>

</html>