Bootstrap4 ソースコード読み取り体験_html/css_WEB-ITnose

bootstrap は長い間使用されており、迅速なページ開発のための強力なツールです。最近、bootstrap4がリリースされようとしているので、春節でやることがないので、ソースコードレベルから解説していきます。

1. モバイル ファースト

モバイル インターネットの時代では、多くの企業がモバイル ファーストの原則を遵守しており、ブートストラップもこの需要に応えており、これは次の側面に反映されています:

相対単位: %、頻繁な使用rem
• の
グリッドシステム: さまざまなデバイスを使用するために、グリッドシステムはxs、sm、md、lg、xlのレスポンシブデザインを採用し、メディアクエリを通じて適応します
フレックスボックスのサポート: モバイルでも間もなくフレックスボックスを使用できるようになるはずです

2. コード構造

2.1less から saas へ

sass をブートストラップの CSS プリプロセッサとして使用する 私はこれまでプリプロセッサにあまり興味がなく、単純な問題だと思っていました。しかし、ソース コードを読んだことで、この理解が変わりました:

css のモジュール性: css は非常にシンプルで柔軟性があり、これが利点でもあり、欠点でもあります。 Sass プリプロセッサを介して、CSS を機能に従ってモジュール化して CSS 管理を容易にすることができます

• 再利用: 変数、ミックスイン、関数、その他のテクノロジーによりコードを簡単に再利用できます
• シンプル: each、if およびその他の構文をサポートし、動的に出力コンテンツなど煩雑なグリッドシステムは、少量の Sass コードで実現されます
2.2 コード構造

コードのレベルに従って、Sass ソースコードは次の部分に分割されます:

サポート部分: 変数を含む定義、ブートストラップ全体の基本コードである多数のミックスイン ファイル、およびパーソナライズされたカスタマイズの実際の場所でもあります

• グローバル パーツ:normalize.scss は、さまざまなブラウザーのデフォルトの動作をオーバーライドし、一貫性を確保するために使用されます。開始スタイル
• 基本スタイル部分: リブート、タイポグラフィー、画像、コード、テーブル、フォーム、ボタンなどが含まれており、主によく使用される基本的な HTML 要素が含まれます
• グリッド部分: デフォルトでオフになっているフレックスボックスの選択的なサポート$enable- flex=true である限り、フレックスボックスを使用してページのグリッド レイアウトを完成させることができます
• コンポーネント パーツ: 一般的に使用される多数の基本コンポーネントが含まれており、その一部には jQuery プラグインの追加が必要です
• ツール パーツ: 間隔、テキストの配置、太字フォントなど、一般的に使用される単純なスタイル お待ちください
3. グリッド

グリッドはページ全体のレイアウトに使用され、css3 はグリッド レイアウト モジュールも作成します。 Grid は単独で使用することもできます。 Bootstrap4 では、グリッド システムを実装するための別のファイル (bootstrap-grid.scss) が提供されます。具体的には、Grid には次のような特徴があります。

デフォルトでは 12 個のグリッドが埋め込まれます。セットで

• 5つのサイズのレスポンシブスタイルをサポート
• 5つのサイズを組み合わせて使用​​して、さまざまな端末に適応できます
• フレックスボックスの使用をサポートします
4. フレックスボックスはまだドラフト段階ですが、高度なブラウザではサポートが開始されています。上位バージョンのブラウザのみを考慮する場合は、$enable-flex=true を介して flexbox を起動できます。

フレックスボックスは、特に複雑なページ レイアウトにおいて、将来のレイアウト トレンドです。一般的に、次のような利点があります。

スケーラビリティ: フレックスによってスペースが拡張され、レスポンシブ デザインでより柔軟になります。マージン、パディング、境界線などに注意してください)

順序のカスタマイズ: フレックスボックスのハイライトの 1 つは、order を通じて要素の表示順序を指定できることです

簡単な配置: jsutify-content と align-items を通じて、要素を簡単に実現できます

方向特性: flex-flow を通じてレイアウトの方向を簡単に決定できます
5. コンポーネント設計
Bootstrap は、直接使用することも、簡単に再開発することもできる、一般的に使用されるコンポーネントを多数提供します。日々のビジネスの発展を加速します。同時に、一部のコンポーネントは、コンポーネントのインタラクティブな効果を実現するために、js (jQuery) と連携する必要があります。
内部のコンポーネントは、JS が必要かどうかに応じて 2 つのカテゴリに分類できます:

JS は必要ありません: Button シリーズ、Form、Input シリーズ、DropDown、Jumbotron、Label、Alert、Cards、Nav シリーズ、Breadcrumb、Pagination、 Progress、List

js の連携が必要: モーダル、ツールチップ、ポップオーバー、カルーセル

Cards は bootstrap4 の新しいコンポーネントであることに注意してください。

6. 参考文献
• http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/