bootstrap - 包的构成

2024年2月4日 165次阅读 来源: 1000copy

我们从使用角度，暂时不想要查看bootstrap的源代码，而是直接使用它预编译好的包。包内容如下：

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/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

包括有：

  1. 编译好的CSS和JS (bootstrap.)，和压缩过的css，JS (bootstrap.min.)

  2. 还有一个CSS source map文件 (bootstrap.*.map) ，这个文件有些浏览器的开发工具需要它

  3. 来自Glyphicons的字体图标

  4. 可选的Bootstrap theme（主题）

稍作解释：

1.Bootstrap theme文件是什么?其实就是bootstrap2.0的主题样式。你可以把html内对bootstrap.css的引用删除，添加对此theme文件的引用，查看同样的html组件下，样式是有变化的。此文件也有CDN，供不想下载的人使用。地址如下：

    https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css

2.何为字体图标？字体图标看起来就像图标，实际上则是字体。和字体不同的地方在于，它的内容不是字母或者数字，而是图形和符号。可以使用css风格化这些字体，就像风格化一般的文字一样。bootstrap默认提供来自Glyphicons的字体图标，承载在字体文件中（在fonts目录内）

3.何为css source map文件？bootstrap的css文件谁有sass、less编译而成的，当运行调试时，需要根据当前css的位置反推源代码less、sass文件的代码行。此sourcemap文件就是可以帮助调试工具定位代码行的。在编译器技术领域，sourcemap是一个同样的，从目标代码反推源代码代码行的文件。

    原文作者：1000copy
    原文地址: https://segmentfault.com/a/1190000006886228
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