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验证表单第二部分
Nov 25 Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
测试php函数的方法
2013/11/13 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
php实现三级级联下拉框
2016/04/17 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
python爬取网易云音乐评论
2018/11/16 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
阿德的梦教学反思
2014/02/06 职场文书
2014年库房工作总结
2014/11/26 职场文书
考研英语复习计划
2015/01/19 职场文书