Bootstrap CDN和本地化环境搭建


Posted in Javascript onOctober 26, 2016

一、搭建bootstap环境

可以用bootstrap的CDN服务,在

<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

这个顺序不能改变,因为bootstrap.min.js需要调用jQuery库,所以jquery.min.js要先于它。

二、本地化bootstap环境

有时候网络有点卡,刷新页面慢,影响网页开发调式,解决这个让人不耐烦的小问题的方法是本地化这些库。本地化时,也要保持上面的顺序。

(1)jquery库,从官网直接下载下来,放在一个目录,例如:存放在项目example中的jquery文件夹,则

<script src="/example/jquery/jquery.min.js"></script>

即可

(2)bootstrap框架则相对要复杂一些;因为要调用bootstrap自身提供的按钮之类的,如果仅仅有bootstrap.min.css和bootstrap.min.js,会导致一些问题。例如,明明在代码当中添加了某个按钮,但是在网页中什么也没有,排除写错之类的错误之外。在网页中调用bootstrap的按钮则需要额外的资源文件,只有把这些添加全了才可以正常使用。就调用按钮为例,需要把bootstrap下载,然后找到dict文件夹,把里面的所有文件夹(会有css,js,fonts)copy到项目example新建文件夹boostrap当中。当需要使用按钮时,系统会自动询查相对路径,来收集所需内容。

ps:如果其它的调用,把整个文件夹拷贝到项目当中,添加外部访问即可。

(三)本地化添加外部资源

例如我想用fondawesome(官网,中文网)一些资源,除了用最简洁方式bootstrapCDN

< link href="//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">

之外

本地化:

复制整个 font-awesome 文件夹到您的项目中。

在HTML的 中引用font-awesome.min.css。

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

以上所述是小编给大家介绍的Bootstrap CDN和本地化环境搭建,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 判断脚本加载完毕的代码
Jul 13 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
基于javascript实现移动端轮播图效果
Dec 21 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 #Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 #Javascript
Bootstrap 实现查询的完美方法
Oct 26 #Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 #Javascript
jquery延迟对象解析
Oct 26 #Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 #Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 #Javascript
You might like
如何把PHP转成EXE文件
2006/10/09 PHP
PHP开发注意事项总结
2015/02/04 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
js对象的构造和继承实现代码
2010/12/05 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
python字典序问题实例
2014/09/26 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
this关键字的作用
2016/01/30 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
影视动画专业个人的自我评价
2013/12/31 职场文书
酒店经理职责
2014/01/30 职场文书
财务主管岗位职责
2014/02/28 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
2014年村官工作总结
2014/11/24 职场文书
现实表现材料范文
2014/12/23 职场文书
授权委托书
2015/01/28 职场文书
不同意离婚答辩状
2015/05/22 职场文书
理想国读书笔记
2015/06/25 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js