Ruby on Rails + Bootstrap3 + simple_form チュートリアル | Oh My Enter!
Twitter Bootstrap 3がリリースされてから結構日が経ちますが、twitter-bootstrap-railsはブランチ版で、simple_formはRC版でそれぞれ対応できているようです。導入するにあたって、ちょっとハマる箇所もあったので、簡単にチュートリアルにまとめておきたいと思います。 環境 Mac OS X 10.8 Ruby 2.1 Ruby on Rails 4.1 twitter-bootstrap-rails 3.1.1 (2014/6/21時点ではbranch) simple_form 3.1.0.rc セットアップ Gemfileに必要なgemを記述します。ポイントはtwitter-bootstrap-railsとsimple_formです。各々最新安定版ではまだ対応していないので(2014/6/21現在)、以下のようにバージョン指定が必要です。 📄Ge
【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。 いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitter bootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。 僕も最初はそう思っていました。 一回触ってしまえば、
Ruby on RailsにてBootstrap3のサンプルページを作成する | DevelopersIO
はじめに サンプルアプリ等を作成する際、デザインに悩むことは多いかと思います。 (特にデザインセンスに乏しい私のようなプログラマは・・・) このような時に、Bootstrapは強い味方となります。(今更感は強いですが・・・) またBootstrapにはデザインのサンプルが用意されているので、このサンプルをベースとしてアプリを作っていけばデザインについて悩むことを減らすことができそうです。 今回はRuby on Rails 4 にBootstrap3を適用し、サンプルにある「Starter template」と同じページを作る 手順について纏めてみたいと思います。 作業手順 以下に、今回の作業手順を書いていきます。 1.ページ作成 まずはRuby on Railsにて、今回表示するページを作成します。 コントローラ、ビューの作成 今回表示する画面のコントローラは「welcome」、ビューは「
Rails + Capybara で Bootstrap2 から Bootstrap3 アップグレード時のメモ - Qiita
bootstrap2 -> 3 simple_form 3.0.0 -> 3.1.0.rc1（Bootstrap3に対応したとのこと） yamm2 -> 3 (megamenu) これにまとまってる感じなので粛々とクラスを付け替える感じ http://matome.naver.jp/odai/2137510540117012201 手強いのは非表示まわりと toggle ですかねえ やったこと gem upgrade bootstrap/responsive を削除 span* を col-xs-* に変更 i.icom-xxx を span.glyphicon-xxx に変更。中でごにょってると探すの大変なとこもありそう ※ i は Bootstrap3 でも使えます... row-fluid, container-fluid から -fluid を削除 text-error を tex
Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個 | A40
レスポンシブWebデザインのサイトは国内でも増えてきましたが、制作するとなるとかなり手間がかかります。 そんなとき役に立つのがレスポンシブWebデザイン対応のフレームワーク。中でも「Bootstrap」は、多彩な機能を備え、その使いやすさから広く知られています。 そこで今回は、国内の秀逸なレスポンシブWebデザインを集めた「Responsive Web Design JP」から、Bootstrapを使って作られたサイトをご紹介したいと思います。 whiteSTOUT フォトクリエイティブを中心としたマネージメントオフィスのサイトです。トップに大きな画像を使い、洗練されたイメージとなっています。 AGATHA E-SHOP アクセサリーブランド「AGATHA」のECサイトです。有名ブランドの、しかもECサイトにもBootstrapが使われています。 ACTUS online こちらは有名イン
【第27回 HTML5とか勉強会レポート】 LESSやTwitter Bootstrapで簡単デザイン
【第27回 HTML5とか勉強会レポート】 LESSやTwitter Bootstrapで簡単デザイン：D89クリップ（42） LESSやTwitter Bootstrapなどのツールを利用した、スマートなデザイン方法など、デザイン面にフォーカスされたHTML5とか勉強会レポート LESS、Twitter Bootstrap！ 2012年3月13日、ニフティで「第27回 HTML5とか勉強会」が開催されました。HTML5とか勉強会は、HTML5に関心のあるエンジニアやデザイナー向けの勉強会です。今回のテーマは「リッチクライアントをデザインする」でした。 HTML5やCSS3を利用することで、インタラクティブなコンテンツを作れるようになりました。その代わりにコンテンツをどうデザインするか、どうアプローチするかといったことを、デザイナーだけでなくデベロッパーも意識する必要があります。セッション
Rails3 で twtter bootstrap と ページネイトの kaminari を使うと表示が崩れる件 - 牌語備忘録 -pygo
追記 下記するだけでbootstrapにビューが対応してくれる $ rails g kaminari:views bootstrapよって以下の記事は全く意味無し。 以下過去の記事 ナウなRails3のページネイトはwill_paginateでなく、kaminariらしいのでやってみた。 （環境: MacOSX10.7, ruby19.2, rails3.1.3, bootstrap-sass-rails1.4.0.3 2.0.0.2） またズレた will_paginateの時と同じようにまたズレた。 修正してみる インストール Gemfile（なんとなくbootstrap-sass-rails使ってみる） もしかしたら bootstrap-sass-rails ではないもの使ったほうが良いのかも知れない。よくわからないけど。 gem 'bootstrap-sass-rails' gem
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
[Rails 4.x][Bootstrap] Rails 4.x で Bootswatch を使う方法 - Qiita![[Rails 4.x][Bootstrap] Rails 4.x で Bootswatch を使う方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/febe472cf933e8b94b33dc01ac748a45ea1ed88e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCUmFpbHMlMjA0LnglNUQlNUJCb290c3RyYXAlNUQlMjBSYWlscyUyMDQueCUyMCVFMyU4MSVBNyUyMEJvb3Rzd2F0Y2glMjAlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElODYlRTYlOTYlQjklRTYlQjMlOTUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWY3OTg1ZDRiYjllYWU0OTU5OGFkOTExNWE4NmNiZTdk%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY29sb3JyYWJiaXQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTEyODA2ODFkZmJlOWU3NGVhNmZjNzA2MGMyNzRlM2I0%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D3506d97720b461371446a07950733123)
Simple Cloud Infrastructure for Developers | DigitalOcean