RailsでTwitterBootstrap Railsで使えるGem

Rails3.2でページネーションをTwitter Bootstrapに対応させる~kaminari

投稿日:

github.com/amatsuda/kaminari

Gemfile & bundle

次のスクリプトが追加される

 

設置

kaminari_config.rb

設定しなくてもよいのだが確認のためconfigファイルを出す

デフォルトはこのような感じ

controllerの設定

viewの設定

テーマの作成

デフォルトテーマの準備

kaminariのbootstrap用テーマは既にあるけど、勉強をかねて自作

rails g kaminari:theme でいろいろわかるらしいけど今は404エラー

*いまは

でbootstrapテーマがいけます

ただし、このテーマはclassにdisableをつけるのではなくて、クリックできないリンクは表示しない仕様です

 

テーマの作成

app/views/kaminari/にできたデフォルトテーマを修正すればOK

やること

  • デフォルトテーマの構造はnav>span。これをブートストラップの構造div.pagination>li>aに直す
  • _page.htmlはlink_to_unlessを使っているが、このままだと現在ページにaタグがつかずにブートストラップのcssが適用されないので、現在ページにもダミーのaタグをつけて、liに.activeクラスをつける
  • デザイン的には「First」「Prev」は表示しないではなく.disableクラスをつけたほうがいいと思う

これでOKなはず

-RailsでTwitterBootstrap, Railsで使えるGem
-,

執筆者:

関連記事

Railsでhtmlファイルやリンク先のスクリーンショットを撮影~IMGKit&wkhtmltoimage

  github.com/csquared/IMGKit 目次1 環境2 wkhtmltoimageのインストール3 imgkitのインストール4 試す5 日本語フォント 環境 ubuntu …

Rails3.2+jQueryUI1.10でjQuery-UI-Bootstrapのデモ画面を出すところまでやった

なにかいつの間にかかっこいい感じのサイトになってた addyosmani.github.com/jquery-ui-bootstrap/ jquery-ui-bootstrap.github.io/j …

no image

Ubuntu ServerのGuardからネットワーク経由でWindowsのブラウザをリロードする~guard-livereload

Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript   Ubuntu ServerのGuardからGrowl f …

no image

RubyとRailsのテスト関係のリンクメモ

  目次1 RSpec2 Factory Girl3 Capybara RSpec rspec.info/ Expectations とMatcher rubydoc.info/gems/r

RubyでFaye-websocketを試す

By: Jenny Ondioline – CC BY 2.0 目次1 公式2 インストール3 サーバ側4 クライアント側5 エラー 公式 faye-websocketは、fayeからwe …