ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
in English

ຊາສ

ໃຊ້ໄຟລ໌ Sass ແຫຼ່ງຂອງພວກເຮົາເພື່ອໃຊ້ປະໂຫຍດຈາກຕົວແປ, ແຜນທີ່, mixins ແລະຟັງຊັນຕ່າງໆເພື່ອຊ່ວຍໃຫ້ທ່ານສ້າງໄວຂຶ້ນແລະປັບແຕ່ງໂຄງການຂອງທ່ານ.

ໃນໜ້ານີ້

ໃຊ້ໄຟລ໌ Sass ແຫຼ່ງຂອງພວກເຮົາເພື່ອໃຊ້ປະໂຫຍດຈາກຕົວແປ, ແຜນທີ່, mixins, ແລະອື່ນໆ.

ໂຄງສ້າງໄຟລ໌

ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້, ຫຼີກເວັ້ນການດັດແປງໄຟລ໌ຫຼັກຂອງ Bootstrap. ສໍາລັບ Sass, ນັ້ນຫມາຍຄວາມວ່າການສ້າງຮູບແບບຂອງທ່ານເອງທີ່ນໍາເຂົ້າ Bootstrap ເພື່ອໃຫ້ທ່ານສາມາດດັດແປງແລະຂະຫຍາຍມັນໄດ້. ສົມມຸດວ່າທ່ານກໍາລັງໃຊ້ຕົວຈັດການຊຸດເຊັ່ນ npm, ທ່ານຈະມີໂຄງສ້າງໄຟລ໌ທີ່ມີລັກສະນະນີ້:

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

ຖ້າທ່ານໄດ້ດາວໂຫລດໄຟລ໌ຕົ້ນສະບັບຂອງພວກເຮົາແລະບໍ່ໄດ້ໃຊ້ຕົວຈັດການແພັກເກັດ, ທ່ານຕ້ອງການຕັ້ງຄ່າບາງສິ່ງບາງຢ່າງທີ່ຄ້າຍຄືກັບໂຄງສ້າງນັ້ນດ້ວຍຕົນເອງ, ຮັກສາໄຟລ໌ແຫຼ່ງຂອງ Bootstrap ແຍກຕ່າງຫາກຈາກຂອງທ່ານເອງ.

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

ການນໍາເຂົ້າ

ໃນຂອງທ່ານ custom.scss, ທ່ານຈະນໍາເຂົ້າໄຟລ໌ Sass ແຫຼ່ງຂອງ Bootstrap. ທ່ານມີສອງທາງເລືອກ: ປະກອບມີ Bootstrap ທັງຫມົດ, ຫຼືເລືອກເອົາພາກສ່ວນທີ່ທ່ານຕ້ອງການ. ພວກເຮົາຊຸກຍູ້ໃຫ້ອັນສຸດທ້າຍ, ເຖິງແມ່ນວ່າຈະຮູ້ວ່າມີບາງຂໍ້ກໍານົດແລະຄວາມເພິ່ງພາອາໄສໃນທົ່ວອົງປະກອບຂອງພວກເຮົາ. ທ່ານຍັງຈະຕ້ອງໄດ້ລວມເອົາບາງ JavaScript ສໍາລັບ plugins ຂອງພວກເຮົາ.

// 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";
@import "../node_modules/bootstrap/scss/root";

// 4. Include any optional Bootstrap CSS as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

// 6. Add additional custom code here

ດ້ວຍ​ການ​ຕັ້ງ​ຄ່າ​ທີ່​ຢູ່​ໃນ​ສະ​ຖານ​ທີ່​, ທ່ານ​ສາ​ມາດ​ເລີ່ມ​ຕົ້ນ​ທີ່​ຈະ​ປັບ​ປຸງ​ແກ້​ໄຂ​ໃດໆ​ຂອງ​ຕົວ​ແປ Sass ແລະ​ແຜນ​ທີ່​ໃນ​ຂອງ​ທ່ານ custom.scss. ນອກນັ້ນທ່ານຍັງສາມາດເລີ່ມຕົ້ນທີ່ຈະເພີ່ມພາກສ່ວນຂອງ Bootstrap ພາຍໃຕ້ // Optionalພາກສ່ວນຕາມຄວາມຕ້ອງການ. ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ stack ການນໍາເຂົ້າຢ່າງເຕັມທີ່ຈາກ bootstrap.scssໄຟລ໌ຂອງພວກເຮົາເປັນຈຸດເລີ່ມຕົ້ນຂອງທ່ານ.

ຄ່າເລີ່ມຕົ້ນທີ່ປ່ຽນແປງໄດ້

ທຸກໆຕົວແປ Sass ໃນ Bootstrap ປະກອບມີ !defaultທຸງທີ່ຊ່ວຍໃຫ້ທ່ານສາມາດ override ຄ່າເລີ່ມຕົ້ນຂອງຕົວແປໃນ Sass ຂອງທ່ານເອງໂດຍບໍ່ມີການດັດແປງລະຫັດແຫຼ່ງຂອງ Bootstrap. ຄັດລອກແລະວາງຕົວແປຕາມຄວາມຕ້ອງການ, ແກ້ໄຂຄ່າຂອງມັນ, ແລະເອົາ !defaultທຸງອອກ. ຖ້າຕົວແປໄດ້ຖືກມອບຫມາຍແລ້ວ, ມັນຈະບໍ່ຖືກມອບຫມາຍຄືນໃຫມ່ໂດຍຄ່າເລີ່ມຕົ້ນໃນ Bootstrap.

ທ່ານຈະພົບເຫັນບັນຊີລາຍຊື່ເຕັມຂອງຕົວແປຂອງ Bootstrap ໃນ scss/_variables.scss. ບາງຕົວແປຖືກຕັ້ງເປັນ null, ຕົວແປເຫຼົ່ານີ້ບໍ່ອອກຄຸນສົມບັດເວັ້ນເສຍແຕ່ວ່າພວກມັນຖືກ overridden ໃນການຕັ້ງຄ່າຂອງທ່ານ.

ການ overrides ຕົວແປຈະຕ້ອງມາຫຼັງຈາກຫນ້າທີ່ຂອງພວກເຮົາຖືກນໍາເຂົ້າ, ແຕ່ກ່ອນທີ່ຈະນໍາເຂົ້າສ່ວນທີ່ເຫຼືອ.

ນີ້ແມ່ນຕົວຢ່າງທີ່ປ່ຽນແປງ background-colorແລະ colorສໍາລັບການ <body>ນໍາເຂົ້າແລະລວບລວມ Bootstrap ຜ່ານ npm:

// Required
@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";
@import "../node_modules/bootstrap/scss/root";

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

ເຮັດຊ້ໍາອີກຕາມຄວາມຈໍາເປັນສໍາລັບຕົວແປໃດໆໃນ Bootstrap, ລວມທັງຕົວເລືອກທົ່ວໂລກຂ້າງລຸ່ມນີ້.

ເລີ່ມຕົ້ນດ້ວຍ Bootstrap ຜ່ານ npm ກັບໂຄງການເລີ່ມຕົ້ນຂອງພວກເຮົາ! ໄປທີ່ ບ່ອນເກັບແມ່ແບບ tws/bootstrap-npm-starter ເພື່ອເບິ່ງວິທີສ້າງ ແລະປັບແຕ່ງ Bootstrap ໃນໂຄງການ npm ຂອງທ່ານເອງ. ລວມມີ Sass compiler, Autoprefixer, Stylelint, PurgeCSS, ແລະ Bootstrap Icons.

ແຜນ​ທີ່​ແລະ loops​

Bootstrap ປະກອບມີແຜນທີ່ Sass, ຄູ່ມູນຄ່າທີ່ສໍາຄັນທີ່ເຮັດໃຫ້ມັນງ່າຍຕໍ່ການສ້າງຄອບຄົວຂອງ CSS ທີ່ກ່ຽວຂ້ອງ. ພວກເຮົາໃຊ້ແຜນທີ່ Sass ສໍາລັບສີຂອງພວກເຮົາ, ຈຸດແບ່ງຕາຂ່າຍ, ແລະອື່ນໆອີກ. ເຊັ່ນດຽວກັນກັບຕົວແປ Sass, ແຜນທີ່ Sass ທັງຫມົດປະກອບມີ !defaultທຸງແລະສາມາດ overridden ແລະຂະຫຍາຍໄດ້.

