Bootstrap教程
by. 盏茶
原创地址:https://www.cnblogs.com/zscbk/p/11769245.html
一、使用准备
首先下载bootstrap库
下载网址官网:https://www.bootcss.com/
官方提供三种库,分别是
- 基础版:编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件
- 源码:Less、JavaScript 和 字体文件的源码,并且带有文档。需要 Less 编译器和一些设置工作 ps:less一种处理css的语言,也是css语言的扩展,也可以说是提前封装号一些css的样式数据
- Sass:这是 Bootstrap 从 Less 到 Sass 的源码移植项目,用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入(Sass是一种层叠式语言,也是对CSS3的语法扩充(所以和css语法几乎一样),但是他不是标准的css格式在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言)(rails是一种框架,compass简单来说是Sass的工具库)
下载为压缩包,包含两种版本:压缩版和未压缩版
一般开发期间使用非压缩版,方便查看注释
上线项目 使用压缩版方便减少文件体积,增加运行速度
二、使用
1、讲解压后的版本部署在项目中,使用link 和script进行文件导入
2、css根据实际工作需要进行类名的引用
3、而js需要通过data属性来使用Bootstrap插件也是bootstrap的重要api,但是有些时候可能会有冲突等情况发生,
这时候可以关闭此功能
如:$(document).off(‘.data-api’) 可以解除以data-api命名的并绑定在事件上的
如果是针对某个特定插件只需在 data-api 前 面添加那个插件的名称作为命名空间 如:$(document).off('.alert.data-api')
4、命名冲突
某些时候可能需要将 Bootstrap 插件与其他 UI 框架共同使用。在这种情况下,命名空间冲突随时可能发生。如果不幸发生了这种情况,你可以通过调用插件的 .noConflict 方法恢复其原始值。
var bootstrapButton = $.fn.button.noConflict()
var bootstrapButton = $.fn.button.noConflict()
三、官网提供的免费CDN加速服务
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
以下内容仅个人理解,如有错误地方请指出
CDN:网络加速服务 主要原理是利用节点来进行网速均衡,从而进行网络提速
比如 A有100m网速 但只用了10m网速
而B有10m网速但是临时需要15m网速,而A加附近正好有一个CDN节点,这时A和B都办了CDN服务,那么
CDN会用 A多余的网速来帮助B临时提升网速,反之一样从而实现网速提升效果
原文地址:https://www.cnblogs.com/zscbk/p/11769245.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。