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 相关文章推荐
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
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
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
YII中assets的使用示例
2014/07/31 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
基于jQuery架构javascript基础体系
2011/01/01 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
js实现二级导航功能
2017/03/03 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
Python中的面向对象编程详解(上)
2015/04/13 Python
python中私有函数调用方法解密
2016/04/29 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
python定时任务 sched模块用法实例
2019/11/04 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
介绍一下Make? 为什么使用make
2013/12/08 面试题
Python如何定义一个函数
2015/09/01 面试题
体育教育专业毕业生自荐信
2013/11/15 职场文书
大学生旷课检讨书
2014/01/22 职场文书
学校万圣节活动方案
2014/02/13 职场文书
酒后驾车标语
2014/06/30 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
退休教师追悼词
2015/06/23 职场文书