我们从使用角度,暂时不想要查看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
包括有:
编译好的CSS和JS (bootstrap.),和压缩过的css,JS (bootstrap.min.)
还有一个CSS source map文件 (bootstrap.*.map) ,这个文件有些浏览器的开发工具需要它
来自Glyphicons的字体图标
可选的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是一个同样的,从目标代码反推源代码代码行的文件。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。