Яңарту

Яңарту, бер файлдагы элементларга хас CSS үзгәртүләр җыелмасы, зәвыклы, эзлекле һәм гади нигезне тәэмин итү өчен Bootstrap кикстарт.

Бу биттә

Алым

Ребуот Нормальләштерүгә нигезләнә, күп HTML элементларын элемент селекторларын кулланып берникадәр фикерле стильләр белән тәэмин итә. Өстәмә стиллау класслар белән генә башкарыла. Мәсәлән, без <table>гадирәк база өчен кайбер стильләрне яңадан башлыйбыз, соңрак тәэмин итәбез .table, .table-borderedһәм башкалар.

Менә безнең күрсәтмәләр һәм Reboot'та нәрсәне кире кагарга икәнен сайлау өчен сәбәпләр:

Зурайтылган компонент аралыгы өчен rems урынына s куллану өчен кайбер браузерның килешү кыйммәтләрен яңартыгыз .em
Сак бул margin-top. Көтелмәгән нәтиҗәләр китереп, вертикаль кырлар җимерелергә мөмкин. Иң мөһиме, бер юнәлеш margin- гади акыл моделе.
Deviceайланма зурлыкларын җиңеләйтү өчен блок элементлары rems өчен margins кулланырга тиеш.
Бәйләнешле мөлкәт декларацияләрен fontминимумга кадәр саклагыз, inheritмөмкин булганда кулланыгыз.

CSS үзгәрүчәннәре

V5.2.0 өстәлде

V5.1.1 ярдәмендә без үзебезнең кирәкле CS- @importны бөтен CSS туплаулары буенча стандартлаштырдык (шул исәптән bootstrap.css, bootstrap-reboot.cssһәм bootstrap-grid.css) _root.scss. Бу :rootбунда күпме кулланылганына карамастан, барлык тупламаларга дәрәҗә CSS үзгәрүчәннәрен өсти. Ахырда, Bootstrap 5 тагын да күбрәк CSS үзгәрүчәннәрен күрүне дәвам итәчәк , Sass-ны һәрвакыт компиляцияләү кирәксез реаль-реальләштерүне тәэмин итү өчен. Безнең алым - чыганак Sass үзгәрүләрен алу һәм аларны CSS үзгәрүчәннәренә әверелдерү. Шул рәвешле, CSS үзгәрүчәннәрен кулланмасагыз да, сездә Сассның бөтен көче бар. Бу әле дә дәвам итә һәм тулысынча тормышка ашыру өчен вакыт кирәк булачак.

Мәсәлән, :rootгомуми <body>стильләр өчен бу CSS үзгәрешләрен карагыз:

  @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һәм . Бу элементның игълан ителгән киңлеге паддер яки чик аркасында беркайчан да артмаска тиеш. *::afterborder-box
- Бер база font-sizeда игълан ителми <html>, ләкин 16pxфаразлана (браузер килешү). кулланучының өстенлекләрен хөрмәт иткәндә һәм уңайлырак карашны тәэмин иткәндә, массакүләм мәгълүмат чаралары аша җиңел җаваплы тип-масштаб өчен font-size: 1remкулланыла . <body>Бу браузерның үзгәрүчесен үзгәртеп кире кагылырга мөмкин $font-size-root.
Шулай ук <body>глобаль font-family,, font-weightһәм . Бу шрифтның туры килмәвен булдырмас өчен соңрак кайбер форма элементлары белән мирас итеп алына.line-heightcolor
Куркынычсызлык өчен <body>, игълан ителгән background-color, дефолт #fff.

Туган шрифт

Bootstrap һәр җайланмада һәм ОСта оптималь текст күрсәтү өчен "туган шрифт стек" яки "система шрифты" куллана. Бу система шрифтлары бүгенге җайланмаларны истә тотып, экраннарда яхшырак күрсәтү, үзгәртелгән шрифт ярдәме һ.б. Бу шрифт журнал мәкаләсендә туган шрифтлар турында күбрәк укыгыз .

$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;

Игътибар итегез, шрифт стакасында эмоджи шрифтлар булганлыктан, күп символ / дингбат icникод символлары күп төсле пиктограф рәвешендә күрсәтеләчәк. colorАларның тышкы кыяфәте браузерда / платформаның туган эмоджи шрифтында кулланылган стильгә карап үзгәрәчәк, һәм алар CSS стильләренә тәэсир итмәячәкләр .

Бу бөтен Bootstrap буенча автоматик рәвештә мирас итеп font-familyалынган . <body>Глобальне күчерү өчен , Bootstrap- ны font-familyяңарту һәм компиляцияләү.$font-family-base

Башлыклар һәм абзацлар

Барлык баш элементлары, мәсәлән, һәм аларны <h1>бетерү <p>өчен яңадан урнаштыралар margin-top. Easyиңел аралар өчен рубрикалар margin-bottom: .5remөстәлде .margin-bottom: 1rem

Башлам	Мисал
`<h1></h1>`	h1. Ботстрап башы
`<h2></h2>`	h2. Ботстрап башы
`<h3></h3>`	h3. Ботстрап башы
`<h4></h4>`	h4. Ботстрап башы
`<h5></h5>`	h5. Ботстрап башы
`<h6></h6>`	h6. Ботстрап башы

Горизонталь кагыйдәләр

<hr>Элемент гадиләштерелгән . Браузерның дефолтларына охшаган, <hr>алар стилизацияләнгән border-top, дефолтка ия , һәм алар аша opacity: .25автоматик рәвештә мирас итеп алына , шул исәптән ата-аналар аша куелган вакытта. Аларны текст, чик, караңгылык ярдәмендә үзгәртеп була.border-colorcolorcolor

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>

Барлык исемлекләр дә иң югары маржаны бетерделәр
Theirәм аларның аскы маржасы нормальләште
Ояланган исемлекләрнең аскы маржасы юк
- Шулай итеп алар тагын да тышкы кыяфәткә ия
- Бигрәк тә күбрәк исемлек пунктлары ияргәндә
Сул япма шулай ук яңадан урнаштырылган

Менә заказланган исемлек
Берничә исемлек белән
Аның гомуми кыяфәте бер үк
Элекке тәртипсез исемлек буларак

Гади стильләштерү, ачык иерархия һәм яхшырак аралар өчен тасвирлау исемлекләре яңартылды margin. <dd>s яңадан margin-leftурнаштыру 0һәм өстәү margin-bottom: .5rem. <dt>лар калын .

Тасвирлау исемлекләре: Тасвирлау исемлеге терминнарны билгеләү өчен бик яхшы.
Термин: Термин өчен аңлатма.; Шул ук термин өчен икенче билгеләмә.
Тагын бер термин: Бу бүтән термин өчен аңлатма.

Эчтәлек коды

Кодның сызыкларын урыгыз <code>. HTML почмаклы кашыклардан качыгыз.

Мисал өчен, <section>сызык итеп төрергә кирәк.

html

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

Код блоклары

<pre>Берничә код өчен s кулланыгыз . Тагын бер тапкыр, дөрес күрсәтү өчен кодтагы теләсә нинди почмактан сакланыгыз. <pre>Элемент аны бетерү margin-topһәм аның өчен remберәмлекләр куллану өчен яңадан урнаштырылган margin-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>

Variзгәрешләр

Variзгәрешләрне күрсәтү өчен <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>

Ampleрнәк чыгару

Программадан үрнәк күрсәтүне күрсәтү өчен <samp>тегны кулланыгыз.

Бу текст компьютер программасының үрнәге булып каралачак.

html

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

Таблицалар

Таблицалар стиль сларына бераз көйләнгән, <caption>чикләрне җимерәләр, эзлеклелекне тәэмин итәләр 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>лар, кыр кырлары кебек, шулай ук төрләр исеме итеп күрсәтелү өчен яңадан эшкәртелде.
<label>лар кулланырга display: inline-blockрөхсәт marginитәләр.
<input>s, <select>s, <textarea>s, <button>s күбесенчә Normalize белән мөрәҗәгать итәләр, ләкин Reboot аларның marginһәм комплектларын line-height: inheritда бетерә.
<textarea>лар вертикаль рәвештә үзгәртелергә мөмкин, чөнки горизонталь размер еш кына "өзелә".
<button>лар һәм <input>төймә элементлары cursor: pointerкайчан :not(:disabled).

Бу үзгәрешләр һәм башкалар түбәндә күрсәтелгән.

Legendрнәк легенда

Мисал кертү

Мисал электрон почтасы

Мисал телефоны

Мисал url

Мисал саны

Мисал эзләү

Мисал диапазоны

Мисал файл кертү

Мисал сайлау

Бу пунктны тикшерегез

Беренче вариант - бу һәм теге Икенче вариант - бу матур форма контроллерының төрүен күрсәтү өчен супер озын нәрсә. Өченче вариант инвалид

Текстария үрнәге

Мисал датасы

Мисал вакыты

Мисал серсүзе

Мисал вакыты-локаль

Мисал атнасы

Мисал ай

Мисал төсе

Мисал чыгару 100

Дата һәм төс кертү ярдәме

Онытмагыз, дата керемнәре барлык браузерлар белән тулысынча хупланмый , ягъни Safari.

Кнопкадагы күрсәткечләр

Ребутка role="button"курсорны үзгәртү өчен өстәмә кертә pointer. Бу элементны элементларга интерактив булуын күрсәтергә ярдәм итегез. Бу роль <button>үз cursorүзгәрүләрен ала торган элементлар өчен кирәк түгел.

Кнопка булмаган элемент төймәсе

html

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

Төрле элементлар

Адрес

Элемент браузерның <address>килешенү урынына font-styleяңартылды . хәзер дә мирас итеп алынган, өстәлгән. лар иң якын бабалар өчен контакт мәгълүматларын тәкъдим итү өчен (яки бөтен эш органы). Сызыкларны тәмамлап форматлауны саклагыз .italicnormalline-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] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.

Яңарту

Алым

CSS үзгәрүчәннәре

Битнең килешүләре

Туган шрифт

Башлыклар һәм абзацлар

Горизонталь кагыйдәләр

Исемлекләр

Эчтәлек коды

Код блоклары

Variзгәрешләр

Кулланучы кертү

Ampleрнәк чыгару

Таблицалар

Формалар

Дата һәм төс кертү ярдәме

Кнопкадагы күрсәткечләр

Төрле элементлар

Адрес

Блоккот

Электр элементлары

Аннотация

HTML5 [hidden]атрибуты

jQuery туры килмәү

HTML5 `[hidden]`атрибуты