Pimp My Site » Bootstrap http://pimpmysite.net Cool stuff on the web Tue, 03 Jun 2014 09:17:53 +0000 en-US hourly 1 https://wordpress.org/?v=4.2.38 Twitter Bootstrap 2.3 リリース！ http://pimpmysite.net/archives/549 http://pimpmysite.net/archives/549#comments Fri, 08 Feb 2013 15:07:52 +0000 http://pimpmysite.net/?p=549

ハイライト

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

まとめ

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

参考
]]> http://pimpmysite.net/archives/549/feed 0 Bootstrap 3 で何が変わるのかをまとめてみた http://pimpmysite.net/archives/501 http://pimpmysite.net/archives/501#comments Thu, 24 Jan 2013 02:34:46 +0000 http://pimpmysite.net/?p=501

Twitter Bootstrap 3 の変更点概要

Bootstrap 自体の仕様だけでなく体制なども変更されるようです。

  • モバイルファースト
  • twitter/bootstrap, twitter/bootstrap-server, mdo/bootstrap-blog（プライベートレポート）を twbs organization アカウントへ移行
  • サイトの URL を http://getbootstrap.com に変更
  • CSS はレスポンシブ用スタイルも含めて1ファイルにする
  • IE7, Firefox3系 のサポート廃止
  • Glyphicon のフォント版を採用
  • Apache ライセンスから MIT ライセンスへ移行
  • *-wip ブランチの開発スタイルから 3.1.0-modal-revamp のような機能ごとのブランチに変更
  • 過去バージョンのダウンロードにタグを使う

コミュニティのプロジェクトを organization の正式プロジェクトに採用するなどして、コミュニティの強化を図りたいらしいです。また、@mdo と @fat の二人だけでは issue, pull requet の管理がきついらしくオフィシャルの contributor（貢献者）を募りたいようです。

以降で Wiki と Pull Request の内容から変更点の詳細と進捗をまとめます。

ドキュメント

主に organization 周りのページとコードの変更。

全般

  • Scaffolding と Base CSS ページを新規の CSS ページに統合。
  • Mustache テンプレート から i18n タグを除く。{{_i}} {{/i}} は使わない。
  • ギャラリーページを追加。
  • Extend ページを削除。
  • ページタイトル用の変数を追加。

ホームページ

  • Retina 用にスクリーンショットを更新。
  • 新しいサイト用にスクリーンショットを差替。
  • 新しいギャラリーページへリンク。
  • ギャラリーページにネタを追加。
  • Redo の例（？）

CSS ページ

  • アイコンを大きくする。

Example テンプレート

  • マークアップとモバイルファーストの変更を反映。

CSS

IE7, Firefox 3.6 のサポート廃止、CSS ファイルの統合、など。

  • IE7 のサポート廃止。* ハック、*zoom: 1; など IE7 用スタイルをすべて削除。
  • Firefox 3.6 のサポート廃止。-moz-box-shadow やボタンのインナーパディングハックを削除。
  • キャメルケースの変数名をダッシュ連結に変更。例 @bodyBackground を @body-background に変更。
  • モバイルファースト。レスポンシブ関連スタイルもすべて bootstrap.css 1つにまとめる。
  • @blue @orange などのセマンティックでない色変数を廃止し、@state-warning-text のような意味のある変数にする。また @black @white も廃止する。#000 #fff の方が 20% も短く、そもそも変数で変更する値ではないため。
  • .border-radius() .border-*-*-radius mixin の廃止。ベンダープレフィックスが必要 なのは Android 2.1, iOS 3.2 と古いブラウザのみなので削除。各コーナー（左上、右下など）はベンダープレフィックス不要のため mixin を削除。.border-left-radius のような 1辺（2コーナー）の mixin は引き続き使用可能。
  • layout.less の廃止。スタイルが2つしかなく、fluid（リキッド）コンテナは廃止（次セクション 参照）のため不要。.container のスタイルは grid.less へ移動。
  • clearfix mixin の名称変更。mixin は .clear_float()、クラスは .clearfix になる。現在 LESS は mixin と同名のクラスをサポートしていないため “mixins.less にクラスは含めない” 方針によりこのような変更となった。
  • .hide .show に !important を付加。どの要素でもこれらのクラスを機能させるため、より少ないコードで実現できる !important フラグを選択した。
  • reset.less を廃止し、最新の Normalize にアップグレードする。normalize.less を追加することになる。印刷用スタイルやレスポンシブ画像用スタイル（reset されたスタイルを変更するだけのもの）は scaffolding.less に移動。
  • .*-important を廃止して .*-danger に変更。ボタンやラベルなどの赤色のバリエーションのクラス名は .*-danger に統一する。
  • 未練たらしい “TODO” が無いことを確認する。

レイアウトとグリッドシステム

