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 の screenprint で表示/非表示を制御するプリントユーティリティクラスを追加。
    • 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 milestone2.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

まとめ

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

参考