Bootstrap里的文件分别代表什么意思及其引用方法

时间：2024-01-13 15:22:44

关于Bootstrap打包的文件分别代表什么意思，官网也没有给出一个明确的解释，在网上查了一些资料，总价归纳了如下：

bootstrap/    <!--主目录-->

├── css/    <!--CSS样式文件-->

│   ├── bootstrap.css    <!--Bootstrap核心CSS文件-->

│   ├── bootstrap.css.map    <!--source map文件-->

│   ├── bootstrap.min.css    <!--Bootstrap核心CSS文件 压缩版-->

│   ├── bootstrap.min.css.map

│   ├── bootstrap-theme.css    <!--可选的Bootstrap主题文件（一般不用引入）-->

│   ├── bootstrap-theme.css.map

│   ├── bootstrap-theme.min.css    <!--可选的Bootstrap主题文件（一般不用引入） 压缩版-->

│   └── bootstrap-theme.min.css.map

├── js/    <!--JavaScript文件-->

│   ├── bootstrap.js    <!--Bootstrap核心JavaScript文件-->

│   └── bootstrap.min.js    <!--Bootstrap核心JavaScript文件 压缩版-->

└── fonts/    <!--字体图标-->

    ├── glyphicons-halflings-regular.eot

    ├── glyphicons-halflings-regular.svg

    ├── glyphicons-halflings-regular.ttf

    ├── glyphicons-halflings-regular.woff

    └── glyphicons-halflings-regular.woff2

*bootstrap.css 是完整的bootstrap样式表，未经压缩过的，可供开发的时候进行调试用
*bootstrap.min.css 是经过压缩后的bootstrap样式表，内容和bootstrap.css完全一样，但是把中间不必要的空格之类的东西都删掉了，所以文件大小会比bootstrap.css小，可以在部署网站的时候引用，如果引用了这个文件，就没必要引用bootstrap.css了，下面的文件同样。

bootstrap的环境至少需要3个文件：bootstrap.min.css、jQuery.min.js、bootstrap.min.js，具体代码如下：

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件，务必在bootstrap.min.js 之前引入 -->

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

需要注意的是：
bootstrap.min.css、jquery.min.js、bootstrap.min.js这三个文件的引入顺序一定不能错乱，一般把jquery.min.js、bootstrap.min.js这两个文件放入HTML网页的最底部，这么做是为了防止网页未加载完毕而这两个文件先加载可能产生的不必要的问题。

关于字体文件的解释：

而由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。 字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。

TrueType

Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

EOT – Embedded Open Type (.eot)

EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。

OpenType (.otf)

OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。

WOFF – Web Open Font Format (.woff)

WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。

SVG (Scalable Vector Graphics) Fonts (.svg)

SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。使用方法：使用CSS3的@font-face属性可以实现在网页中嵌入任意字体。 但是IE只支持微软自有的EOT格式字体，需要用字体转换工具将其转换为EOT格式，其他浏览器都不支持这一字体格式，其它浏览器可以设置TTF(TrueType)和OTF(OpenType)两种字体作为自定义字体。

相关文章