Washa upya
Anzisha upya, mkusanyiko wa mabadiliko ya kipengele mahususi cha CSS katika faili moja, anzisha Bootstrap ili kutoa msingi maridadi, thabiti na rahisi kujenga juu yake.
Mbinu
Anzisha upya hujengwa juu ya Kurekebisha, kutoa vipengele vingi vya HTML vilivyo na mitindo ya maoni kwa kutumia viteuzi vya vipengele pekee. Styling ya ziada inafanywa tu na madarasa. Kwa mfano, tunaanzisha upya baadhi <table>
ya mitindo kwa msingi rahisi na kutoa baadaye .table
, .table-bordered
, na zaidi.
Hapa kuna miongozo yetu na sababu za kuchagua kile cha kubatilisha katika Reboot:
- Sasisha baadhi ya thamani chaguo-msingi za kivinjari ili kutumia
rem
s badala yaem
s kwa nafasi za sehemu zinazoweza kuongezeka. - Epuka
margin-top
. Pambizo za wima zinaweza kuporomoka, na kutoa matokeo yasiyotarajiwa. Muhimu zaidi ingawa, mwelekeo mmoja wamargin
ni mfano rahisi wa kiakili. - Kwa kuongeza ukubwa wa kifaa kwa urahisi, vipengele vya kuzuia vinapaswa kutumia
rem
s kwamargin
s. - Weka matamko ya
font
mali zinazohusiana kwa kiwango cha chini, ukitumiainherit
kila inapowezekana.
Vigezo vya CSS
Imeongezwa katika v5.1.1
Kwa v5.1.1, tulisawazisha @import
s zetu zinazohitajika kwenye vifurushi vyetu vyote vya CSS (ikiwa ni pamoja na bootstrap.css
, bootstrap-reboot.css
, na bootstrap-grid.css
kujumuisha _root.scss
. Hii inaongeza :root
vigeu vya CSS kwa vifurushi vyote, bila kujali ni ngapi kati ya hizo zinazotumika kwenye kifurushi hicho. Hatimaye Bootstrap 5 itaendelea tazama anuwai zaidi za CSS zilizoongezwa kwa wakati.
Mipangilio ya ukurasa
Vipengele <html>
na <body>
vipengele vinasasishwa ili kutoa chaguo-msingi bora zaidi katika ukurasa mzima. Zaidi hasa:
- Ulimwenguni
box-sizing
kote umewekwa kwa kila kipengele-ikiwa ni pamoja*::before
na na*::after
, hadiborder-box
. Hii inahakikisha kwamba upana uliotangazwa wa kipengele haupitiwi kamwe kwa sababu ya pedi au mpaka.- Hakuna msingi
font-size
uliotangazwa kwenye<html>
, lakini16px
inachukuliwa (chaguo-msingi ya kivinjari).font-size: 1rem
inatumika<body>
kwa uwekaji ukubwa wa aina unaojibu kwa urahisi kupitia hoja za midia huku ukiheshimu matakwa ya mtumiaji na kuhakikisha mbinu inayofikika zaidi. Chaguomsingi hii ya kivinjari inaweza kubatilishwa kwa kurekebisha utofauti$font-size-root
.
- Hakuna msingi
- Pia
<body>
huweka kimataifafont-family
,font-weight
,line-height
, nacolor
. Hii inarithiwa baadaye na baadhi ya vipengele vya fomu ili kuzuia kutofautiana kwa fonti. - Kwa usalama,
<body>
faili imetangazwabackground-color
, ambayo ni chaguo msingi kwa#fff
.
Rafu ya fonti asili
Bootstrap hutumia "bunda la fonti asili" au "lundika la fonti la mfumo" kwa uwasilishaji bora wa maandishi kwenye kila kifaa na OS. Fonti hizi za mfumo zimeundwa mahususi kwa kuzingatia vifaa vya leo, kwa kuboreshwa kwa uwasilishaji kwenye skrini, usaidizi wa fonti tofauti na zaidi. Soma zaidi kuhusu mrundikano wa fonti asili katika makala haya ya Jarida la Smashing .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Windows
"Segoe UI",
// Android
Roboto,
// Basic web fallback
"Helvetica Neue", Arial,
// Linux
"Noto Sans",
"Liberation Sans",
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
Kumbuka kwamba kwa sababu mrundikano wa fonti unajumuisha fonti za emoji, herufi nyingi za unikodi za kawaida za ishara/dingbat zitatolewa kama picha za rangi nyingi. Muonekano wao utatofautiana, kulingana na mtindo unaotumika katika fonti asili ya kivinjari/jukwaa, na hazitaathiriwa na color
mitindo yoyote ya CSS.
Hii font-family
inatumika kwa <body>
na kurithiwa kiotomatiki kimataifa kote katika Bootstrap. Ili kubadilisha kimataifa font-family
, sasisha $font-family-base
na uandae tena Bootstrap.
Vigezo vya CSS
Kadiri Bootstrap 5 inavyoendelea kukomaa, mitindo zaidi na zaidi itajengwa kwa vibadilishio vya CSS kama njia ya kutoa ubinafsishaji zaidi wa wakati halisi bila hitaji la kurudisha Sass kila wakati. Mtazamo wetu ni kuchukua viambajengo vya chanzo chetu cha Sass na kuvibadilisha kuwa vigeu vya CSS. Kwa njia hiyo, hata kama hutumii vigeu vya CSS, bado unayo nguvu zote za Sass. Hili bado linaendelea na itachukua muda kutekelezwa kikamilifu.
Kwa mfano, fikiria anuwai hizi za :root
CSS kwa <body>
mitindo ya kawaida:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
Kwa mazoezi, vijiumbe hivyo basi hutumika katika Reboot kama hivyo:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
Ambayo hukuruhusu kufanya ubinafsishaji wa wakati halisi jinsi unavyopenda:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Vichwa na aya
Vipengele vyote vya mada-kwa mfano, <h1>
-na <p>
huwekwa upya ili margin-top
kuondolewa. Vichwa margin-bottom: .5rem
vimeongezwa na aya margin-bottom: 1rem
kwa nafasi rahisi.
Kichwa | Mfano |
---|---|
<h1></h1> |
h1. Kichwa cha bootstrap |
<h2></h2> |
h2. Kichwa cha bootstrap |
<h3></h3> |
h3. Kichwa cha bootstrap |
<h4></h4> |
h4. Kichwa cha bootstrap |
<h5></h5> |
h5. Kichwa cha bootstrap |
<h6></h6> |
h6. Kichwa cha bootstrap |
Orodha
Orodha zote— <ul>
, <ol>
, na <dl>
— margin-top
zimeondolewa na a margin-bottom: 1rem
. Orodha zilizoorodheshwa hazina margin-bottom
. Pia tumeweka upya washa na padding-left
vipengele .<ul>
<ol>
- Orodha zote zimeondolewa ukingo wao wa juu
- Na kiasi chao cha chini kimerekebishwa
- Orodha zilizoorodheshwa hazina ukingo wa chini
- Kwa njia hii wana mwonekano mzuri zaidi
- Hasa ikifuatiwa na vipengee zaidi vya orodha
- Ukingo wa kushoto pia umewekwa upya
- Hapa kuna orodha iliyoagizwa
- Na vitu vichache vya orodha
- Ina sura sawa ya jumla
- Kama orodha ya hapo awali isiyopangwa
Kwa mtindo rahisi, daraja wazi, na nafasi bora zaidi, orodha za maelezo zimesasisha margin
s. <dd>
s kuweka upya margin-left
kwa 0
na kuongeza margin-bottom: .5rem
. <dt>
wana ujasiri .
- Orodha za maelezo
- Orodha ya maelezo ni kamili kwa kufafanua maneno.
- Muda
- Ufafanuzi wa neno.
- Ufafanuzi wa pili wa neno moja.
- Neno lingine
- Ufafanuzi wa neno hili lingine.
Msimbo wa ndani
Funga vijisehemu vya ndani vya msimbo kwa <code>
. Hakikisha umeepuka mabano ya pembe ya HTML.
<section>
inapaswa kufungwa kama inline.
For example, <code><section></code> should be wrapped as inline.
Vizuizi vya kanuni
Tumia <pre>
s kwa mistari mingi ya msimbo. Kwa mara nyingine tena, hakikisha kuwa umeepuka mabano yoyote ya pembe katika msimbo kwa uwasilishaji unaofaa. Kipengele <pre>
kimewekwa upya ili kuondoa margin-top
na kutumia rem
vitengo vyake margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Vigezo
Kwa kuashiria vigezo tumia <var>
lebo.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Ingizo la mtumiaji
Tumia <kbd>
ili kuashiria ingizo ambalo kwa kawaida huingizwa kupitia kibodi.
Ili kuhariri mipangilio, bonyeza ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Sampuli ya pato
Ili kuonyesha matokeo ya sampuli kutoka kwa programu tumia <samp>
lebo.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Majedwali
Majedwali yanarekebishwa kidogo kwa mtindo <caption>
s, kukunja mipaka, na kuhakikisha uthabiti text-align
kote. Mabadiliko ya ziada ya mipaka, pedi, na zaidi huja na .table
darasa .
Kichwa cha jedwali | Kichwa cha jedwali | Kichwa cha jedwali | Kichwa cha jedwali |
---|---|---|---|
Jedwali la seli | Jedwali la seli | Jedwali la seli | Jedwali la seli |
Jedwali la seli | Jedwali la seli | Jedwali la seli | Jedwali la seli |
Jedwali la seli | Jedwali la seli | Jedwali la seli | Jedwali la seli |
Fomu
Vipengele mbalimbali vya fomu vimewashwa upya kwa mitindo rahisi ya msingi. Hapa kuna baadhi ya mabadiliko muhimu zaidi:
<fieldset>
s hazina mipaka, pedi, au ukingo ili ziweze kutumika kwa urahisi kama vifungashio vya pembejeo za kibinafsi au vikundi vya pembejeo.<legend>
s, kama seti za uwanja, pia zimebadilishwa ili kuonyeshwa kama kichwa cha aina.<label>
s zimewekwadisplay: inline-block
ili kuruhusumargin
kutumika.<input>
s,<select>
s,<textarea>
s, na<button>
s hushughulikiwa zaidi na Normalize, lakini Reboot huondoa yaomargin
na setiline-height: inherit
, pia.<textarea>
s zinarekebishwa ili ziweze kubadilishwa tena kwa wima kwani kubadilisha ukubwa kwa mlalo mara nyingi "huvunja" mpangilio wa ukurasa.<button>
s na<input>
vitu vya kitufe vinacursor: pointer
wakati:not(:disabled)
.
Mabadiliko haya, na zaidi, yanaonyeshwa hapa chini.
Usaidizi wa kuweka tarehe na rangi
Kumbuka kwamba pembejeo za tarehe hazitumiki kikamilifu na vivinjari vyote, yaani Safari.
Viashiria kwenye vifungo
Kuwasha upya ni pamoja na uboreshaji role="button"
wa kubadilisha kiteuzi chaguo-msingi kuwa pointer
. Ongeza sifa hii kwa vipengele ili kusaidia kuashiria vipengele vinaingiliana. Jukumu hili si la lazima kwa <button>
vipengele, ambavyo hupata cursor
mabadiliko yao wenyewe.
<span role="button" tabindex="0">Non-button element button</span>
Vipengele vingine
Anwani
Kipengele <address>
kinasasishwa ili kuweka upya chaguomsingi ya kivinjari font-style
kutoka italic
hadi normal
. line-height
pia sasa imerithiwa, na margin-bottom: 1rem
imeongezwa. <address>
s ni za kuwasilisha taarifa za mawasiliano kwa babu wa karibu (au kikundi kizima cha kazi). Hifadhi umbizo kwa kumalizia mistari kwa <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Jina Kamili
[email protected]
Nukuu ya kuzuia
Chaguo msingi margin
kwenye blockquotes ni 1em 40px
, kwa hivyo tunaiweka upya 0 0 1rem
kwa kitu kinacholingana zaidi na vipengele vingine.
Nukuu inayojulikana sana, iliyo katika kipengele cha kuzuia.
Mtu maarufu katika Mada ya Chanzo
Vipengele vya ndani
Kipengele <abbr>
hupokea mtindo wa kimsingi ili kuifanya ionekane bora kati ya maandishi ya aya.
Muhtasari
Chaguo-msingi cursor
kwenye muhtasari ni text
, kwa hivyo tunaiweka upya ili pointer
kuonyesha kwamba kipengele kinaweza kuingiliana nacho kwa kubofya.
Baadhi ya maelezo
Maelezo zaidi kuhusu maelezo.
Hata maelezo zaidi
Hapa kuna maelezo zaidi kuhusu maelezo.
HTML5 [hidden]
sifa
HTML5 inaongeza sifa mpya ya kimataifa inayoitwa[hidden]
, ambayo imeundwa kama display: none
chaguo-msingi. Kukopa wazo kutoka kwa PureCSS , tunaboresha kwa chaguomsingi hili [hidden] { display: none !important; }
kwa kusaidia kulizuia lisipate kubatilishwa display
kimakosa.
<input type="text" hidden>
kutopatana kwa jQuery
[hidden]
haiendani na jQuery $(...).hide()
na $(...).show()
njia. Kwa hivyo, kwa sasa hatuidhinishi [hidden]
juu ya mbinu zingine za kudhibiti display
vipengele.
Ili kugeuza tu mwonekano wa kipengele, kumaanisha display
kuwa hakijarekebishwa na kipengele bado kinaweza kuathiri mtiririko wa hati, tumia darasa .invisible
badala yake.