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去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
JS链式调用的实现方法
Mar 07 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
浅谈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访问查询mysql数据的三种方法
2006/10/09 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
PHP安全上传图片的方法
2015/03/21 PHP
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
jquery插件之easing使用
2010/08/19 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
js中值引用和地址引用实例分析
2019/06/21 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
python类定义的讲解
2013/11/01 Python
python共享引用(多个变量引用)示例代码
2013/12/04 Python
python中的对象拷贝示例 python引用传递
2014/01/23 Python
python实现的解析crontab配置文件代码
2014/06/30 Python
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
安装docker-compose的两种最简方法
2019/07/30 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Python3的socket使用方法详解
2020/02/18 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
国际商务专业求职信
2014/07/15 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL