Кайра жүктөө

Reboot, бир файлдагы элементтерге тиешелүү CSS өзгөртүүлөрүнүн жыйындысы, жарашыктуу, ырааттуу жана жөнөкөй базаны түзүү үчүн Bootstrapти баштаңыз.

Бул бетте

мамиле

Кайра жүктөө Нормалдаштыруунун негизинде түзүлүп, көптөгөн HTML элементтерин бир гана элемент тандагычтарды колдонуу менен бир аз ойдогудай стилдер менен камсыз кылат. Кошумча стилдөө класстар менен гана жүргүзүлөт. Мисалы, биз кээ бир <table>стилдерди жөнөкөйлөштүрөбүз жана кийинчерээк .table, .table-bordered, жана башкалар менен камсыз кылабыз.

Бул жерде биздин көрсөтмөлөр жана кайра жүктөөдө эмнени жокко чыгарууну тандоонун себептери бар:

rems ордуна s колдонуу үчүн кээ бир браузердин демейки маанилерин жаңыртыңыз em.
кач margin-top. Вертикалдык чектер кыйрап, күтүлбөгөн натыйжаларды алып келиши мүмкүн. Андан да маанилүүсү, бир багыты marginжөнөкөй психикалык модели болуп саналат.
Түзмөктүн өлчөмдөрү боюнча оңой масштабдоо үчүн блок элементтери rems үчүн margins колдонушу керек.
Мүмкүн болушунча fontколдонуу менен -related касиеттеринин декларацияларын минималдуу деңгээлде сактаңыз .inherit

CSS өзгөрмөлөрү

v5.2.0 кошулган

v5.1.1 менен, биз @importбардык CSS таңгактарыбызда (анын ичинде bootstrap.css, bootstrap-reboot.css, жана bootstrap-grid.css) талап кылынган нерселерди стандартташтырдык _root.scss. :rootБул топтомдо канчасы колдонулганына карабастан, бардык таңгактарга деңгээл CSS өзгөрмөлөрүн кошот . Акыр-аягы, Bootstrap 5 убакыттын өтүшү менен кошумча CSS өзгөрмөлөрүн көрүүнү улантат, бул Sass'ты ар дайым кайра компиляциялоонун зарылдыгы жок реалдуу убакытта ыңгайлаштырууну камсыз кылуу. Биздин мамилебиз булак Sass өзгөрмөлөрүн алып, аларды CSS өзгөрмөлөрүнө айландыруу. Ошентип, сиз CSS өзгөрмөлөрүн колдонбосоңуз да, сизде Sassтын бардык күчү бар. Бул дагы эле жүрүп жатат жана толук ишке ашыруу үчүн убакыт талап кылынат.

Мисалы, :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};

Иш жүзүндө, бул өзгөрмөлөр кайра жүктөөдө төмөнкүдөй колдонулат:

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

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

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

Рубрикалар жана абзацтар

Бардык аталыш элементтери, мис., <h1>-жана <p>аларды margin-topалып салуу үчүн баштапкы абалга келтирилет. Жөнөкөй интервал үчүн аталыштар жана margin-bottom: .5remабзацтар кошулду .margin-bottom: 1rem

рубрика	Мисал
`<h1></h1>`	h1. Bootstrap аталышы
`<h2></h2>`	h2. Bootstrap аталышы
`<h3></h3>`	h3. Bootstrap аталышы
`<h4></h4>`	h4. Bootstrap аталышы
`<h5></h5>`	h5. Bootstrap аталышы
`<h6></h6>`	h6. Bootstrap аталышы

Горизонталдык эрежелер

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

Бардык тизмелердин үстүнкү маржалары алынып салынган
Жана алардын төмөнкү маржа нормалдашты
Кыстарылган тизмелердин ылдыйкы чеги жок
- Ошентип, алар бир калыпта көрүнүшкө ээ
- Айрыкча, андан кийин көбүрөөк тизме элементтери
Сол толтургуч да баштапкы абалга келтирилди

