in English

Яңарту

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

Бу биттә

Алым

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

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

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

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

V5.1.1 өстәлде

V5.1.1 ярдәмендә без үзебезнең @importбарлык CSS туплаулары буенча стандартлаштырдык (шул исәптән bootstrap.css, bootstrap-reboot.cssһәм bootstrap-grid.cssкертү өчен _root.scss. :rootвакыт узу белән өстәлгән CSS үзгәрүләрен карагыз.

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

Яхшырак бит киңлегендә тәэмин итү <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,
  // 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;

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

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

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

Bootstrap 5 җитлеккән саен, CSS үзгәрүчәннәре белән тагын да күбрәк стильләр төзеләчәк, Sass-ны һәрвакыт компиляцияләү кирәксез, реаль-вакытны үзләштерү өчен. Безнең алым - чыганак Sass үзгәрүләрен алу һәм аларны CSS үзгәрүчәннәренә әверелдерү. Шул рәвешле, CSS үзгәрүчәннәрен кулланмасагыз да, сездә Сассның бөтен көче бар. Бу әле дә дәвам итә һәм тулысынча тормышка ашыру өчен вакыт кирәк булачак.

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

  @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};

Гамәлдә, бу үзгәрүләр Reboot'та шулай кулланыла:

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
}

Сезгә реаль вакыттагы үзенчәлекләр ясарга мөмкинлек бирә:

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

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

Барлык баш элементлары, мәсәлән, һәм аларны <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. Ботстрап башы

Исемлекләр

Барлык исемлекләр <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>сызык итеп төрергә кирәк.

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>

<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

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

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

<kbd>Гадәттә клавиатура аша кертелгән керүне күрсәтү өчен кулланыгыз .

Белешмәлекне күчерү cdөчен, каталогның исемен языгыз.
Көйләүләрне үзгәртү өчен басыгыз 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>

Ampleрнәк чыгару

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

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

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

Таблицалар

Таблицалар стиль сларына бераз көйләнгән, <caption>чикләрне җимерәләр, эзлеклелекне тәэмин итәләр text-align. Чикләр, паддерлар һәм башкалар өчен өстәмә үзгәрешләр класс белән килә.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үзгәрүләрен ала торган элементлар өчен кирәк түгел.

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

<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]$(...).hide()jQuery һәм $(...).show()ысуллары белән туры килми . Шуңа күрә, без хәзерге вакытта элементлар [hidden]белән идарә итүнең башка техникасын хупламыйбыз.display

Элементның күренүчәнлеген үзгәртү өчен, displayул үзгәртелмәгән һәм элемент әле дә документ агымына тәэсир итә ала, аның урынына .invisibleкласс кулланыгыз .

Яңарту

Алым

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

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

Туган шрифт

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

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

Исемлекләр

Эчтәлек коды

Код блоклары

Variзгәрешләр

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

Ampleрнәк чыгару

Таблицалар

Формалар

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

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

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

Адрес

Блоккот

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

Аннотация

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

jQuery туры килмәү

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