TwitterBootstrapWithRails/古い情報
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
&tag(TwitterBootstrapWithRails/古い情報);
*目次 [#f96c9e5e]
#contents
*参考情報 [#s0b82b7e]
*サンプル [#dc4cbf5a]
-参考情報に従ってサンプルを作ってみる
**前提 [#g82cc92a]
-rvmをインストールしておく。
-ruby-1.9.3-p125をあらかじめインストールしておく。
$ rvm install ruby-1.9.3-p125
-MacPortsを使っている場合http.rbでSegmentation faultが発...
rvm install ruby-1.9.3 --with-openssl-dir=/opt/local --w...
**gemsetを作る [#e95bfd46]
-@の後に指定された部分が、gemsetの名前(この場合tbrsample)
rvm --create 1.9.3-p125@tbrsample
-それを選択
rvm gemset use tbrsample
**railsのインストール [#r03705f9]
-gemでrailsインストール
gem install rails --no-ri --no-rdoc
**railsアプリを生成 [#g6cc4acc]
***アプリのひな形を作る [#l28d44f3]
-アプリ生成
rails new tbrsample
-Gemfileを編集し以下を追加
gem "twitter-bootstrap-rails"
-bundle installで必要なファイルをセットアップ。withoutを...
bundle install --without=production
***Bootstrapを生成する [#j19c2be7]
-raisl gでファイルを生成する
rails g bootstrap:install
-次のファイルが作られる
#pre{{
app/assets/javascripts/bootstrap.jp.coffee
app/assets/stylesheets/bootstrap.css.less
}}
***残り [#jcdc4ac7]
-レイアウトを変更。
rails g bootstrap:layout application fixed( or fluid)
-コントローラーを生成する。
rails g controller pages index
-app/views/pages/index.html.erbを編集。
#pre{{
<div class="hero-unit">
<h1>Hello, よろしくな</h1>
</div>
}}
**サーバー起動 [#ead7492b]
-サーバーを起動する
rails s
-http://localhost:3000/pages/index にアクセス
*トラブルシューティング [#k53c172a]
** kaminariでpaginateするとずれる [#x6fb5f00]
-[[Rails3 で twtter bootstrap と ページネイトの kaminari ...
-application.cssを修正する
#pre{{
/*
*= require twitter/bootstrap
*/
.pagination span.page.current,
.pagination span.page.gap {
float: left;
padding: 0 14px;
line-height: 34px;
border-right: 1px solid #DDD;
text-decoration: none;
}
.pagination span.first a {
border-left: 1px solid #DDD;
}
.pagination span.page.current {
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
background-color: #C7EEFE;
}
}}
-日本語に対応するには、Gemfileに以下を追加
gem 'i18n_generators'
-ファイルを生成
bundle
rails g i18n ja
-/config/locales/translation_ja.ymlを編集。
#pre{{
ja:
views:
pagination:
first: "« 最初"
last: "最後»"
previous: "‹ 前"
next: "次 ›"
truncate: "..."
}}
終了行:
&tag(TwitterBootstrapWithRails/古い情報);
*目次 [#f96c9e5e]
#contents
*参考情報 [#s0b82b7e]
*サンプル [#dc4cbf5a]
-参考情報に従ってサンプルを作ってみる
**前提 [#g82cc92a]
-rvmをインストールしておく。
-ruby-1.9.3-p125をあらかじめインストールしておく。
$ rvm install ruby-1.9.3-p125
-MacPortsを使っている場合http.rbでSegmentation faultが発...
rvm install ruby-1.9.3 --with-openssl-dir=/opt/local --w...
**gemsetを作る [#e95bfd46]
-@の後に指定された部分が、gemsetの名前(この場合tbrsample)
rvm --create 1.9.3-p125@tbrsample
-それを選択
rvm gemset use tbrsample
**railsのインストール [#r03705f9]
-gemでrailsインストール
gem install rails --no-ri --no-rdoc
**railsアプリを生成 [#g6cc4acc]
***アプリのひな形を作る [#l28d44f3]
-アプリ生成
rails new tbrsample
-Gemfileを編集し以下を追加
gem "twitter-bootstrap-rails"
-bundle installで必要なファイルをセットアップ。withoutを...
bundle install --without=production
***Bootstrapを生成する [#j19c2be7]
-raisl gでファイルを生成する
rails g bootstrap:install
-次のファイルが作られる
#pre{{
app/assets/javascripts/bootstrap.jp.coffee
app/assets/stylesheets/bootstrap.css.less
}}
***残り [#jcdc4ac7]
-レイアウトを変更。
rails g bootstrap:layout application fixed( or fluid)
-コントローラーを生成する。
rails g controller pages index
-app/views/pages/index.html.erbを編集。
#pre{{
<div class="hero-unit">
<h1>Hello, よろしくな</h1>
</div>
}}
**サーバー起動 [#ead7492b]
-サーバーを起動する
rails s
-http://localhost:3000/pages/index にアクセス
*トラブルシューティング [#k53c172a]
** kaminariでpaginateするとずれる [#x6fb5f00]
-[[Rails3 で twtter bootstrap と ページネイトの kaminari ...
-application.cssを修正する
#pre{{
/*
*= require twitter/bootstrap
*/
.pagination span.page.current,
.pagination span.page.gap {
float: left;
padding: 0 14px;
line-height: 34px;
border-right: 1px solid #DDD;
text-decoration: none;
}
.pagination span.first a {
border-left: 1px solid #DDD;
}
.pagination span.page.current {
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
background-color: #C7EEFE;
}
}}
-日本語に対応するには、Gemfileに以下を追加
gem 'i18n_generators'
-ファイルを生成
bundle
rails g i18n ja
-/config/locales/translation_ja.ymlを編集。
#pre{{
ja:
views:
pagination:
first: "« 最初"
last: "最後»"
previous: "‹ 前"
next: "次 ›"
truncate: "..."
}}
ページ名: