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

PHPz
リリース: 2018-10-13 16:02:15
オリジナル
6663 人が閲覧しました

ブートストラップの長所と短所は何ですか?
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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!