Бул жерде иреттелген тизме
Бир нече тизме элементтери менен
Анын жалпы көрүнүшү бирдей
Мурунку иретсиз тизме катары

Жөнөкөй стилдөө, так иерархия жана жакшыраак аралыктар үчүн, сүрөттөмө тизмелери жаңыртылды margin. <dd>кайра margin-leftкоюу 0жана кошуу margin-bottom: .5rem. <dt>лар калың жазылган .

Сүрөттөмө тизмелери: Сүрөттөмө тизмеси терминдерди аныктоо үчүн идеалдуу.
Мөөнөтү: Термин үчүн аныктама.; Ошол эле термин үчүн экинчи аныктама.
Башка термин: Бул башка термин үчүн аныктама.

Inline код

Коддун саптык үзүндүлөрүн менен ороп алыңыз <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>, чек араларды жыйыштырып, 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>лар колдонууга display: inline-blockмүмкүндүк берүү үчүн коюлган margin.
<input>s, <select>s, <textarea>s жана <button>s көбүнчө Нормалдаштыруу тарабынан чечилет, бирок Reboot аларды marginжана топтомдорун line-height: inheritда жок кылат.
<textarea>лар вертикалдуу түрдө гана өзгөртүлөт, анткени горизонталдуу өлчөмдөрүн өзгөртүү көбүнчө беттин макетін “бузат”.
<button>s жана <input>баскыч элементтеринде cursor: pointerкачан бар :not(:disabled).

Бул өзгөртүүлөр жана башкалар төмөндө көрсөтүлгөн.

Мисал легенда

Мисал киргизүү

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

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

Мисал url

Мисал саны

Мисал издөө

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

Мисал файл киргизүү

Мисал тандоо

Бул кутучаны белгилеңиз

Биринчи вариант бул жана тигил Экинчи вариант - бул кооз форманы башкаруу элементтеринин оролгондугун көрсөтүү үчүн дагы бир нерсе. Үчүнчү вариант өчүрүлгөн

Мисал текст аймагы

Мисал датасы

Мисал убакыт

Мисал сырсөз

Мисал datetime-локалдык

Мисал жума

Мисал ай

Мисал түс

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

Дата жана түс киргизүү колдоо

Датаны киргизүү бардык браузерлерде, тактап айтканда Safari тарабынан толук колдоого алынбагандыгын унутпаңыз.

Баскычтардагы көрсөткүчтөр

role="button"Кайра жүктөө демейки курсорду өзгөртүү үчүн өркүндөтүүнү камтыйт pointer. Элементтер интерактивдүү экенин көрсөтүү үчүн бул атрибутту элементтерге кошуңуз. Бул роль <button>өз cursorөзгөрүүсүнө ээ болгон элементтер үчүн зарыл эмес.

Баскыч эмес элемент баскычы

html

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

Ар кандай элементтер

Дарек

<address>Элемент серепчинин демейки абалынан font-styleбаштап italicжаңыртылган . азыр да тукум кууп өткөн жана кошулган. лар жакынкы ата-баба (же бүтүндөй бир бүтүм) үчүн байланыш маалыматын көрсөтүү үчүн. саптарды аяктоо менен форматтоону сактаңыз .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башка элементтерге ылайыктуураак нерсеге кайтарабыз.

Блок цитата элементинде камтылган белгилүү цитата.

Булак аталышында белгилүү бирөө

Inline элементтер

Элемент абзац текстинин <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 өзгөрмөлөрү

Барактын демейки параметрлери

Түпкү шрифт стек

Рубрикалар жана абзацтар

Горизонталдык эрежелер

Тизмелер

Inline код

Код блоктору

Өзгөрмөлөр

Колдонуучунун киргизүүсү

Үлгү чыгаруу

Таблицалар

Формалар

Дата жана түс киргизүү колдоо

Баскычтардагы көрсөткүчтөр

Ар кандай элементтер

Дарек

Бөгөттөө модулу

Inline элементтер

Жыйынтык

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

jQuery шайкешсиздиги

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