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

本文概述

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

jQuery有什么问题？

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

有什么解决办法？

如果要使用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 Native

bootstrap.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.js    
            Load bootstrap.native from the CDN or a local copy of the library 
        -->
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.12/bootstrap-native.min.js"></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.js    
            Load bootstrap.native 4 from the CDN or a local copy of the library

            You won't need to load tether neither !
        -->
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.12/bootstrap-native-v4.min.js"></script>
    </body>
</html>

编码愉快！