Кайра жүктөө
Reboot, бир файлдагы элементтерге мүнөздүү CSS өзгөртүүлөрдүн жыйындысы, жарашыктуу, ырааттуу жана жөнөкөй базаны түзүү үчүн Bootstrapти баштаңыз.
мамиле
Кайра жүктөө Нормалдаштыруунун негизинде түзүлүп, көптөгөн HTML элементтерин бир гана элемент тандагычтарды колдонуу менен бир аз ойдогудай стилдер менен камсыз кылат. Кошумча стилдөө класстар менен гана жүргүзүлөт. Мисалы, биз кээ бир <table>
стилдерди жөнөкөйлөштүрөбүз жана кийинчерээк .table
, .table-bordered
, жана башкалар менен камсыз кылабыз.
Бул жерде биздин көрсөтмөлөр жана кайра жүктөөдө эмнени жокко чыгарууну тандоонун себептери бар:
rem
s ордуна s колдонуу үчүн кээ бир браузердин демейки маанилерин жаңыртыңызem
.- кач
margin-top
. Вертикалдык чектер кыйрап, күтүлбөгөн натыйжаларды алып келиши мүмкүн. Андан да маанилүүсү, бир багытыmargin
жөнөкөй психикалык модели болуп саналат. - Түзмөктүн өлчөмдөрү боюнча оңой масштабдоо үчүн блок элементтери
rem
s үчүнmargin
s колдонушу керек. - Мүмкүн болушунча
font
колдонуу менен -related касиеттеринин декларацияларын минималдуу деңгээлде сактаңыз .inherit
CSS өзгөрмөлөрү
v5.1.1де кошулган
v5.1.1 менен, биз @import
бардык CSS таңгактарыбызда талап кылынган s стандартташтырдык (анын ичинде bootstrap.css
, bootstrap-reboot.css
, жана bootstrap-grid.css
камтуу _root.scss
. Бул таңгакта канчасы колдонулганына карабастан, бардык таңгактарга деңгээл CSS өзгөрмөлөрүн кошот :root
. Акыр-аягы, Bootstrap 5 иштей берет. убакыттын өтүшү менен кошулган көбүрөөк CSS өзгөрмөлөрүн көрүү.
Барактын демейки параметрлери
<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,
// 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;
Шрифттер стек эмодзи шрифттерин камтыгандыктан, көптөгөн жалпы символ/дингбат юникод символдору көп түстүү пиктографтар катары көрсөтүлөрүн эске алыңыз. Алардын көрүнүшү браузердин/платформанын түпнуска эмодзи шрифтинде колдонулган стилге жараша өзгөрүп турат жана аларга эч кандай CSS color
стилдери таасир этпейт.
Бул Bootstrap боюнча глобалдуу түрдө автоматтык түрдө мураска алынат жана font-family
колдонулат . <body>
Глобалдык которуштуруу үчүн , Bootstrap font-family
жаңыртыңыз жана кайра компиляциялаңыз.$font-family-base
CSS өзгөрмөлөрү
Bootstrap 5 жетилген сайын, Sass'ты ар дайым кайра компиляциялоонун зарылдыгы жок реалдуу убакытта көбүрөөк ыңгайлаштыруу үчүн каражат катары CSS өзгөрмөлөрү менен көбүрөөк стилдер түзүлөт . Биздин мамилебиз булак Sass өзгөрмөлөрүн алып, аларды CSS өзгөрмөлөрүнө айландыруу. Ошентип, сиз CSS өзгөрмөлөрүн колдонбосоңуз да, сизде Sassтын бардык күчү бар. Бул дагы эле жүрүп жатат жана толук ишке ашыруу үчүн убакыт талап кылынат.
Мисалы, :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};
Иш жүзүндө, бул өзгөрмөлөр кайра жүктөөдө төмөнкүдөй колдонулат:
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
алып салуу үчүн баштапкы абалга келтирилет. Жөнөкөй интервал үчүн аталыштар жана 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
. Биз ошондой эле күйгүзүү жана элементтерди баштапкы абалга padding-left
келтирдик .<ul>
<ol>
- Бардык тизмелердин үстүнкү маржалары алынып салынган
- Жана алардын төмөнкү маржа нормалдашты
- Кыстарылган тизмелердин ылдыйкы чеги жок
- Ошентип, алар бир калыпта көрүнүшкө ээ
- Айрыкча, андан кийин көбүрөөк тизме элементтери
- Сол толтургуч да баштапкы абалга келтирилди
- Бул жерде иреттелген тизме
- Бир нече тизме элементтери менен
- Анын жалпы көрүнүшү бирдей
- Мурунку иретсиз тизме катары
Жөнөкөй стилдөө, так иерархия жана жакшыраак аралыктар үчүн, сүрөттөмө тизмелери жаңыртылды margin
. <dd>
кайра margin-left
коюу 0
жана кошуу margin-bottom: .5rem
. <dt>
лар калың жазылган .
- Сүрөттөмө тизмелери
- Сүрөттөмө тизмеси терминдерди аныктоо үчүн идеалдуу.
- Мөөнөтү
- Термин үчүн аныктама.
- Ошол эле терминдин экинчи аныктамасы.
- Башка термин
- Бул башка термин үчүн аныктама.
Inline код
Коддун саптык үзүндүлөрүн менен ороп алыңыз <code>
. HTML бурчтуу кашаалардан качууну унутпаңыз.
<section>
сап катары оролушу керек.
For example, <code><section></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><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Өзгөрмөлөр
Өзгөрмөлөрдү көрсөтүү үчүн <var>
тегди колдонуңуз.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Колдонуучу киргизүү
<kbd>
Адатта клавиатура аркылуу киргизилүүчү киргизүүнү көрсөтүү үчүн колдонуңуз .
Жөндөөлөрдү түзөтүү үчүн басыңыз 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>
Үлгү чыгаруу
Программанын үлгүсүн көрсөтүү үчүн <samp>
тегди колдонуңуз.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Таблицалар
Таблицалар стилге бир аз туураланган <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)
.
Бул өзгөртүүлөр жана башкалар төмөндө көрсөтүлгөн.
Дата жана түс киргизүү колдоо
Датаны киргизүү бардык браузерлер, тактап айтканда Safari тарабынан толук колдоого алынбагандыгын унутпаңыз.
Баскычтардагы көрсөткүчтөр
role="button"
Кайра жүктөө демейки курсорду өзгөртүү үчүн өркүндөтүүнү камтыйт pointer
. Элементтер интерактивдүү экенин көрсөтүү үчүн бул атрибутту элементтерге кошуңуз. Бул роль <button>
өз cursor
өзгөрүүсүнө ээ болгон элементтер үчүн зарыл эмес.
<span role="button" tabindex="0">Non-button element button</span>
Ар кандай элементтер
Дарек
<address>
Элемент серепчинин демейки абалынан font-style
баштап italic
жаңыртылган . азыр да тукум кууп өткөн жана кошулган. лар жакынкы ата-баба (же бүтүндөй бир бүтүм) үчүн байланыш маалыматын көрсөтүү үчүн. саптарды аяктоо менен форматтоону сактаңыз .normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Толук аты-жөнү
[email protected]
Бөгөттөө модулу
Блок тырмакчаларындагы демейки margin
тырмакча болуп саналат 1em 40px
, ошондуктан биз аны 0 0 1rem
башка элементтерге ылайыктуураак нерсеге кайтарабыз.
Блок цитата элементинде камтылган белгилүү цитата.
Булак аталышында белгилүү бирөө
Inline элементтер
Элемент абзацтын текстинин <abbr>
арасында өзгөчөлөнүп туруу үчүн негизги стилди алат.
Жыйынтык
Корутунду боюнча демейки 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
классты колдонуңуз .