# Bootstrap

**Repository Path**: Haku10086/bootstrap

## Basic Information

- **Project Name**: Bootstrap
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-19
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 响应式网页（Bootstrap 4）

> 参考链接 [YouTube](https://www.youtube.com/watch?v=BSUjh4ebmzE&ab_channel=Tech2etc)

## 结构设计

1. 项目启动前先搭建好结构与环境同时思考如何简化代码及提高可复用性与可维护性
2. 提高 HTML 结构代码的复用性和正确性，尽量使用 CSS 变量避免后期调整样式
3. 注意调整字体的样式包括 font-weight、font-family、letter-spacing 等
4. CSS 样式分大块写，不要全写在一个括号里，后期不好找代码（合理利用注释和空格美化结构）
5. 利用好 SASS 的复杂功能，响应式开发推荐以 rem 为尺度单位
6. 不要去写死块元素的宽度和高度，利用 bootstrap 的网格系统去自适应宽高

## 重点代码

1. 相信视觉效果而不是代码，因为人的视觉效应
2. 单个样式推荐使用 bootstrap 的类去写，多个样式调整推荐使用 CSS 写
3. 调试时要注意区分差异性，通过自己观察调整代码，如 scrollspy 插件的使用
4. 遇到问题不能解决时，推荐看引入的库的源代码解决
5. 注意区分问题的重要程度去做开发，简单代码可以直接复制粘贴，复杂的搞懂原理
6. 断点代码由小到大顺序排列

![栅格系统](https://images.gitee.com/uploads/images/2020/1119/180108_8b46b9e3_4912594.png "屏幕截图.png")