twitter bootstrap popover使い方 | まとめーたー
photoBy: http://gigazine.jp/img/2012/04/21/palomitas/P1300436.jpgポップオーバーの使い方http://twitter.github.com/bootstrap/javascript.html#popovers に記載されているけど、なぜかうまく動かないのでまとめてみた。 最新版をダウンロードhttp://twitter.github.com/bootstrap/customize.html javascriptがころころ変わっているみたいなので、最新版をダウンロードしておこう。 使用例 一番簡単な使い方rel要素に popover を持つ物全てに適用 <script src="/app/webroot/js/bootstrap.js"></script> $(function() { $('[rel=popover]').po
【Bootstrap】DIV本体を中央寄せするにはOffsetを上手く使えば良い
Offsetクラスは左側に空のカラムを入れてくれる お恥ずかしい話、理解力の乏しい私は最初Bootstrapのドキュメントページを見た時にOffsetクラスの意味があまり良くわからなかったのです。 でもまあ簡単に言うと左側に指定カラム分の空白を作れるということですね。 「左側」というのが重要です。 画像で説明すると下記のようなイメージ。 「col-xs-4」のカラムの左側に「col-xs-offset-4」分の空白が出来ることが分かるかと思います。 中央寄せするグリッドカラムパターンは５種類 Bootstrapでは一つのrow（行）のカラム数が「12」と決まっていますので、中央寄せするのには下記の５パターンになっています。 ① .col-xs-10 .col-xs-offset-1 ② .col-xs-8 .col-xs-offset-2 ③ .col-xs-6 .col-xs-offse
とほほのBootstrap 3入門 - とほほのWWW入門
このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
bootstrap-generators gemを使う。 - tkymtk's blog
はじめに Railsでtwitter-bootstrapを使う方法はいくつかあります。gemを使って導入する場合、 lessで使いたいときは、twitter-bootstrap-rails sassで使いたいときは、bootstrap-sass を選択するのがほとんどだと思います。 twitter-bootstrap-railsにはジェネレータの機能がありますが、bootstrap-sassにはありません。 なので、sass環境でbootstrapのテンプレートを生成できる、bootstrap-generatorsというgemを使ってみたいと思います。 bootstrap-generators の特徴 sass テンプレートを生成できる。 インストール Gemfileに次のラインを追加: gem 'bootstrap-generators' bundle installを実行: bundl
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
simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その１） | Oh My Enter!
エンジニアであれば、みな自分流の開発流儀をお持ちだと思います。PHPでWebアプリを開発する際はこのフレームワークを使うだとか、Railsアプリの場合はこのgemを使用するだとか・・・。私がRailsアプリを作成する際の鉄板といえば、simple_form＋twiter bootstrapを使用することです。simple_formは、入力フォームを簡単に作成するお手伝いをしてくれるView用のgem、twitter bootstrapは（説明するまでもないかもしれませんが）Twitterが公開しているcssフレームワークです。デザインが苦手なエンジニアにでも、それなりに見栄えの良い画面が簡単に作れるので、非常に重宝しています。 simple_form: https://github.com/plataformatec/simple_form twitter bootstrap: http:
simple_formとTwitter bootstrapで作る俺流鉄板Railsアプリ（その２） | Oh My Enter!
前回に引き続き、Railsアプリにて simple_formと twitter bootstrapを使用する際のtipsをご紹介したいと思います。まずは前回作成した画面を見てましょう。 前回はTitleに必須バリデーションを付加しました。今回はReview項目を編集してみたいと思います。 このReviewという項目には、本の評価を１〜５の数字で入力してもらうと仮定しましょう。さっそく、models/book.rbにバリデーションを記述します。 📄app/models/book.rb class Book < ActiveRecord::Base validates :title, presence: true validates :review, numericality: { only_integer: true, greater_than_or_equal_to: 1, less_t
Components · Bootstrap
Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Examples Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用も無料！Bootstrapをベースに最近のトレンドを取り入れた新作テンプレートのまとめ
Rails4.0でBootstrap導入のあれこれ～bootstrap-sass simple_form kaminari dataTables | | Scimpr Blog
Rails4 に bootstrap-sass で Twitter Bootstrap3 を導入
見つけたエロサイト構築事例を淡々と載せるページ - エロサイトの作り方
Bs3 Document | Greenapple-room
Ruby on Rails 4.0正式リリースとBootstrapの正しい設定法