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实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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
thinkphp 多表 事务详解
2013/06/17 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
Git命令之分支详解
2021/03/02 PHP
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
Python实现批量读取word中表格信息的方法
2015/07/30 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
python将数组n等分的实例
2019/12/02 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
简历中求职的个人自我评价
2013/12/03 职场文书
房产委托公证书样本
2014/04/04 职场文书
初中家长评语大全
2014/12/26 职场文书
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript
MySQL主从切换的超详细步骤
2022/06/28 MySQL