Bootstrap2用户指南
1.3.1 编译版文件结构
阅读(

Bootstrap基础

Bootstrap简介

下载Bootstrap

Bootstrap的文件结构

编译版文件结构

编译版的Bootstrap提供了两种格式的的CSS和JS文件,一种是未经压缩的文件(bootstrap.*),一种是压缩后的文件(bootstrap.min.*)。同时,还提供了使用 ImageOptim 工具压缩后的图片文件。

编译版的所有文件,都按逻辑进行分类存储,这些文件可以快速应用于任何web项目。解压下载的压缩包,你可以看到以下目录结构和内容:

  bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

编译版的Bootstrap共包含3个目录:

1、css目录:包含4个文件,分别是bootstrap.css 和 bootstrap-responsive.css,以及它们对应的压缩文件bootstrap.min.css、bootstrap-responsive.min.css。

  • bootstrap.css:是完整的、未经压缩的Bootstrap样式文件,可以在项目中直接使用。
  • bootstrap.min.css:是经过压缩后的Bootstrap样式文件,内容跟bootstrap.css完全相同,只是删除了空格、注释等不需要的内容,所以文件大小会比bootstrap.css小。在部署网站的时候,可以直接引用bootstrap.min.css,而不引用bootstrap.css。
  • bootstrap-responsive.css:在对Bootstrap框架应用了响应式布局之后所需要的CSS样式文件,如果网站项目不需要进行响应式设计,就不需要引用这个CSS。
  • bootstrap-responsive.min.css:是bootstrap-responsive.css的压缩版。

2、js目录:包含2个文件,即bootstrap.js和它对应的压缩文件bootstrap.min.js。

  • bootstrap.js:集成了Bootstrap所有JavaScript指令的集合,也是Bootstrap的灵魂,用户看到Bootstrap中所有的JavaScript效果,都是由这个文件控制的。这个文件也是一个未经压缩的版本,可以在项目中直接使用。
  • bootstrap.min.js:是bootstrap.js的压缩版,内容和bootstrap.js一样,但文件会小很多。在部署网站的时候,可以直接引用bootstrap.min.js,而不引用bootstrap.js。

3、img目录:包括 glyphicons-halflings.png 和 glyphicons-halflings-white.png 两张图片,它们是通过CSS Sprites技术,把所有的图标整合到一个图片文件中的图标文件。两张图片的效果完全相同,不同的是,前者是白底黑色图标,后者是黑底白色图标。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验