Яңарту
Яңарту, бер файлдагы элементларга хас CSS үзгәртүләр җыелмасы, зәвыклы, эзлекле һәм гади нигезне тәэмин итү өчен Bootstrap кикстарт.
Алым
Ребуот Нормальләштерүгә нигезләнә, күп HTML элементларын элемент селекторларын кулланып берникадәр фикерле стильләр белән тәэмин итә. Өстәмә стиллау класслар белән генә башкарыла. Мәсәлән, без <table>
гадирәк база өчен кайбер стильләрне яңадан башлыйбыз, соңрак тәэмин итәбез .table
, .table-bordered
һәм башкалар.
Менә безнең күрсәтмәләр һәм Reboot'та нәрсәне кире кагарга икәнен сайлау өчен сәбәпләр:
- Зурайтылган компонент аралыгы өчен
rem
s урынына s куллану өчен кайбер браузерның килешү кыйммәтләрен яңартыгыз .em
- Сак бул
margin-top
. Көтелмәгән нәтиҗәләр китереп, вертикаль кырлар җимерелергә мөмкин. Иң мөһиме, бер юнәлешmargin
- гади акыл моделе. - Deviceайланма зурлыкларын җиңеләйтү өчен блок элементлары
rem
s өченmargin
s кулланырга тиеш. - Бәйләнешле мөлкәт декларацияләрен
font
минимумга кадәр саклагыз,inherit
мөмкин булганда кулланыгыз.
Битнең килешүләре
Яхшырак бит киңлегендә тәэмин итү <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 һәр җайланмада һәм ОСта оптималь текст күрсәтү өчен "туган шрифт стек" яки "система шрифты" куллана. Бу система шрифтлары бүгенге җайланмаларны истә тотып, экраннарда яхшырак күрсәтү, үзгәртелгән шрифт ярдәме һ.б. Бу шрифт журнал мәкаләсендә туган шрифтлар турында күбрәк укыгыз .
$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
Башлыклар һәм абзацлар
Барлык баш элементлары, мәсәлән, һәм аларны <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><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>
Variзгәрешләр
Variзгәрешләрне күрсәтү өчен <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>
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)
.
Бу үзгәрешләр һәм башкалар түбәндә күрсәтелгән.
Дата һәм төс кертү ярдәме
Онытмагыз, дата керемнәре барлык браузерлар белән тулысынча хупланмый , ягъни 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
башка элементлар белән туры килгән әйбер өчен үзгәртәбез.
Блоккот элементында булган билгеле цитата.
Чыганак исемендә танылган кеше
Электр элементлары
Элемент абзац тексты арасында <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
класс кулланыгыз .