| Version | v0.3.1 |
|---|---|
| Build Status |  |
| Dependency Status |  |
| Changelog | Changelog |
This gem focuses on making it easier to use Twitter's Bootstrap 2.0. It's a collection of helpers which should make it faster to use all the components provided by Twitter Bootstrap.
Add to your Gemfile:
gem 'twitter-bootstrap-markup-rails', '0.3.1'
- Alert messages
- Inline labels
- Buttons
- Button dropdowns
- Modal windows
- Progress bars
Documentation is available on RubyDoc.
Render Alert in your view:
bootstrap_alert_tag("Hello!")
# => '<div class="alert"><a class="close">×</a>Hello!</div>'
Render Info Block Alert in your view:
bootstrap_alert_info_block_tag("Hello!")
# => '<div class="alert alert-block alert-info"><a class="close">×</a>Hello!</div>'
Same with basic helper:
bootstrap_alert_tag("Hello!", :block => true, :type => "info")
# => '<div class="alert alert-block alert-info"><a class="close">×</a>Hello!</div>'
Add Alert heading:
bootstrap_alert_tag("Hello!", :heading => "Hola!")
# => '<div class="alert"><a class="close">×</a><strong>Hola!</strong>Hello!</div>'
Notice Inline Label:
bootstrap_inline_label_notice_tag("Info")
# => '<span class="label notice">Info</span>'
Buttons:
bootstrap_button("Button Text", "#")
# => '<a class="btn" href="#">Button Text</a>'
Dropdown Buttons:
bootstrap_button_dropdown do |b|
b.bootstrap_button "Button Title", "#"
b.link_to "First Dropdown Item", @item
b.link_to "Second Dropdown Item", @item2
end
# => '<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Button Title
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>'
Navigation lists:
Basic tabs example:
bootstrap_navigation do |nav|
nav.link_to "Nav1", "/link1", :active_nav => true
nav.link_to "Nav2", "/link2"
end
# => <ul class="nav nav-tabs">
<li class="active">
<a href="/link1">Nav1</a>
</li>
<li>
<a href="/link2">Nav2</a>
</li>
</ul>
Basic pills example:
bootstrap_navigation(:type => "pills") do |nav|
nav.link_to "Nav1", "/link1"
nav.link_to "Nav2", "/link2", :active_nav => true
end
# => <ul class="nav nav-pills">
<li>
<a href="/link1">Nav1</a>
</li>
<li class="active">
<a href="/link2">Nav2</a>
</li>
</ul>
Stacked tabs example:
bootstrap_navigation(:type => "tabs", :stacked => true) do |nav|
nav.link_to "Nav1", "/link1", :active_nav => true
nav.link_to "Nav2", "/link2"
end
# => <ul class="nav nav-tabs nav-stacked">
<li class="active">
<a href="/link1">Nav1</a>
</li>
<li>
<a href="/link2">Nav2</a>
</li>
</ul>
Stacked pills example:
bootstrap_navigation(:type => "pills", :stacked => true) do |nav|
nav.link_to "Nav1", "/link1"
nav.link_to "Nav2", "/link2", :active_nav => true
end
# => <ul class="nav nav-pills nav-stacked">
<li>
<a href="/link1">Nav1</a>
</li>
<li class="active">
<a href="/link2">Nav2</a>
</li>
</ul>
Modal popup example:
bootstrap_modal(dom_id: 'a_dom_id', fade: true, header_title: "I'm a bootstrap modal popup") do |modal|
modal.body do |c|
c.content_tag :div, "the body"
end
modal.footer do |f|
f.bootstrap_button "Save", "/link1", :type => 'btn-primary'
f.bootstrap_button "Cancel", "/link2"
end
end
# => <div class="modal fade" id="a_dom_id">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>I'm a bootstrap modal popup</h3>
</div>
<div class="modal-body">
<div>the body</div>
</div>
<div class="modal-footer">
<a class="btn btn-primary" href="/link1">Save</a>
<a class="btn" href="/link2">Cancel</a></div>
</div>
</div>
For SimpleNavigation
If you are using simple-navigation gem you can use the navigation renderer like this:
render_navigation(level: 1..2, renderer: :bootstrap_topbar_list, expand_all: true)
In the spirit of free software, everyone is encouraged to help improve this project.
Here are some ways you can contribute:
- by using alpha, beta, and prerelease versions
- by reporting bugs
- by suggesting new features
- by writing or editing documentation
- by writing specifications
- by writing code (no patch is too small: fix typos, add comments, clean up inconsistent whitespace)
- by refactoring code
- by closing issues
- by reviewing patches
We use the GitHub issue tracker to track bugs and features. Before submitting a bug report or feature request, check to make sure it hasn't already been submitted. You can indicate support for an existing issue by voting it up. When submitting a bug report, please include a gist that includes a stack trace and any details that may be necessary to reproduce the bug, including your gem version, Ruby version, and operating system. Ideally, a bug report should include a pull request with failing specs.
- Fork the project.
- Create a topic branch.
- Implement your feature or bug fix.
- Add documentation for your feature or bug fix.
- Run
bundle exec rake yard. If your changes are not 100% documented, go back to step 4. - Add specs for your feature or bug fix.
- Run
bundle exec rake spec. If your changes are not 100% covered, go back to step 6. - Commit and push your changes.
- Submit a pull request. Please do not include changes to the gemspec, version, or history file. (If you want to create your own version for some reason, please do so in a separate commit.)
This library aims to support and is tested against the following Ruby implementations:
- Ruby 1.8.7
- Ruby 1.9.2
- Ruby 1.9.3
- Rubinius
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent