我们从使用角度,暂时不想要查看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是一个同样的,从目标代码反推源代码代码行的文件。


Reco
4.6k 声望541 粉丝

敢作敢为