tkymtk's blog

Ruby on Rails及びその周辺について調べたこと。Do whatever you want to do at your own pace.

Bootstrap

Rails form の submit ボタンにbootstrapのglyphiconをつける

対処 button_tag を使う コード <%= button_tag( class: "btn btn-primary") do %> <%= content_tag :span, "Submit", class: "glyphicon glyphicon-plus" %> <% end %>

bootstrap-generators gemを使う。

はじめに Railsでtwitter-bootstrapを使う方法はいくつかあります。gemを使って導入する場合、 lessで使いたいときは、twitter-bootstrap-rails sassで使いたいときは、bootstrap-sass を選択するのがほとんどだと思います。 twitter-bootstrap-railsにはジ…

Rails4: Simple_formをBootstrap3に対応させて使う。

2014/5/2更新 simple_formはbootstrap3に対応したようです。 Bootstrap 3 support for Simple Form | Plataformatec Blog 下記の内容は必要ないと思います。 やりたいこと Rails4で、Simple_formを使い、 Bootstrap-sassを介してBootstrap3を適用したい。

bootstrap-sassで、ブレイクポイントの変更

方法 cssファイルの@import "bootstrap"より前に、変更したい変数を指定。 その際に、ブレイクポイントの変数を上書きする。

Bootstrap3 ブログのコメントやユーザを今風にスタイリング(Media object)

こんな感じ

Bootstrap3 フッターをページの下部に固定する方法(スティッキーフッター)

2014/07/11: 最後に追記しました。 ことはじめ Bootstrap3でfooterのCSSを設定したかったので、調べたら Sticky footer という方法があった。 しかし、Stackoverflowや既存のサイトを見ると、どうもおかしい。 そこで、Bootstrap3の公式サイトからちゃんとコ…

Rails: フォームのエラーが出た欄を、Bootstrapを使ってスタイリングする方法

CSS .field_with_errors { @extend .has-error; }

Rails TutorialのフォームをBootstrap3で書き換えた

変更点 span6 offset3 から col-xs12 col-sm-6 col-sm-offset-3に変更。 それぞれのインプット要素を<div class="form-group">で包む インプット要素にclass: "form-control"を指定 ボタンのcssを、btn-largeからbtn-lgに変更。 ついでに、フォームタグにrole="form"を追加するための</div>…

Bootstrap 3 : CSS 順次追加

CSS · Bootstrapから 概要 HTML5 doctype BootstrapはHTML5が必要です。 <html lang="en"> ... </html>

Bootstrap 3 : Navbar

デフォルト Navbarはサイトやアプリのナビゲーションヘッダーの役割を果たすレスポンシブな高次のコンポーネント。 モバイルビューでは折り畳まれ、切り替えが可能になる。 viewportの幅が広がるにつれ、横方向になる。

Bootstrap 3 : navbarと .containerの関係

.containerは中のものを中央に配置する。.containerの位置に注意 デフォルト デフォルト(全体が中央,角丸) <div class="container"> <nav class="navbar navbar-default" role="navigation"> ... </nav> </div>

Ruby on Rail Tutorial bootstrap-sassでハマった

.debug_dump { . . . @include box_sizing; } シンタックスエラーでできない。 .debug_dump { . . . @include box_sizing(border-box); } これで出来た。どうやら引数が必要なようだ。 bootstrap-less のソースコード // Box sizing .box-sizing(@boxmodel) …

間違いがあれば、ご指摘下さると幸いです。