ブートストラップ機能

このシリーズの XNUMX 番目の記事では、 Bootstrap の機能を扱いましょう。 これは、フォーム、フォント、メニューなどのテンプレートと要素を含む、Web サイトとアプリケーションの設計のためのリソースの完全なライブラリです。

で 前の記事 私たちは、コンテンツ マネージャーが最善の選択肢ではない場合もあると主張しました。 Web サイトのコードをゼロから作成することは、適切な代替手段です。 しかし、車輪の再発明をしなければならないという意味ではありません。 Bootstrap のようなフレームワークを使用すると、設計時間が大幅に短縮され、結果が得やすくなります。

ブートストラップ機能

Bootstrap の機能を理解するには、理解する必要があります。 ウェブサイトデザインのパラダイムシフト。

彼らが現れたとき Web サイトは、さまざまなサイズのモニターに適応する必要がありました。 しかし、時間の経過とともに、携帯電話やタブレットがユーザーにとって好まれるアクセス手段になりつつあります。 課題は、ユーザーがコンテンツを見るために拡大、縮小、または移動しなくても、ページをさまざまな画面に適応させることでした。

原則として、次のアプローチが採用されました。

• レスポンシブ デザイン: デザインは同じですが、画面のサイズに合わせて自動的に調整されます。 このアプローチには、ユーザーがページの特定のセクションを表示するために拡大する必要があるなど、いくつかの問題があります。
• プログレッシブ アドバンス: リソースの少ないデバイス向けにサイトを設計することから始めます (通常、携帯電話は画面が小さく、ブラウザーの高度な機能との互換性が低く、接続にデータ プランを使用する必要があるため)。 完成したら、この設計に基づいて、タブレット、ノートブック、およびデスクトップ コンピューター用のバージョンを取得するための機能が追加されます。
• 段階的な劣化: 逆の道です。 デスクトップ サイトが最初に作成され、モバイル フレンドリー バージョンが取得されるまで機能が削除されます。

削除するよりも追加する方が常に簡単であるため、漸進的な進歩が成功した傾向です. B.たとえば、ootstrap は「モバイル ファースト」のアプローチを採用しています。、つまり、デザインのベースは常に最小の画面サイズで表示されるバージョンであり、その後のサイズに渡されるときに行われる変更が確立されます。

Bootstrap を使用することのもう XNUMX つの利点は、次の事実と関係があります。 Google は検索でモバイル フレンドリー サイトを優先します。

考慮しなければならないもう XNUMX つの概念は、フロントエンドとバックエンドの設計の違いです。 フロントエンドのデザインは、ユーザーが見るすべてのものと、ユーザーがやり取りするすべてのものを処理します。 バックエンドは、サーバー上で行われることをグループ化します。 前者の例は、Web フォームの例です。 一連のオプションを表示するドロップダウン メニューがフロントエンド デザインであり、選択されたオプションがメールで送信されるか、データベースに追加されることがバックエンド デザインです。

Bootstrap は、CSS スタイルの要素と Javascript プログラミングを組み合わせてレンダリングを制御し、HTML5 で開発されたページのすべてのコンポーネントに対話性を与えるフレームワークです。

Bootstrap で制御できるものには次のものがあります。

• アクセシビリティ： メニューやダイアログなどのコンポーネントは、スクリーン リーダーと互換性があり、身体の不自由な人が使用するのに適しています。
• ボタン： メジャー、スタイル、状態、およびグループ化を含みます。
• フォーム:  レンダリング、コントロールの種類、入力の検証を含みます。
• 画像: 挿入された画像の原点、配置、および画面サイズを制御します。
• ナビゲーション要素: たとえば、非表示にできるサイドバーや、デバイスに応じた縦または横のメニューなどです。
• タイポグラフィ： テキストのさまざまな部分の表示方法を制御します。
• レイアウト： デバイスに応じてコンテンツのレンダリングを調整する

次の記事では、その使用の実際的な例をいくつか見ていきます。