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 入门基础学习
Mar 10 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
JQuery工具函数汇总
Jun 15 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 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通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
python中enumerate函数用法实例分析
2015/05/20 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
py-charm延长试用期限实例
2019/12/22 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
学年末自我鉴定
2014/01/21 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
安全教育培训心得体会
2016/01/15 职场文书
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技