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获取GridView选择的行内容
Apr 14 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
javascript运行机制之执行顺序理解
Aug 03 Javascript
vue前端工程的搭建
Mar 31 Vue.js
浅谈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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
环境工程毕业生自荐信
2013/11/17 职场文书
教师档案管理制度
2014/01/23 职场文书
拓展策划方案
2014/06/03 职场文书
优秀教研组申报材料
2014/12/26 职场文书
英语复习计划
2015/01/19 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL