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)两种字体作为自定义字体。

转载于:https://www.cnblogs.com/deshun/p/6789788.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370883.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css 小知识点:inline/inline-block/line-height

inline: 此元素会被显示为内联元素&#xff0c;元素前后没有换行符。因此&#xff1a;无法设置宽度和高度&#xff5e; inline-block: 行内块元素。元素前后没有换行符&#xff08;CSS2.1 新增的值&#xff09; 用通俗的话讲&#xff0c;就是不独占一行的块级元素。然后拥有…

Linux外域递送邮件,求助:外域邮件发送不了 (页 1) - iRedMail 技术支持 - iRedMail 开源邮件服务解决方案...

必填信息。没有填写将不予回复 - iRedMail 版本号&#xff1a; v0.9.5-1- 使用哪个数据库存储用户帐号(OpenLDAP&#xff0c;MySQL&#xff0c;PostgreSQL)&#xff1a; v0.6.1 (MySQL)- 使用的 Linux/BSD 发行版名称及版本号&#xff1a;CentOS 6.5- 与您的问题相关的日志…

协同过滤算法_机器学习 | 简介推荐场景中的协同过滤算法,以及SVD的使用

本文始发于个人公众号&#xff1a;TechFlow&#xff0c;原创不易&#xff0c;求个关注今天是机器学习专题的第29篇文章&#xff0c;我们来聊聊SVD在上古时期的推荐场景当中的应用。推荐的背后逻辑有没有思考过一个问题&#xff0c;当我们在淘宝或者是某东这类电商网站购物的时候…

JavaOne 2012:观察与印象

当我坐在旧金山国际机场等待登上飞机返回家中时&#xff0c;我一次又一次令人满意但累人的JavaOne&#xff08;2012&#xff09;体验&#xff0c;我正在开始写这篇特别的博客文章。 自上周日的主题演讲以来&#xff0c;在会议上疯狂地撰写了约30篇博客文章之后&#xff0c;很难…

less学习三---父选择器

引用父选择器需要用到“&”符号 &#xff06;运算符表示嵌套规则的父选择器&#xff0c;并且在修改类或伪类选择器的应用中非常普遍 ul{li{&:nth-child(2) a {color: red;&:hover {color: yellow;}}} }//编译为 ul li:nth-child(2) a {color: red; } ul li:nth-ch…

SaltStack匹配target-第六篇

练习内容 Salt远程执行中目标选择常用的模式 1.通配符匹配 2.正则表达式匹配 3.List支持 4.Grains匹配 5.IP地址匹配 6.混合匹配 7.Node groups 远程执行格式 target就是我们要选择的minion salt <target> <function> [arguments] 一&#xff0c;通配符匹配&#x…

heartbeat+drbd+mysql

配置heartbeat接管drbd服务 配置heartbeat接管drbd服务&#xff08;延续之前heartbeat及drbd博文内容&#xff09;1、两端确认都建立好 /data目录2、关闭drbd服务,关闭heartbeat服务&#xff0c;自启动全部关闭3、两端配置haresourcesdata-1-1 IPaddr::192.168.0.191/24/eth0 d…

在linux下dns绑定域名,在Linux系统中,使用Bind搭建DNS域名解析服务

DNS域名解析服务(DomainNameSystem)是用于解析域名与IP地址对应关系的服务作用为维护着一个地址数据库&#xff0c;记录着各种主机域名与IP地址的对应关系&#xff0c;以便为客户提供正向或反向的地址查询服务&#xff0c;即正向解析与反向解析。正向解析&#xff1a;将制定的域…

用imspost制作catia后处理_新产品开发需要做原型验证,怎么样成型制作才省钱?...

有一天一个朋友拿着一个公仔机器人的项目过来找我&#xff0c;说做200套外壳&#xff0c;问我如何省成本用最少的钱做好产品。类似一下图片的机器人一样。组装起来高200mm左右&#xff0c;内外配件总共是62个。我当时看到产品小估算重量也很轻&#xff0c;就跟他说用3D打印有快…

如何把大段文字转为带html标签的文字