ບາງແຜນທີ່ Sass ຂອງພວກເຮົາຖືກລວມເຂົ້າເປັນບ່ອນຫວ່າງເປົ່າໂດຍຄ່າເລີ່ມຕົ້ນ. ນີ້ແມ່ນເຮັດເພື່ອອະນຸຍາດໃຫ້ຂະຫຍາຍແຜນທີ່ Sass ທີ່ໃຫ້ມາໄດ້ງ່າຍ, ແຕ່ມີຄ່າໃຊ້ຈ່າຍໃນການ ເອົາ ລາຍການອອກຈາກແຜນທີ່ຍາກກວ່າເລັກນ້ອຍ.

ແກ້ໄຂແຜນທີ່

ທຸກໆຕົວແປໃນ $theme-colorsແຜນທີ່ແມ່ນຖືກກໍານົດເປັນຕົວແປທີ່ຢືນຢູ່ໂດດດ່ຽວ. ເພື່ອແກ້ໄຂສີທີ່ມີຢູ່ແລ້ວໃນ $theme-colorsແຜນທີ່ຂອງພວກເຮົາ, ເພີ່ມຕໍ່ໄປນີ້ໃສ່ໄຟລ໌ Sass ຂອງທ່ານເອງ:

$primary: #0074d9;
$danger: #ff4136;

ຕໍ່ມາ, ຕົວແປເຫຼົ່ານີ້ຖືກຕັ້ງໄວ້ໃນ $theme-colorsແຜນທີ່ຂອງ Bootstrap:

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

ເພີ່ມໃສ່ແຜນທີ່

ເພີ່ມສີໃໝ່ໃສ່ $theme-colors, ຫຼືແຜນທີ່ອື່ນໆ, ໂດຍການສ້າງແຜນທີ່ Sass ໃໝ່ດ້ວຍຄ່າທີ່ກຳນົດເອງຂອງເຈົ້າ ແລະລວມມັນກັບແຜນທີ່ຕົ້ນສະບັບ. ໃນກໍລະນີນີ້, ພວກເຮົາຈະສ້າງ $custom-colorsແຜນທີ່ໃຫມ່ແລະລວມມັນກັບ $theme-colors.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

ເອົາອອກຈາກແຜນທີ່

ເພື່ອເອົາສີອອກຈາກ $theme-colors, ຫຼືແຜນທີ່ອື່ນໆ, ໃຊ້ map-remove. ຈົ່ງຮູ້ວ່າທ່ານຕ້ອງໃສ່ມັນລະຫວ່າງຄວາມຕ້ອງການແລະທາງເລືອກຂອງພວກເຮົາ:

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

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

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

ກະແຈທີ່ຕ້ອງການ

Bootstrap ສົມມຸດວ່າມີບາງກະແຈສະເພາະພາຍໃນແຜນທີ່ Sass ດັ່ງທີ່ພວກເຮົາໃຊ້ແລະຂະຫຍາຍຕົວມັນເອງ. ໃນຂະນະທີ່ທ່ານປັບແຕ່ງແຜນທີ່ລວມ, ທ່ານອາດຈະພົບກັບຄວາມຜິດພາດທີ່ລະຫັດສະເພາະຂອງແຜນທີ່ Sass ຖືກໃຊ້.

ຕົວຢ່າງ, ພວກເຮົາໃຊ້ປຸ່ມ primary, success, ແລະ dangerຈາກ $theme-colorsສໍາລັບການເຊື່ອມຕໍ່, ປຸ່ມ, ແລະສະຖານະແບບຟອມ. ການປ່ຽນຄ່າຂອງກະແຈເຫຼົ່ານີ້ບໍ່ຄວນມີບັນຫາຫຍັງເລີຍ, ແຕ່ການຖອດພວກມັນອອກອາດເຮັດໃຫ້ເກີດບັນຫາການລວບລວມ Sass. ໃນຕົວຢ່າງເຫຼົ່ານີ້, ທ່ານຈະຕ້ອງດັດແປງລະຫັດ Sass ທີ່ນໍາໃຊ້ຄ່າເຫຼົ່ານັ້ນ.

ຟັງຊັນ

ສີ

ຖັດຈາກ ແຜນທີ່ Sass ທີ່ ພວກເຮົາມີ, ສີຫົວຂໍ້ຍັງສາມາດຖືກນໍາໃຊ້ເປັນຕົວແປແບບດ່ຽວ, ເຊັ່ນ: $primary.

.custom-element {
  color: $gray-100;
  background-color: $dark;
}

