Bootstrap CSS の優れた点の 1 つは、ドキュメントにコンポーネントの例が含まれていることです。 しかし、これらの例には欠陥があります。設計上の欠陥。 幸いなことに、それらは設計のノウハウとすぐに使える Bootstrap クラスで簡単に修正できます。  1) 丸薬を再加工して、より暖かく、より柔らかい感触にする ブートストラップ ピルの色は厳しいです。 Bootstrap に付属の  CSS 変数を使用できます。これにより、背景色が柔らかくなり、コントラストが向上します。  --bs-bg-opacity   <span class="badge rounded-pill text-primary bg-primary" style="--bs-bg-opacity: .20;">Primary</span> <span class="badge rounded-pill text-secondary bg-secondary" style="--bs-bg-opacity: .20;">Secondary</span> <span class="badge rounded-pill text-success bg-success" style="--bs-bg-opacity: .20;">Success</span> <span class="badge rounded-pill text-danger bg-danger" style="--bs-bg-opacity: .20;">Danger</span>  2) リストグループを窓から放り出す 彼らはうっとうしいです。標準の HTML リストを使用します。さらに注目を集めるために、標準の箇条書きの代わりに SVG を追加することもできます。    <div class="card border-0 shadow p-2"> <div class="card-body"> <h3 class="fs-5">Some items we sell</h3> <ul class="" style="list-style: none; list-style-position: outside; padding-left: 0px;"> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> An item </li> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> A second item </li> <li class="d-flex align-items-center mb-1"> <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> </svg> A third item </li> </ul> </div> </div>  3) ドロップダウンに影と息をする余地を与えます。 クラスでシャドウをドロップダウンに追加します。これにより奥行きが生まれ、よりユーザーに近い印象を与えることができます。リストがボタンと重ならないように、  で小さな余白を追加します。  シャドウ mt-2   <div class="bg-white p-4 shadow d-flex justify-content-center" style="height: 200px;"> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu shadow mt-2" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> </div>  4) カードにシャドウと余分なパディングを使用する カードの枠線がぎこちなく感じることがよくあります。影は要素を強調し、ページに奥行きを与えます。 クラスを使用してクラスにシャドウを追加し、  クラスでパディングを増やして内部スペースを増やします。  シャドウ p-2   <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>  5) HTML テーブルは退屈である必要はありません テーブルは、データベースを 1 対 1 で直接表現する必要はありません。意味がある場合は、列を結合してヘッダーを非表示にします。これにより、データベースではなく、UI コンポーネントのように感じられます。    <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> その他のブートストラップのヒント?? これを楽しんだ場合は、私の新しいプロジェクトをチェックすることを検討してください -  Better Bootstrap そこには、15 の 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

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

5 つの重要な Bootstrap CSS コンポーネントとそのデザインを改善する方法

About Author

コメント

ラベル

この記事は

Related Stories

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

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

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

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps