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 相关文章推荐
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 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的explode和implode的使用说明
2011/07/17 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
使用Python开发windows GUI程序入门实例
2014/10/23 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
python turtle 绘制太极图的实例
2019/12/18 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
python如何实现word批量转HTML
2020/09/30 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
会计实习生工作总结的自我评价
2013/10/07 职场文书
个人总结与自我评价
2015/02/14 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL