Source

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.

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 kedua, 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

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

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

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

// Optional
@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 4 termasuk !defaultbendera yang membenarkan anda untuk 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.

Gantian pembolehubah dalam fail Sass yang sama boleh datang sebelum atau selepas pembolehubah lalai. Walau bagaimanapun, apabila mengatasi semua fail Sass, penggantian anda mesti datang sebelum anda mengimport fail Sass Bootstrap.

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

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

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

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

Satu 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`
}

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.

Pembolehubah	Nilai	Penerangan
`$spacer`	`1rem`(lalai), atau sebarang nilai > 0	Menentukan nilai spacer lalai untuk menjana utiliti spacer kami secara pemprograman .
`$enable-rounded`	`true`(lalai) atau`false`	Mendayakan `border-radius`gaya yang dipratentukan pada pelbagai komponen.
`$enable-shadows`	`true`atau `false`(lalai)	Mendayakan `box-shadow`gaya yang dipratentukan pada pelbagai komponen.
`$enable-gradients`	`true`atau `false`(lalai)	Mendayakan kecerunan yang dipratentukan melalui `background-image`gaya pada pelbagai komponen.
`$enable-transitions`	`true`(lalai) atau`false`	Mendayakan `transition`s yang dipratentukan pada pelbagai komponen.
`$enable-hover-media-query`	`true`atau `false`(lalai)	Ditamatkan
`$enable-grid-classes`	`true`(lalai) atau`false`	Mendayakan penjanaan kelas CSS untuk sistem grid (cth, `.container`, `.row`, `.col-md-1`, dsb.).
`$enable-caret`	`true`(lalai) atau`false`	Mendayakan karet elemen pseudo pada `.dropdown-toggle`.
`$enable-print-styles`	`true`(lalai) atau`false`	Mendayakan gaya untuk mengoptimumkan percetakan.

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.

Biru

nila

Ungu

Merah jambu

merah

Jingga

Kuning

hijau

Teal

Cyan

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.

Pada masa hadapan, kami akan menyasarkan untuk menyediakan peta dan pembolehubah Sass untuk rona setiap warna seperti yang telah kami lakukan dengan warna skala kelabu di bawah.

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 Bootstraps.

utama

Menengah

Kejayaan

bahaya

Amaran

info

Cahaya

Gelap

kelabu

Satu set pembolehubah kelabu yang luas dan peta Sass scss/_variables.scssuntuk warna kelabu yang konsisten merentas projek anda.

100

200

300

400

500

600

700

800

900

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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
  }
}