Վերագործարկեք

Reboot-ը, մեկ ֆայլում տարրական հատուկ CSS-ի փոփոխությունների հավաքածու, մեկնարկում է Bootstrap-ը, որպեսզի ապահովի էլեգանտ, հետևողական և պարզ հիմք՝ հիմնվելու համար:

Այս էջում

Մոտեցում

Reboot-ը հիմնված է Normalize-ի վրա՝ տրամադրելով HTML-ի շատ տարրերի որոշակի կարծիքի ոճեր՝ օգտագործելով միայն տարրերի ընտրիչները: Լրացուցիչ ոճավորումը կատարվում է միայն դասերի հետ։ Օրինակ, մենք վերագործարկում ենք որոշ <table>ոճեր ավելի պարզ ելակետի համար և ավելի ուշ տրամադրում ենք .table, .table-bordered, և ավելին:

Ահա մեր ուղեցույցները և պատճառները՝ ընտրելու, թե ինչն է անտեսել Reboot-ում.

Թարմացրեք դիտարկիչի որոշ կանխադրված արժեքներ՝ rems-ի փոխարեն ems-ի փոխարեն՝ մասշտաբային բաղադրիչների տարածության համար:
Խուսափեք margin-top. Ուղղահայաց լուսանցքները կարող են փլուզվել՝ տալով անսպասելի արդյունքներ: Սակայն ավելի կարևոր է, որ մեկ ուղղությունը marginավելի պարզ մտավոր մոդել է:
Սարքի չափսերի վրա ավելի հեշտ չափելու համար բլոկի տարրերը պետք է օգտագործեն rems-ը margins-ի համար:
Պահպանեք fontառնչվող հատկությունների հայտարարագրերը նվազագույնի` inheritհնարավորության դեպքում օգտագործելով:

CSS փոփոխականներ

Ավելացված է v5.2.0-ում

v5.1.1-ի միջոցով մենք ստանդարտացրել ենք մեր պահանջվող @imports-երը մեր բոլոր CSS փաթեթներում (ներառյալ bootstrap.css, bootstrap-reboot.css, և bootstrap-grid.css) ներառելու _root.scssհամար: Սա ավելացնում է :rootմակարդակի CSS փոփոխականներ բոլոր փաթեթներին՝ անկախ նրանից, թե դրանցից քանիսն են օգտագործվում այդ փաթեթում։ Ի վերջո, Bootstrap 5-ը կշարունակի տեսնել ավելի շատ CSS փոփոխականներ , որոնք ավելացվել են ժամանակի ընթացքում, որպեսզի ապահովի ավելի իրական ժամանակի հարմարեցում, առանց Sass-ը միշտ վերակազմավորելու անհրաժեշտության: Մեր մոտեցումն է վերցնել մեր աղբյուր Sass փոփոխականները և դրանք վերափոխել CSS փոփոխականների: Այդ կերպ, նույնիսկ եթե դուք չեք օգտագործում CSS փոփոխականներ, դուք դեռ ունեք Sass-ի ողջ հզորությունը: Սա դեռ ընթացքի մեջ է և ժամանակ կպահանջվի ամբողջական իրականացման համար:

Օրինակ, դիտարկեք այս :rootCSS փոփոխականները ընդհանուր <body>ոճերի համար.

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

Գործնականում այդ փոփոխականները կիրառվում են Reboot-ում այսպես.

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Որը թույլ է տալիս իրական ժամանակում հարմարեցումներ կատարել, ինչպես ցանկանում եք.

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

Էջի լռելյայն

և տարրերը թարմացվում են էջի համար ավելի լավ կանխադրումներ ապահովելու համար <html>: <body>Ավելի կոնկրետ՝

Համաշխարհային կարգով box-sizingսահմանված է յուրաքանչյուր տարրի վրա, ներառյալ *::beforeև *::after, մինչև border-box. Սա ապահովում է, որ տարրի հայտարարված լայնությունը երբեք չի գերազանցվի լցոնման կամ եզրագծի պատճառով:
- Ոչ մի հիմք font-sizeչի հայտարարված <html>, բայց 16pxենթադրվում է (զննարկիչի լռելյայն): font-size: 1remկիրառվում է <body>մեդիա հարցումների միջոցով հեշտ արձագանքող տիպերի մասշտաբի վրա՝ հարգելով օգտատերերի նախասիրությունները և ապահովելով ավելի մատչելի մոտեցում: Այս դիտարկիչի լռելյայն կարող է վերացվել՝ փոփոխելով $font-size-rootփոփոխականը:
Նաև <body>սահմանում է գլոբալ font-family, font-weight, line-heightև color. Սա ավելի ուշ ժառանգվում է ձևի որոշ տարրերով՝ տառատեսակների անհամապատասխանությունները կանխելու համար:
Անվտանգության համար <body>ունի հայտարարված background-color, լռելյայն #fff.

Մայրենի տառատեսակների կույտ

Bootstrap-ն օգտագործում է «հայրենի տառատեսակների կույտ» կամ «համակարգային տառատեսակների կույտ»՝ յուրաքանչյուր սարքի և ՕՀ-ում տեքստի օպտիմալ մատուցման համար: Համակարգի այս տառատեսակները նախագծվել են հատուկ՝ հաշվի առնելով այսօրվա սարքերը՝ էկրանների վրա կատարելագործված ցուցադրմամբ, փոփոխական տառատեսակների աջակցությամբ և այլն: Կարդացեք ավելին հայրենի տառատեսակների կույտերի մասին Smashing Magazine- ի այս հոդվածում :

$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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Նկատի ունեցեք, որ քանի որ տառատեսակների կույտը ներառում է էմոջի տառատեսակներ, Unicode-ի շատ սովորական սիմվոլներ/դինգբատ նիշեր կարտացոլվեն որպես բազմագույն ժայռապատկերներ: Նրանց տեսքը կտարբերվի՝ կախված զննարկիչի/պլատֆորմի բնիկ էմոջի տառատեսակում օգտագործվող ոճից, և դրանք չեն ազդի որևէ CSS colorոճի վրա:

Սա font-familyկիրառվում է <body>և ինքնաբերաբար ժառանգվում է գլոբալ Bootstrap-ում: Գլոբալը փոխելու համար font-familyթարմացրեք $font-family-baseև վերակոմպիլացրեք Bootstrap-ը:

Վերնագրեր և պարբերություններ

Վերնագրի բոլոր տարրերը, օրինակ, <h1>և վերակայվում <p>են, որպեսզի margin-topհեռացվեն: Ավելացվել են վերնագրեր margin-bottom: .5remև պարբերություններ margin-bottom: 1rem՝ հեշտ տարածության համար:

Վերնագիր	Օրինակ
`<h1></h1>`	հ1. Bootstrap վերնագիր
`<h2></h2>`	h2. Bootstrap վերնագիր
`<h3></h3>`	h3. Bootstrap վերնագիր
`<h4></h4>`	h4. Bootstrap վերնագիր
`<h5></h5>`	h5. Bootstrap վերնագիր
`<h6></h6>`	h6. Bootstrap վերնագիր

Հորիզոնական կանոններ

Տարրը <hr>պարզեցվել է: Բրաուզերի լռելյայնների նման, <hr>s-երը ոճավորվում են միջոցով border-top, ունեն լռելյայն opacity: .25և ինքնաբերաբար ժառանգվում են դրանց border-colorմիջոցով color, ներառյալ երբ colorսահմանվում է ծնողի միջոցով: Դրանք կարող են փոփոխվել տեքստի, եզրագծի և անթափանցիկության կոմունալ ծրագրերի միջոցով:

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Ցուցակներ

Բոլոր ցուցակները— <ul>, <ol>, և — <dl>հանվել են margin-topև ա margin-bottom: 1rem. Ներդրված ցուցակները չունեն margin-bottom: Մենք նաև վերակայել ենք միացումը padding-leftև <ul>տարրերը <ol>:

Բոլոր ցուցակների վերին լուսանցքը հանվել է
Եվ դրանց ստորին լուսանցքը նորմալացվեց
Ներդրված ցուցակները ներքևի լուսանցք չունեն
- Այս կերպ նրանք ավելի հարթ տեսք ունեն
- Հատկապես, երբ հաջորդում են ցուցակի ավելի շատ տարրեր
Ձախ լցոնումը նույնպես զրոյացվել է

Ահա պատվիրված ցուցակը
Ցուցակի մի քանի կետերով
Այն ունի նույն ընդհանուր տեսքը
Ինչպես նախորդ չպատվիրված ցուցակը

Ավելի պարզ ոճավորման, հստակ հիերարխիայի և ավելի լավ տարածության համար նկարագրության ցուցակները թարմացրել են margins. <dd>s վերակայել margin-leftև 0ավելացնել margin-bottom: .5rem: <dt>s են համարձակ .

Նկարագրության ցուցակներ: Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:
Ժամկետ: Տերմինի սահմանում.; Նույն տերմինի երկրորդ սահմանումը.
Մեկ այլ տերմին: Այս այլ տերմինի սահմանում:

Ներքին կոդ

Փաթեթավորեք կոդի ներդիր հատվածները <code>. Համոզվեք, որ խուսափեք HTML անկյունային փակագծերից:

Օրինակ, <section>պետք է փաթաթված լինի որպես ներդիր:

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Կոդի բլոկներ

Օգտագործեք <pre>s կոդի բազմաթիվ տողերի համար: Եվս մեկ անգամ, համոզվեք, որ կոդում խուսափեք ցանկացած անկյունային փակագծերից՝ ճիշտ մատուցման համար: Տարրը <pre>վերակայվում է՝ հեռացնելու և դրա համար միավորներ margin-topօգտագործելու համար :remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Փոփոխականներ

Փոփոխականները նշելու համար օգտագործեք <var>պիտակը:

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Օգտագործողի մուտքագրում

Օգտագործեք <kbd>ստեղնաշարի միջոցով մուտքագրվող մուտքը նշելու համար:

Գրացուցակները փոխելու համար մուտքագրեք cdգրացուցակի անվանումը:
Պարամետրերը խմբագրելու համար սեղմեք ctrl + ,

html

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>

Նմուշի ելք

Ծրագրից նմուշի արդյունքը նշելու համար օգտագործեք <samp>պիտակը:

Այս տեքստը նախատեսված է որպես համակարգչային ծրագրի նմուշի արդյունք:

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Սեղաններ

Սեղանները փոքր-ինչ հարմարեցված են ոճի <caption>s-ին, փլուզվող եզրագծերին և ապահովելու հետևողականությունը text-alignամբողջում: Լրացուցիչ փոփոխություններ եզրագծերի, ներդիրների և այլնի համար գալիս են դասի .tableհետ :

Սա աղյուսակի օրինակ է, և սա նրա վերնագիրն է՝ նկարագրելու բովանդակությունը:
Աղյուսակի վերնագիր	Աղյուսակի վերնագիր	Աղյուսակի վերնագիր	Աղյուսակի վերնագիր
Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ
Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ
Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ	Սեղանի բջիջ

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Ձևաթղթեր

Տարբեր ձևի տարրեր վերագործարկվել են ավելի պարզ հիմնական ոճերի համար: Ահա ամենաուշագրավ փոփոխություններից մի քանիսը.

<fieldset>ները չունեն եզրագծեր, լիցք կամ լուսանցք, այնպես որ դրանք կարող են հեշտությամբ օգտագործվել որպես առանձին մուտքերի կամ մուտքերի խմբերի փաթաթիչներ:
<legend>s-ը, ինչպես դաշտերի հավաքածուները, նույնպես վերափոխվել են՝ ցուցադրվելու որպես տեսակի վերնագիր:
<label>s-ը սահմանվել է display: inline-block, որպեսզի թույլատրվի marginկիրառել:
<input>s, <select>s, <textarea>s և <button>s-երը հիմնականում հասցեագրված են Normalize-ի կողմից, սակայն Reboot-ը նույնպես հեռացնում է դրանք marginև սահմանում line-height: inherit:
<textarea>s-ը փոփոխվում է, որպեսզի չափափոխվի միայն ուղղահայաց, քանի որ հորիզոնական չափափոխումը հաճախ «խախտում է» էջի դասավորությունը:
<button>s և <input>կոճակի տարրերը ունեն cursor: pointerերբ :not(:disabled).

Այս փոփոխությունները և ավելին ներկայացված են ստորև:

Օրինակ լեգենդ

Օրինակ մուտքագրում

փոստի օրինակ

Հեռախոսի օրինակ

Օրինակ url

Օրինակ համարը

Օրինակի որոնում

Օրինակի տիրույթ

Ֆայլի մուտքագրման օրինակ

Օրինակ ընտրեք

Նշեք այս վանդակը

Տարբերակ առաջին սա և այն է Երկրորդ տարբերակն այլ բան է, որը նույնպես չափազանց երկար է ցուցադրելու այս շքեղ ձևերի վերահսկման փաթաթումը: Երրորդ տարբերակն անջատված է

Տեքստային տարածքի օրինակ

Օրինակ ամսաթիվ

Օրինակ ժամանակ

Օրինակ գաղտնաբառ

Օրինակ datetime-local

Օրինակ շաբաթ

Օրինակ ամիս

Օրինակ գույն

Օրինակ ելք 100

Ամսաթվի և գույնի մուտքագրման աջակցություն

Նկատի ունեցեք, որ ամսաթվի մուտքագրումն ամբողջությամբ չի աջակցվում բոլոր բրաուզերների կողմից, մասնավորապես՝ Safari-ի կողմից:

Ցուցիչներ կոճակների վրա

Reboot-ը ներառում է role="button"լռելյայն կուրսորը փոխելու բարելավում pointer: Ավելացրեք այս հատկանիշը տարրերին, որպեսզի օգնեք նշել, որ տարրերը ինտերակտիվ են: Այս դերը անհրաժեշտ չէ <button>տարրերի համար, որոնք ստանում են իրենց սեփական cursorփոփոխությունը:

Ոչ կոճակային տարրի կոճակ

html

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

Տարբեր տարրեր

Հասցե

Տարրը <address>թարմացվում է զննարկիչի լռելյայն վերակայելու font-styleհամար italic: նույնպես այժմ ժառանգված է, և ավելացվել է։ s-ը մոտակա նախնիների (կամ աշխատանքի մի ամբողջ մասի) կոնտակտային տվյալներ ներկայացնելու համար է: Պահպանել ֆորմատավորումը՝ տողերը վերջացնելով .normalline-heightmargin-bottom: 1rem<address><br>

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

Ամբողջական անուն
[email protected]

Արգելափակման մեջբերում

Բլոկ չակերտների լռելյայն marginէ 1em 40px, ուստի մենք այն վերակայում ենք 0 0 1remայլ տարրերի հետ ավելի համապատասխան բանի համար:

Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:

Աղբյուրի վերնագրում հայտնի մեկը

Ներքին տարրեր

Տարրը <abbr>ստանում է հիմնական ոճավորում, որպեսզի այն առանձնանա պարբերության տեքստի մեջ:

HTML հապավումը տարր .

Ամփոփում

Ամփոփման համար լռելյայն cursorէ text, ուստի մենք այն վերակայում ենք pointer՝ փոխանցելու համար, որ տարրի հետ կարելի է փոխազդել՝ սեղմելով դրա վրա:

Որոշ մանրամասներ

Մանրամասների մասին լրացուցիչ տեղեկություններ:

Նույնիսկ ավելի մանրամասն

Ահա ավելի շատ մանրամասներ մանրամասների մասին:

HTML5 `[hidden]`հատկանիշ

HTML5-ն ավելացնում է նոր գլոբալ հատկանիշ՝ անունով[hidden] , որը ոճավորված է որպես display: noneլռելյայն: Գաղափար վերցնելով PureCSS- ից ՝ մենք բարելավում ենք այս լռելյայնությունը [hidden] { display: none !important; }՝ օգնելով կանխել դրա displayպատահական անտեսումը:

<input type="text" hidden>

jQuery անհամատեղելիություն

[hidden]համատեղելի չէ jQuery-ի $(...).hide()և $(...).show()մեթոդների հետ: Հետևաբար, մենք ներկայումս հատկապես չենք հավանություն տալիս տարրերի [hidden]կառավարման այլ մեթոդներին :display

Պարզապես մի տարրի տեսանելիությունը փոխելու համար, ինչը նշանակում է, որ displayայն փոփոխված չէ, և տարրը դեռ կարող է ազդել փաստաթղթի հոսքի վրա, փոխարենը.invisible օգտագործեք դասը :

Վերագործարկեք

Մոտեցում

CSS փոփոխականներ

Էջի լռելյայն

Մայրենի տառատեսակների կույտ

Վերնագրեր և պարբերություններ

Հորիզոնական կանոններ

Ցուցակներ

Ներքին կոդ

Կոդի բլոկներ

Փոփոխականներ

Օգտագործողի մուտքագրում

Նմուշի ելք

Սեղաններ

Ձևաթղթեր

Ամսաթվի և գույնի մուտքագրման աջակցություն

Ցուցիչներ կոճակների վրա

Տարբեր տարրեր

Հասցե

Արգելափակման մեջբերում

Ներքին տարրեր

Ամփոփում

HTML5 [hidden]հատկանիշ

jQuery անհամատեղելիություն

HTML5 `[hidden]`հատկանիշ