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" 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="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://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里的文件分别代表什么意思及其引用方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap自定义文件上传下载样式

    Bootstrap自定义文件上传下载样式

    在平时工作中,文件上传下载功能属于不可或缺的一部分.bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式. 后续会使用spring MVC框架实现文件上传的全部代码,敬请期待. 先看图片示例: 本示例包括下载样本文件样式和上传文件样式. 直接先上代码,最后讲解: <div class="form-group col-md-12 has-feedback" id="file"> <label

  • Yii2框架引用bootstrap中日期插件yii2-date-picker的方法

    本文实例讲述了Yii2框架引用bootstrap中日期插件yii2-date-picker的方法.分享给大家供大家参考,具体如下: 最近在学习yii2 框架,发现框架很强大,而且结合了时下许多新的技术在里面. 简单记录一下yii2-date-picker插件的使用方法: 首先先了解一下github中的相关资源:https://github.com/2amigos/yii2-date-picker-widget 其次:在自己的项目中利用上面链接中的相关方法下载此资源,命令为: php compos

  • 表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题

    表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题

    为了让标签更加语义化,在表单项中,我们往往会使用label进行包裹 <label for="label-input"> <input type="text" class="" id="label-input"><br> <button>button</button> </label> 在移动平台页面的开发中,为了让表单项的可点区域变大而更好的操作,labe

  • Bootstrap里的文件分别代表什么意思及其引用方法

    关于Bootstrap打包的文件分别代表什么意思,官网也没有给出一个明确的解释,在网上查了一些资料,总价归纳了如下: bootstrap/    <!--主目录--> ├── css/ <!--CSS样式文件--> │ ├── bootstrap.css <!--Bootstrap核心CSS文件--> │ ├── bootstrap.css.map <!--source map文件--> │ ├── bootstrap.min.css <!--Boot

  • JS文件上传神器bootstrap fileinput详解

    JS文件上传神器bootstrap fileinput详解

    Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一段调用方发和servlet端的接收代码,未完待续. 引言: 一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x.本插件对多种类型的文件提供文件预览,并且提供了多选等功能.本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式.通过

  • 网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法

    网站发布到IIS后,发现网站使用的Bootstrap框架所引用的woff字体无法正常显示.于是跟踪http请求,发现woff字体请求出现GET .woff 404 (Not Found)的问题,但是项目中woff字体的文件并未丢失.后经排查,原来是服务器上IIS没有添加woff字体的MIME类型,导致发送HTTP请求时,IIS无法处理和识别此类型的文件. 解决方法1:在Web.config配置文件中添加woff字体的MIME类型 解放方法2:在IIS中添加woff字体的MIME类型 woff字体

  • Bootstrap的fileinput插件实现多文件上传的方法

    *1.bootstrap-fileinput 插件git下载地址 https://github.com/kartik-v/bootstrap-fileinput.git 2.解决使用bootstrap-fileinput得到返回值 上传图片 $("#file-0a").fileinput({ uploadUrl : "/upload_img",//上传图片的url allowedFileExtensions : [ 'jpg', 'png', 'gif' ], ov

  • bootstrapfileinput实现文件自动上传

    bootstrap fileinput文件上传插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用, JS引用: <script type="text/javascript" src="~/bootstrap/js/fileinput.min.js"></script> <link href="~/bootstrap/css/fileinput.min.c

  • BootStrap fileinput.js文件上传组件实例代码

    BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript

  • 基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

    基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用. 1.文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http:/

  • bootstrap fileinput实现文件上传功能

    bootstrap 的上传文件控件号称最好用的,总之我用着到是挺别扭的. 首先这个控件很简单. html代码 <form> <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> </form> 可能需要保存按钮等等,这可以另外添加,指定事件方法就行,当然,需要在html中引入boot

  • Android播放assets文件里视频文件相关问题分析

    本文实例讲述了Android播放assets文件里视频文件相关问题.分享给大家供大家参考,具体如下: 今天做了一个功能,就是播放项目工程里面的视频文件,不是播放SD卡视频文件. 我开始尝试把视频文件放到 assets文件目录下. 因为之前写webview加载assets文件夹时,是这样写的: webView = new WebView(this); webView.loadUrl(file:///android_asset/sample3_8.html); 依次类推,我尝试将视频video.3g

  • 树型结构列出指定目录里所有文件的PHP类

    <? //以树型结构列出指定目录里的所有文件,如果你想知道自己某个目录里有哪些子目录和文件,可以调用这个类来查看,很方便的. # 演示的例子:     $t = new TreeClimber( "asp" ); //新建物件,设置需要列出的目录:在此为asp目录     echo arrayValuesToString( $t->getFileList( $t->getPath() ), "<BR>\n" ); function ar

  • python删除本地夹里重复文件的方法

    上次的博文主要说了从网上下载图片,于是我把整个笑话网站的图片都拔下来了,但是在拔取的图片中有很多重复的,比如说页面的其他图片.重复发布的图片等等.所以我又找了python的一些方法,写了一个脚本可以删除指定文件夹里重复的图片. 一.方法和思路 1.比对文件是否相同的方法:hashlib库里提供了获取文件md5值的方法,所以我们可以通过md5值来判定是否图片相同 2.对文件的操作:os库里有对文件的操作方法,比如:os.remove()可以删除指定的文件, os.listdir()可以通过指定文件

  • bootstrap里bootstrap动态加载下拉框的实例讲解

    实例如下所示: //引入的包 <!-- bootstrap --> <link rel="stylesheet" type="text/css" href="map/plug-in/scripts/bootstrap/bootstrap.min.css" rel="external nofollow" /> <link rel="stylesheet" type="t

  • 解决SpringBoot打成jar运行后无法读取resources里的文件问题

    开发一个word替换功能时,因替换其中的内容功能需要 word 模版,就把 word_replace_tpl.docx 模版文件放到 resources 下 在开发环境中通过下面方法能读取word_replace_tpl.docx文件,但是打成jar包在 linux下运行后无法找到文件了 File file = ResourceUtils.getFile(ResourceUtils.CLASSPATH_URL_PREFIX + "static/office_template/xxx.docx&q

  • 详解如何修改 node_modules 里的文件

    前言 有时候使用npm上的包,发现有bug,我们知道如何修改,但是别人可能一时半会没法更新,或者是我们特殊需求,别人不愿意修改,这时候我们只能自己动手丰衣足食.那么我们应该如何修改别人的源码呢?首先,直接修改node_modules里面的文件是不太行的,重新安装依赖就没有了.一般常用办法有两个: 下载别人代码到本地,放在src目录,修改后手动引入. fork别人的代码到自己仓库,修改后,从自己仓库安装这个插件. 这两个办法的缺陷就是:更新麻烦,我们每次都需要手动去更新代码,无法与插件同步更新.如

随机推荐