1. Introduction
This post gathers information about FAQ-Frequently Asked Question, How To, technical document references and samples about these RAILS topics.* Bootstrap Navbar with RAILS
2. FAQ, HOWTO, REFERENCES, SAMPLES, etc
2.1. Bootstrap Navbar with RAILS
a) HOWTO
a.1) Setp #1: Find Gemfile configuration
- Open rubygems and search for "bootstrap-sass"
https://rubygems.org/
[ bootstrap-sass ] | Search
You should be redirect to https://rubygems.org/gems/bootstrap-sass
Copy gemfile command on the left corner, something like "gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7'"
Edit ./Gemfile on your project root and add bootstrap-sass
a.2) Setp #2: Configure your project Gemfile
$ cd ~/myrailsproject$ vim Gemfile
:
# Josemarsilva - 2017-05-19 - http://www.rubydoc.info/gems/bootstrap-sass/3.3.7#a-ruby-on-rails
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7'
gem 'sass-rails', '~> 5.0'
a.3) Setp #3: Configure your project Gemfile and
# bundle installa.4) Step #4: Hide default "application.css" and configure "application.scss"
# mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.hidden-by-bootstrap# vim app/assets/stylesheets/application.scss
+----------------------------------------------------------------------------------------+
|// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables" |
|$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/"; |
|@import "bootstrap-sprockets"; |
|@import "bootstrap"; |
+----------------------------------------------------------------------------------------+
a.5) Step #5: configure "application.js"
# vim app/assets/javascripts/application.js+----------------------------------------------------------------------------------------+
|// JosemarSilva 2017-05-19 http://www.rubydoc.info/gems/bootstrap-sass/3.3.7 |
|//= require bootstrap |
|//= require jquery |
|//= require jquery_ujs |
|//= require turbolinks |
|//= require bootstrap-sprockets |
|//= require_tree . |
+----------------------------------------------------------------------------------------+
a.6) Step #6: configure "app/views/layouts/application.html.erb"
# vim app/views/layouts/application.html.erb+-------------------------------------------------------------------------------------------------+
|<!DOCTYPE html> |
|<html> |
| <head> |
| : |
| <%= csrf_meta_tags %> |
| <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> |
| <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> |
| : |
| </head> |
| : |
| <body> |
| : |
| <%= render '/staticpages/header' %> |
| : |
| <div class="container"> |
| <%= yield %> |
| </div> |
| : |
| </body> |
|</html> |
+-------------------------------------------------------------------------------------------------+
a.7) Step #7: configure Navbar on header part template using bootstrap
- Open Bootstrap Navbar documentation and copy example
http://getbootstrap.com/components/#navbar
- Paste example into '_header.html.erb' part
# vim app/views/staticpages/_header.html.erb
+-------------------------------------------------------------------------------------------------+
| <nav class="navbar navbar-default"> |
| <div class="container-fluid"> |
| <!-- Brand and toggle get grouped for better mobile display --> |
| <div class="navbar-header"> |
| : |
| <ul class="nav navbar-nav navbar-right"> |
| : |
| </ul> |
| </div><!-- /.navbar-collapse --> |
| </div><!-- /.container-fluid --> |
|</nav> |
+-------------------------------------------------------------------------------------------------+
b) REFERENCES
- https://www.youtube.com/watch?v=g_azQO53Mzs
- http://getbootstrap.com/components/
- http://www.rubydoc.info/gems/bootstrap-sass/3.3.7
- https://launchschool.com/blog/integrating-rails-and-bootstrap-part-1
Nenhum comentário:
Postar um comentário