Bootstrap は、サイトの作成に関して多くのフルスタック開発者の手を握っています。私たちの多くは、Figma の使い方を知らず、優れた「デザイン」とは何かがわからず、CSS プロパティに精通していません。 しかし、私たちはデータベース スキーマを作成し、コントローラーとモデルを構築し、Google で見つけたブートストラップ テーマをビューに適用して、1 日と呼ぶのが得意です。 最終結果は、通常、サイトを作成した効率には満足していますが いません。 、結果には満足して    -- 一般的なフルスタック開発者。 「問題ないように見えますが、最近見た素晴らしいデザイナーの素晴らしいサイトとは異なります」 この記事は、ブートストラップをテーマにしたサイトの外観を満足させるための チュートリアルです。 実用的なデザインのヒントに関する 設定 この無料のブートストラップ から始めます。では、改善していきましょう！ テーマ あなたの色を広げる カラー パレットを更新する Bootstrap には、あなたが知らなかったかもしれないカラー パレット全体が付属しています。それを利用して、他の型にはまらないブートストラップ サイトとは異なる外観を実現してください。  これらの色にアクセスするには、  ブートストラップ ファイルに追加するだけです。 scss/_variables.scss   $theme-colors: ( "primary": $teal-300, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ) !default; または、Bootstrap に npm セットアップを使用している場合は、コンパイルされるカスタム sass ファイルを更新します。   @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; $custom-colors: ( primary: $teal-300, ); $theme-colors: map-merge($theme-colors, $custom-colors); @import "../node_modules/bootstrap/scss/bootstrap"; これで、開始ボタンの全体的なブートストラップ プライマリ ブルーを素敵なソフト ティールに更新できます。また、  クラスを削除して、テキストを白から黒に変更します。これは、明るい背景色で読みやすくするためです。  text-white ヒーロー セクションの上部に色のヒントを追加します ナビゲーションの上部に小さな境界線を追加して、  を介して新しい青緑の原色でページに生命を吹き込むことができます。  border-primary 文章 行の高さを共通要素に変更する 多くの人が知らない微妙な変更は、テキストが大きくなるにつれて行の高さを減らすことです。 CSS ファイルの一般的な HTML 要素のデフォルトの行の高さを上書きしましょう。     h1 { line-height: 1.1; } h2 { line-height: 1.125; } h3 { line-height: 1.25; } p { line-height: 1.5; } 文字間隔の更新 通常、大きな見出しはデフォルトで文字間隔が広すぎます。行の高さについて行ったように、CSS ファイルを更新して、h1 タグと h2 タグの文字間隔を縮めます。     h1 { line-height: 1.1; letter-spacing: -0.05em; } h2 { line-height: 1.125; letter-spacing: -0.025em; } 太い見出しの補足テキスト これで、ヒーローのサポート テキストを強化できます。それと H1 タグの対比は極端です。  クラスを削除して、  クラスにします。これには、より太いフォントウェイトが付属しています。  Lead fs-5 概要 これまでのところ...  このテーマのリファクタリングを 1 つのブログ投稿で行いたかったのですが、内容が多すぎます。いくつかの記事に分けています。 来週また記事 2 をチェックするか、  で私のニュースレターを購読してください。テーマの機能セクションを更新し、いくつかの 🔥 ヒントを提供します。 thefreelancedev.com また、  も確認することを強くお勧めします。それは、開発者としてのデザインに対する私の見方を完全に変えました。 Refactoring UI  ✌️ も掲載されています。 ここに

Google

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 をハックして Web サイトの見栄えを良くする方法

About Author

コメント

ラベル

この記事は

Related Stories

暗号通貨の成長: 効果的なユーザーペルソナの作成

Telegram: クリプト島と本土を結ぶ橋

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

ワークフローを10倍に向上させる方法: 必須アプリ17選

暗号通貨の成長: 効果的なユーザーペルソナの作成

Telegram: クリプト島と本土を結ぶ橋

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

ワークフローを10倍に向上させる方法: 必須アプリ17選

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps