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 相关文章推荐
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
vue中data里面的数据相互使用方式
Jun 05 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
php生成唯一数字id的方法汇总
2015/11/18 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
用js的for循环获取radio选中的值
2013/10/21 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
Python文档生成工具pydoc使用介绍
2015/06/02 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python读写docx文件的方法
2018/05/08 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Django中create和save方法的不同
2019/08/13 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
StubHub德国:购买和出售门票
2017/09/06 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
商场主管竞聘书
2014/03/31 职场文书
医药销售自我评价200字
2014/09/11 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
三方股东合作协议书
2014/10/28 职场文书
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技