Rails/Bootstrap3
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
&tag(Rails/Bootstrap3);
*目次 [#k204187a]
#contents
*関連ページ [#yd43c49d]
*参考情報 [#ufeddb13]
*bootstrap-sassを使って導入(Rails 5.1編) [#ed33806b]
**Gemfileの編集 [#f76fc51a]
-Gemfileに以下を追加
#pre{{
gem 'bootstrap-sass', '~> 3.3.6'
gem 'font-awesome-sass'
gem 'jquery-rails'
}}
**bunlde installを実行 [#ec205c5c]
-以下のコマンドを実行する
#pre{{
bundle install --path vendor/bundle
}}
**application.css.scss作成など [#z2dc2fed]
-application.cssをapplication.css.scssリネーム。内容は以...
#pre{{
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
}}
-app/assets/javascripts/application.jsの編集
#pre{{
//= require jquery
//= require bootstrap-sprockets
}}
**動作確認 [#nc1012ae]
-bookモデルのscaffoldを作成
bundle exec rails g scaffold book title:string author:s...
bundle exec rake db:migrate
-ここで一旦 http://localhost:3000/books にアクセスして確...
-app/views/layouts/application.html.erbを編集。ナビゲーシ...
#pre{{
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/"><i class="fa...
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="http://www.google.com/" targ...
<li><a href="http://www.yahoo.co.jp/" tar...
</ul>
<ul class="nav navbar-nav navbar-left">
<div class="form-group">
<%= form_tag('/books', method: 'get',...
<%= text_field_tag(:q, params[:q]...
<% end %>
</div>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<!-- flash messages -->
<%= yield %>
<hr>
<footer>
<p>© src256</p>
</footer>
</div>
}}
-もう一回 http://localhost:3000/books にアクセス。
*トラブルシューティング [#t9ed9b4d]
**Autoprefixer doesn’t support Node v0.10.48. Update it. ...
-CentOS 6のホストにdeployすると発生。Nodejsが古すぎるのが...
-[[CentOS 6.xにnode.js(v8系)をインストールする - masalib...
sudo rpm -Uvh https://rpm.nodesource.com/pub_9.x/el/6/x8...
**twitter-bootstrap-railsから移行するとナビゲーションが表...
-twitter-bootstrap-railsがBootstrap2ベースのせいかもしれ...
-Bootstrap2とBootstrap3ではナビゲーションの記述方法やグリ...
**padding-top: 60pxはどうなる？ [#hd777abf]
-bodyのpadding-top: 60pxはnavbar-fixed-topを利用する場合...
-navbar-fixed-topは画面の上につねにナビゲーションバーが表...
**kaminariのページングの表示が乱れる [#h930f915]
-以下のコマンドを実行する
bundle exec rails g kaminari:views bootstrap3
終了行:
&tag(Rails/Bootstrap3);
*目次 [#k204187a]
#contents
*関連ページ [#yd43c49d]
*参考情報 [#ufeddb13]
*bootstrap-sassを使って導入(Rails 5.1編) [#ed33806b]
**Gemfileの編集 [#f76fc51a]
-Gemfileに以下を追加
#pre{{
gem 'bootstrap-sass', '~> 3.3.6'
gem 'font-awesome-sass'
gem 'jquery-rails'
}}
**bunlde installを実行 [#ec205c5c]
-以下のコマンドを実行する
#pre{{
bundle install --path vendor/bundle
}}
**application.css.scss作成など [#z2dc2fed]
-application.cssをapplication.css.scssリネーム。内容は以...
#pre{{
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
}}
-app/assets/javascripts/application.jsの編集
#pre{{
//= require jquery
//= require bootstrap-sprockets
}}
**動作確認 [#nc1012ae]
-bookモデルのscaffoldを作成
bundle exec rails g scaffold book title:string author:s...
bundle exec rake db:migrate
-ここで一旦 http://localhost:3000/books にアクセスして確...
-app/views/layouts/application.html.erbを編集。ナビゲーシ...
#pre{{
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/"><i class="fa...
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="http://www.google.com/" targ...
<li><a href="http://www.yahoo.co.jp/" tar...
</ul>
<ul class="nav navbar-nav navbar-left">
<div class="form-group">
<%= form_tag('/books', method: 'get',...
<%= text_field_tag(:q, params[:q]...
<% end %>
</div>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<!-- flash messages -->
<%= yield %>
<hr>
<footer>
<p>© src256</p>
</footer>
</div>
}}
-もう一回 http://localhost:3000/books にアクセス。
*トラブルシューティング [#t9ed9b4d]
**Autoprefixer doesn’t support Node v0.10.48. Update it. ...
-CentOS 6のホストにdeployすると発生。Nodejsが古すぎるのが...
-[[CentOS 6.xにnode.js(v8系)をインストールする - masalib...
sudo rpm -Uvh https://rpm.nodesource.com/pub_9.x/el/6/x8...
**twitter-bootstrap-railsから移行するとナビゲーションが表...
-twitter-bootstrap-railsがBootstrap2ベースのせいかもしれ...
-Bootstrap2とBootstrap3ではナビゲーションの記述方法やグリ...
**padding-top: 60pxはどうなる？ [#hd777abf]
-bodyのpadding-top: 60pxはnavbar-fixed-topを利用する場合...
-navbar-fixed-topは画面の上につねにナビゲーションバーが表...
**kaminariのページングの表示が乱れる [#h930f915]
-以下のコマンドを実行する
bundle exec rails g kaminari:views bootstrap3
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
