すべての UI 開発者が知っておくべきブートストラップのトリック-CSSチュートリアル-php.cn

Bootstrap Tricks Every UI Developer Should Know

はじめに: ブートストラップゲームを強化する

UI 開発者の皆さん、こんにちは! Bootstrap のスキルを次のレベルに引き上げる準備はできていますか?あなたがうなずいているなら（または少なくとも考えているなら）、あなたは正しい場所に来ています。今日は、あなたの生活を楽にし、プロジェクトを輝かせる 10 の素晴らしい Bootstrap ハックを詳しく紹介します。 Bootstrap の初心者であっても、熟練したプロであっても、これらのトリックは、難しい作業ではなく、より賢く作業するのに役立ちます。それで、お気に入りの飲み物を手に取り、快適になり、Bootstrap 開発を加速するいくつかのクールな方法を探ってみましょう!

1. カスタムグリッドブレークポイント: カスタマイズされた応答性

ゲームチェンジャーであるカスタムグリッドブレークポイントから物事を始めましょう。 Bootstrap のデフォルトのブレークポイントが優れていることは誰もが知っていますが、特定のプロジェクトのニーズに対応できない場合があります。ここで魔法が起こります:

カスタムブレークポイントを実装する方法

Sass 変数ファイル (通常は _variables.scss) を開きます。
$grid-breakpoints 変数を見つけます。
次のように既存のブレークポイントを変更するか、新しいブレークポイントを追加します。

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  custom: 1600px
);

ログイン後にコピー

これで、1600 ピクセルのピカピカの新しい「カスタム」ブレークポイントが完成しました。しかし、待ってください、それだけではありません。コンテナの最大幅を更新することを忘れないでください:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
  custom: 1540px
);

ログイン後にコピー

これらの変更により、col-custom-6 のようなクラスを使用して、非常に正確なレイアウト制御ができるようになりました。クールですね?

2. Sass Mixins: あなたの新しい親友

Bootstrap で Sass mixin を使用していない場合は、大幅な時間節約のメリットを逃すことになります。それらなしでどうやって生きてきたのか不思議に思うような例をいくつか見てみましょう。

レスポンシブフォントサイズ

大量のメディアクエリを作成せずに、画面の幅に基づいてフォントサイズを調整したいと思ったことはありませんか?これをチェックしてください:

@mixin responsive-font($min-size, $max-size, $min-width, $max-width) {
  font-size: calc(#{$min-size}px + (#{$max-size} - #{$min-size}) * ((100vw - #{$min-width}px) / (#{$max-width} - #{$min-width})));
}

// Usage
h1 {
  @include responsive-font(24, 48, 320, 1200);
}

ログイン後にコピー

このミックスインは、フォントサイズを 320 ピクセルのビューポート幅で 24 ピクセルから 1200 ピクセルのビューポート幅で 48 ピクセルの間でスムーズにスケーリングします。なかなかいいですね?

クイックフレックスボックスセンター

物を中央に配置するのは一般的な作業です。それを非常に簡単にしてみませんか?

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Usage
.centered-content {
  @include flex-center;
}

ログイン後にコピー

たった 1 行のコードであらゆるものを中央に配置できるようになりました。未来のあなたはあなたに感謝するでしょう!

3. カスタムフォームスタイル: 群衆から目立つ

Bootstrap のフォームスタイルは素晴らしいですが、もう少しユニークなものが必要な場合もあります。少しアレンジしてみましょう!

ファンシーなラジオボタン

ラジオボタンは退屈なものだなんて誰が言ったでしょうか?サイズについてはこれを試着してください:

.custom-radio {
  .custom-control-input {
    &:checked ~ .custom-control-label::before {
      background-color: #007bff;
      border-color: #007bff;
    }
    &:checked ~ .custom-control-label::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }
  }
}

ログイン後にコピー

これにより、選択すると素敵なアニメーションが表示される、洗練されたモダンなラジオボタンが得られます。ブランドに合わせて色を更新することを忘れないでください!

スタイリッシュな選択ドロップダウン

デフォルトの選択ドロップダウンは少し似ているかもしれません... まあ、デフォルトです。それを修正しましょう:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  custom: 1600px
);

ログイン後にコピー

これにより、選択ドロップダウンにカスタムの矢印アイコンと優れたフォーカス効果が与えられます。大切なのは小さなことです!

4. ユーティリティクラス: CSS のスイスアーミーナイフ

Bootstrap のユーティリティクラスは信じられないほど強力ですが、もう少しだけ必要な場合もあります。作業を楽にするカスタムユーティリティをいくつか作成しましょう。

レスポンシブマージンとパディング

間隔をより細かく制御したいですか?これを試してください:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
  custom: 1540px
);

ログイン後にコピー

これで、中画面以上で上部マージン 4rem を実現する mt-md-6 のようなクラスができました。完璧な間隔!

テキストの切り詰め

テキストをエレガントに切り詰める必要がありますか?これは便利なユーティリティクラスです:

@mixin responsive-font($min-size, $max-size, $min-width, $max-width) {
  font-size: calc(#{$min-size}px + (#{$max-size} - #{$min-size}) * ((100vw - #{$min-width}px) / (#{$max-width} - #{$min-width})));
}

// Usage
h1 {
  @include responsive-font(24, 48, 320, 1200);
}

ログイン後にコピー

このクラスを任意の要素に追加するだけで、長いテキストは省略記号で切り取られます。シンプルだけど効果的!

5. カスタムコンポーネント: 既成概念にとらわれずに考える

Bootstrap は優れたコンポーネントのセットを提供しますが、場合によっては少し異なるものが必要になることがあります。カスタムコンポーネントを作成して、雰囲気を盛り上げてみましょう。

ホバー効果のあるファンシーカード

カードの優れたホバー効果が気に入らない人はいないでしょうか?これをチェックしてください:

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Usage
.centered-content {
  @include flex-center;
}

ログイン後にコピー

これで、ホバーすると画像がわずかに持ち上がり、暗くなるカードができました。微妙ですが、デザインにインタラクティブ性の素晴らしいタッチを加えます。

6. パフォーマンスの最適化: 脂肪を取り除く

Bootstrap は優れていますが、すべての機能を使用していない場合は少し重くなる可能性があります。痩せる方法を見てみましょう。

カスタムビルド

Bootstrap のすべてを含める代わりに、必要なコンポーネントのみを含むカスタムバージョンを構築してみてはいかがでしょうか?その方法は次のとおりです:

Bootstrap リポジトリのクローンを作成します。
scss フォルダーに移動します。
bootstrap.scss を開きます。
不要なコンポーネントをコメントアウトします。
カスタムバージョンをコンパイルします。

たとえば、カルーセルやツールチップを使用していない場合、bootstrap.scss は次のようになります。

.custom-radio {
  .custom-control-input {
    &:checked ~ .custom-control-label::before {
      background-color: #007bff;
      border-color: #007bff;
    }
    &:checked ~ .custom-control-label::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }
  }
}

ログイン後にコピー

これにより、CSS ファイルのサイズが大幅に削減され、読み込み時間が短縮されます。すべてのキロバイトが重要です!

7. アクセシビリティの強化: すべての人のための包括的なデザイン

包括的な Web エクスペリエンスを作成するには、アクセシビリティが不可欠です。 Bootstrap のアクセシビリティを強化するいくつかの方法を見てみましょう。

リンクをスキップする

リンクをスキップすると、キーボードユーザーがサイトをより効率的に移動できるようになります。実装方法は次のとおりです:

.custom-select {
  appearance: none;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
  padding-right: 2.25rem;

  &:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }
}

