#contents
*Prerequisite [#v50266e0]
-Ruby On Rails installation (You can refer [[HowToUse/RubyOnRails/4.1]])
*Install&Setup [#h7236ae1]
:Step.1|
Download Twitter Bootstrap file.
http://getbootstrap.com/
#ref(Bootstrap_fig1.png,,500x266,)
:Step.2|
Deploy files to Ruby On Rails project.
$ cp -r <BootStrap>/fonts <Ruby On Rails Project>/vendor/assets
$ cp <Bootstrap>/css/* <Ruby On Rails Project>/vendor/assets/stylesheets/
$ cp <Bootstrap>/js/* <Ruby On Rails Project>/vendor/assets/javascripts/
:Step:3|
Add new line to app/assets/stylesheets/application.css
*= require bootstrap
:Step:4|
Edit new line to app/assets/javascripts/application.js
//= require bootstrap
:Step.5|
Edit config/application.rb
config.assets.paths << "#{Rails}/vender/assets/fonts"
:Step.6|
Execute precompile
$ rake assets:precompile Rails_ENV=development
*HowToUse [#z1d45951]
**Use Bootstrap from Rails Project [#y517f33e]
:Step.1|Add new controller to have bootstrap.
$ cd <Ruby On Rails Project>
$ rails g controller <Controller name> <view name>
:Step.2|Edit view file.
$ vi app/views/layouts/application.html.erb
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
**Use Jumbotron [#n0605b6c]
:Step.1|
Edit application.html.erb with Jumbotron's sample layout.
$ vi app/view/layout/application.html.erb
You can see sample from [[here:https://github.com/nasebanal/nb-socialcoding/blob/master/app/views/layouts/application.html.erb]].
:Step.2|
Update application.css so that your each page can be display with appropriate margin.
$ vi app/assets/stylesheets/application.css
div.content {
padding: 70px 20px 20px 80px;
}
You can see sample from [[here:https://github.com/nasebanal/nb-platform4iot/blob/master/app/assets/stylesheets/application.css]].
#ref(Bootstrap_fig2.png,,500x266,)
**Use Glyphicons [#o4489f72]
:Step.1|
Create new css file.
$ vi app/asset/bootstrap_override.css.less
$ vi app/asset/stylesheets/bootstrap_override.css.less
@font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/glyphicons-halflings-regular.eot');
src: url('/asstes/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('/assets/glyphicons-halflings-regular.woff') format('woff'),
url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
url('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
:Step.2|
Execute precompile.
$ rake assets:precompile Rails_ENV=development
In case you want to deploy to Heroku Server, you need to change config.assets.compile from false into true.
$ vi config/environments/production.rb
config.assets.compile = true
*Author [#abd78b53]
S.Yatsuzuka