コアポイント

• CSSグリッドレイアウトとブートストラップなどのCSSフレームワークは、Web開発では異なって使用されます。 CSSグリッドを使用すると、開発者はネイティブCSSコードを使用して複雑なページレイアウトを構(gòu)築できますが、Bootstrapは事前に設(shè)計されたコンポーネントを提供して、迅速かつ効率的にWebページを作成するためのコンポーネントを提供します。
• CSSメッシュは柔軟性と獨立性を提供しますが、ブートストラップは、既製のコンポーネント、カスタマイズの容易さ、およびプロトタイプツールとしての実用性を備えたフロントエンド開発に関連しています。これは、Bootstrapで構(gòu)築されたレガシーWebサイトの開発者にとって特に便利です。
• CSSグリッドレイアウトとCSSフレームワークの選択は、プロジェクトの特定の要件に依存します。 CSSメッシュは、複雑なメッシュベースのデザインに最適であり、ブートストラップは事前に設(shè)計されたコンポーネントとスタイルで時間と労力を節(jié)約します。また、両方のツールを利用するために一緒に使用することもできます。

Webレイアウトのコーディングは、CSSグリッドレイアウトやFlexBoxなどの最先端のCSS標(biāo)準(zhǔn)の助けを借りて、もはや苦痛ではありません。グリッドとフレックスボックスのブラウザのサポートが非常に優(yōu)れている場合、質(zhì)問が必然的に発生します。なぜ開発作業(yè)でCSSフレームワークを?qū)W習(xí)して使用する必要があるのですか？

この記事では、おそらく利用可能なすべてのCSS UIライブラリの中で最も人気のあるものであるため、ブートストラップに焦點を當(dāng)てます。

私の意見では、今日でも、ブートストラップを?qū)Wび、使用する理由はまだたくさんあります。

以下にはいくつかの理由があります。

CSSグリッドとは何ですか？

レイチェル?アンドリュー（CSSグリッド関連で有名なスピーカーおよびライター）は、次のように定義しています。

グリッドはグリッドシステムです。タグで定義することなく、CSSの列と行を定義することができます。グリッドのように見えるようにするためのツールは必要ありません。実際にグリッドがあります！

このCSS標(biāo)準(zhǔn)の実裝により、開発者は、グリッドを含むラッパー要素を除き、HTMLタグに依存しないネイティブCSSコードを使用してページレイアウトを構(gòu)築する必要がある非常に必要な機能を提供します。 Webデザインの柔軟性と創(chuàng)造性の可能性を想像してください！

たとえば、この簡単なレイアウトを作成するには、タグにカスタムクラスや追加の行が必要ありません。

HTMLコードは次のとおりです

CSSについては、ここで視覚的なレイアウトを構(gòu)築します。この簡単な例では、コードの數(shù)行のみが必要です。

それだけです、あなたは終わった！悪くない。

ブートストラップとは何ですか？

<div class="grid">
  <header>頁眉內(nèi)容</header>
  <main>主要內(nèi)容</main>
  <aside>側(cè)邊欄</aside>
  <footer>頁腳</footer>
</div>

執(zhí)筆時點で、インターネット全體の3.6％がブートストラップを使用しています：

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 150px 50px;
}

header, footer {
  grid-column: span 12;
}

main {
  grid-column: span 8;
}

aside {
  grid-column: span 4;
}

Bootstrap Webサイトでは、次の定義があります。

Bootstrapは、HTML、CSS、およびJSを使用して開発されたオープンソースツールキットです。 SASS変數(shù)とミキシン、レスポンシブメッシュシステム、多數(shù)の事前に構(gòu)築されたコンポーネント、および強力なjQueryベースのプラグインを使用して、アイデアを迅速にプロトタイプまたはアプリケーションを構(gòu)築します。

言い換えれば、Bootstrapは、すぐに美しいWebページを作成できるようにする既製のコンポーネントを提供します。

対応するタグを書くだけで、アプリケーションはすぐに見栄えがよくなります。

また、

ブートストラップにより、外観とスタイルを簡単にカスタマイズでき、プロジェクトに必要なコンポーネントを選択して選択できます。

グリッドがあるときにブートストラップを使用する必要があるのはなぜですか？

