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 相关文章推荐
ExtJS 入门
Oct 29 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
js仿360开机效果
Dec 26 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
js canvas实现五子棋小游戏
Jan 22 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
ionic2中使用自动生成器的方法
2018/03/04 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
js代码实现轮播图
2020/05/04 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
python内存管理分析
2015/04/08 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python使用pymysql小技巧
2017/06/04 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
四年级数学教学反思
2014/02/02 职场文书
优秀幼教自荐信
2014/02/03 职场文书
讲解员培训方案
2014/05/04 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
KTV员工管理制度
2015/08/06 职场文书