twitter-bootstrap – 使用browserify加载twitter bootstrap

发布时间：2020-12-17 20:41:18 所属栏目：安全来源：网络整理

导读：如何在browserify中使用Twitter引导程序？我安装了bootstrap-browserify,并尝试在我的代码中使用它后来在我的代码中,我有一些代码试图修补bootstrap的模态对话框功能,但它会抛出一个错误. 这是我的代码的样子： var bootstrap = require('bootstrap-browse

如何在browserify中使用Twitter引导程序？
我安装了bootstrap-browserify,并尝试在我的代码中使用它

后来在我的代码中,我有一些代码试图修补bootstrap的模态对话框功能,但它会抛出一个错误.

这是我的代码的样子：

var bootstrap = require('bootstrap-browserify');

$(document).ready(function () {

    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        var that = this;
        $(document).on('focusin.modal',function (e) {
            if ($(e.target).hasClass('select2-input')) {
                return true;
            }

            if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
                that.$element.focus();
            }
        });
    };
}

我是browserify的新手,我第一次使用它.我究竟做错了什么？

解决方法

首先你必须安装Bootstrap,jQuery和 browserify-shim.我更喜欢用Bower安装它们(因为平面依赖结构)但你也可以使用NPM.这是我的package.json配置的browserify-shim部分：

"browserify": {
    "transform": [
      "browserify-shim"
    ]   
  },"browser": {
    "jquery": "./bower_components/jquery/dist/jquery.min.js","bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.min.js"
  },"browserify-shim": {
    "jquery": "$","bootstrap": {
      "depends": [
        "jquery: jQuery"
      ]   
    }   
  },

我更喜欢安装Bootstrap(及其依赖jQuery)的方法是将它们安装到全局范围.因此,在我的代码中将被“浏览化”的某处,我将提出以下内容：

$= jQuery = require('jquery');
require('bootstrap');

请注意,我在这里不使用var.这意味着$,jQuery和必要的Bootstrap javascript将在window对象上可用.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!