Bootstrapの目的:スタートガイド

このガイドでは  、世界で最も使用されているフロントエンドフレームワークの1つであるBootstrapの目的をまとめ  、バージョン4で説明します。これはTwitter内で生まれたプロジェクトで、すでに遠い2013年にマークオットーとジェイコブソーントン。この  入門ガイド  では、初心者が自問する可能性のある質問に答え、開始するための強固な基盤を提供しようとします。

前提から始めましょう。  最初からウェブサイトの開発は  必然的に、レイアウトの作成には、特定の領域の設計プロセスを入力することにつながりスタイルや、決定的なことができ、一般的に、すべてのもの、  均質設計システムの様々なページで再利用することができますアプリケーションの。

ウェブデザインは互いに非常に異なって見えることがありますが、いくつかの共通の要素があることは否定できません  。 Webを閲覧するだけで理解できます。たとえば、大多数のWebサイトには、ロゴ(主に左上隅)、検索バー、ヘッダー、メインメニュー、フッターがあります。

これらの要素を使用するように強制する人は誰もいませんが、使用することをお勧めします。私たちに伝えるのはUIガイドラインであり、決してそれを避けてはなりません。ユーザーは実際には、ページの特定の領域でオブジェクトを見つけることを「期待」しています。

ただし、それらの位置に関係なく、一部のコンポーネントは確かにすべてのサイトで繰り返されています。たとえば、ボタン、モーダル、ジャンボトロン、およびその他のそのようなモジュラー要素について考えてみてください。プロジェクトごとにこれらの要素のタグ付けを最初から作成することは確かに繰り返しであり、貴重な時間を費やす可能性があります。

したがって、拡張が容易で再利用可能な一連のスタイルとモジュラーコンポーネントを信頼できる必要があります。Bootstrapは、まさにそれを行うのに役立ちます。ツールのコレクションを使用して、WebサイトとWebアプリケーションを構築します。その中には、HTMLとCSSの関係に基づいたデザインテンプレートが含まれており、タイポグラフィ、インターフェイスコンポーネント、ボタンなどに役立ちます。

コンテンツインデックス

  • Bootstrapを使用する理由
  • Bootstrapの使用を開始する方法
  • レスポンシブ:12カラムシステム
  • 公式ドキュメント
  • ブートストラップの代替
  • 結論

Bootstrapを使用する理由

序文でこの質問に部分的に回答しましたが、フロントエンド開発専用のこのフレームワークの力をよりよく理解するために、もう少し言葉を費やしてもかまいません。

ブートストラップは多くの状況で役立ちます。たとえば、グラフィックやWebデザインの知識がなくても、小さなWebページを作成しなければならない場合があります。たとえば、プログラミングに非常に熟練し、デザインにあまり熟練していない開発者の場合、それでも美化して作業を快適にしたいと考えています。

これは確かに考えられるシナリオの1つにすぎません。実際、Bootstrapは、グラフィックスキルがほとんどない人に手を貸すために使用されていると言っても過言ではありません。実際、日常的にカスタムインターフェイスを実装している人にとっても有効な味方です。ちなみに、このツールは  、応答フェーズなどの再発する問題に対処するために、技術用語では足場と呼ばれる強固な基盤、つまりスケルトンを提供するために作成されました  

ブートストラップは、レスポンシブデザインに大きく基づいたフレームワークであり、モバイルファーストと  呼ばれるアプローチを使用している  ことを忘れないでください    。それでは、簡単な要約を作成して、プラットフォームの長所を要約してみましょう。

  • 使いやすさと実装
  • 堅牢性:バージョン4になりました
  • 無料の製品
  • 高価な更新
  • 有効なコミュニティサポート

Bootstrapの使用を開始する方法

Bootstrapの使用を開始するのは非常に簡単です。ちょうどに行く  プロジェクトの公式サイトとをクリックして、 『スタート』ボタン    。開始する最も簡単な方法は、CDNを介してリソースを入力することです  

基本的には、外部サイトから取得してcssファイルとjsファイルを挿入します。または、ブートストラップファイルをWebサイトで直接ホストしてから  、必要に応じてパスを変更することもでき  ます。

私のアドバイスは、CDNを利用する  こと  です。このようにして、世界のさまざまな地域からサイトを閲覧するユーザーでも、リソースにすばやくアクセスできるようになります。さらに、ブートストラップは広く使用されているため、ブートストラップを使用するWebサイトに既にアクセスしたユーザーは、キャッシュに存在するため、これらのリソースにすばやくアクセスできます。

まず、スタイルシート呼び出しを実装します。このタグは、Webページのヘッドセクションに挿入する必要があります。

<link rel = “style sheet” href = “https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” Integrity = “sha384-ggOyR0iXCbMQv3Xipma34MD + dH / 1fQ784 / j6JcY / iVo” 「匿名」>

 

Bootstrapには、CSSだけでなく、いくつかの非常に便利なJavascriptコンポーネントも含まれています。アコーディオン、モーダル、オフスクリーンなどの要素。jQueryを利用します。これらの機能を当社のWebサイトに含めるには、必要なJSを実装する必要があります。bodyタグを閉じる前に、これらの文字列を挿入します

 

<script src = “https://code.jquery.com/jquery-3.3.1.slim.min.js” Integrity = “sha384-q8i / X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6 // crossreflad ginjzorgin script: libs / popper.js / 1.14.7 / umd / popper.min.js” Integrity =“ sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrn1 <anzwrn>匿名スクリプト</ Jrn1 JDZwrn1 <anzwrn > JDonymous6スクリプト″ cross86″ JD 86スクリプト>″ cross86″ JDonymousスクリプト″ cross86 /stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js” integer =“sha384-JjSmVgyd0p3pcdn。cross4x07>匿名” cross4jr07

 

 

これで準備が整いました。強固な基盤は確か    に、ドキュメントでBootstrap自体によって提供される最初のテーマです。コードをコピーして貼り付けるだけで、フレームワークを使って少し実験を始めることができます。

レスポンシブ:12カラムシステム

Bootstrapの特徴の1つは、間違いなくその  グリッドシステム  です。これは、さまざまなデバイスでレイアウトを簡単に整理できる12列のシステムです。12列で遊ぶと、メインコンテナのサイズ、ガター(列間の距離)などの固定要素をあきらめることなく、さまざまなレイアウトを作成できます。

開始するには、.containerクラスを使用してコンテナを作成するだけです。これにより、内部に可変数の列を挿入できます。したがって、コンテナはBootstrapの上部構造であり、内部には、正確に行を表す.rowクラスを持つdivがあります。その後、構造はセルに続きます。

セルはデバイスによって異なります。実際には、測定値を表すサフィックスを.colクラスに配置する必要があります:xs、sm、md、またはxl。Bootstrapグリッドシステムの詳細なガイド    は、公式ドキュメントにあります。

要約すると、構造は、コンテナ、行、および列が交互になっていることに基づいて非常に厚くなります。これに、利用可能な幅全体を占める流体タイプのコンテナも追加されます。

公式ドキュメント

Bootstrapで作業するときは、公式ドキュメントを確実に手元に置いておく必要があります。実際、内部には、理解しやすく、特定のニーズに適応しやすい多くの例があります。

これは、  私が書いているバージョン、つまり4.3のドキュメントへのリンク  です。これらはよく書かれたリソースであり、レイアウト、コンテンツ、コンポーネント、ユーティリティ、拡張機能、以前のバージョンからの移行などのサブジェクト領域に分かれています。

初心者のための有効なヘルプですが、それだけではありません。お気に入りに保存し、必要に応じてふるいにかけます。

ブートストラップの代替

市場に出回っているフロントエンドフレームワークは、ブートストラップだけではありません。実際、いくつかあります。軽くてスリムなものもあれば、より構造化されたものもあります。以下に、それらが提供するものに従って分類されたものを示します。

  • スケルトン :この構造は間違いなく最も軽量で使いやすいです。それは非常にシンプルなレイアウトを提供しますが、当然のことながらその名前が付いています。内部には、グリッドシステムと、ボタン、テーブル、その他の必需品をオンデマンドでスタイリングするためのいくつかのクラスがあります。
  • ブルマ :これは北欧で広く使われている建造物です。世界中の約20万人の開発者がそれを使用しています。フレックスボックスに基づいており、モジュール式でレスポンシブでモダンな、非常にシンプルなフレームワークです。
  • Foundation  :Zurbによって開発されたFoundationは、間違いなくBootstrapの主要な競争相手です。私たちは、簡単にカスタマイズできる要素の膨大なセットを含む、非常にモジュール化されたキャピラリー構造について話しています。学習曲線はブートストラップよりも急ですが、結果は影響力があります。

結論

これまで見てきたように、Bootstrapは確かにあらゆる種類のWebサイトを作成するための優れた出発点です。フレームワークはしっかりしていて、開発者による継続的なバグ修正、わかりやすいドキュメント、初心者でも非常に軽い学習曲線を備えています。

それがうまくいかない場合でも、  有効な代替手段があり  ます。したがって、このツールが提供するものを現場で試してみてください。

 

Leave a Comment

Your email address will not be published. Required fields are marked *