Question

我正在创建一个角度应用程序，并且我使用了为Angular.js构建的UI Bootstrap组件：http://angular-ui.github.io/bootstrap/

我只需要使用Bootstrap css作为datepicker。现在它覆盖了我的所有自定义布局。

我尝试从官方的Bootstrap网站制作自定义版本，但我真的不知道只有datepicker需要哪些组件。

Answer 1

我有一个相当遥远的建议。我不确定你对LESS或LESS编译器有多熟悉，但twitter bootstrap提供了他们的LESS源文件。在将引导程序文件包装在用作命名空间的ID或类中之后，您可以下载它并通过LESS编译器运行bootstrap.less文件（我建议使用类，这样您就可以在标记的多个位置声明它）。例如，您的引导程序文件可能如下所示：

.namespace {
    // Core variables and mixins
    @import "variables.less";
    @import "mixins.less";

    // Reset and dependencies
    @import "normalize.less";
    @import "print.less";
    @import "glyphicons.less";

    // Core CSS
    @import "scaffolding.less";
    @import "type.less";
    @import "code.less";
    @import "grid.less";
    @import "tables.less";
    @import "forms.less";
    @import "buttons.less";

    // Components
    @import "component-animations.less";
    @import "dropdowns.less";
    @import "button-groups.less";
    @import "input-groups.less";
    @import "navs.less";
    @import "navbar.less";
    @import "breadcrumbs.less";
    @import "pagination.less";
    @import "pager.less";
    @import "labels.less";
    @import "badges.less";
    @import "jumbotron.less";
    @import "thumbnails.less";
    @import "alerts.less";
    @import "progress-bars.less";
    @import "media.less";
    @import "list-group.less";
    @import "panels.less";
    @import "responsive-embed.less";
    @import "wells.less";
    @import "close.less";

    // Components w/ JavaScript
    @import "modals.less";
    @import "tooltip.less";
    @import "popovers.less";
    @import "carousel.less";

    // Utility classes
    @import "utilities.less";
    @import "responsive-utilities.less";
}

然后确保在.namespace中包装任何引导程序组件，它应该限制冲突的样式。

如果任何引导程序组件依赖于正文标记的样式或身体标记内部，这可能都会失败，但我不认为是这种情况。它至少值得一试。

编辑：我只记得可能导致整个想法无法运作的内容。 Bootstrap依赖于在body标签上添加特定类以用于模态等。这也可能是datepicker的情况。这一切都取决于它如何布局，但你也可以分出哪些样式在命名空间中，哪些不是。我会在命名空间之外保留更多全局的。

Answer 2

datepicker不是Bootstrap的核心组件。它是一个独立的jQuery插件，很受欢迎，但使用Bootstrap CSS类进行样式设置，因此它在Bootstrap布局中运行良好。

我相信您需要的只是Bootstrap CSS文件中的核心，实用程序，表格和表单，以便正确显示日期选择器。您当然可以为任何注入的类创建自己的样式或覆盖基本样式，以便选择器更适合您自己的站点设计。

仅为datepicker的bootstrap自定义CSS构建

2 个答案: