UI 開発者の皆さん、こんにちは! Bootstrap のスキルを次のレベルに引き上げる準備はできていますか?あなたがうなずいているなら（または少なくとも考えているなら）、あなたは正しい場所に来ています。今日は、あなたの生活を楽にし、プロジェクトを輝かせる 10 の素晴らしい Bootstrap ハックを詳しく紹介します。 Bootstrap の初心者であっても、熟練したプロであっても、これらのトリックは、難しい作業ではなく、より賢く作業するのに役立ちます。それで、お気に入りの飲み物を手に取り、快適になり、Bootstrap 開発を加速するいくつかのクールな方法を探ってみましょう!
ゲームチェンジャーであるカスタム グリッド ブレークポイントから物事を始めましょう。 Bootstrap のデフォルトのブレークポイントが優れていることは誰もが知っていますが、特定のプロジェクトのニーズに対応できない場合があります。ここで魔法が起こります:
$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 のようなクラスを使用して、非常に正確なレイアウト制御ができるようになりました。クールですね?
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 行のコードであらゆるものを中央に配置できるようになりました。未来のあなたはあなたに感謝するでしょう!
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 );
これにより、選択ドロップダウンにカスタムの矢印アイコンと優れたフォーカス効果が与えられます。大切なのは小さなことです!
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);
}
このクラスを任意の要素に追加するだけで、長いテキストは省略記号で切り取られます。シンプルだけど効果的!
Bootstrap は優れたコンポーネントのセットを提供しますが、場合によっては少し異なるものが必要になることがあります。カスタム コンポーネントを作成して、雰囲気を盛り上げてみましょう。
カードの優れたホバー効果が気に入らない人はいないでしょうか?これをチェックしてください:
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
// Usage
.centered-content {
@include flex-center;
}
これで、ホバーすると画像がわずかに持ち上がり、暗くなるカードができました。微妙ですが、デザインにインタラクティブ性の素晴らしいタッチを加えます。
Bootstrap は優れていますが、すべての機能を使用していない場合は少し重くなる可能性があります。痩せる方法を見てみましょう。
Bootstrap のすべてを含める代わりに、必要なコンポーネントのみを含むカスタム バージョンを構築してみてはいかがでしょうか?その方法は次のとおりです:
たとえば、カルーセルやツールチップを使用していない場合、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 ファイルのサイズが大幅に削減され、読み込み時間が短縮されます。すべてのキロバイトが重要です!
包括的な 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 の配色とよく合う、より目立つフォーカス スタイルが作成されます。
特にモバイルデバイスでは、画像によってデザインが左右されることがあります。画像をレスポンシブに処理する方法をいくつか見てみましょう。
どのデバイスでも見栄えの良い全幅の背景画像が必要ですか?これを試してください:
$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 を使用して、画像がビューポートに入ろうとするときにのみ画像を読み込むため、最初のページの読み込み時間が大幅に短縮されます。
最近ダーク モードが大流行していますが、それには十分な理由があります。暗い場所でも目に優しく、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;
}
}
}
}
}
これで、ユーザーの設定を記憶するダーク モードが機能するようになりました!
最後になりましたが、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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
