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

关于Bootstrap打包的文件分别代表什么意思,官网也没有给出一个明确的解释,在网上查了一些资料,总价归纳了如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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,具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
<!-- 新 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)两种字体作为自定义字体。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自己重新定义class类即可,主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本
起步导入:<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕
(1)modal声明一个模态框(2)modal-dialog定义模态框尺寸(3)modal-lg定义大尺寸模态框(4)modal-sm定义小尺寸模态框(5)modal-header(6)modal-body(7)modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo
图片在Bootstrap版本3中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性,从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居
<inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke
目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst
  一、应用http://www.bootcss.com/进入bootstrap4或bootstrap3中文网,想要快速地将Bootstrap应用到你的项目中,有以下两种办法: 1、bootstrap可以在线引用,方法如下:A、CSS将引入Bootstrap样式表的 <link> 标签复制并粘贴到 <head> 中,并放在所有其他样式表之前。<!
第87节:Java中的Bootstrap基础与SQL入门前言复习什么是JQ?:writelessdomore写更少的代码,做更多的事找出所有兄弟:$("div").siblings()基本过滤器:选择器:过滤器$("div:first"):first:找到第一个元素:last:找到最后一个元素:even:找出偶数索引:odd:找出奇叔索引
1.bootstrap表单(1)form声明一个表单域(2)form-inline内联表单域(3)form-horizontal水平排列表单域(4)form-group表单组、包括表单文字和表单控件(5)form-control文本输入框、下拉列表控件样式(6)checkboxcheck-inline多选框样式(7)radioradio-inline单选框样式(8)input-group表单控件组
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>首页<itle><
嗯。。。以前做ssh。应该是stratusspringhibernate。 然后现在来了一个新的需求。 要用java,bootstrap,oracle,springboot,jquery,mybatis。 开始,我也挺心虚的,但是后来一看,,,其实本没有必要这么虚。。。毕竟。。。这些东西,写的有问题。。。问题在于没有逻辑。 bootstrap,j
表格基本实例为任意 <table> 标签添加 .table 类可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。
1、问题背景   一般情况下,查询列表有查询条件、查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据;点击重置按钮会将查询条件恢复到原始状态 2、实现源码 <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮<
Bootstrap简介什么是Bootstrap?Bootstrap官网框架:库liblibraryjQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单,更快捷;注意是Bootstrap不是BootStrap!这是一个词,不是
1.bootstrap图片img-responsive声明响应式图片2.bootstrap字体图标通过字体代替图标,font文件夹需要和css文件夹在同一目录3.bootst导航条(1)navbar声明导航条(2)navbar-default声明默认的导航条样式(3)navbar-inverse声明反白的导航条样式(4)navbar-static-top去掉导航条的圆角(5)n
1.路径导航<!doctypehtml><html><head><metacharset="utf-8"><title>路径导航<itle><linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"><scripttype="text/ja
问题描述:最近在学习BootStrap,过程中遇到引用glyphicon图标无法显示的问题,经过在百度后该问题已解决。1、首先看一下图标显示失败的页面:2、经过参考大佬们的经验,我找到了解决办法。首先我的BootStrap的css样式表是经过下载之后直接拷贝了其中一个文件到编译器中使用的,没有把所有
BootStrap布局一、BootStrap布局CSS组件主要包括栅格系统、列表组、进度条、icon图标、导航栏等组件。JavaScript插件主要有动画效果、窗体模式、下拉菜单、选项卡等二、网格系统Bootstrap内置了一套响应式、移动优先的流式栅格系统,随着屏幕设备或可视窗口(viewport)尺寸的
1引入所需要的文件2用法
想让bootstrap的table列内容超出部分省略号,要在table上加table-layout:fixed和word-break:break-all,然后在头部thead的th加上宽度百分比,最后在列里加个标签如span,在这个span加上单行超出部分省略号的css:display:inline-block,overflow:hidden,white-space:nowrap,text-overflow:e