ログイン後にコピー

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 4,
  7: $spacer * 5
);

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $spacers {
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .#{$abbrev}t#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-top: $length !important;
        }
        .#{$abbrev}r#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-right: $length !important;
        }
        .#{$abbrev}b#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-bottom: $length !important;
        }
        .#{$abbrev}l#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-left: $length !important;
        }
      }
    }
  }
}

ログイン後にコピー

これにより、フォーカスされている場合にのみ表示されるリンクが作成され、キーボードユーザーがメインコンテンツに直接スキップできるようになります。

強化されたフォーカススタイル

Bootstrap のデフォルトのフォーカススタイルは機能しますが、より視覚的に魅力的なものにすることができます。

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  custom: 1600px
);

ログイン後にコピー

これにより、Bootstrap の配色とよく合う、より目立つフォーカススタイルが作成されます。

8. レスポンシブ画像: どのデバイスでも完璧な画像を実現

特にモバイルデバイスでは、画像によってデザインが左右されることがあります。画像をレスポンシブに処理する方法をいくつか見てみましょう。

レスポンシブな背景画像

どのデバイスでも見栄えの良い全幅の背景画像が必要ですか?これを試してください:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
  custom: 1540px
);

ログイン後にコピー

これにより、ビューポートの幅に基づいてさまざまなサイズの画像が読み込まれ、小型デバイスでもファイルサイズが不必要に大きくならずに、背景が常に鮮明に表示されます。

遅延読み込み

画像を遅延読み込みすることでページの読み込み時間を短縮します:

@mixin responsive-font($min-size, $max-size, $min-width, $max-width) {
  font-size: calc(#{$min-size}px + (#{$max-size} - #{$min-size}) * ((100vw - #{$min-width}px) / (#{$max-width} - #{$min-width})));
}

// Usage
h1 {
  @include responsive-font(24, 48, 320, 1200);
}

ログイン後にコピー

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Usage
.centered-content {
  @include flex-center;
}

ログイン後にコピー

このスクリプトは Intersection Observer API を使用して、画像がビューポートに入ろうとするときにのみ画像を読み込むため、最初のページの読み込み時間が大幅に短縮されます。

9. ダークモード: ダークサイドを受け入れる

最近ダークモードが大流行していますが、それには十分な理由があります。暗い場所でも目に優しく、OLED スクリーンのバッテリー寿命を節約できます。 Bootstrap サイトにダークモードの切り替えを追加しましょう。

ダークモードの実装

まず、いくつかのダークモード変数を作成しましょう:

.custom-radio {
  .custom-control-input {
    &:checked ~ .custom-control-label::before {
      background-color: #007bff;
      border-color: #007bff;
    }
    &:checked ~ .custom-control-label::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }
  }
}

ログイン後にコピー

次に、トグルボタンを追加しましょう:

.custom-select {
  appearance: none;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
  padding-right: 2.25rem;

  &:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }
}

ログイン後にコピー

そしてそれを機能させるための JavaScript:

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 4,
  7: $spacer * 5
);

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $spacers {
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .#{$abbrev}t#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-top: $length !important;
        }
        .#{$abbrev}r#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-right: $length !important;
        }
        .#{$abbrev}b#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-bottom: $length !important;
        }
        .#{$abbrev}l#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-left: $length !important;
        }
      }
    }
  }
}

ログイン後にコピー

これで、ユーザーの設定を記憶するダークモードが機能するようになりました!

10. アニメーションの統合: サイトに命を吹き込む

最後になりましたが、Bootstrap サイトをよりダイナミックで魅力的に見せるために、微妙なアニメーションを追加しましょう。

スクロールでアニメーション化する

まず、AOS (Animate On Scroll) ライブラリをインストールしましょう:

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ログイン後にコピー

これで、要素にアニメーションを追加できます:

.fancy-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }

  .card-img-top {
    transition: opacity 0.3s ease;
  }

  &:hover .card-img-top {
    opacity: 0.8;
  }
}

ログイン後にコピー

以上がすべての UI 開発者が知っておくべきブートストラップのトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。