Source

Кайра жүктөө

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

мамиле

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

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

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

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

<html>жана <body>элементтери барак боюнча жакшыраак демейки параметрлерди камсыз кылуу үчүн жаңыртылды . Тагыраак:

box-sizingглобалдык түрдө ар бир элементке орнотулган, анын ичинде жана *::before, *::afterүчүн border-box. Бул элементтин жарыяланган туурасы толтуруу же чекке байланыштуу эч качан ашпасын камсыздайт.
Эч кандай база font-sizeжарыяланган <html>эмес, бирок 16pxболжолдонот (серепчинин демейки). Колдонуучунун каалоолорун урматтоо жана жеткиликтүү мамилени камсыз кылуу менен бирге медиа сурамдары аркылуу жеңил жооп берүүчү типти масштабдоо үчүн font-size: 1remколдонулат .<body>
Ошондой <body>эле глобалдык font-family, line-heightжана text-align. Бул кийинчерээк шрифттин дал келбестигин алдын алуу үчүн кээ бир форма элементтери тарабынан мураска алынат.
Коопсуздук үчүн , демейки <body>боюнча жарыяланды .background-color#fff

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

Демейки веб шрифттери (Helvetica Neue, Helvetica жана Arial) Bootstrap 4'те түшүрүлүп, ар бир түзмөктө жана ОСте текстти оптималдуу көрсөтүү үчүн "туган шрифт стекине" алмаштырылган. Бул Smashing Magazine макаласында жергиликтүү шрифт стектери жөнүндө көбүрөөк оку .

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

Бул 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 аталышы

Тизмелер

Бардык тизмелер— <ul>, <ol>, жана <dl>— margin-topөчүрүлгөн жана margin-bottom: 1rem. Кыстарылган тизмелерде жок margin-bottom.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
претиум nisl aliquet жылы Facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Анеан сит амет эрат нунц
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
претиум nisl aliquet жылы Facilisis
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Анеан сит амет эрат нунц
Eget porttitor lorem

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

Сүрөттөмө тизмелери: Сүрөттөмө тизмеси терминдерди аныктоо үчүн идеалдуу.
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.

Алдын ала форматталган текст

<pre>Элемент аны алып салуу жана анын бирдиктерин margin-topколдонуу үчүн баштапкы абалга келтирилет .remmargin-bottom

.example-element {
  margin-bottom: 1rem;
}

Таблицалар

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

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

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

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

Мисал тандоо

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

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

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

Мисал датасы

Мисал убакыт

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

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

Дарек

<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башка элементтерге ылайыктуураак нерсеге кайтарабыз.

Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante.

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

Inline элементтер

Элемент абзац текстинин <abbr>арасында өзгөчөлөнүп туруу үчүн негизги стилди алат.

Nulla attr vitae elit libero, a pharetra augue.

Жыйынтык

Корутунду боюнча демейки cursorболуп саналат text, ошондуктан биз pointerаны чыкылдатуу менен элемент менен өз ара аракеттенүүгө болорун билдирүү үчүн аны баштапкы абалга келтиребиз.

Кээ бир деталдар

чоо-жайы тууралуу көбүрөөк маалымат.

Андан да кененирээк

Бул жерде майда-чүйдөсүнө чейин дагы көп маалымат бар.

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

HTML5 жаңы глобалдык атрибутун[hidden] кошот , ал display: noneдемейки боюнча стилделет. PureCSS'тен идеяны алып , биз анын кокустан жокко чыгарылышын [hidden] { display: none !important; }алдын алуу үчүн бул демейкиге жакшыртабыз. displayIE10 [hidden]тарабынан колдоого алынбаса да, биздин CSSдеги ачык декларация бул көйгөйдү чечет.

<input type="text" hidden>

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

[hidden]$(...).hide()jQuery жана $(...).show()методдору менен шайкеш келбейт . Ошондуктан, биз учурда элементтерди [hidden]башкаруунун башка ыкмаларын өзгөчө жактырбайбыз.display

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