Tema Bootstrap

Sesuaikan Bootstrap 4 dengan pembolehubah Sass terbina dalam baharu kami untuk pilihan gaya global untuk perubahan tema dan komponen yang mudah.

pengenalan

Dalam Bootstrap 3, tema sebahagian besarnya didorong oleh penggantian pembolehubah dalam LESS, CSS tersuai dan lembaran gaya tema berasingan yang kami sertakan dalam distfail kami. Dengan sedikit usaha, seseorang boleh mereka bentuk semula sepenuhnya rupa Bootstrap 3 tanpa menyentuh fail teras. Bootstrap 4 menyediakan pendekatan yang biasa, tetapi sedikit berbeza.

Kini, tema dicapai oleh pembolehubah Sass, peta Sass dan CSS tersuai. Tiada lagi lembaran gaya tema khusus; sebaliknya, anda boleh mendayakan tema terbina dalam untuk menambah kecerunan, bayang-bayang dan banyak lagi.

Sass

Gunakan fail Sass sumber kami untuk memanfaatkan pembolehubah, peta, campuran dan banyak lagi apabila menyusun Sass menggunakan saluran paip aset anda sendiri.

Struktur fail

Apabila boleh, elakkan mengubah suai fail teras Bootstrap. Untuk Sass, ini bermakna mencipta helaian gaya anda sendiri yang mengimport Bootstrap supaya anda boleh mengubah suai dan memanjangkannya. Dengan mengandaikan anda menggunakan pengurus pakej seperti npm, anda akan mempunyai struktur fail yang kelihatan seperti ini:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Jika anda telah memuat turun fail sumber kami dan tidak menggunakan pengurus pakej, anda perlu menyediakan secara manual sesuatu yang serupa dengan struktur itu, memastikan fail sumber Bootstrap berasingan daripada anda sendiri.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Mengimport

Dalam custom.scss, anda akan mengimport fail Sass sumber Bootstrap. Anda mempunyai dua pilihan: sertakan semua Bootstrap, atau pilih bahagian yang anda perlukan. Kami menggalakkan yang terakhir, walaupun sedar terdapat beberapa keperluan dan pergantungan di seluruh komponen kami. Anda juga perlu memasukkan beberapa JavaScript untuk pemalam kami.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Dengan persediaan itu, anda boleh mula mengubah suai mana-mana pembolehubah dan peta Sass dalam custom.scss. Anda juga boleh mula menambah bahagian Bootstrap di bawah // Optionalbahagian seperti yang diperlukan. Kami mencadangkan menggunakan timbunan import penuh daripada bootstrap.scssfail kami sebagai titik permulaan anda.

Lalai pembolehubah

Setiap pembolehubah Sass dalam Bootstrap termasuk !defaultbendera yang membolehkan anda mengatasi nilai lalai pembolehubah dalam Sass anda sendiri tanpa mengubah suai kod sumber Bootstrap. Salin dan tampal pembolehubah mengikut keperluan, ubah suai nilainya dan alih keluar !defaultbendera. Jika pembolehubah telah diberikan, maka pembolehubah itu tidak akan ditetapkan semula oleh nilai lalai dalam Bootstrap.

Anda akan menemui senarai lengkap pembolehubah Bootstrap dalam scss/_variables.scss. Sesetengah pembolehubah ditetapkan kepada null, pembolehubah ini tidak mengeluarkan sifat melainkan ia ditindih dalam konfigurasi anda.

Penggantian pembolehubah mesti datang selepas fungsi, pembolehubah dan campuran kami diimport, tetapi sebelum import yang lain.

Berikut ialah contoh yang mengubah background-colordan coloruntuk <body>semasa mengimport dan menyusun Bootstrap melalui npm:

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Ulang seperti yang diperlukan untuk mana-mana pembolehubah dalam Bootstrap, termasuk pilihan global di bawah.

Peta dan gelung

Bootstrap 4 termasuk segelintir peta Sass, pasangan nilai utama yang memudahkan untuk menjana keluarga CSS yang berkaitan. Kami menggunakan peta Sass untuk warna kami, titik putus grid dan banyak lagi. Sama seperti pembolehubah Sass, semua peta Sass termasuk !defaultbendera dan boleh diganti dan dilanjutkan.

Beberapa peta Sass kami digabungkan menjadi peta kosong secara lalai. Ini dilakukan untuk membolehkan pengembangan mudah peta Sass yang diberikan, tetapi melibatkan kos untuk membuat pengalihan item daripada peta menjadi lebih sukar.

Ubah suai peta

