実は、bootstrapの知識だけでは足りません（涙） 本気でweb制作を仕事にしたいなら、現場で通用する実践的なスキルを「短期集中」で身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら Bootstrap、使ってますか？ 便利ですよね。その便利さを物語るように、本当にいろいろなサイトで利用されてます。 ネットで配布されてるWordPressのテーマやHTMLテンプレートのベースに使われていることも多いです。気づいてないうちに使ってしまっているひとも、たくさんいることでしょう。 今回は、便利なのだけど、使いこなすには少し理解が難しい「bootstrapのグリッドシステム」について解説します。bootstrapでレスポンシブデザインを作るとき、欠かせないテクニックです。 グリッドシステムは、頭で理解しようとせず、目で見て
【速攻レビュー】よりモバイルフレンドリーになった「Twitter Bootstrap v4」 佐川 夫美雄（Ashiras, inc.） Twitter Bootstrapバージョン4アルファ版が8月19日に公開されました。既にご存知の通りTwitter BootstrapはレスポンシブでモバイルファーストなCSSフレームワークです。さっとレスポンシブなサイトを構築するのに多くの方が利用しているのではないかと思います。この記事ではTwitter Bootstrapバージョン4の変更点について、筆者が「これは！」と思ったところをピックアップしてまとめます。 バージョン4の変更内容はGitHub上のissueで確認することができます。この中で筆者が注目している事項は LESSからSASSへの変更 アイコン（グラフィックアイコン）の削除 IE8のサポート終了とjQuery1系からjQuery2系
概要 RailsではValidationエラーが発生したフォームに、自動でfield_with_errorsクラスを割り当ててくれます。某チュートリアルでは、これにBootstrapのスタイルを適用することで、簡単に良い感じにする方法が紹介されています。 しかし、紹介されている方法はBootstrap2の書き方であるため、Bootstrap3を使用している場合はうまく動作しません。 Bootstrap2での実装 Rails Tutorialの7章にある通り、SCSSで.field_with_errorsに.control-groupと.errorを追加してあげると、エラー時に良い感じに色をつけてくれるようになります。erb側では特に何も設定する必要はありません。
Rails のフォームで、validationに引っかかるとその要素に .field_with_errors ってクラスがつくのですが、画像のようにBootstrapのフォーム用のエラーCSSを適用させる方法。 僕はBootstrapのsassバージョンを使用してるので、以下のようなファイルを作成して application.css.sass から @import base とかしてる。で、肝心な部分は base.css.sass .field_with_errors @include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%)) @extend .error 最後に 手軽にそれっぽいデザインできるの楽でいい。
bootstrap_form is a Rails form builder that makes it super easy to integrate Bootstrap v5-style forms into your Rails application. It provides form helpers that augment the Rails form helpers. bootstrap_forms's form helpers generate the form field and its label and all the Bootstrap mark-up required for proper Bootstrap display. bootstrap_form also provides: Validation error messages below the fie
CSS .field_with_errors { @extend .has-error; } 解説 Railsはエラーが出たフォームの欄に、自動でfield_with_errorsというクラスを付ける。 なので、field_with_errorsにcssを追加してやれば良い。 bootstrapのcssを適用するために、sassの@extendを使う。 @extendには、適用したいスタイルを持つbootstrapのクラスを指定する。ここでの場合、bootstrapの.has-errorを適用している。 これでエラー時のCSSにbootstrapのCSSを適用することができた。 HTML 比較 エラーなし <div class="form-group"> <label class="control-label" for="user_name">Name</label> <input cla
最近、フロントエンドの話題ばかりとなっている@dokechinです。 みなさんいかがお過ごしでしょうか。 テーブルの列の横幅比率を一定にレスポンシィブにレイアウトしたい。 どうするんだろう。どうするんだろうと悩み。悩んだ。 こうすればいいんじゃないと思いやってみた結果。 bootstrap3だと、12列レイアウトなので最大12列までの対応となって しまいますが、col-ほげほげ-数字をそのまま利用しちゃって こんな感じで書くといいかもとおもった。 合計が12になるように数値を調整するといい感じ。 <div class="container"> <table class="table"> <tr> <td class="col-xs-2 col-sm-2 col-md-2">hage</td> <td class="col-xs-4 col-sm-4 col-md-4">hoge</td>
Rails で assets 関連のライブラリを使う際、数年前までは有志が作った gem を利用する(例: twitter-bootstrap-rails など)のが主流でした。しかしそれだと、gem の作者がボトルネックになってしまい、ライブラリのバージョンがなかなか上がらなかったりします。そんな中、node.js を利用したパッケージ管理システムBower、Bowerをバックエンドに使ったRails Assetsが出てきて状況は一気に変わったのでした。 僕も最近はRails Assetsを使っています。ただ、SassでBootstrapを利用する場合においては、Rails Assetsを利用せず、bootstrap-sassという、Bootstrap 公式の gem を利用するのをオススメします(lessの場合どうするのかは調べてません＞＜)。 Rails Assets 経由でインスト
Twitterのbootstrapを使ってみるその１ ～マニュアル読み～
witter bootstrapのモーダルを使おうというはなし。 英語のマニュアルを難なく読める人なら困らんでしょうが、ワタクシの用に困る人もいるかも知れないので、導入メモを書いておきます。 全三回くらいで以下の流れで掲載します（予定です）。 マニュアルをよむ とりあえずつかってみる カスタマイズしてみる というわけで今回はマニュアルを読むはなし。 まず、オフィシャルのマニュアル。 http://twitter.github.com/bootstrap/javascript.html#modals ココにサンプルも使い方もあるので、正直このとおりにやればまず大丈夫なはずなので、『なんだ これがあれば大丈夫だ』と言う人はココで読むのをやめて美味しいビールでも飲みに行くのが良いと考えます。 続けます。 で、マニュアルこの部分の構成は。 Modals bootstrap-modal.js Exc
I'm learning rails. I have this problem and I hope you can help me. This is my custome.css.scss: @import "bootstrap"; /* mixins, variables, etc. */ $grayMediumLight: #eaeaea; /* universal */ html { overflow-y: scroll; } body { padding-top: 60px; } section { overflow: auto; } textarea { resize: vertical; } .center { text-align: center; h1 { margin-bottom: 10px; } } /* typography */ h1, h2, h3, h4,
PlugoBrowser - TinyMCE / CKEditor Image & File Manager / Uploader TinyMCE Image & File Manager Twitter Bootstrap Button Generator - the easiest way how to set up your buttons based on Twitter Bootstrap in a seconds. The Twitter name, logo, Twitter T, Tweet, and Twitter bird are trademarks of Twitter, Inc. in the United States and other countries. 2012 © Plugo - Czech Republic based webdesign compa
そんなSassが町田先生のCustomizedTwitterBootstrapに含まれていたので、これをTwitter Bootstrap3に対応させてみたのでした。 ソース こちらが良い感じにしてくれるベースの変数です。 $base-color、$main-color、$accent-color、$base-text-colorを決めることで良い感じにしてくれます。僕は下のファイルみたいなテイストが好きです。ほんわかしている。仕事では使えない感じがある。 実際に読み込むときには、Twitter Bootstrapより先に変数を読み込んでおきます。 //--------------------------------------------------------- // Color Scheme for Bootstrap @import colors/try @import color
Lightbox・モーダルウインドウ関連 / Bootbox.js / Bootstrap-modal他...全17件
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
