每個 UI 開發人員都應該知道的 Bootstrap 技巧-css教學-PHP中文網

Bootstrap Tricks Every UI Developer Should Know

簡介：增強您的 Bootstrap 遊戲

嘿，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：你最好的新朋友

如果您沒有將 Sass mixin 與 Bootstrap 一起使用，那麼您就錯過了一些節省時間的好處。讓我們來看幾個例子，它們會讓你想知道沒有它們你是如何生活的。

響應式字體大小

是否曾經想根據螢幕寬度調整字體大小而不編寫大量媒體查詢？看看這個：

@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 可以在 320 像素視窗寬度的 24 像素和 1200 像素視窗寬度的 48 像素之間平滑地縮放字體大小。很整潔吧？

快速彈性盒中心

讓事物居中是一項常見任務，那麼為什麼不讓它變得超級簡單呢？

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

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

登入後複製

現在您只需一行程式碼即可將任何內容置中。未來的你會感謝你的！

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
);

登入後複製

現在您已經有了像 mt-md-6 這樣的類，在中等螢幕及以上螢幕上的上邊距為 4rem。間距完美！

文字截斷

需要優雅地截斷文字？這是一個方便的實用程式類別：

@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. 輔助功能增強：面向所有人的包容性設計

可訪問性對於創建包容性網路體驗至關重要。讓我們來看看一些增強 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（滾動動畫）庫：

.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 開發人員都應該知道的 Bootstrap 技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！