Bootstrap

Twitter Bootstrap 2.3 リリース！

TABLEofCONTENTS

Bootstrap 公式ブログと 2.3 プルリクエストの内容を日本語でまとめました。

ハイライト

Bootstrap 3 で何が変わるのかをまとめてみた はまだ先の話ですが、最後のバージョン2系となる予定の Bootstrap 2.3 が昨日2/8（日本時間）にリリースされました。2.3 ではバグフィックスとドキュメントの改善、そしていくつかの新しい機能が追加されています。

  • リポジトリの変更：
    • makefile とインストールプロセスをローカル化。npm install を実行するだけで簡単にインストールできる。
    • jQuery 1.9 にアップグレード。単に jQuery ファイルを最新版にしただけ。
    • changelog を wiki ページからレポジトリ（CHANGELOG.md）に移した。
  • 新しい機能、改善された機能：
    • カルーセル にインジケーター（●◯◯ ← こういうの）を追加。 HTML を追加するだけで自動的に機能する。
    • ツールチップ に container オプションを追加。ツールチップ（もちろんポップオーバーも）の DOM への挿入箇所をコンテナパラメーターで指定できるようになった。デフォルトでは対象要素に insertAfter される。
    • ポップオーバーの幅指定を width から max-width に変更し、さらに 240px から 280px に広げた。また、タイトルが未指定の場合は、CSS の :empty セレクタで自動的に非表示にするようにした。
    • ビューポート端でのツールチップの位置を改善した（#6713）。
    • SVG でもツールチップが使えるようになった。
    • すべてのコンポーネントでリンクのアクセシビリティを改善した（#6441）。リンクのホバーステートは :focus にも適用されるようになった。これは <a> タグ、ボタン、ナビゲーション、ドロップダウン、などすべてが対象。
    • CSS の screen、print で表示／非表示を制御するプリントユーティリティクラスを追加。
    • input グループをよりデフォルトのフォームコントロールぽく改善。<input> のスタイルにマッチするよう display: inline-block; を追加、margin-bottom を増加、vertical-align: middle; を追加した。
    • グラデーション mixin .horizontal-three-colors() を追加（使用例は CSS テストファイルを参照）。
    • 文字のアライメント用に .text-left, .text-center, .text-right のユーティリティクラスを追加。
    • IE10 の画面分割でレスポンシブ CSS を使えるように @-ms-viewport を追加。
      （訳注：@-ms-viewport については Device Adaptation (Windows) を参照。）
  • ドキュメントの変更：
    • 両端揃えナビゲージョンの例 を追加。（訳注：見当たりません…）
    • 固定ナビゲーションバー（fixed navbar）使用時の画面下固定フッター（sticky footer）サンプルを追加。（訳注：見当たりません…）

さらに詳しい詳細は、Github の 2.3.0 milestone や 2.3.0 pull request を参照してください。上記で説明した以外は、ほとんどが CSS のちょっとした変更やドキュメントの誤記修正です。

ツールチップの注意点

2.2.2 のリリースで、ツールチップ・ポップオーバーの挿入方法を<body> への追加から、対象要素へ insertAfter するように変更しました。これにより z-index 問題が解決し、フォークした場合のツールチップのスタイリングやコントロールが劇的に簡単になりました。

しかしながら adjacent（子、子孫、隣接、間接）CSS セレクタ によって input グループが崩れるバグが発生したため、container オプションを追加することにしました。insertAfter で正しく機能しない場合は、このオプションで適切な要素を指定すれば解決します。

Bootstrap 3 について

バージョン2.3 は バージョン2系としては最後のリリースになります。今後の最新情報は Bootstrap 3 pull request をフォローしてください（訳注：日本語情報は、当サイトの Bootstrap 3 で何が変わるのかをまとめてみた をご覧ください）。簡単に紹介すると:

  • Bootstrap 3 はモバイルファースト。
  • レスポンシブファイルの分割廃止 – ひとつになるのさベイビー
  • IE7 と Firefox 3.x のサポート廃止。
  • グリッドはリキッド（フルード）レイアウト一本でいく。
  • モーダルのレスポンシブ対応。
  • サブメニュー廃止。
  • カルーセルのリデザイン
  • 変数名をキャメルケースからダッシュ（ハイフン）つなぎのチェインケースに変更。
  • Glyphicon は画像からアイコンフォントへ変更。
  • JavaScript のイベントに名前空間（ネームスペース）を指定。
  • ドキュメントの再編。Scaffolding と Base CSS は CSS ページで統合。
  • ギャラリーページ（Bootstrap 利用サイトのショーケース）の追加。

大事なことなので2回言いますが、我々が日々この悪ガキと格闘している様子は Bootstrap 3 pull request で確認できます。プルリクエストへのコメントや Twitter などでのフィードバックをお待ちしています。

<3,

@mdo and @fat

まとめ

両端揃えナビゲーションは、自前で実装していたので おぉ！ と思ったのですが、ドキュメントに見当たりませんでした。発見された方がいらっしゃいましたらお知らせください。

参考