グリッドシステムは1つになり、fluid をあえて指定する必要はなくなる。

  • グリッドシステムのオーバーホール：デフォルトで fliud（リキッドレイアウト）
    • 今までのデフォルトの固定幅グリッドとは別に定義していた fuild グリッドシステム、コンテナ、レイアウトを廃止。
    • .row によるグリッドシステムは、ピクセル指定の幅やマージンの代わりに パーセンテージ指定や box-sizing: border-box を使う。
    • グリッドのネストをサポート。カラムは親要素のサイズに比例する。
    • オフセットもサポート。
  • テーブル用グリッドクラスの廃止
    • グリッド指定する必要はない。
    • .table 要素内の .span* から float 指定を削除。
  • input 用グリッドクラスの廃止
    • input 用のグリッド mixin および span クラスを廃止。
    • 新しいグリッドシステムでは input 要素はデフォルトで width: 100%;。
    • input 要素に直接クラスを指定するより、グリッドカラムに 100% 幅の input 要素を置く方が良い。
  • すべての .container に width の代わりに max-width を指定することで、navbar のようなコンポーネントで起こる問題を防止できる。

文字

  • @altFontFamily 変数の廃止。
  • レスポンシブ時の jumbotron 用 font-size を調整。
  • px の代わりに rem の使用を検討。IE8 用フォールバックで px は必要。

テーブル

  • table.info クラスの廃止。
  • ネスティングのためにより狭いスコープのテーブル用クラスを検討。

画像

  • サムネイルスタイルの整理。
    .thumbnail と同じなので .img-polaroid を廃止。通常のインライン（または inline-block）画像には .img-thumbnail を使う。複数の要素からなるコンポーネントには .thumbnail を使う。

ボタン

不明瞭でセマンティックでないものは廃止。

  • .btn-inverse の廃止。だってこれ マジで 意味わからんし。
  • デフォルトのデザインを改良（外側の box-shadow 廃止）。
  • disable ボタンのホバー時に background-color が変わるのを防止するためスタイルをリファイン。

フォーム

フォーム関連コントロールはデフォルトで 100% 幅。input グループをオーバーホールする。フォームステートをシンプルにする。

  • input 要素のボックスモデルを変更。すべての input 要素をデフォルトで box-sizing: border-box; width: 100%; に変更。これは各自で input 要素のサイズを指定する必要があることを意味する。3.0 以前では input 要素には約220px を指定していた。
  • デフォルトのデザインを改良（外側の box-shadow 廃止）。
  • .input-group 用の input-prepend input-append を廃止。これらのクラスは各要素に指定する。また、ボタンを使うにはマークアップの追加が必要。
    • input やアドオンをラップする親要素に .input-group クラスを指定する。
    • テキストを prepend/append するには、.addon の代わりに　.input-group-addon を使う。
    • ボタンを prepend/append するには、その要素のクラスとして .btn の代わりに　.input-group-btn を使う。
  • .form-search の廃止。
  • fieldset[disabled] をサポート。disabled な fieldset 内のフォームコントロールを適切なスタイルにする。
  • グリッド input の .controls-row を廃止。3.0 では input 要素が width: 100%; であり、別途 input 用グリッドを実装したくないので廃止した。代わりに標準のグリッドシステムで input 要素群を .row でラップし、個別の input を .span* のカラムにすればよい。
  • .input-block-level mixin とクラスを廃止。input 要素が width: 100%; なので冗長になるため。input 要素は display: inline-block なので、block にしたい場合は個別に指定する必要がある。
  • Horizontal フォーム（ラベルと input 要素が横に並ぶフォーム）はモバイルファーストになる。768px 幅未満ではラベルと input 要素が1行ずつスタックし、それ以上の幅ならフロートして横に並ぶ。
  • チェックボックスとラジオボタンは div でラップする。label.checkbox の代わりに　label 内に div.checkbox が必要。これでラベルもクリッカブルになる。
  • インラインのチェックボックスとラジオボタン用クラスの追加。radio.inline の代わりに label に .radio-inline クラスを指定する。インラインのチェックボックスとラジオボタンは div でラップする必要はない。
  • 分割ドロップダウンと通常のドロップダウンのクラス名を分ける。
  • フィールドのステート（disabled）を個々の input 要素に適用する。
  • 新しいインプットグループ内でボタングループが機能するようにする（border-radius で問題あり）。
  • .help-inline .help-block をリファクタリング。
  • フォームコントロールのマージンを改善。現在上書きしまくっているため、フォームコントロールはデフォルトではマージン無しがいいかも。

アイコン

  • フォントアイコン！PNG を廃止して Glyphicon を v1.7 @font-face にする。
  • すべてのアイコンのクラスに プリフックスを追加：.glyphicon-

レスポンシブユーティリティ

  • 新しいモバイルファーストのアプローチに合わせて responsive-utilities.less をリファクタリングする。
  • メディアクエリーの変更をドキュメントに反映する。

ボタングループ

  • ボタングループ内でドロップダウンを使えるようにリファクタリングする。
  • 通常のドロップダウンを分割ドロップダウンのクラスを分ける。

ラベル、バッジ、カウンター

色々検討が必要。

  • .label コンポーネントの角丸を小さくする。
  • .label のサイズを親要素の font-size に合わせて自動で調整する。
  • クソなので .badge を廃止。
  • 色オプション無しの .counter として .badge を再実装する。OS X の Mail.app ぽくできるだけニュートラルにする。

ヒーローユニット（ジャンボトロン）

（訳注：ジャンボトロンは商標です…）。

一般的な変更

  • .hero-unit から .jumbotron へクラスを変更。関連する変数も合わせて変更する。
  • 見出しの font-weight を軽くする。ボールドの代わりにセミボールドを使う。

モバイルファーストスタイルの改善

  • 初期状態では full-width にするか（角丸なし、など）？
  • ブレークポイントごとに文字のスタイルを改善するか？

ナビゲーション

ナビゲーションバー

  • .navbar-search の廃止。フォームレイアウトから .navbar-search を廃止したため。.navbar-form は生かす予定。
  • navbar とサブコンポーネントのデフォルトスタイルをオーバーホール：
    • ドロップダウンメニューのキャレット（インジケーターでなくメニューとして追加されている）を廃止。ドロップダウンメニューは navbar の端に位置する。
    • 縦の分割線は navbar の高さいっぱいには拡張しない。
    • navbar の box-shadow、グラデーションを廃止。
    • 44px だった navbar の高さを モバイルでは 62px へ、デスクトップでは 50px へ変更。
  • .navbar-inner の廃止。インナーの div は不要。
  • 標準・インバース navbar で .btn-navbar が :hover :focus のステートを含むように変更。
  • モバイルでのナビゲーションリンクのアクティブステートを変更。
  • nabvar 内の非ナビゲーションリンクサポートの改善。.navbar-link が必要なのがクソ。
  • nabvar 内でのフォーム・ボタンサポートの改善。スタイル上書きしまくりでクソすぎる。改善しよう。
  • ドロップダウンや他のコンポーネントを扱いやすくするため、collapsed navbar の振る舞いを改善。

Navs

  • BS2のサイドナビゲーションのように .nav-list のオプションをリデザインする。
  • 左・右・下のタブを廃止。左・右のタブは便利だが Bootstrap のコアからは削除する。必要なら JavaScript プラグインや CSS を各自で利用されたし。
  • ページネーションの親 div および中央・右のアライメントオプションを廃止。経緯は #6562 を参照。
  • ナビゲーションオプションを再実装。
    • Tabs
    • Pills
    • Justify バリエーション

モーダル

  • .hide が不要になりました。クラッシュを避けるためにユーティリティクラスで !important を使うようにしたため、モーダルで .hide を指定しなくて済む。現在は modals.less で直接 display: none; を指定している。3 にアップグレードする際は、既存のモーダルから .hide クラスを削除しておくこと。
  • モバイルファーストのためにモーダルをリビルドする
    • fixed の代わりに相対位置を使う。
    • 内容に合わせて高さが可変となるので overflow-y: scroll; は不要。
  • .modal-small .modal-large のサイズオプションを加えるか検討中。
  • 縦横位置の改善。

ドロップダウン

  • サブメニュー廃止。これが使われているのを見たことがないし、JavaScript でインタラクションやキーボードナビゲーションのコードを書くのはマジクソ。なので廃止。
2013.2.18 追記とりあえず CSS だけ復活させたようです。バージョン3 リリース時まで生き残るかはまだ決めてないとのこと。

サムネイル

  • .thumbnails メタコンポーネントの廃止。代わりにグリッドシステムを使うこと。.thumbnail のスタイルは利用可能だが、グリッドカラムのような width を指定した親要素が必要。

カルーセル

  • リデザイン！キャプション同様に前後ナビゲーションのスタイルを軽くする。
  • カルーセルコントロールのマークアップを変更。 .carousel-control 内に <span class="control"> が必要です。

まとめ

クソクソ書いてますがこれは @mdo がそう書いてるためいたしかたなくです。ご了承ください。

モバイルファーストということで fluid（リキッド）レイアウトが標準というかこれのみになったことが一番大きい変更でしょうか。変数名のキャメルケースや .navbar-inner の廃止が個人的にはあいたたたですが、よりシンプルに改善されるのは良いことですね。リリースされるのを wktk しつつ、色々準備しておかなければと思いました。本家の情報が更新されたら、このページにも随時反映する予定です。

間違いや抜けなどありましたらお知らせください。ではまた。

参考
]]> http://pimpmysite.net/archives/501/feed 1