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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1irsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.jsdelivr.net/npm/[email protected]/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临时提升网速，反之一样从而实现网速提升效果
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
