CSSフレームワークとして最も人気の高いBootstrap。すでに多くの方が使っていると思います。Bootstrapを使っていて、ちょっとだけレイアウトや動きを変えたいということはよくあるんですが、ここで紹介するドロップダウンもその１つ。 通常はリンク（dropdown-toggle）をクリックするとメニューが開くという仕組み。 ドロップダウンでよくある要望が、マウスオーバーで開きたい場合やメニューの多階層化です。Bootstrapのドロップダウンをマウスオーバーで開く方法でマウスオーバーの方法を解説しましたが、ここでは多階層化する方法をまとめてみます。 Bootstrapのドロップダウンを多階層化する デフォルトでは上記の画像のように１階層だけ表示されます。これを多階層化するには以下のようなコードを追加します。 HTML <div class="dropdown"> <a href="#

ダイアログのタイトルだとか内容のテキストだとかを 設定してからオープンさせたい場合、jqueryとかでidを強引に書き換えてやれば いいのだが、それだと密結合な感じになってしまうので、イベントを駆使していろいろ頑張ってみた。 まず、ダイアログ側、こんな感じでdivタグがかかれている。 <div class="modal hide" id="myModal"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <span id="modalHead">Modal header</span> </div> <div class="modal-body"> <span id="modalBody">One fine body</span> </div> <div class="modal-footer">

There are many, many, many ways to hack a file input so it looks and behaves consistently across all browsers. There's even a pretty slick plugin to help get the job done. Unfortunately, most of these solutions are cumbersome, prone to cross-browser issues, and require JavaScript. Today, I would like to propose a more fundamental approach for file inputs in Bootstrap 3 and 4. Modern approach (IE9+

Thankful to Krajee! BUY A COFFEEor DONATE to get more out of us. Learn We strive hard in creating high quality JQuery plugins and Bootstrap extensions for the community as free open source code, and maintaining this demonstration site. Any donation would help us maintain our resources better and help improve our plugins or create new ones. Even, if it does not fulfil our resource needs, it will st

Twitter Bootstrap 3.0.0のcontainer、row、col(Bootstrap 2.xならspan)クラスの使い方を説明する。公式サイトでも例示されているが、体系だった説明がされていないのでBootstrap初心者の役に立つはずだ。 1. containerは中身をセンタリングし幅を固定するcontainerクラスは中身を画面の中央に幅を固定するクラスだということを理解しよう。containerクラスはBootstrapのレイアウトを使う上でルートとなるクラスである。 2.で述べるcontainerクラスより幅の広いレイアウトをする場合を除いて、Webページのほとんどの内容をcontainerクラスの内部に書くことになるだろう。 containerクラスはWebページの中に複数個作っても全く構わない。また3.で詳しく述べるが、グリッドシステムを使わなくて良いのなら、

{wrap} Bootstrap Bootstrapでそのまま使えるHTMLとCSS、素材セットを紹介しています。テンプレート自体は少額有料ですが、デザイン性が高く結果的に安上がりかも。 https://wrapbootstrap.com/ BootstrapStyler Bootstrapでそのまま使えるHTMLとCSS、素材セットを紹介しています。無料でダウンロード出来る点が非常に嬉しいです。 http://bootstrapstyler.com/

Twitter Bootstrap使ってるとどうもjQuery UIのカレンダーのデザインが気に食わなくて、bootstrap-datepickerを使う人が多い気がします。jQuery UIは機能が凄いからいいけどね。 で、データピッカーなんですが、ちょっとソースがいろいろあって混乱してしまうので整理します。 Stefan Petre http://www.eyecon.ro/bootstrap-datepicker/ ↓ vitalets https://github.com/vitalets/bootstrap-datepicker ↓ eternicode https://github.com/eternicode/bootstrap-datepicker 多分こんな流れです。 eternicodeのオンラインデモは分かりやすくていい。 期間を指定させる 単一の日付けではなくて、○

2013年03月01日19:00 カテゴリTwitter Bootstrap bootstrapのtooltipにオプションを設定しつつデフォルトでshowとしたい場合 bootstrapのver2.2.2の話題です。 bootstrapのtooltipにはいろいろなオプションがあります。 オプションの設定の仕方は $('#example').tooltip(options) で、例えばtooltipを右側に表示したい場合は $('#example').tooltip({placement:right;}) のように書きます。 tooltipはaタグに設定しまして、aタグにマウスがのっかったら表示するというのがデフォルトの動作です。 そうではなくて、デフォルトで表示したい場合は以下のように書きましょうと書いてあります。 $('#element').tooltip('show') toolt

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

「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド　リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。 いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitter bootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。 僕も最初はそう思っていました。 一回触ってしまえば、

セキュリティソリューション事業部からのお知らせ セキュリティソリューション事業部のブログサイトを新たに開設いたしました。 https://blog.sie-security.com/ 今後のセキュリティニュースの投稿は上記URLのサイトからとなります。よろしくお願いいたします。 担当：TY …More Read