ທ່ານສາມາດເຮັດໃຫ້ສີອ່ອນຫຼືຊ້ໍາດ້ວຍ Bootstrap tint-color()ແລະ shade-color()ຫນ້າທີ່. ຟັງຊັນເຫຼົ່ານີ້ຈະປະສົມສີກັບສີດໍາຫຼືສີຂາວ, ແຕກຕ່າງຈາກ Sass' native lighten()ແລະ darken()ຫນ້າທີ່ທີ່ຈະປ່ຽນຄວາມສະຫວ່າງໂດຍຈໍານວນຄົງທີ່, ເຊິ່ງມັກຈະບໍ່ນໍາໄປສູ່ຜົນກະທົບທີ່ຕ້ອງການ.

// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}

// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}

ໃນ​ການ​ປະ​ຕິ​ບັດ​, ທ່ານ​ຈະ​ໂທ​ຫາ​ຫນ້າ​ທີ່​ແລະ​ຜ່ານ​ໃນ​ຕົວ​ກໍາ​ນົດ​ການ​ສີ​ແລະ​ນ​້​ໍ​າ​.

.custom-element {
  color: tint-color($primary, 10%);
}

.custom-element-2 {
  color: shade-color($danger, 30%);
}

ກົງກັນຂ້າມສີ

ເພື່ອໃຫ້ ໄດ້ມາດຕະຖານການເຂົ້າເຖິງ WCAG 2.0 ສໍາລັບຄວາມຄົມຊັດຂອງສີ , ຜູ້ຂຽນ ຕ້ອງ ໃຫ້ ອັດຕາສ່ວນກົງກັນຂ້າມຢ່າງຫນ້ອຍ 4.5: 1 , ໂດຍມີຂໍ້ຍົກເວັ້ນຫນ້ອຍຫຼາຍ.

ຟັງຊັນເພີ່ມເຕີມທີ່ພວກເຮົາລວມຢູ່ໃນ Bootstrap ແມ່ນຫນ້າທີ່ກົງກັນຂ້າມຂອງສີ, color-contrast. ມັນໃຊ້ WCAG 2.0 algorithm ສໍາລັບການຄິດໄລ່ຂອບເຂດຄວາມຄົມຊັດໂດຍອີງໃສ່ ຄວາມສະຫວ່າງ ທີ່ກ່ຽວຂ້ອງ ໃນ sRGBcolorspace ເພື່ອສົ່ງຄືນແສງສະຫວ່າງ ( #fff), dark ( #212529) ຫຼືສີດໍາ ( #000) ສີ contrast ໂດຍອີງໃສ່ສີຖານທີ່ລະບຸໄວ້. ຟັງຊັນນີ້ເປັນປະໂຫຍດໂດຍສະເພາະສໍາລັບ mixins ຫຼື loops ທີ່ທ່ານກໍາລັງສ້າງຫຼາຍຫ້ອງຮຽນ.

ສໍາລັບຕົວຢ່າງ, ເພື່ອສ້າງ swatches ສີຈາກ $theme-colorsແຜນທີ່ຂອງພວກເຮົາ:

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

ມັນຍັງສາມາດຖືກໃຊ້ສໍາລັບຄວາມຕ້ອງການດ້ານກົງກັນຂ້າມແບບດຽວ:

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

ທ່ານຍັງສາມາດລະບຸສີພື້ນຖານດ້ວຍຟັງຊັນແຜນທີ່ສີຂອງພວກເຮົາ:

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

ໜີ SVG

We use the escape-svg function to escape the <, > and # characters for SVG background images. When using the escape-svg function, data URIs must be quoted.

Add and Subtract functions

We use the add and subtract functions to wrap the CSS calc function. The primary purpose of these functions is to avoid errors when a “unitless” 0 value is passed into a calc expression. Expressions like calc(10px - 0) will return an error in all browsers, despite being mathematically correct.

Example where the calc is 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);
}

Example where the calc is invalid:

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

Mixins

Our scss/mixins/ directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project.

Color schemes

mixin shorthand ສໍາລັບການ prefers-color-schemeສອບຖາມສື່ແມ່ນມີຢູ່ກັບການສະຫນັບສະຫນູນສໍາລັບ light, dark, ແລະຮູບແບບສີທີ່ກໍາຫນົດເອງ.

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

.custom-element {
  @include color-scheme(dark) {
    // Insert dark mode styles here
  }

  @include color-scheme(custom-named-scheme) {
    // Insert custom color scheme styles here
  }
}