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文件了。