专栏首页前端资源Bootstrap里的文件分别代表什么意思及其引用方法

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS中的for循环——你可能不知道的点。

    for循环中出现多个异步函数(比如ajax请求,或者node后端执行一些数据库操作或文件操作),如果想要这些异步串行变为同步应该怎么做?

    用户1462769
  • 聊聊nacos address的getCluster

    nacos-1.1.3/address/src/main/java/com/alibaba/nacos/address/controller/ServerLis...

    codecraft
  • vue介绍

    库是一种插件,是一种封装好的特定方法的集合。提供给开发者使用,控制器在使用者手里。

    达达前端
  • Node.js 定时器详解

    只要用到引擎之外的功能,就需要跟外部交互,从而形成异步操作。由于异步操作实在太多,JavaScript 不得不提供很多异步语法。这就好比,有些人老是受打击, 他...

    五月君
  • 干货 | 微信小程序一键转百度小程序,携程火车票团队是这样做的

    张海明,携程火车票研发部开发经理。2015年加入携程,从事火车票Android、ReactNative和小程序相关研发工作。

    用户1292807
  • 聊聊nacos address的deleteCluster

    nacos-1.1.3/address/src/main/java/com/alibaba/nacos/address/controller/AddressSe...

    codecraft
  • 3.2.5 、Google Tag Manager实战指南——全局变量转自定义维度

    在做AB test的时候,由于页面的不同,两种类型的用户可能会有不同的表现,但用户在分类的时候一般采用随机的方式,看两类用户的行为表现,这里就需要在页面添加一个...

    GA小站
  • 聊聊nacos address的postCluster

    nacos-1.1.3/address/src/main/java/com/alibaba/nacos/address/controller/AddressSe...

    codecraft
  • 【Kotlin】协程(一)——入门

    为了方便理解,这边先做个比喻: 从使用的角度来看,Kotlin的协程像是“另一种RxJava”,但是比RxJava要高效。

    Gavin-ZYX
  • 3.1.5 、Google Tag Manager基础知识——GTM中的重要概念

    GTM中有很多字段对于您可能是很陌生的,不知道这个字段到底是什么意思,接下来,本书将逐个讲解每个字段的意义和作用。

    GA小站

扫码关注云+社区

领取腾讯云代金券