ブートストラップに関する最大の不満は、常にコード肥大化です。その理由は、多くのプロジェクトでは使用されていない追加のCSSコードが含まれているためです。 2番目に大きな不満は、ブートストラップコンポーネントのスタイルが非常に詳細(xì)であることであり、特定のCSSルールを上書きするときにいくつかの問題を引き起こす可能性があることです。

この人気のあるフロントエンドコンポーネントライブラリの最新バージョンに基づいて、これらの批判はどちらも維持できません。ブートストラップは完全にモジュール式であるため、必要な部分を含める必要があります。さらに、SASSファイルの構(gòu)造により、ニーズに合わせて元のスタイルをカスタマイズするのが非常に便利です。

Bootstrapに反対する主な理由は、CSSメッシュを使用して、CSSには外部依存関係がない獨自のメッシュシステムがあり、學(xué)習(xí)すると、開発者がさまざまなレイアウトを簡単に構(gòu)築できるようにすることです。

私はCSSグリッドのファンですが、ブートストラップはまだフロントエンド開発の場所を持っていると思いますが、今後しばらくの間そうです。

以下は少なくとも3つの理由です。

ブートストラップは、グリッドシステムだけではありません

はい、Bootstrapを使用する主な理由は、便利なグリッドシステムであり、レスポンシブなWebページの構(gòu)築を簡単にします。ただし、Bootstrapには、多用途の新しいカードコンポーネントなど、いくつかの優(yōu)れたコンポーネントがあります。これは、テキスト、畫像、ビデオ、レスポンシブナビゲーションバーなど、さまざまな種類のコンテンツを箱から表示するために使用できます。また、ほとんどのコンポーネントに対して好みのプリセット配色を選択することもできます。

これらのコンポーネントの多くはどうですか？ブートストラップを使用して、ダイナミックツールチップ、カルーセル、またはドロップダウンボタンを追加するだけで、対応するマークアップを書き込むだけです。 JavaScriptのスキルがあなたの長所ではない場合でも、JavaScriptコードの単一行を記述せずにこれらのコンポーネントを利用できます。

さらに、CSSの専門家でない場合でも、テクニックを?qū)W習(xí)しながらWebデザインにブートストラップの力を使用できます。

Bootstrapは素晴らしいプロトタイプツールです

顧客に利用可能なプロトタイプを提供する必要がある場合があります。 Bootstrapを使用すると、すぐにこれを行うことができ、カスタムコードはほとんど必要ありません。これは、グリッドシステムだけでなく、提供するすべての既製のコンポーネントにも適用されます。

少量のマーキングを追加するだけで、プロトタイプにはスタイリッシュなレスポンシブナビゲーションバーまたは素敵なアラームボックスがあります。

Bootstrapで構(gòu)築されたレガシーWebサイトの処理

開発者の一般的なタスクは、他の開発者によって書かれた既存のWebサイトに対処することです。多數(shù)のウェブサイトがブートストラップに依存してフロントエンドを構(gòu)築することは否定できません。コードベースをリファクタリングして維持する必要がある場合は、フレームワークの使用方法を知るのが非常に便利です。多くの職務(wù)情報が必要なスキルリストにBootstrapを含むことは偶然ではありません。

結(jié)論

全體として、ブートストラップは短期的には消えません。最新バージョンは、SASS Mixinやマッピングの巧妙にカスタマイズするためのマッピングから、新しいコンポーネント、ユーティリティクラス、モジュラーアーキテクチャの導(dǎo)入まで、以前のバージョンから大幅に改善されました。

ブートストラップは、優(yōu)れたドキュメントと使いやすさと組み合わされて、フロントエンドエコシステムの強力な競合他社のままです。

どう思いますか？次のプロジェクトは、ブートストラップまたはCSSグリッドを使用して構(gòu)築されますか？

ブートストラップを聞いたことがあるが、複雑すぎるように見えるために學(xué)習(xí)を遅らせている場合は、ブートストラップ4入門コースを?qū)Wび、ブートストラップの力について簡単かつ簡単に學(xué)ぶことができます。

CSSグリッドレイアウトとCSSフレームワークに関するFAQ

CSSグリッドレイアウトとCSSフレームワークの主な違いは何ですか？

