只下载引导导航栏？

Posted 2023-03-06

【中文标题】只下载引导导航栏？

【英文标题】：Download bootstrap navbar only?

【发布时间】：2014-08-17 12:22:04

【问题描述】：

我只想在我的网站中使用引导导航栏，而不必下载所有引导代码，因为它会干扰我当前的类和 div。

谁能告诉我在我的自定义下载中包含哪些选项？

我点击了导航栏（它勾选了我认为导航栏工作所需的其他选项），但我的导航栏在包含 css 后将无法工作。

我的代码中有 Jquery 和 Bootstrap CDN 链接，所以我很确定它只是 CSS。

非常感谢，

【问题讨论】：

请发布您的导航栏代码。谢谢。

这是fiddle。编辑：这是网站上的标准导航条代码。我想在更改之前确保它可以正常工作。

【参考方案1】：

好的.....问题解决了！ Adrian 只错过了一个选择（组件动画）。 ...移动导航栏始终处于打开状态，而不是“点击打开”。 感谢 Adrian 的起点。

我努力做到了……反复试验。

为了获得最小化的脚本和 css 文件，允许导航栏在桌面和移动显示格式中工作... ...您需要选中以下框：

常用 CSS

网格系统 表格 按钮 响应式实用程序

组件

导航 导航栏

Javascript 组件

下拉菜单 组件动画（用于 JS）（包括折叠）

JQuery 插件

下拉菜单 折叠

宾果游戏！

太棒了！！！！！！

【参考方案2】：

如需完整的navbar，如下图所示，

正常

已折叠

去这个link - getbootstrap.com/customize

在那里，取消选中除以下以外的所有复选框：

常用 CSS

网格系统 表格 按钮 响应式实用程序

组件

导航 导航栏

Javascript 组件

下拉菜单

jQuery 插件

下拉菜单 折叠

点击页面底部的编译下载按钮。

或者只是下载我制作的自定义。

Customized Bootstrap Download Link

Offline Demo (Download First)

【讨论】：

根据您的小提琴，它可以工作，但我认为您还应该包括其他组件。表单、导航、导航栏、下拉菜单和基本实用程序。

我小提琴中的导航栏没有打开/关闭折叠。

您好@SkewerHed，为了确保我的答案有效，我先尝试了。请查看更新后的答案。

【参考方案3】：

引导程序 4

如果您使用的是 Bootstrap 4，但找不到“Bootstrap Customize”，则有一个替代方案，称为 Bootstrap Theming

以下是使导航栏正常工作所需的最低 SCSS 文件：

 // Required (Must-have for any SCSS file(s) to work)
 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";
 
 // Bootstrap Navbar Styles
 @import "node_modules/bootstrap/scss/reboot"; // Bootstrap Normalize (If you don't need normalization, delete it)
 @import "node_modules/bootstrap/scss/grid"; // You can get rid of it, the layout will get worse on Mobile, but you can fix it
 @import "node_modules/bootstrap/scss/nav";
 @import "node_modules/bootstrap/scss/navbar";
 @import "node_modules/bootstrap/scss/dropdown";
 @import "node_modules/bootstrap/scss/transitions"; // When click on Mobile Button Menu Toggle, the menu gets collapse/uncollapse