in English

Washa upya

Anzisha upya, mkusanyiko wa mabadiliko ya kipengele mahususi cha CSS katika faili moja, anzisha Bootstrap ili kutoa msingi maridadi, thabiti na rahisi wa 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 rems badala ya ems kwa nafasi za sehemu zinazoweza kuongezeka.
Epuka margin-top. Pambizo za wima zinaweza kuporomoka, na kutoa matokeo yasiyotarajiwa. Muhimu zaidi ingawa, mwelekeo mmoja wa marginni mfano rahisi wa kiakili.
Kwa kuongeza ukubwa wa kifaa kwa urahisi, vipengele vya kuzuia vinapaswa kutumia rems kwa margins.
Weka matamko ya fontmali zinazohusiana kwa kiwango cha chini, ukitumia inheritkila inapowezekana.

Mipangilio ya ukurasa

Vipengele <html>na <body>vipengele vinasasishwa ili kutoa chaguo-msingi bora zaidi katika ukurasa mzima. Zaidi hasa:

Ulimwenguni box-sizingkote umewekwa kwa kila kipengele-ikiwa ni pamoja *::beforena na *::after, hadi border-box. Hii inahakikisha kuwa upana uliotangazwa wa kipengele haupitiwi kamwe kwa sababu ya pedi au mpaka.
Hakuna msingi font-sizeuliotangazwa kwenye <html>, lakini 16pxinachukuliwa (chaguo-msingi ya kivinjari). font-size: 1reminatumika <body>kwa uwekaji ukubwa wa aina unaojibu kwa urahisi kupitia hoja za midia huku ukiheshimu mapendeleo ya mtumiaji na kuhakikisha mbinu inayofikika zaidi.
Pia <body>huweka kimataifa font-family, line-height, na text-align. Hii inarithiwa baadaye na baadhi ya vipengele vya fomu ili kuzuia kutofautiana kwa fonti.
Kwa usalama, <body>faili imetangazwa background-color, ambayo ni chaguo msingi kwa #fff.

Rafu ya fonti asili

Fonti chaguomsingi za wavuti (Helvetica Neue, Helvetica, na Arial) zimetolewa katika Bootstrap 4 na nafasi yake kuchukuliwa na "lundika la fonti asili" kwa uwasilishaji bora wa maandishi kwenye kila kifaa na OS. Soma zaidi kuhusu mrundikano wa fonti asili katika makala haya ya Jarida la Smashing .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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 kawaida za Unicode/dingbat zitatolewa kama picha za rangi nyingi. Muonekano wao utatofautiana, kulingana na mtindo unaotumika katika fonti asili ya kivinjari/jukwaa, na hazitaathiriwa na colormitindo yoyote ya CSS.

Hii font-familyinatumika kwa <body>na kurithiwa kiotomatiki kimataifa kote katika Bootstrap. Ili kubadilisha kimataifa font-family, sasisha $font-family-basena uandae tena Bootstrap.

Vichwa na aya

Vipengele vyote vya mada-kwa mfano, <h1>-na <p>huwekwa upya ili margin-topkuondolewa. Vichwa margin-bottom: .5remvimeongezwa na aya margin-bottom: 1remkwa 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-topzimeondolewa na a margin-bottom: 1rem. Orodha zilizoorodheshwa hazina margin-bottom.

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 margins. <dd>s upya margin-leftkwa 0na 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.

Maandishi yaliyoumbizwa awali

Kipengele <pre>kimewekwa upya ili kuondoa margin-topna kutumia remvitengo vyake margin-bottom.

.kipengele cha mfano {
  ukingo-chini: 1rem;
}

Majedwali

Majedwali yanarekebishwa kidogo kwa mtindo <caption>s, kukunja mipaka, na kuhakikisha uthabiti text-alignkote. Mabadiliko ya ziada ya mipaka, pedi, na zaidi huja na .tabledarasa .

Hili ni jedwali la mfano, na hili ni maelezo yake kuelezea yaliyomo.
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 zimewekwa display: inline-blockili kuruhusu marginkutumika.
<input>s, <select>s, <textarea>s, na <button>s hushughulikiwa zaidi na Normalize, lakini Reboot huondoa yao marginna seti line-height: inherit, pia.
<textarea>s zinarekebishwa ili ziweze kubadilishwa tena wima kwani kubadilisha ukubwa kwa mlalo mara nyingi "huvunja" mpangilio wa ukurasa.
<button>s na <input>vitu vya kitufe vina cursor: pointerwakati :not(:disabled).

Mabadiliko haya, na zaidi, yanaonyeshwa hapa chini.

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 cursormabadiliko yao wenyewe.

Kitufe cha kipengele kisicho na kifungo

<span role="button" tabindex="0">Non-button element button</span>

Vipengele vingine

Anwani

Kipengele <address>kinasasishwa ili kuweka upya chaguomsingi ya kivinjari font-stylekutoka italichadi normal. line-heightpia sasa imerithiwa, na margin-bottom: 1remimeongezwa. <address>s ni za kuwasilisha taarifa za mawasiliano kwa babu wa karibu (au kikundi kizima cha kazi). Hifadhi umbizo kwa kumalizia mistari kwa <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Jina Kamili
[email protected]

Nukuu ya kuzuia

Chaguo msingi marginkwenye blockquotes ni 1em 40px, kwa hivyo tunaiweka upya 0 0 1remkwa 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.

Nulla attr vitae elit libero, pharetra augue.

Muhtasari

Chaguo-msingi cursorkwenye muhtasari ni text, kwa hivyo tunaiweka upya ili pointerkuonyesha 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: nonechaguo-msingi. Kukopa wazo kutoka kwa PureCSS , tunaboresha kwa chaguomsingi hili [hidden] { display: none !important; }kwa kusaidia kulizuia lisipate kubatilishwa displaykimakosa. Ingawa [hidden]asilia haijaungwa mkono na IE10, tamko la wazi katika CSS yetu linatatua tatizo hilo.

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

Ili kugeuza tu mwonekano wa kipengele, kumaanisha displaykuwa hakijarekebishwa na kipengele bado kinaweza kuathiri mtiririko wa hati, tumia darasa .invisiblebadala yake.