Bootstrap 4 Grid 项目教程

常拓季Jane

于 2024-08-31 07:22:55 发布

阅读量1k

点赞数 7

本文链接：https://blog.csdn.net/gitblog_00313/article/details/141733459

版权

Bootstrap 4 Grid 项目教程

bootstrap-4-gridbootstrap-4-grid - 这是一个基于 Bootstrap 4 的响应式网格系统，提供了用于创建网格布局的 CSS 类和组件。适用于快速构建响应式 Web 应用程序。特点包括易于使用、12 列网格系统、预定义的响应式类。项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-4-grid

1. 项目的目录结构及介绍

bootstrap-4-grid/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.css.map
│   ├── bootstrap-utilities.min.css
│   └── bootstrap-utilities.min.css.map
├── js/
│   ├── bootstrap.bundle.js
│   ├── bootstrap.bundle.js.map
│   ├── bootstrap.bundle.min.js
│   ├── bootstrap.bundle.min.js.map
│   ├── bootstrap.js
│   ├── bootstrap.js.map
│   ├── bootstrap.min.js
│   └── bootstrap.min.js.map
└── scss/
    ├── bootstrap-grid.scss
    ├── bootstrap-reboot.scss
    └── bootstrap-utilities.scss

目录结构介绍

css/: 包含Bootstrap 4的CSS文件，包括网格系统、重启样式和实用工具类。
js/: 包含Bootstrap 4的JavaScript文件，包括捆绑版本和独立版本。
scss/: 包含Bootstrap 4的SCSS源文件，可以用于自定义和编译。

2. 项目的启动文件介绍

启动文件

css/bootstrap-grid.css: 这是Bootstrap 4网格系统的主要CSS文件，包含了所有网格相关的样式。
js/bootstrap.bundle.js: 这是Bootstrap 4的主要JavaScript文件，包含了所有组件和插件的代码，以及Popper.js依赖。

使用方法

在你的HTML文件中引入这些文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Grid 示例</title>
    <link rel="stylesheet" href="css/bootstrap-grid.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-3">列1</div>
            <div class="col-sm-6 col-md-4 col-lg-3">列2</div>
            <div class="col-sm-6 col-md-4 col-lg-3">列3</div>
            <div class="col-sm-6 col-md-4 col-lg-3">列4</div>
        </div>
    </div>
    <script src="js/bootstrap.bundle.js"></script>
</body>
</html>

3. 项目的配置文件介绍

配置文件

scss/bootstrap-grid.scss: 这是Bootstrap 4网格系统的SCSS源文件，可以用于自定义网格系统的样式。
scss/bootstrap-reboot.scss: 这是Bootstrap 4重启样式的SCSS源文件，用于重置浏览器的默认样式。
scss/bootstrap-utilities.scss: 这是Bootstrap 4实用工具类的SCSS源文件，包含各种实用工具类。

使用方法

你可以使用这些SCSS文件来自定义Bootstrap 4的样式。首先，确保你已经安装了Node.js和npm，然后安装Bootstrap的依赖：

npm install bootstrap

然后，在你的SCSS文件中引入这些源文件：

@import "node_modules/bootstrap/scss/bootstrap-grid";
@import "node_modules/bootstrap/scss/bootstrap-reboot";
@import "node_modules/bootstrap/scss/bootstrap-utilities";

最后，使用你喜欢的CSS预处理器（如Sass）编译这些SCSS文件：

sass --watch input.scss output.css

这样，你就可以自定义Bootstrap 4的样式并生成你自己的CSS文件了。

常拓季Jane

关注

7
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
Bootstrap 4 Grid 项目教程

Bootstrap 4 Grid 项目教程 bootstrap-4-gridbootstrap-4-grid - 这是一个基于 Bootstrap 4 的响应式网格系统，提供了用于创建网格布局的 CSS 类和组件。适用于快速构建响应式 Web 应用程序。特点包括易于使用、12 列网格系统、预定义的响应式类。项目地址:https://gitcode.com/gh_mirrors/bo/bootst...
复制链接

扫一扫