Untuk mengubah suai warna sedia ada dalam $theme-colorspeta kami, tambahkan yang berikut pada fail Sass tersuai anda:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Tambahkan pada peta

Untuk menambah warna baharu pada $theme-colors, tambahkan kunci dan nilai baharu:

$theme-colors: (
  "custom-color": #900
);

Alih keluar daripada peta

Untuk mengalih keluar warna daripada $theme-colors, atau mana-mana peta lain, gunakan map-remove. Harap maklum bahawa anda mesti memasukkannya antara keperluan dan pilihan kami:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Kekunci yang diperlukan

Bootstrap menganggap kehadiran beberapa kunci khusus dalam peta Sass semasa kami menggunakan dan memanjangkannya sendiri. Semasa anda memperibadikan peta yang disertakan, anda mungkin menghadapi ralat apabila kunci peta Sass tertentu sedang digunakan.

Sebagai contoh, kami menggunakan primary, success, dan dangerkekunci daripada $theme-colorsuntuk pautan, butang dan keadaan borang. Menggantikan nilai kunci ini seharusnya tidak menimbulkan isu, tetapi mengalih keluarnya boleh menyebabkan isu kompilasi Sass. Dalam keadaan ini, anda perlu mengubah suai kod Sass yang menggunakan nilai tersebut.

Fungsi

Bootstrap menggunakan beberapa fungsi Sass, tetapi hanya subset yang boleh digunakan untuk tema umum. Kami telah memasukkan tiga fungsi untuk mendapatkan nilai daripada peta warna:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Ini membolehkan anda memilih satu warna daripada peta Sass sama seperti cara anda menggunakan pembolehubah warna daripada v3.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Kami juga mempunyai fungsi lain untuk mendapatkan tahap warna tertentu daripada $theme-colorspeta. Nilai tahap negatif akan mencerahkan warna, manakala tahap yang lebih tinggi akan menjadi gelap.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

Dalam amalan, anda akan memanggil fungsi dan lulus dalam dua parameter: nama warna dari $theme-colors(cth, primer atau bahaya) dan tahap angka.

.custom-element {
  color: theme-color-level(primary, -10);
}

Fungsi tambahan boleh ditambah pada masa hadapan atau Sass tersuai anda sendiri untuk mencipta fungsi tahap bagi peta Sass tambahan, atau malah yang generik jika anda mahu menjadi lebih bertele-tele.

Kontras warna

