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 tips提示效果
Apr 03 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 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
php a simple smtp class
2007/11/26 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
php批量删除操作代码分享
2017/02/26 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
python中文编码问题小结
2014/09/28 Python
python随机取list中的元素方法
2018/04/08 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
小学生安全保证书
2014/02/01 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
培训师岗位职责
2015/02/14 职场文书
新学期家长寄语2016
2015/12/03 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
python获取字符串中的email
2022/03/31 Python