Source

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 kwamba 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 matakwa 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 chaguo-msingi za wavuti (Helvetica Neue, Helvetica, na Arial) zimetolewa katika Bootstrap 4 na nafasi yake kuchukuliwa na "mlundikano wa fonti asili" kwa uwasilishaji bora wa maandishi kwenye kila kifaa na Mfumo wa Uendeshaji. 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Hii font-familyinatumika kwa <body>na kurithiwa kiotomatiki kimataifa kote katika Bootstrap. Ili kubadilisha kimataifa font-family, sasisha $font-family-basena uunde 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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Uwezeshaji katika pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Uwezeshaji katika pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Kwa uwekaji mitindo 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.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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.

Mabadiliko haya, na zaidi, yanaonyeshwa hapa chini.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.

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.