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">
- <!-- 可选的Bootstrap主题文件(一般不用引入) -->
- <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
- <!-- 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里的文件分别代表什么意思及其引用方法的更多相关文章
- Bootstrap里的文件作用
Bootstrap里的文件分别表示什么?都有什么用? bootstrap.css bootstrap.min.css bootstrap-responsive.css bootstrap-respon ...
- Bootstrap里的文件分别表示什么?都有什么用?
bootstrap.css 是完整的bootstrap样式表,未经压缩过的,可供开发的时候进行调试用bootstrap.min.css 是经过压缩后的bootstrap样式表,内容和bootstrap ...
- SQL Server里在文件组间如何移动数据?
平常我不知道被问了几次这样的问题:“SQL Server里在文件组间如何移动数据?“你意识到这个问题:你只有一个主文件组的默认配置,后来围观了“SQL Server里的文件和文件组”后,你知道,有多 ...
- SQL Server里的文件和文件组
在今天的文章里,我想谈下SQL Server里非常重要的话题:SQL Server如何处理文件的文件组.当你用CREATE DATABASE命令创建一个简单的数据库时,SQL Server为你创建2个 ...
- Eclipse点击工程结构里任意文件或文件夹变拖动(或复制)的bug
本文为原创文章,欢迎转载,但请注明出处http://www.cnblogs.com/yexiubiao/p/5204601.html,未在文章页面明显位置给出原文连接的,将保留追究法律责任的权利. 在 ...
- VS工程里的文件都是啥?如何打包? 2015-03-04
打完补充:以下内容全部是我一家之言,只是愿意分享,内容如有不妥还请见谅. ====================================================== 刚才接收了一份代 ...
- 使用bootstrap的html文件转换成jsp…
问题:使用bootstrap的html文件转换成jsp时表单高度变窄 解决方法: 将jsp中html文档类型修改为<!DOCTYPE html> 问题即可解决. 也就是bootstrap只 ...
- VS编辑代码的时候,都会自动在资源浏览器里将文件所在项目展开
如何设置VS编辑代码的时候,都会自动在资源浏览器里将文件所在项目展开 工具-选项-项目和解决方案-常规-在解决方案资源管理器中跟踪活动项(C)
- 不安装rpm包,取出rpm包里的文件
1.查看rpm包里的文件 [root@VM_166_132 ~]# rpm -qlp mysql5.6.29-1-3.x86_64.rpm |more/etc/ld.so.conf.d/mysql-5 ...
随机推荐
- TensorFlow 神经网络教程
TensorFlow 是一个用于机器学习应用程序的开源库.它是谷歌大脑的第二代系统,在取代了近源的 DistBelief 之后,被谷歌用于研究和生产应用.TensorFlow 提供了很多种语言接口,包 ...
- 解决C#调用执行js报检索 COM 类工厂中 CLSID 为 {0E59F1D5-1FBE-11D0-8FF2-00A0D10038BC} 组件失败
最近做了一个模拟请求的网站简化原网站的繁琐数据,提出有用的数据简单展示并完成post.由于原网站数据有js加密,所以我抓出原网站的js解密方法,由C#调用js得到解密后的数据. 整个抓包的框架是用的苏 ...
- Go语言运算符
目录 算术运算符 注意事项 赋值运算符 逻辑运算符 短路与和短路或 关系运算符 位运算符 其他运算符 运算符优先级 运算符用于在程序运行时执行数学或逻辑运算. Go 语言内置的运算符有:算术运算符.赋 ...
- springboot知识点补充(一)
测试配置 @RunWith(SpringRunner.class) @SpringBootTest @Configuration @ActiveProfiles("test") p ...
- OC学习5——类和对象
1.OC是在C语言基础上进行扩展得到的一门面向对象的程序设计语言,它也提供了定义类.成员变量和方法的基本功能.类可以被认为是一种自定义的数据类型,使用它可以定义变量,所有使用类定义的变量都是指针类型的 ...
- Python模块练习题
练习题: 1.logging模块有几个日志级别? #INFO,WARNING,DEBUG,CRITICAL,ERROR 2.请配置logging模块,使其在屏幕和文件里同时打印以下格式的日志 2017 ...
- 不要再说我简历上Java项目都好low!【offer收割机必备】
获取精品学习资料私信 欢迎加入QQ群架构华山论剑:836442475(大牛聚集地)一起交流学习探讨! 目录 高级工程师必备:系统设计能力 如何让你的项目更有技术含量 这篇文章我们继续来聊一聊,在系统设 ...
- Xamarin.Android 压缩图片并上传到WebServices
随着手机的拍照像素越来越高,导致图片赞的容量越来越大,如果上传多张图片不进行压缩.质量处理很容易出现OOM内存泄漏问题. 最近做了一个项目,向webservices上传多张照片,但是项目部署出来就会出 ...
- 第六章:四大组件之Activity
tivityActivity作为Android四大组件之一,也是其中最重要的一个组件.作为一个与用户交互的组件,我们可以把Activity比较成为windows系统上的一个文件夹窗口,是一个与用户交互 ...
- 「Java基本功」一文读懂Java内部类的用法和原理
内部类初探 一.什么是内部类? 内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能 ...