仅下载引导程序导航栏？

Question

I'd like to use only the bootstrap navbar in my website without having to download all of the bootstrap code as it interferes with my current classes and divs.

Can anyone tell me which options to include in my custom download?

I clicked on navbar (it ticks other options which I assume are required for navbar to work) but my navbar won't work after including the css.

I have the Jquery and Bootstrap CDN links in my code so I'm pretty sure it's just the CSS.

Muchos thanks,

Answer 1

Okay..... Problem solved! Adrian missed just one selection (component animations). ... the nav bar in mobile was always open, rather than being 'click to open'. Thanks though to Adrian for the starting point.

I did it the hard way.... trial and error.

To gain minimised script & css files, that allows the nav bar to work in both desktop, and mobile display formats... ... you need to check the following boxes:

Common CSS

• Grid System
• Forms
• Buttons
• Responsive Utilities

Components

• Navs
• Navbar

Javascript Components

• Dropdowns
• Component animations (for JS) (includes Collapse)

JQuery Plugins

• Dropdowns
• Collapse

Bingo!

Bloody marvelous!!!!!

Answer 2

For a complete navbar like the image below,

Normal

Collapsed

Go to this link - getbootstrap.com/customize

Once there, uncheck all the checkboxes except for the following:

Common CSS

• Grid System
• Forms
• Buttons
• Responsive Utilities

Components

• Navs
• Navbar

Javascript Components

• Dropdowns

jQuery Plugins

• Dropdowns
• Collapse

Click the compile and download button at the bottom of the page.

Or just download the customize I made.

Customized Bootstrap Download Link

Offline Demo (Download First)

Answer 3

Bootstrap 4

If you're using Bootstrap 4, and couldn't find the "Bootstrap Customize", there's an alternative called Bootstrap Theming

Here are the minimum required SCSS files to get Navbar to work:

 // 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