in English

Bootstrap Bertema

Kustomisasi Bootstrap 4 dengan variabel Sass bawaan kami yang baru untuk preferensi gaya global untuk perubahan tema dan komponen yang mudah.

pengantar

Di Bootstrap 3, tema sebagian besar didorong oleh penggantian variabel di KURANG, CSS khusus, dan lembar gaya tema terpisah yang kami sertakan dalam distfile kami. Dengan beberapa usaha, seseorang dapat sepenuhnya mendesain ulang tampilan Bootstrap 3 tanpa menyentuh file inti. Bootstrap 4 menyediakan pendekatan yang akrab, tetapi sedikit berbeda.

Sekarang, tema dilakukan oleh variabel Sass, peta Sass, dan CSS khusus. Tidak ada lagi stylesheet tema khusus; sebagai gantinya, Anda dapat mengaktifkan tema bawaan untuk menambahkan gradien, bayangan, dan lainnya.

Kelancangan

Manfaatkan file Sass sumber kami untuk memanfaatkan variabel, peta, mixin, dan lainnya saat mengompilasi Sass menggunakan saluran aset Anda sendiri.

Struktur file

Bila memungkinkan, hindari memodifikasi file inti Bootstrap. Untuk Sass, itu berarti membuat stylesheet Anda sendiri yang mengimpor Bootstrap sehingga Anda dapat memodifikasi dan memperluasnya. Dengan asumsi Anda menggunakan manajer paket seperti npm, Anda akan memiliki struktur file yang terlihat seperti ini:

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

Jika Anda telah mengunduh file sumber kami dan tidak menggunakan pengelola paket, Anda akan ingin mengatur secara manual sesuatu yang mirip dengan struktur itu, menjaga file sumber Bootstrap terpisah dari milik Anda.

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

Pengimporan

Di custom.scss, Anda akan mengimpor file Sass sumber Bootstrap. Anda memiliki dua opsi: sertakan semua Bootstrap, atau pilih bagian yang Anda butuhkan. Kami mendorong yang terakhir, meskipun perlu diketahui ada beberapa persyaratan dan dependensi di seluruh komponen kami. Anda juga perlu menyertakan beberapa JavaScript untuk plugin 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 pengaturan itu, Anda dapat mulai memodifikasi salah satu variabel dan peta Sass di file custom.scss. Anda juga dapat mulai menambahkan bagian Bootstrap di bawah // Optionalbagian sesuai kebutuhan. Kami menyarankan untuk menggunakan tumpukan impor penuh dari bootstrap.scssfile kami sebagai titik awal Anda.

Default variabel

Setiap variabel Sass di Bootstrap menyertakan !defaulttanda yang memungkinkan Anda mengganti nilai default variabel di Sass Anda sendiri tanpa memodifikasi kode sumber Bootstrap. Salin dan tempel variabel sesuai kebutuhan, ubah nilainya, dan hapus !defaulttandanya. Jika suatu variabel telah ditetapkan, maka variabel tersebut tidak akan ditetapkan kembali oleh nilai default di Bootstrap.

Anda akan menemukan daftar lengkap variabel Bootstrap di scss/_variables.scss. Beberapa variabel disetel ke null, variabel ini tidak menampilkan properti kecuali jika diganti dalam konfigurasi Anda.

Penggantian variabel harus dilakukan setelah fungsi, variabel, dan mixin kita diimpor, tetapi sebelum impor lainnya.

Berikut adalah contoh yang mengubah background-colordan coloruntuk <body>saat mengimpor dan mengkompilasi 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

Ulangi seperlunya untuk variabel apa pun di Bootstrap, termasuk opsi global di bawah ini.

Mulailah dengan Bootstrap melalui npm dengan proyek awal kami! Buka repositori template twbs /bootstrap-npm-starter untuk melihat cara membuat dan menyesuaikan Bootstrap di proyek npm Anda sendiri. Termasuk kompiler Sass, Autoprefixer, Stylelint, PurgeCSS, dan Ikon Bootstrap.

Peta dan loop

Bootstrap 4 menyertakan beberapa peta Sass, pasangan nilai kunci yang mempermudah pembuatan keluarga CSS terkait. Kami menggunakan peta Sass untuk warna kami, titik putus grid, dan banyak lagi. Sama seperti variabel Sass, semua peta Sass menyertakan !defaultflag dan dapat diganti dan diperluas.

Beberapa peta Sass kami digabungkan menjadi peta kosong secara default. Hal ini dilakukan untuk memudahkan perluasan peta Sass yang diberikan, tetapi biayanya membuat penghapusan item dari peta menjadi sedikit lebih sulit.

Ubah peta

Untuk mengubah warna yang ada di $theme-colorspeta kami, tambahkan berikut ini ke file Sass kustom Anda:

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

Tambahkan ke peta

Untuk menambahkan warna baru ke $theme-colors, tambahkan kunci dan nilai baru:

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

Hapus dari peta

Untuk menghapus warna dari $theme-colors, atau peta lainnya, gunakan map-remove. Ketahuilah bahwa Anda harus memasukkannya di antara persyaratan dan opsi 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";
...

Kunci yang diperlukan

Bootstrap mengasumsikan adanya beberapa kunci khusus dalam peta Sass saat kami menggunakan dan memperluasnya sendiri. Saat Anda menyesuaikan peta yang disertakan, Anda mungkin mengalami kesalahan saat kunci peta Sass tertentu digunakan.

Misalnya, kami menggunakan primary, success, dan dangerkunci dari $theme-colorsuntuk tautan, tombol, dan status formulir. Mengganti nilai kunci ini seharusnya tidak menimbulkan masalah, tetapi menghapusnya dapat menyebabkan masalah kompilasi Sass. Dalam hal ini, Anda harus memodifikasi kode Sass yang menggunakan nilai tersebut.

Fungsi

Bootstrap menggunakan beberapa fungsi Sass, tetapi hanya sebagian yang berlaku untuk tema umum. Kami telah menyertakan tiga fungsi untuk mendapatkan nilai dari 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 memungkinkan Anda untuk memilih satu warna dari peta Sass seperti bagaimana Anda akan menggunakan variabel warna dari v3.

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

Kami juga memiliki fungsi lain untuk mendapatkan tingkat warna tertentu dari $theme-colorspeta. Nilai level negatif akan mencerahkan warna, sedangkan level 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 praktiknya, Anda akan memanggil fungsi dan memasukkan dua parameter: nama warna dari $theme-colors(misalnya, primer atau bahaya) dan tingkat numerik.

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

Fungsi tambahan dapat ditambahkan di masa mendatang atau Sass kustom Anda sendiri untuk membuat fungsi level untuk peta Sass tambahan, atau bahkan yang umum jika Anda ingin lebih bertele-tele.

Kontras warna

Fungsi tambahan yang kami sertakan di Bootstrap adalah fungsi kontras warna, color-yiq. Ini menggunakan ruang warna YIQ untuk secara otomatis mengembalikan warna kontras terang ( #fff) atau gelap ( #111) berdasarkan warna dasar yang ditentukan. Fungsi ini sangat berguna untuk mixin atau loop di mana Anda menghasilkan banyak kelas.

Misalnya, untuk menghasilkan contoh warna dari $theme-colorspeta kita:

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

Ini juga dapat digunakan untuk kebutuhan kontras satu kali:

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

Anda juga dapat menentukan warna dasar dengan fungsi peta warna kami:

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

Melarikan diri dari SVG

Kami menggunakan escape-svgfungsi untuk keluar dari <, >dan #karakter untuk gambar latar belakang SVG. Karakter-karakter ini perlu diloloskan untuk merender gambar latar belakang dengan benar di IE. Saat menggunakan escape-svgfungsi, URI data harus dikutip.

Tambah dan Kurangi fungsi

Kami menggunakan fungsi adddan subtractuntuk membungkus calcfungsi CSS. Tujuan utama dari fungsi ini adalah untuk menghindari kesalahan ketika nilai "tanpa unit" 0dilewatkan ke dalam calcekspresi. Ekspresi like calc(10px - 0)akan mengembalikan kesalahan di semua browser, meskipun secara matematis benar.

Contoh di mana kalk itu valid:

$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 di mana kalk tidak valid:

$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

Kustomisasi Bootstrap 4 dengan file variabel kustom bawaan kami dan dengan mudah beralih preferensi CSS global dengan $enable-*variabel Sass baru. Ganti nilai variabel dan kompilasi ulang npm run testsesuai kebutuhan.

Anda dapat menemukan dan menyesuaikan variabel-variabel ini untuk opsi global utama di scss/_variables.scssfile Bootstrap.

Variabel Nilai Keterangan
$spacer 1rem(default), atau nilai apa pun > 0 Menentukan nilai pengatur jarak default untuk menghasilkan utilitas pengatur jarak kami secara terprogram .
$enable-rounded true(default) ataufalse Mengaktifkan border-radiusgaya yang telah ditentukan sebelumnya pada berbagai komponen.
$enable-shadows trueatau false(bawaan) Memungkinkan box-shadowgaya dekoratif yang telah ditentukan sebelumnya pada berbagai komponen. Tidak mempengaruhi box-shadows yang digunakan untuk status fokus.
$enable-gradients trueatau false(bawaan) Mengaktifkan gradien yang telah ditentukan sebelumnya melalui background-imagegaya pada berbagai komponen.
$enable-transitions true(default) ataufalse Mengaktifkan s yang telah ditentukan sebelumnya transitionpada berbagai komponen.
$enable-prefers-reduced-motion-media-query true(default) ataufalse Mengaktifkan prefers-reduced-motionkueri media , yang menekan animasi/transisi tertentu berdasarkan preferensi browser/sistem operasi pengguna.
$enable-hover-media-query trueatau false(bawaan) Tidak digunakan lagi
$enable-grid-classes true(default) ataufalse Memungkinkan pembuatan kelas CSS untuk sistem grid (mis., .container, .row, .col-md-1, dll.).
$enable-caret true(default) ataufalse Mengaktifkan tanda sisipan elemen semu pada .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(default) ataufalse Tambahkan kursor "tangan" ke elemen tombol yang tidak dinonaktifkan.
$enable-print-styles true(default) ataufalse Mengaktifkan gaya untuk mengoptimalkan pencetakan.
$enable-responsive-font-sizes trueatau false(bawaan) Mengaktifkan ukuran font responsif .
$enable-validation-icons true(default) ataufalse Mengaktifkan background-imageikon dalam input tekstual dan beberapa formulir khusus untuk status validasi.
$enable-deprecation-messages true(default) ataufalse Setel ke falseuntuk menyembunyikan peringatan saat menggunakan salah satu mixin dan fungsi yang tidak digunakan lagi yang direncanakan untuk dihapus di v5.

Warna

Banyak dari berbagai komponen dan utilitas Bootstrap dibangun melalui serangkaian warna yang ditentukan dalam peta Sass. Peta ini dapat dilingkarkan di Sass untuk menghasilkan serangkaian aturan dengan cepat.

Semua warna

Semua warna yang tersedia di Bootstrap 4, tersedia sebagai variabel Sass dan peta Sass dalam scss/_variables.scssfile. Ini akan diperluas dalam rilis kecil berikutnya untuk menambahkan nuansa tambahan, seperti palet skala abu -abu yang sudah kami sertakan.

$biru #007bff
$indigo #6610f2
$ungu #6f42c1
$merah muda #e83e8c
$merah #dc3545
$oranye #fd7e14
$kuning #ffc107
$hijau #28a745
$teal #20c997
$sian #17a2b8

Inilah cara Anda dapat menggunakan ini di Sass Anda:

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

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

Kelas utilitas warna juga tersedia untuk pengaturan colordan background-color.

Di masa depan, kami akan bertujuan untuk menyediakan peta dan variabel Sass untuk nuansa setiap warna seperti yang telah kami lakukan dengan warna skala abu-abu di bawah ini.

Warna tema

Kami menggunakan subset dari semua warna untuk membuat palet warna yang lebih kecil untuk menghasilkan skema warna, juga tersedia sebagai variabel Sass dan peta Sass di scss/_variables.scssfile Bootstrap.

$utama #007bff
$sekunder #6c757d
$sukses #28a745
$bahaya #dc3545
$peringatan #ffc107
$info #17a2b8
$ringan #f8f9fa
$gelap #343a40

abu-abu

Kumpulan variabel abu-abu yang luas dan peta Sass scss/_variables.scssuntuk warna abu-abu yang konsisten di seluruh proyek Anda. Perhatikan bahwa ini adalah "abu-abu dingin", yang cenderung ke arah nada biru halus, bukan abu-abu netral.

$abu-abu-100 #f8f9fa
$abu-200 #e9ecef
$abu-300 #dee2e6
$abu-400 #ced4da
$abu-500 #adb5bd
$abu-600 #6c757d
$abu-700 #495057
$abu-800 #343a40
$abu-900 #212529

Di dalam scss/_variables.scss, Anda akan menemukan variabel warna Bootstrap dan peta Sass. Berikut adalah 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;

Tambahkan, hapus, atau ubah nilai dalam peta untuk memperbarui cara penggunaannya di banyak komponen lainnya. Sayangnya saat ini tidak semua komponen menggunakan map Sass ini. Pembaruan di masa mendatang akan berusaha untuk memperbaiki ini. Sampai saat itu, rencanakan penggunaan ${color}variabel dan peta Sass ini.

Komponen

Banyak komponen dan utilitas Bootstrap dibangun dengan @eachloop yang berulang di atas peta Sass. Ini sangat membantu untuk menghasilkan varian komponen oleh kami $theme-colorsdan membuat varian responsif untuk setiap breakpoint. Saat Anda menyesuaikan peta Sass ini dan mengkompilasi ulang, Anda akan secara otomatis melihat perubahan Anda tercermin dalam loop ini.

Pengubah

Banyak komponen Bootstrap dibangun dengan pendekatan kelas pengubah dasar. Ini berarti sebagian besar gaya terdapat pada kelas dasar (misalnya, .btn) sedangkan variasi gaya terbatas pada kelas pengubah (misalnya, .btn-danger). Kelas pengubah ini dibangun dari $theme-colorspeta untuk menyesuaikan jumlah dan nama kelas pengubah kami.

Berikut adalah dua contoh bagaimana kita mengulang $theme-colorspeta untuk menghasilkan pengubah ke .alertkomponen dan semua .bg-*utilitas latar belakang kita.

// 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

Loop Sass ini juga tidak terbatas pada peta warna. Anda juga dapat menghasilkan variasi responsif dari komponen atau utilitas Anda. Ambil contoh utilitas perataan teks responsif kami di mana kami mencampur @eachloop untuk $grid-breakpointspeta Sass dengan kueri media yang disertakan.

@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; }
  }
}

