CSS bεε bεε bε bεn

Bootstrap bɛ CSS ladamucogo caman (daɲɛw caman) Dòn a ka CSS labɛnni na walasa ka ladamucogo Kɛ waati yɛrɛ la k’a sɔrɔ a ma Kɛ wajibi ye ka Sass labɛn kokura. Olu bɛ nafaw sɔrɔ nɔgɔya la minnu bɛ kɛ ka caya i n’a fɔ an ka barokun kulɛriw, kariyɔrɔw, ani sɛbɛnnibolo fɔlɔw kuluw ni i bɛ baara kɛ i ka navigatɔrɔ ka sɛgɛsɛgɛlikɛlan kɔnɔ, kode sandbox kɔnɔ, walima prototyping caman na.

An ka ladamufɛnw bɛɛ bɛ daminɛ nibs- CSS ye walasa ka bɛnbaliya bali ni mɔgɔ sabanan CSS ye.

Yɛlɛmaba minnu bɛ kɛ jirisunw na

An bɛ fɛn minnu Dòn a la olu filɛ nin ye (a kɔlɔsi ko the :rootis required) minnu bɛ Se ka Sɔrɔ Bootstrap ka CSS bɛ Lase yɔrɔ o yɔrɔ la. U bɛ an ka _root.scssdosiye kɔnɔ ani u bɛ an ka dist dosiyew lajɛlenw kɔnɔ.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

Components bεε bεε bε bεn

Bootstrap 5 bɛ ka baara kɛ ni ladamufɛnw ye ka taa a fɛ i n’a fɔ sigida fɛn caman sɛgɛsɛgɛli fɛn suguya caman na. O cogo la an bɛ dɔ bɔ an ka CSS dalajɛlen na, k’a lajɛ ko cogoyaw tɛ ciyɛn sɔrɔ yɔrɔw la i n’a fɔ tabali minnu bɛ sigi, ani ka sira di Bootstrap yɔrɔw labɛncogo kura ni u janya jɔnjɔn dɔw ma Sass dalajɛlen kɔfɛ.

aw ye an ka tabali sɛbɛnw lajɛ walasa ka hakilina dɔw sɔrɔ an bɛ baara kɛ ni CSS fɛn caman sɛgɛsɛgɛli ye cogo min na . An ka navbarw fana bɛ baara Kɛ ni CSS fɛn caman sɛgɛsɛgɛli ye kabini v5.2.0. An bɛ baara kɛ fana ni CSS fɛn caman sɛgɛsɛgɛli ye an ka jatebɔsɛbɛnw kɔnɔ—fɔlɔ gutters the new opt-in CSS grid —ni component baarakɛcogo caman bɛ na don nataw la.

Ni a bɛ se ka kɛ tuma o tuma, an bɛna CSS fɛn caman sɛgɛsɛgɛli kɛ basigi yɔrɔ hakɛ la (misali la, .navbarnavbar n’a yɔrɔ fitininw kama). O bɛ dɔ bɔ jateminɛ na yɔrɔ min na ani cogo min na ka kɛɲɛ ni mɔgɔw sago ye, wa a bɛ sira di fɛn nɔgɔmanw ma an ka jɛkulu fɛ kunnafoni kuraw nataw la.

Daɲɛ fɔlɔ

CSS fɛn caman bɛ baara Kɛ ni daɲɛ fɔlɔ ye walasa ka i yɛrɛ tanga ɲɔgɔndanw ma ni i yɛrɛ ka kode-base ye. Nin daɲɛ fɔlɔ in bɛ Fàra o kan --min bɛ wajibiya CSS bεε la.

Aw bɛ daɲɛ fɔlɔw labɛn ka kɛɲɛ ni $prefixSass fɛn caman sɛgɛsɛgɛli ye. Ka da a kan, a bɛ sigi sen kan bs-(aw ye kɔfɛ dash kɔlɔsi).

Misaliw

CSS bεε bε Se ka bεnkansεbεn di ni Sass ka bεnkanw ye, nka k’a sɔrɔ u mago tε ɲɔgɔndan na sani u ka Di navigatɔrɔ ma. Misali la, yan an bɛ an ka ɲɛ in sɛbɛnnibolow ni jɛgɛncogo cogoyaw Lasegin ni CSS fɛn caman sɛgɛsɛgɛli ye.

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

Grid kariyɔrɔw

Hali n’an bɛ an ka grid breakpoints don i n’a fɔ CSS variables (n’a ma fɔ xs), aw k’a dɔn ko CSS variables tɛ baara kɛ media questions kɔnɔ . O ye dilancogo ye CSS spec kɔnɔ fɛn caman sɛgɛsɛgɛli la, nka a bɛ se ka Changé san nataw la ni dɛmɛ ye env()fɛn caman sɛgɛsɛgɛli la. Aw ye nin Stack Overflow jaabi lajɛ walasa ka kunnafoni nafama dɔw sɔrɔ. O waati kɔnɔ, i bɛ se ka baara kɛ ni nin fɛn caman sɛgɛsɛgɛli ye CSS cogoya wɛrɛw la, ka fara i ka JavaScript kan.