For the new users, who want to try the middleman-bootstrap-navbar and need to set up the whole thing, beginning with Bootstrap itself, here’s a little primer. @manuelmeurer, please correct any mistakes I've done. And thanks for the gem!
Using middleman 3.3.3
Using middleman-bootstrap-navbar 2.0.0
Using bootstrap-navbar 2.1.1
Using bootstrap-sass 18.104.22.168
Since middleman-bootstrap-navbar doesn't include any HTML/CSS/JS code to the generated project files, there is no need to initialize new project to use it. We can just use an existing MM project or start with new
middleman init bootstrap-navbar-probe and then make the steps described here. But this gem depends on other gems/resources and we have the option to put Bootstrap files manually or use another gem. So, middleman-bootstrap-navbar depends on bootstrap-navbar gem (required, gives the navbar main helpers code), optionally we can use bootstrap-sass, so you don’t have to manually download Sass-based Bootstrap files and put it in you project
1. Put these lines in
Gemfile of your Middleman project:
gem 'bootstrap-sass', '~> 3.1.1', require: false
(If you’re interested why
require: false look here.)
2. Put these lines in
config.rb of your Middleman project:
There is nothing else needed in this line, unless you prefer to manually put Bootstrap files and not use the bootstrap-sass gem and assets pipeline. If you prefer the manual way:
activate :bootstrap_navbar do |bootstrap_navbar|
bootstrap_navbar.bootstrap_version = '3.0.3'
3. Put these lines in your main css/scss/… (stylesheets) file (
The second line is optional, you can override styles later.
//= require jquery-1.11.1.min
//= require bootstrap
The jQuery line is important (this step is missed in the docs I've read), since the ** bootstrap-sass** gem doesn't include jQuery code.
5. Put the
Of course the particular version number depends on what you put in your project.
After these steps you can put the example code from bootstrap-navbar wiki to a new
index.html.haml file and fire up
bundle exec middleman if you don't use bundler integration with rvm or other similar solution). The menu should display properly and the drop-down should be active.
Is there an actively developed jquery gem to put instead of manually copying JS files? https://github.com/STRd6/jquery-source sees to be dead. https://github.com/ai/jquery-cdn seems to be a solution. Any other candidates?