Jika Anda perlu memodifikasi $grid-breakpoints, perubahan Anda akan berlaku untuk semua loop yang berulang di atas peta itu.

variabel CSS

Bootstrap 4 menyertakan sekitar dua lusin properti kustom (variabel) CSS dalam CSS yang dikompilasi. Ini memberikan akses mudah ke nilai yang umum digunakan seperti warna tema, titik putus, dan tumpukan font utama saat bekerja di Inspektur browser Anda, kotak pasir kode, atau pembuatan prototipe umum.

Variabel yang tersedia

Berikut adalah variabel yang kami sertakan (perhatikan bahwa :rootdiperlukan). Mereka berada di _root.scssfile 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

Variabel CSS menawarkan fleksibilitas yang mirip dengan variabel Sass, tetapi tanpa perlu kompilasi sebelum disajikan ke browser. Misalnya, di sini kita mengatur ulang font halaman dan gaya tautan dengan variabel CSS.

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

Variabel titik putus

Meskipun kami awalnya menyertakan breakpoint dalam variabel CSS kami (misalnya, --breakpoint-md), ini tidak didukung dalam kueri media , tetapi mereka masih dapat digunakan dalam kumpulan aturan dalam kueri media. Variabel breakpoint ini tetap berada di CSS yang dikompilasi untuk kompatibilitas mundur karena dapat digunakan oleh JavaScript. Pelajari lebih lanjut di spesifikasi .

Berikut ini contoh yang tidak didukung:

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

Dan inilah contoh dari apa yang didukung:

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