如何在不使用jQuery的情况下使用Bootstrap前端框架(3和4) _框架

本文概述

jQuery有什么问题？
有什么解决办法？
如何使用Bootstrap Native

jQuery有什么问题？请不要讨厌jQuery。这根本不是问题, 每个Web开发人员都曾经爱过jQuery, 因为它使前端中的一些艰巨任务非常容易实现并且仍然可靠。如今, 许多开发人员使用其他框架, 例如Angular, React或仅编写Vanilla JS。之所以这样, 是因为它们中的大多数不再需要支持旧版本的浏览器：

最新?

6.1+?

通过编写自己的JS代码, 它有可能为所有浏览器提供广泛的兼容性, 因此在大多数情况下, 你将不再需要jQuery。如果仅使用jQuery的话, 包括jQuery也很糟糕(很多开发人员都这样做)。 jQuery的最新版本大约压缩了71.68 KB, 因此, 如果你关心最终的大小(包括插件和其他内容), 那么它对于你的应用程序来说是相当大的大小。要达到此大小, 你还需要计算Bootstrap JavaScript大小, 大约30 KB。
【如何在不使用jQuery的情况下使用Bootstrap前端框架(3和4)】因此, jQuery的问题在于你添加到应用程序中的大小, 因为你需要知道的一件事是, 你使用jQuery并不能使你变得更好或更少, 但是你需要明智并知道何时包括它。
有什么解决办法？如果要使用Boostrap Framework及其所有JavaScript功能(如Dropdowns, Tabs等)而不使用jQuery, 则需要使用开源库Bootstrap Native。 Bootstrap Native是使用Vanilla Javascript开发的用于Bootstrap 3和Bootstrap 4的库, 与原始jQuery插件相比, 具有卓越的性能。它与RequireJS / CommonJS兼容。使用Bootstrap Native的最大优势将是项目的大小, 因为它的大小仅为20Kb, 压缩后为6.5Kb。
我们建议你访问Github上的官方库, 以获取有关它的更多信息。
如何使用Bootstrap Nativebootstrap.native与UMD(通用模块定义)兼容。它可以在CommonJS和AMD环境中正常工作, 但是会退回到在普通< script> 标签环境中导出到窗口的状态。这些组件是用干净的代码开发的, 主要用于本机支持HTML5的现代浏览器。使用Polyfill时, IE8-IE10会非常感谢。该库带有自定义的polyfill, 你可以立即使用它。如前所述, 你可以将Boostrap Native库与Boostrap 3.x或4.x一起使用：
Boostrap 3.x
以下代码段显示了如何在bootstrap版本3中使用本地Bootstrap：

< !DOCTYPE html> < html lang="en"> < head> < title> < /title> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < !-- Load the Boostrap CSS as you usually do from the CDN or a local copy --> < link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> < /head> < body> < !-- Here your document markup --> < !--Instead of loading jquery.min.js and bootstrap.min.jsLoad bootstrap.native from the CDN or a local copy of the library --> < script type="text/javascript" src="http://img.readke.com/220523/013AM3b-0.jpg"> < /script> < /body> < /html>

Bootstrap 4.x
以下代码段显示了如何在引导程序的版本4中使用本地引导程序：

< !DOCTYPE html> < html lang="en"> < head> < title> < /title> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < !-- Load the Boostrap CSS as you usually do from the CDN or a local copy --> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> < /head> < body> < !-- Here your document markup --> < !--Instead of loading jquery.min.js and bootstrap.min.jsLoad bootstrap.native 4 from the CDN or a local copy of the libraryYou won't need to load tether neither !--> < script type="text/javascript" src="http://img.readke.com/220523/013AM611-1.jpg"> < /script> < /body> < /html>

编码愉快！