Theming Bootstrap
Gadzirisa Bootstrap 4 neyedu itsva yakavakirwa-mukati maSass madhizaini epasirese masitaera aunofarira kuti zvive nyore theming uye shanduko yechikamu.
Nhanganyaya
MuBootstrap 3, theming yainyanya kufambiswa nekusiyana-siyana muLESS, tsika CSS, uye yakaparadzana theme stylesheet yatakaisa dist
mumafaira edu. Nekumwe kuedza, munhu anogona kugadzirisa zvachose chitarisiko cheBootstrap 3 pasina kubata mafaera epakati. Bootstrap 4 inopa yakajairika, asi yakati siyanei maitiro.
Ikozvino, theming inopedzwa neSass akasiyana, Sass mepu, uye tsika CSS. Hapasisina yakatsaurirwa theme stylesheet; pachinzvimbo, unogona kugonesa yakavakirwa-mukati theme kuti uwedzere gradients, mimvuri, uye nezvimwe.
Sass
Shandisa yedu sosi mafaera eSass kutora mukana wekusiyana, mepu, musanganiswa, nezvimwe. Mukuvaka kwedu takawedzera iyo Sass kutenderera chaiko kusvika pa6 (nekusagadzika ndeye 5) kudzivirira nyaya nebrowser kutenderedza.
Chimiro chefaira
Pese pazvinogoneka, dzivirira kugadzirisa mafaira eBootstrap. Kune Sass, zvinoreva kugadzira yako wega stylesheet inopinza Bootstrap kuti ugone kuigadzirisa nekuiwedzera. Kufungidzira kuti uri kushandisa pasuru maneja senge npm, iwe unenge uine faira chimiro chinotaridzika seizvi:
Kana iwe wakadhawunirodha yedu sosi mafaera uye usingashandise pasuru maneja, iwe unenge uchida kumisikidza nemaoko chimwe chinhu chakafanana neiyo chimiro, uchichengeta Bootstrap's sosi mafaera akasiyana kubva kune ako.
Importing
Mune yako custom.scss
, iwe unopinza Bootstrap's source Sass mafaera. Iwe une mbiri sarudzo: sanganisira ese eBootstrap, kana tora zvikamu zvaunoda. Tinokurudzira vekupedzisira, asi ziva kuti pane zvimwe zvinodiwa uye zvinotsamira pazvikamu zvedu. Iwe zvakare unozofanirwa kusanganisira imwe JavaScript yemapulagi edu.
Nekuseta ikoko munzvimbo, unogona kutanga kugadzirisa chero maSass akasiyana uye mepu mune yako custom.scss
. Iwe unogona zvakare kutanga kuwedzera zvikamu zveBootstrap pasi // Optional
pechikamu sezvinodiwa. Isu tinopa zano kushandisa iyo yakazara yekupinza stack kubva bootstrap.scss
kufaira redu senzvimbo yako yekutanga.
Variable defaults
Yese Sass inosiyana muBootstrap 4 inosanganisira iyo !default
mureza inokubvumidza kuti uwedzere kukosha kweiyo yakasarudzika muSass yako pasina kugadzirisa Bootstrap's source code. Kopira uye unamate zvinosiyana sezvinodiwa, shandura maitiro avo, uye bvisa !default
mureza. Kana shanduko yakatopihwa, saka haizopihwazve neiyo default tsika muBootstrap.
Iwe uchawana iyo yakazara runyorwa rweBootstrap's akasiyana mu scss/_variables.scss
. Mamwe mavhezheni akaiswa ku null
, aya akasiyana haabudise chivakwa kunze kwekunge akadarika mukumisikidzwa kwako.
Inosiyana-siyana inodarika mukati meiyo Sass faira inogona kuuya isati yasvika kana mushure mekusarudzika. Nekudaro, kana uchipfuura mafaera eSass, ako epamusoro anofanira kuuya usati waunza maBootstrap's Sass mafaera.
Heino muenzaniso unoshandura iyo background-color
uye color
yeiyo <body>
kana uchipinza uye kunyora Bootstrap kuburikidza npm:
Dzokorora sezvinodiwa kune chero shanduko muBootstrap, kusanganisira sarudzo dzepasirese pazasi.
Mepu uye zvishwe
Bootstrap 4 inosanganisira mashoma emamepu eSass, akakosha mapeya anoita kuti zvive nyore kugadzira mhuri dzeCSS ine hukama. Isu tinoshandisa mamepu eSass kune edu mavara, grid breakpoints, nezvimwe. Sezvakangoita maSass akasiyana, ese maSass mepu anosanganisira !default
mureza uye anogona kudhindwa nekuwedzerwa.
Mamwe emamepu edu eSass anobatanidzwa kuita asina chinhu nekukasira. Izvi zvinoitirwa kubvumira kuwedzera kuri nyore kwemepu yeSass yakapihwa, asi zvinouya nemubhadharo wekugadzira kubvisa zvinhu kubva pamepu kuoma zvishoma.
Shandura mepu
Kuti ugadzirise ruvara rwuripo $theme-colors
pamepu yedu, wedzera zvinotevera kune yako tsika Sass faira:
Wedzera kumepu
Kuti uwedzere ruvara rutsva ku $theme-colors
, wedzera kiyi nyowani uye kukosha:
Bvisa kubva pamepu
Kubvisa mavara kubva $theme-colors
, kana chero imwe mepu, shandisa map-remove
. Ziva kuti unofanirwa kuiisa pakati pezvatinoda uye sarudzo:
Makiyi anodiwa
Bootstrap inotora kuvapo kwemamwe makiyi mukati meSass mepu sezvataishandisa uye kuwedzera iwo pachedu. Sezvo iwe uchigadzirisa mamepu anosanganisirwa, unogona kusangana nezvikanganiso apo chaiyo Sass mepu kiyi iri kushandiswa.
Semuenzaniso, isu tinoshandisa iyo primary
, success
, uye danger
makiyi kubva $theme-colors
kune zvinongedzo, mabhatani, uye fomu nyika. Kutsiva kukosha kwemakiyi aya hakufanire kuratidza nyaya, asi kubvisa kunogona kukonzera Sass kuunganidza nyaya. Muzviitiko izvi, iwe unozofanirwa kugadzirisa iyo Sass kodhi inoshandisa iwo maitiro.
Mabasa
Bootstrap inoshandisa akati wandei maSass mabasa, asi chete subset inoshanda kune general theming. Isu takasanganisira mabasa matatu ekutora kukosha kubva kumamepu emavara:
Izvi zvinokutendera kuti usarudze rumwe ruvara kubva pamepu yeSass zvakanyanya semashandisiro aungaita ruvara rwakasiyana kubva kuv3.
Isu tine zvakare rimwe basa rekuwana imwe nhanho yeruvara kubva $theme-colors
pamepu. Negative level values inorerutsa ruvara, ukuwo mazinga epamusoro achisviba.
Mukuita, iwe unodaidza basa racho uye wopfuura muzvikamu zviviri: zita reruvara kubva $theme-colors
(semuenzaniso, chekutanga kana njodzi) uye nhamba yenhamba.
Mamwe mabasa anogona kuwedzerwa mune ramangwana kana yako tsika Sass kugadzira nhanho mashandiro emamwe mamepu eSass, kana generic kana iwe uchida kuve wakanyanya verbose.
Kusiyana kwemavara
Rimwe basa ratinosanganisa muBootstrap ndiro basa rekusiyanisa ruvara, color-yiq
. Inoshandisa iyo YIQ nzvimbo yeruvara kuti idzorere otomatiki mwenje ( #fff
) kana rima ( #111
) mutsauko wemuvara unoenderana neyakatsanangurwa base color. Iri basa rinonyanya kubatsira kumamikisi kana zvishwe pauri kugadzira akawanda makirasi.
Semuenzaniso, kugadzira mavara emavara kubva $theme-colors
pamepu yedu:
Inogona zvakare kushandiswa kune imwe-off mutsauko zvinodiwa:
Iwe unogona zvakare kutsanangura ruvara rwepasi nemepu yedu yemavara mabasa:
Escape SVG
Isu tinoshandisa escape-svg
basa kutiza iyo <
, >
uye #
mavara eSVG kumashure mifananidzo. Aya mavara anofanirwa kupukunyuka kuti ape nemazvo mifananidzo yekumashure muIE. Paunenge uchishandisa escape-svg
basa, data URIs inofanirwa kutorwa.
Wedzera uye Bvisa mabasa
Isu tinoshandisa iyo add
uye subtract
mabasa kuputira iyo CSS calc
basa. Chinangwa chikuru chemabasa aya ndechekudzivirira kukanganisa kana 0
kukosha kwe "unitless" kuchipfuudzwa muchirevo calc
. Matauriro akadai calc(10px - 0)
anodzosa chikanganiso mumabhurawuza ese, kunyangwe ari masvomhu chaiwo.
Muenzaniso apo calc inoshanda:
Muenzaniso apo calc isiri kushanda:
Sass sarudzo
Gadzirisa Bootstrap 4 neyedu yakavakirwa-mukati dhizaini faira uye shandura zviri nyore zvepasirese CSS zvido nemhando itsva $enable-*
dzeSass. Bvisa kukosha kweiyo vhezheni uye wobatanidza nayo npm run test
sezvinodiwa.
Iwe unogona kuwana uye kugadzirisa aya machinjiro kune akakosha epasi rose sarudzo muBootstrap's scss/_variables.scss
faira.
Variable | Values | Tsanangudzo |
---|---|---|
$spacer |
1rem (default), kana chero kukosha> 0 |
Inodoma iyo default spacer kukosha kuti igadzire yedu spacer utilities . |
$enable-rounded |
true (default) kanafalse |
Inogonesa border-radius zvitaera zvakafanotsanangurwa pazvikamu zvakasiyana. |
$enable-shadows |
true kana false (default) |
Inogonesa box-shadow zvitaera zvakafanotsanangurwa pazvikamu zvakasiyana. |
$enable-gradients |
true kana false (default) |
Inogonesa kufanotsanangurwa gradients kuburikidza background-image nezvitaera pane akasiyana mazvikamu. |
$enable-transitions |
true (default) kanafalse |
Inogonesa predefined transition s pazvikamu zvakasiyana. |
$enable-prefers-reduced-motion-media-query |
true (default) kanafalse |
Inogonesa prefers-reduced-motion kubvunza kwenhau , iyo inodzvanya mamwe maanimation/shanduko zvichibva pane zvevashandisi'browser/operating system zvido. |
$enable-hover-media-query |
true kana false (default) |
Yakarambwa |
$enable-grid-classes |
true (default) kanafalse |
Inogonesa kugadzirwa kweCSS makirasi eiyo grid system (semuenzaniso, .container , .row , .col-md-1 , nezvimwewo). |
$enable-caret |
true (default) kanafalse |
Inogonesa pseudo element caret pa .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (default) kanafalse |
Wedzera "ruoko" chitubu kune zvisina kuremara bhatani zvinhu. |
$enable-print-styles |
true (default) kanafalse |
Inogonesa masitayera ekugonesa kudhinda. |
$enable-responsive-font-sizes |
true kana false (default) |
Inobvumira mafonti saizi anopindura . |
$enable-validation-icons |
true (default) kanafalse |
Inogonesa ma background-image icons mukati memavara ekuisa uye mamwe mafomu ega ega enzvimbo dzekusimbisa. |
$enable-deprecation-messages |
true kana false (default) |
Gadzirira true kuratidza yambiro kana uchishandisa chero yakarasika misanganiswa uye mabasa akarongwa kubviswa mu v5 . |
Color
Zvizhinji zveBootstrap zvakasiyana-siyana zvikamu uye zvishandiso zvinovakwa kuburikidza neakatevedzana emavara anotsanangurwa mumepu yeSass. Iyi mepu inogona kuvharirwa muSass kuti ikurumidze kugadzira akateedzana emitemo.
Mavara ose
Ese mavara anowanikwa muBootstrap 4, anowanikwa seSass akasiyana uye mepu yeSass scss/_variables.scss
mufaira. Izvi zvichawedzerwa pane anotevera madiki ekuburitswa kuti awedzere mamwe mimvuri, senge greyscale palette yatinotobatanidza .
Heano maitiro aungashandisa aya muSass yako:
Makirasi ekushandisa mavara anowanikwawo pakuseta color
uye background-color
.
Mune ramangwana, isu tichavavarira kupa maSass mamepu uye akasiyana emhando dzemavara ega ega sezvatakaita ne grayscale mavara pazasi.
Theme mavara
Isu tinoshandisa subset yemavara ese kugadzira diki pendi yeruvara kugadzira marongero emavara, inowanikwawo semaSass akasiyana uye mepu yeSass muBootstrap's scss/_variables.scss
file.
Grays
Iyo yakawedzera seti yegrey akasiyana uye mepu yeSass mune scss/_variables.scss
inowirirana mimvuri yegrey pane yako purojekiti. Ziva kuti aya ndiwo "greys anotonhorera", ayo anotarisa kune yakasarudzika yebhuruu toni, pane kusarerekera grey.
Mukati scss/_variables.scss
, iwe unowana Bootstrap's mavara akasiyana uye Sass mepu. Heino muenzaniso $colors
weSass mepu:
Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not every component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the ${color}
variables and this Sass map.
Components
Many of Bootstrap’s components and utilities are built with @each
loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our $theme-colors
and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.
Modifiers
Many of Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., .btn
) while style variations are confined to modifier classes (e.g., .btn-danger
). These modifier classes are built from the $theme-colors
map to make customizing the number and name of our modifier classes.
Here are two examples of how we loop over the $theme-colors
map to generate modifiers to the .alert
component and all our .bg-*
background utilities.
Responsive
These Sass loops aren’t limited to color maps, either. You can also generate responsive variations of your components or utilities. Take for example our responsive text alignment utilities where we mix an @each
loop for the $grid-breakpoints
Sass map with a media query include.
Should you need to modify your $grid-breakpoints
, your changes will apply to all the loops iterating over that map.
CSS variables
Bootstrap 4 includes around two dozen CSS custom properties (variables) in its compiled CSS. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s Inspector, a code sandbox, or general prototyping.
Available variables
Here are the variables we include (note that the :root
is required). They’re located in our _root.scss
file.
Examples
CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our page’s font and link styles with CSS variables.
Breakpoint variables
Nepo isu pakutanga takabatanidza mabreakpoints mune yedu CSS akasiyana (eg, --breakpoint-md
), aya haatsigirwe mumibvunzo midhiya , asi anogona achiri kushandiswa mukati memitemo mumibvunzo yenhau. Aya mabreakpoint akasiyana anoramba ari muCSS yakaunganidzwa yekudzokera kumashure inopihwa iyo inogona kushandiswa neJavaScript. Dzidza zvakawanda mune spec .
Heino muenzaniso wezvisina kutsigirwa:
Uye heino muenzaniso wezvinotsigirwa: