Bootstrap4で何を期待するか

公開: 2015-11-17

ここ数年で、Bootstrapは非常に人気があります。 Bootstrap要素を組み込んだWordPressテーマに出くわしたり、作成したりする可能性は十分にあります。 これは、基本的なプレレスポンシブフレームワークから、堅牢で機能が豊富な最新のレスポンシブフレームワークに進化しました。 Bootstrap 3はかなり前から存在しているので、Bootstrap4で次に何が行われるかを知ることはエキサイティングです。

ブートストラップ4の状態

Bootstrap 4は現在作業中であり、本番環境で使用する準備はまだ整っていません。 現在、アルファ版です。 これは、プレビューして、将来のプロジェクトにどのように役立つかを理解する良い機会です。

Bootstrap 4のドキュメントはまだ完成していないため、実験はいくつかの新機能をテストするための良い方法です。 正式に本番環境で使用できるようになると、すべての優れた新しい改善点を十分に認識できるようになります。

bootstrap-4-ダウンロード

最新のブラウザ用に構築

私たちがWebを前進させるにつれて、Web開発が提供する最新かつ最高のものを使用しながら、古いブラウザーをサポートすることがますます難しくなっています。 これがあなたの耳に聞こえる音楽であるかどうかにかかわらず、現代のブラウザで作業するとき、より良いCSS3テクニックがより簡単になることに私たちは皆同意することができます。 Bootstrap 4は、古いブラウザから完全に脱却するのに最適な方法かもしれません。 この更新により、InternetExplorer8のサポートは完全に廃止されます。 フレームワークは引き続きInternetExplorer9をサポートし、多くの問題なしにCSS3をサポートすることに注意してください。

改善されたリセット

あなたはおそらくNormalize.cssに慣れているでしょう。これは素晴らしいリセットオプションです。 bootstrap固有のものがreboot.cssと呼ばれるものが追加された、新しく改善されたリセットがあります。 ブートストラップの詳細は、ボックスのサイズ設定などです。境界線、測定単位としてのレム、リンクスタイル、フォームスタイルなどです。 これは、Normalize.cssと特定のBootstrapのニーズをうまく組み合わせているため、すばらしいスタートを切ることができます。

bootstrap-4-reboot

SASS

Bootstrapの前の時代には、LESSが好まれたようでした。 業界の変化と設計者の好みがSASSに傾いているため、現在好まれているのはそれです。 バージョン3に戻ったことを思い出すと、それはSASSオプションがポートオプションで使用可能になったときです。 現在のところ、LESSのサポートは予定されていません。

bootstrap-4-sass

カスタマイズ

Bootstrap 4を使用すると、カスタムデザインを簡単に作成でき、すべて整理された方法で実行できます。 すべての可変オプションが1つのファイルに統合されます。 SASSは簡単にコンパイルでき、これまでのように別のスタイルシートは必要ありません。

ブートストラップ-4-変数

Bootstrap 4には、かなりの数の新しいカスタマイズオプションがあります。現在の状態はここで確認できます。 詳細が公開され続けるにつれて、それはおそらく少し進化するでしょう。

これらは最初に設定するのが簡単なカスタマイズであることに注意してください。

  • ボディのデフォルト
  • 色変数
  • フレックスボックス
  • トランジション、丸みを帯びた角、ドロップシャドウなどのCSS3デザインオプション。
  • 間隔の測定
  • リンクスタイル
  • グリッドブレークポイント
  • グリッドコンテナ
  • グリッド列
  • タイポグラフィのサイジング
  • コンポーネント
  • テーブル
  • もっと！

Flexboxは誰ですか？

Flexboxの人気は確実に高まっており、これを使用するWebデザイナーはますます増えるでしょう。 CSSスタイルでシンプルで柔軟なレイアウトオプションを提供するため、使用するのに最適なツールです。 親要素内のコンテンツの垂直方向の配置の容易さ、メディアクエリを使用したデバイス間および画面解像度間でのコンテンツの並べ替え、グリッドに同じ高さの列を配置する簡単な方法を好む場合、Flexboxは優れたソリューションです。 。

すべてのプロジェクトを実行して変換する前に、言及すべき重要なことがあります。 ブラウザのサポートは大幅に増加しましたが、InternetExplorer9にはまだFlexboxのサポートがありません。 使いやすさに関しては、Bootstrap 4を使用すると、IE9のサポートが必要ない場合でもFlexboxを簡単に使用できます。 基本的に、あなたがしなければならないのは、 _variables.scssファイルを見つけて、$enable-flexをfalseからtrueに変更することだけです。 SASSに精通している場合、これは簡単に実行できます。

グリッドの更新

Bootstrapの長年のファンである場合は、おそらく、グリッドシステムがどのように機能するか、および命名規則についての専門家です。 Bootstrap 4では、構文は同じままですが、使用される測定値に違いがあります。 グリッドシステムは現在、「レム」に基づいています。 これは、ピクセルパーフェクトなデザインに慣れている場合の調整です。これで、物事がより流動的になります。

慣れ親しんだピクセルを手放すときは、 .containerや.row. これで、コンテナの最大幅がremsに設定されました。 行のデフォルトの負の左右のマージンは-.9375remですが、列のデフォルトの左右のパディングは0.9375remです。 覚えているかもしれませんが、これらの値は以前はBootstrap 3で15pxた。これらの新しいrem値は、それに匹敵します。

強化されたメディアクエリ

以前のバージョンのBootstrapのメディアクエリは少し一般的で、カスタムクエリを作成する必要がある場合がありました。 これが彼らがどのように見えたかです：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

現在、これらの更新されたメディアクエリを使用して、よりモバイルなアプローチをとることができます。

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

別のものが必要な場合、独自のブレークポイントを選択したい場合は、SASSでブレークポイントを構成できます。

ブートストラップ-4枚のカード

代替品としてのカード

パネル、ウェル、サムネイルに精通していますか？ カードは現在、最新かつ最高のものであり、いくつかの優れたスタイリングオプションを提供します。 一例はカードグループです。 テキストの量はさまざまですが、JavaScriptに依存せずに、カードの高さは同じです。 これは、Flexboxとデフォルトのグリッドモードの両方で機能します。 Flexboxを使用する場合、カードはFlexboxプロパティを使用して作成されます。 デフォルトのグリッドはCSSトリックを使用して、JavaScriptの必要性を回避します。 コンテナはdisplay: table; そして、各「カード」はdisplay: table-cell; テーブルのプロパティを指定します–これが同じ列の高さの由来です。

タイポグラフィ

グリッドが現在どのようにレムを使用しているか覚えていますか？ ええと、タイポグラフィもそうするのは理にかなっています！ これについて考えるときは、すべてのフォントサイズがルート要素であるHTMLタグを基準にしていることに注意してください。 HTMLタグのフォントサイズ（またはその他のスタイル）を変更すると、プロジェクト全体でスタイルを簡単にスタイル設定および拡大縮小できます。

HTML要素がfont-size: 16pxでスタイル設定されていると仮定しましょう。 h5タグをそのサイズにしたい場合、フォントサイズを1remと宣言します。

h5 {
font-size: 1rem;
}

さて、前進するためにいくつかの数学が関係しているかもしれません。 h1タグを40pxにしたい場合は、次のように計算します。

h1 {
font-size: 2.5rem; /* 16 * 2.5 = 40px */
}

まだレムを感じていませんか？ 必要に応じて、サイズ設定にピクセルとemを使用できます。

bootstrap-4-heading

その他の見出しスタイル

見出しは、階層を確立するのに最適です。 しかし、h1、h2、h3などよりも目立つものが必要な場合はどうでしょうか。 幸いなことに、標準の見出しに表示見出しのクラスを追加して、それを大きくすることができます。 次のようになります。

<h1 class="display-4">Heading Display 4</h1>

display-4はdisplay-2よりも大きいです。

ファイルサイズが小さい

Bootstrap4のフットプリントは小さくなります。 実際には、最新バージョンのBootstrap 3よりも約30％小さくなっています。以前は約123kbでしたが、現在は約88kbです。 それがより小さく、それでも同じ素晴らしい機能を持っていることは素晴らしいです。

必要なBootstrapの部分のみを使用するオプションがあることに注意してください。これにより、ファイルサイズがさらに小さくなります。

font-awesome-icons

これ以上グリフィコンはありませんか？

グリフィコンは以前のバージョンのBootstrapで広く使用されていたため、グリフィコンが使用されるのを見るのは悲しいことです。 心配しないでください、これはWebアイコンの終わりではありません。 その代わりに、FontAwesomeも同様に役立つはずです。 優れたアイコンオプションについては、GithubのOctigonsを確認することもできます。

Bootstrap4への移行

現在アルファ版ですが、テスト環境で使用できない理由はありません。 ソースコードは、GitHubのv4-devブランチで入手できます。 実験して注意が必要なものを確認すると、変更やその他の新しい拡張機能に関するメモを含む開発および追跡プルリクエストがあります。

物事はアルファ版であり、機能をテストする準備ができた後、最終的にベータ版がリリースされる予定です。 ベータ版の後、2つのリリース候補が本番環境でテストするために使用されます。 すべてがうまくいけば、最終リリースの準備が整います！

ここで表面をかじったところです。Bootstrap4の会話が始まったばかりです。 未来がどうなるかを見るのはワクワクしますし、それがアルファ版から出てくるのを見るのもワクワクしています。 新しいBootstrap4コンポーネントをテストするには、更新を監視し、コピーをダウンロードしてください。