Bootstrap は、デザインや CSS に苦労している人、または何かをすばやく構築する必要がある人にとって素晴らしい CSS フレームワークです。 しかし、ドキュメントからコピーして貼り付ける Bootstrap コンポーネントには欠陥があります。 これらの欠陥はあなたのデザインを妨げています! これらの欠陥を修正し、Bootstrap を改善するための 5 つの設計上のヒントを次に示します。  1) アラートに注意を向ける 暗い境界線と svg アイコンを追加して、ユーザーの注意を引きます。    <div class="alert alert-primary rounded-0 border-0 border-start border-primary border-4" role="alert"> <p class="fs-6 mb-0 d-flex align-items-center">  <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="16" height="16" viewBox="0 0 20 20" fill="currentColor"> <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" /> </svg> <span>A simple primary alert—check it out!</span> </p> </div>  2) テーブルはデータベースと一致する必要はありません HTML テーブルは、データベース構造のコピーである必要はありません。列名、ID を削除し、意味がある場合はフィールドを結合します。    <div class="border-0 shadow bg-white rounded"> <h3 class="fs-5 px-3 pt-3">Users</h3> <div class="px-2 pt-2"> <table class="table table-borderless fs-6"> <tbody> <tr> <td>Mark Otto</td> <td class="text-end text-muted">@mdo</td> </tr> <tr class="bg-light rounded-4"> <td>Jacob Thornton</td> <td class="text-end text-muted">@fat</td> </tr> <tr> <td>Larry the Bird</td> <td class="text-end text-muted">@twitter</td> </tr> </tbody> </table> </div> <div class="p-3 bg-light rounded d-flex justify-content-end"> <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons> <buttons class="btn btn-primary">View</buttons> </div> </div>  3) セカンダリ ボタンに背景色は必要ありません プライマリ アクションに背景色を付け、セカンダリ アクションに背景色を付けないと、重要な階層が確立されます。    <div class="card border-0 shadow p-2"> <div class="card-body"> <h5 class="card-title">Special offer</h5> <p class="card-text">Are you sure you want to cancel your subscription? We have a special offer if you want to stick around!</p> <buttons class="btn btn-primary">View Details</buttons> <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons> </div> </div>  4) すべてにレッテルを貼るのをやめる! 開発者は値にラベルを付けるのが大好きです。やめろ！キーと値のペアではなく、本の文のように情報を表示します。    <div class="card border-0 shadow"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h1 class="card-title fs-5">Rocky Mount, MI</h1> <h2 class="card-title fs-6 text-muted fw-light">100 miles away</h2> <p class="card-text fw-light"><span class="fw-bold">$150</span> night</p> </div> </div>  5) 影 > 境界線 カードの枠線がぎこちなく感じることがよくあります。影は要素を強調し、ページに深みを与え、要素をユーザーに近づけます。    <div class="card border-0 shadow p-2"> <div class="card-body"> <h5 class="card-title fs-5">Collaborate</h5> <p class="card-text"> Share your work with hundreds of like minded individuals around the world! </p> </div> </div> その他の Bootstrap 設計のヒント?? これを楽しんだ場合は、私の新しいプロジェクトをチェックすることを検討してください -  Better Bootstrap そこには、この記事にあるような Bootstrap 設計のヒントが記載された無料の本があります。  ✌️ - ウェス

Twitter

2022 - HackerNoon Contributor of the Year - Design

2022 - HackerNoon Contributor of the Year - Website Development

I simplify complex topics - like development and design - and cure your imposter syndrome.

.NET remote job board

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

このオーディオは、ストーリーの元の言語で制作されています。

Bootstrap CSS はまだダメですが、もっと良くすることができます

About Author

コメント

ラベル

この記事は

Related Stories

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps