当前位置: 首页 > 编程笔记 >

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

吕承望
2023-03-14
本文向大家介绍Bootstrap里的文件分别代表什么意思及其引用方法,包括了Bootstrap里的文件分别代表什么意思及其引用方法的使用技巧和注意事项,需要的朋友参考一下

关于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" rel="external nofollow" >
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="external nofollow" >
<!-- jQuery文件,务必在bootstrap.min.js 之前引入 --> 
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://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)两种字体作为自定义字体。

以上所述是小编给大家介绍的Bootstrap里的文件分别代表什么意思及其引用方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍http状态码有那些,分别代表什么意思相关面试题,主要包含被问及http状态码有那些,分别代表什么意思时的应答技巧和注意事项,需要的朋友参考一下 简单版: 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息 200 OK 正常返回信息 201 Created 请求成功并且服务器创建了新的资源

  • 我从http://dash-mse-test.appspot.com/media.html得到了一个示例mpd文件,下面是一个包含单个表示的片段。 这是什么意思?indexRange的值意味着什么? 初始化结束范围始终比indexRange开始值小一个。即,在上述2755-1=2754(初始化值) 有人能帮我理解这些数字的意义吗? 编辑1: 根据下面@sander的回答,我知道分段索引是字节范围。

  • 在我Linux的主文件夹中,我有几个配置文件,文件扩展名为“rc”: 这些名字中的“rc”是什么意思?

  • 问题内容: 我遇到了这段代码,我不退出这一行来理解它的含义或它在做什么。 我知道是什么还是什么,但是什么是? 问题答案: 这是构造函数重载: 您可以通过缺少返回类型来判断此代码​​是构造函数,而不是方法。这与在构造函数的第一行中调用以初始化扩展类非常相似。您应该在构造函数的第一行中调用(或的任何其他重载),从而避免构造函数代码重复。 您也可以看看这篇文章:Java中的构造方法重载-最佳实践

  • 我不明白JMH结果的分数属性?我也没在网上找到任何关于它的东西。 有人能告诉我,这是关于什么的吗?据我所知,高分比低分好,但这到底是什么意思,是如何计算的?

  • 在 jmh 结果中,分数以 ns/op 为单位,即每次操作所花费的时间(以纳秒为单位),操作是否是指基准测试调用?如果是这种情况,较低的分数将意味着更快的呼叫?