ブートストラップの長所と短所は何ですか?

ブートストラップの長所と短所は何ですか?
Bootstrap は、HTML、CSS、JavaScript に基づいた Web アプリケーションと Web サイトを迅速に開発するためのフロントエンド フレームワークです。
長所: モバイルデバイス第一、主流のブラウザーをサポート、使いやすく、レスポンシブデザイン
短所: IE6 をサポートしていない、セマンティックが十分ではないクラスの多用、ブートストラップを使用して開発された Web サイトは大幅に均質化されています。

【関連ビデオ: Bootstrap チュートリアル】

Bootstrap は、応答性の高いモバイルファーストの流体グリッド システムを提供します。画面またはビューポートのサイズが大きくなると、システムは自動的に最大 12 列に分割されます。

モバイルファースト戦略

• コンテンツ

• 何が最も重要かを決定します。

• レイアウト

• 幅が狭いデザインを優先します。

• 基本的な CSS はモバイルファーストであり、メディア クエリはタブレットとデスクトップ コンピューター用です。

• プログレッシブエンハンスメント

• 画面サイズが大きくなるにつれて要素を追加します。

レスポンシブグリッドシステム 画面またはビューポートのサイズが大きくなると、システムは自動的に最大 12 列に分割します。

ブートストラップ グリッド システムの仕組み

グリッド システムは、コンテンツを含む一連の行と列を通じてページ レイアウトを作成します。 Bootstrap グリッド システムがどのように機能するかは次のとおりです。適切な配置とパディングを取得するには、

• 行を .container クラス内に配置する必要があります。

• 行を使用して、水平方向の列のグループを作成します。

• コンテンツは列内に配置する必要があり、行の直接の子要素にできるのは列のみです。

• 事前定義されたグリッド クラス (.row や .col-xs-4 など) を使用して、グリッド レイアウトをすばやく作成できます。よりセマンティックなレイアウトには、LESS mixin クラスを使用できます。

• 列はパディングを使用して列の内容の間にギャップを作成します。パディングは、最初と最後の列の行オフセットを表す .rows のマージンをマイナスすることによって取得されます。

• グリッド システムは、分割する 12 個の利用可能な列を指定することによって作成されます。たとえば、3 つの等しい列を作成するには、3 つの .col-xs-4 を使用します。

• メディアクエリ

  メディアクエリは非常に派手な「条件付きCSSルール」です。特定の指定された条件に基づいて一部の CSS でのみ機能します。これらの条件が満たされる場合、対応するスタイルが適用されます。

  Bootstrap のメディア クエリを使用すると、ビューポート サイズに基づいてコンテンツを移動、表示、非表示にすることができます。次のメディア クエリは、ブートストラップ グリッド システムで主要なブレークポイントしきい値を作成するために LESS ファイルで使用されます。

  /* 超小设备（手机，小于 768px） */
  /* Bootstrap 中默认情况下没有媒体查询 */
  
  /* 小型设备（平板电脑，768px 起） */@media (min-width: @screen-sm-min) { ... }
  
  /* 中型设备（台式电脑，992px 起） */@media (min-width: @screen-md-min) { ... }
  
  /* 大型设备（大台式电脑，1200px 起） */@media (min-width: @screen-lg-min) { ... }

• また、CSS の影響をより狭い範囲の画面サイズに制限するために、メディア クエリ コードに max-width を含めることもあります。

  @media (max-width: @screen-xs-max) { ... }
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
  @media (min-width: @screen-lg-min) { ... }

• メディア クエリには 2 つの部分があり、最初はデバイス仕様、次にサイズ ルールです。上記の場合、次のルールが設定されています:

  次のコード行を見てみましょう:

  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

• 基本的なグリッド構造

  Bootstrap グリッドの基本構造は次のとおりです:

  <div class="container">
     <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>      
     </div>
     <div class="row">...</div></div><div class="container">....

お願いします初めてブログにアクセスできない場合は、ヒントを教えてください

以上がブートストラップの長所と短所は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。