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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 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
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
vue常用指令代码实例总结
2020/03/16 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
pytorch实现查看当前学习率
2020/06/24 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
《神奇的克隆》教学反思
2014/04/10 职场文书
学校安全责任书范本
2014/07/23 职场文书
个人收入证明模板
2014/09/18 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书