开发网页的时候&#xff0c;有时候会遇到大段的隐私声明&#xff0c;用户协议等等&#xff0c;我们呀要复制粘贴展示出来&#xff0c;必须加大量的p标签&#xff0c;h1,h2&#xff0c;空格符&#xff0c;br标签&#xff0c;这对我们来说无疑是泪崩的&#xff0c;有个很好的办法…

使用MongoDB进行事件流

MongoDB是一个非常出色的“ NoSQL”数据库&#xff0c;具有广泛的应用程序。 在SoftwareMill开发的一个项目中&#xff0c;我们将其用作复制的事件存储&#xff0c;然后将事件从事件流传输到其他组件。 介绍 基本思想非常简单&#xff08;另请参阅Martin Fowler关于Event Sou…

hihocoder-Week173--A Game

hihocoder-Week173--A Game A Game 时间限制:10000ms单点时限:1000ms内存限制:256MB描述 Little Hi and Little Ho are playing a game. There is an integer array in front of them. They take turns (Little Ho goes first) to select a number from either the beginning …

php打乱数组二维数组、多维数组

//这个是针对二维数组的!下面针对多维数组的乱序方法<?php function shuffle_assoc($list) { if (!is_array($list)) return $list; $keys array_keys($list); shuffle($keys); $random array(); foreach ($keys as $key) $random[$key] $list[$key]; ret…

明明一样的程序为啥有的系统就报错有的就正常运行呢_SurfaceGo Android系统折腾笔记...

Surface Go平板在Win10系统下的表现我认为还是比较出色的&#xff0c;x86架构CPU意味着不考虑性能的情况下&#xff0c;台式机上能跑的程序&#xff0c;这台平板也能跑&#xff0c;新Galgame一出就能直接安装上躺床上玩&#xff0c;妙哉。但遗憾的是现实世界还是要考虑性能问题…

c语言实训作业总结,c语言程序设计上机实践心得报告

c语言程序设计上机实践心得报告 班级:11 电信 2 姓名:莫金波 学号:1107032242012.12.28 惠州学院 HUIZHOU UNIVERSITY 我们专业的学生在专业老师的带领下进行了 c 语言设计基础教程的 实践学习。在这之前&#xff0c;我们已经对 c 语言这门课程学习了差不多一 个学期&#xff0…

JavaOne 2012:在JVM上诊断应用程序

值得参加Staffan Larsen &#xff08;Oracle Java Serviceability Architect&#xff09;的演讲“ 在JVM上诊断应用程序 ”&#xff08;Hilton Plaza A / B&#xff09;&#xff0c;只是为了学习Oracle JVM 7随附的新jcmd命令行工具。该演示对我来说是“奖金”&#xff0c;这对…

mysql慢查询工具

GeorgeHao安装过程&#xff1a; [rootlocalhost-centos6 ~]# wget percona.com/get/pt-query-digest [rootlocalhost-centos6 ~]# chmod ux pt-query-digest [rootlocalhost-centos6 ~]# mv /root/pt-query-digest /usr/bin/ 今天有在阿里云服务器跑分的时候出现"Cant loc…

python字符串转date,在Python上将字符串转换为Date类型

I have this string:2012-02-10 # (year-month-day)and I need it to be as date type for me to use the date function isoweekday().Does anyone know how I can convert this string into a date?解决方案You can do that with datetime.strptime()Example:>>> f…

文档词频矩阵_论文理解:从词嵌入到文档距离

论文作者简介本论文第一作者Matt J. Kusner是牛津大学的副教授&#xff0c;致力于设计适应现实世界问题需求的新机器学习模型&#xff08;例如&#xff0c;fair algorithms, discrete generative models, document distances, privacy, dataset compression, budgeted learning…

C# 线程理解

概念引用&#xff1a;http://blog.csdn.net/yujie_yang/article/details/53173752 多线程和多进程的区别&#xff1a;任务管理器里各种不同的进程就是多进程&#xff0c;或者是你同时运行多个”.exe’程序就可以理解为多进程&#xff0c;多进程是要更多消耗CPU资源的。 多线程是…