Fungsi tambahan yang kami sertakan dalam Bootstrap ialah fungsi kontras warna, color-yiq. Ia menggunakan ruang warna YIQ untuk mengembalikan warna kontras terang ( #fff) atau gelap ( #111) secara automatik berdasarkan warna asas yang ditentukan. Fungsi ini amat berguna untuk campuran atau gelung yang anda menjana berbilang kelas.

Contohnya, untuk menjana tangkapan warna daripada $theme-colorspeta kami:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Ia juga boleh digunakan untuk keperluan kontras sekali sahaja:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Anda juga boleh menentukan warna asas dengan fungsi peta warna kami:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Melarikan diri SVG

Kami menggunakan escape-svgfungsi untuk melepaskan <, >dan #aksara untuk imej latar belakang SVG. Watak-watak ini perlu dilepaskan untuk memaparkan imej latar belakang dalam IE dengan betul. Apabila menggunakan escape-svgfungsi, URI data mesti dipetik.

Fungsi Tambah dan Tolak

Kami menggunakan fungsi adddan subtractuntuk membungkus calcfungsi CSS. Tujuan utama fungsi ini adalah untuk mengelakkan ralat apabila nilai "tanpa unit" 0dihantar ke dalam calcungkapan. Ungkapan seperti calc(10px - 0)akan mengembalikan ralat dalam semua penyemak imbas, walaupun betul secara matematik.

Contoh di mana calc adalah sah:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Contoh apabila calc tidak sah:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Pilihan Sass

Sesuaikan Bootstrap 4 dengan fail pembolehubah tersuai terbina dalam kami dan togol pilihan CSS global dengan mudah dengan $enable-*pembolehubah Sass baharu. Gantikan nilai pembolehubah dan susun semula npm run testmengikut keperluan.

Anda boleh mencari dan menyesuaikan pembolehubah ini untuk pilihan global utama dalam scss/_variables.scssfail Bootstrap.

Warna

Banyak daripada pelbagai komponen dan utiliti Bootstrap dibina melalui satu siri warna yang ditakrifkan dalam peta Sass. Peta ini boleh dilingkarkan dalam Sass untuk menjana satu siri set peraturan dengan cepat.

Semua warna

Semua warna yang tersedia dalam Bootstrap 4, tersedia sebagai pembolehubah Sass dan peta Sass dalam scss/_variables.scssfail. Ini akan diperluaskan dalam keluaran kecil berikutnya untuk menambah warna tambahan, sama seperti palet skala kelabu yang telah kami sertakan.

Begini cara anda boleh menggunakan ini dalam Sass anda:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Kelas utiliti warna juga tersedia untuk tetapan colordan background-color.

Warna tema

Kami menggunakan subset semua warna untuk mencipta palet warna yang lebih kecil untuk menjana skema warna, juga tersedia sebagai pembolehubah Sass dan peta Sass dalam scss/_variables.scssfail Bootstrap.

kelabu

Satu set pembolehubah kelabu yang luas dan peta Sass scss/_variables.scssuntuk warna kelabu yang konsisten merentas projek anda. Ambil perhatian bahawa ini adalah "kelabu sejuk", yang cenderung ke arah ton biru halus, dan bukannya kelabu neutral.

Dalam scss/_variables.scss, anda akan menemui pembolehubah warna Bootstrap dan peta Sass. Berikut ialah contoh $colorspeta Sass:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Tambah, alih keluar atau ubah suai nilai dalam peta untuk mengemas kini cara ia digunakan dalam banyak komponen lain. Malangnya pada masa ini, tidak semua komponen menggunakan peta Sass ini. Kemas kini masa hadapan akan berusaha untuk memperbaiki perkara ini. Sehingga itu, rancang untuk menggunakan ${color}pembolehubah dan peta Sass ini.

Komponen

Banyak komponen dan utiliti Bootstrap dibina dengan @eachgelung yang berulang pada peta Sass. Ini amat berguna untuk menjana varian komponen oleh kami $theme-colorsdan mencipta varian responsif untuk setiap titik putus. Semasa anda memperibadikan peta Sass ini dan menyusun semula, anda akan melihat perubahan anda secara automatik ditunjukkan dalam gelung ini.

Pengubah suai

Banyak komponen Bootstrap dibina dengan pendekatan kelas pengubah asas. Ini bermakna sebahagian besar penggayaan terkandung pada kelas asas (cth, .btn) manakala variasi gaya terhad kepada kelas pengubah suai (cth, .btn-danger). Kelas pengubah suai ini dibina daripada $theme-colorspeta untuk membuat penyesuaian nombor dan nama kelas pengubah suai kami.

Berikut ialah dua contoh cara kami melingkari $theme-colorspeta untuk menjana pengubah pada .alertkomponen dan semua .bg-*utiliti latar belakang kami.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Responsif

Gelung Sass ini juga tidak terhad kepada peta warna. Anda juga boleh menjana variasi responsif komponen atau utiliti anda. Ambil contoh utiliti penjajaran teks responsif kami di mana kami mencampurkan @eachgelung untuk $grid-breakpointspeta Sass dengan termasuk pertanyaan media.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Sekiranya anda perlu mengubah suai anda $grid-breakpoints, perubahan anda akan digunakan pada semua gelung yang berulang di atas peta itu.

pembolehubah CSS

Bootstrap 4 termasuk sekitar dua dozen sifat tersuai CSS (pembolehubah) dalam CSS tersusunnya. Ini memberikan akses mudah kepada nilai yang biasa digunakan seperti warna tema, titik putus dan susunan fon utama kami apabila bekerja dalam Inspektor penyemak imbas anda, kotak pasir kod atau prototaip umum.

Pembolehubah yang tersedia

Berikut ialah pembolehubah yang kami sertakan (perhatikan bahawa :rootitu diperlukan). Mereka terdapat dalam _root.scssfail kami.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Contoh

Pembolehubah CSS menawarkan fleksibiliti yang serupa dengan pembolehubah Sass, tetapi tanpa memerlukan kompilasi sebelum disampaikan kepada penyemak imbas. Sebagai contoh, di sini kami menetapkan semula gaya fon dan pautan halaman kami dengan pembolehubah CSS.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Pembolehubah titik putus

Walaupun pada asalnya kami memasukkan titik putus dalam pembolehubah CSS kami (cth, --breakpoint-md), ini tidak disokong dalam pertanyaan media , tetapi ia masih boleh digunakan dalam set peraturan dalam pertanyaan media. Pembolehubah titik putus ini kekal dalam CSS yang disusun untuk keserasian ke belakang memandangkan ia boleh digunakan oleh JavaScript. Ketahui lebih lanjut dalam spesifikasi .

Berikut ialah contoh perkara yang tidak disokong:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

Dan berikut ialah contoh perkara yang disokong:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}