CSSグリッドレイアウトとBootstrapなどのCSSフレームワークは強力なWebデザインツールですが、目的は異なります。 CSSグリッドレイアウトは、行と列を使用して複雑なWebレイアウトを作成できるCSSモジュールです。これはCSSのネイティブ機能です。つまり、作業(yè)に追加のライブラリやプラグインを必要としません。一方、CSSフレームワークは、Webデザインのプロセスを簡素化するために設(shè)計された事前に準(zhǔn)備されたライブラリです。それらには、簡単にカスタマイズして再利用できるボタン、フォーム、ナビゲーションバーなどの事前に設(shè)計されたコンポーネントが付屬しています。

CSSグリッドレイアウトはCSSフレームワークよりも優(yōu)れていますか？

CSSグリッドレイアウトがCSSフレームワークよりも「優(yōu)れている」かどうかは、プロジェクトの特定のニーズに依存します。 CSSグリッドレイアウトにより、Webレイアウトに対する柔軟性と制御が向上し、複雑なグリッドベースのデザインに最適な選択肢となります。ただし、BootstrapのようなCSSフレームワークは、事前に設(shè)計されたコンポーネントとスタイルを提供することで時間と労力を節(jié)約できます。大規(guī)模なプロジェクトに取り組んでいる場合、またはウェブサイトを迅速に開始する必要がある場合は、CSSフレームワークがより良い選択かもしれません。

CSSグリッドレイアウトとCSSフレームワークは一緒に使用できますか？

はい、CSSグリッドレイアウトとCSSフレームワークを一緒に使用できます。実際、多くの開発者はCSSグリッドレイアウトを使用してWebページの全體的なレイアウトを作成し、CSSフレームワークを使用してこれらのページに個々のコンポーネントを作成します。このアプローチを使用すると、両方のツールを利用できます。

CSSグリッドレイアウトとCSSフレームワークの代替品は何ですか？

CSSグリッドレイアウトとCSSフレームワークには多くの選択肢があります。 CSSグリッドレイアウトの一般的な代替品には、FlexBoxおよびCSSマルチカラムレイアウトが含まれます。これらは、柔軟なレイアウトの作成を可能にするネイティブCSSモジュールでもあります。 CSSフレームワークの一般的な代替品には、基礎(chǔ)、Bulma、Tailwind CSSが含まれます。これらは、さまざまな機能とスタイルを提供する他のCSSフレームワークです。

CSSグリッドレイアウトとCSSフレームワークを選択する方法は？

CSSグリッドレイアウトとCSSフレームワークのいずれかを選択する場合、プロジェクトのニーズと開発者としてのスキルと好みを考慮してください。レイアウトを多くの制御が必要で、CSSを使用することを好む場合は、CSSグリッドレイアウトを好む場合があります。事前に設(shè)計されたコンポーネントを使用したい場合、Webサイトをすばやく起動する場合は、CSSフレームワークがより良い選択肢になる場合があります。

ブートストラップはCSSフレームワークですか？

はい、ブートストラップはCSSフレームワークです。これは、今日入手可能な最も人気のあるCSSフレームワークの1つであり、そのレスポンシブデザイン、事前に設(shè)計されたコンポーネント、幅広いドキュメントで知られています。

CSSグリッドレイアウトを使用することの利點は何ですか？

CSSグリッドレイアウトにはいくつかの利點があります。行と列で複雑なレイアウトを作成することができます。これは、CSSのネイティブ機能であり、追加のライブラリやプラグインを必要とせず、Webレイアウトを多くの柔軟性と制御を提供します。

CSSフレームワークを使用することの利點は何ですか？

CSSフレームワークはいくつかの利點を提供します。事前に設(shè)計されたコンポーネントとスタイルを提供することで時間と労力を節(jié)約できます。多くの場合、開発者コミュニティによって十分に文書化され、サポートされています。

CSSグリッドレイアウトを始める方法は？

CSSグリッドレイアウトを開始するには、HTMLとCSSの基本を理解する必要があります。そこから、オンラインのチュートリアル、ドキュメント、プラクティスを通じてCSSグリッドレイアウトの詳細(xì)について詳しく知ることができます。

CSSフレームワークを始める方法は？

CSSフレームワークを開始するには、HTMLとCSSの基本も理解する必要があります。そこから、ニーズに合ったCSSフレームワークを選択し、ダウンロードし、そのドキュメントと機能の調(diào)査を開始できます。

以上がCSSグリッドレイアウトとCSSフレームワークの議論の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。