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正则表达式之分组匹配及反向引用
Mar 09 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
Vue用mixin合并重复代码的实现
Nov 27 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安装攻略:常见问题解答(一)
2006/10/09 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
Python操作MongoDB详解及实例
2017/05/18 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
Python流程控制 while循环实现解析
2019/09/02 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
django修改models重建数据库的操作
2020/03/31 Python
python爬取天气数据的实例详解
2020/11/20 Python
快速创建python 虚拟环境
2020/11/28 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
物业招聘计划书
2014/01/10 职场文书
实习单位鉴定评语
2014/04/26 职场文书
教师读书活动总结
2014/05/07 职场文书
思想作风建设心得体会
2014/10/22 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript