Bootstrap源码解析容器、栅格及字体图标显示问题

本文链接：https://blog.youkuaiyun.com/make_a_difference/article/details/99709895

本文深入探讨Bootstrap框架，从源码解析固定和流体容器，详细阐述栅格系统的运作原理，以及在不同屏幕尺寸下的应用。同时，针对Bootstrap 4.x字体图标显示问题提出解决方案，包括调整目录结构和CSS引用。通过学习，提升对Bootstrap的理解和应用能力。

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

框架可以不会，但是思想基础你必须会

早在13年的时候使用div+css学过基础的前端。后面一直都是在做后端，也伴随着有前端人员可以帮忙解决一些样式问题，但是现在的项目中已经没有前端人员这种配置了，但是后端人员避免不了要写2B的界面，所以还是想把前端基础部分东西再系统深入的学习一遍。所以最近一直在看bootstrap可能写很容易主要是了解其思想，毕竟bootstrap的栅格系统设计至今未被超越

bootstrap初识

1、bootstrap更多的是为了适应移动端，当然也可以一套代码跑三端，这一切都是 CSS 媒体查询（Media Query）的功劳

2、bootstrap采用了CSS 预处理脚本 - Less 和 Sass 开发的。最后还是会将Less编译成css文件，而4.x则采用sass开发

3、bootstrap是依赖Jquery，所以这个学习的成本是不高的。jquery 的特性：

链式调用
读写二合一
隐式迭代
编程函数化

以下为bootstrap的目录结构
├── css/
│ ├── bootstrap.css【重要】
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js【重要】
│ └── bootstrap.min.js
└── fonts/ 4.x 之前的版本bootstrap还提供免费的字体图标库，但是在4.0之后不再提供，本文后面提供了如何在4.x版本用上字体图标】
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2