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


Posted in Javascript onMay 01, 2017

关于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="//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)两种字体作为自定义字体。

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

Javascript 相关文章推荐
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
node.js 抓取代理ip实例代码
Apr 30 #Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 #Javascript
socket.io学习教程之基本应用(二)
Apr 29 #Javascript
socket.io学习教程之基础介绍(一)
Apr 29 #Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 #Javascript
Vue.js在使用中的一些注意知识点
Apr 29 #Javascript
jQuery实现按比例缩放图片的方法
Apr 29 #jQuery
You might like
综合图片计数器
2006/10/09 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
PHP数据类型的总结分析
2013/06/13 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
类似框架的js代码
2006/11/09 Javascript
jQuery 动画基础教程
2008/12/25 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
Python性能优化技巧
2015/03/09 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
党旗在我心中演讲稿
2014/09/15 职场文书
感恩节寄语2015
2015/03/24 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
导游词之天津盘山
2019/11/01 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