首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:17:46
字体:
来源:转载
供稿:网友

关于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。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选