Рестарт
Ребоот, колекција ЦСС промена специфичних за елементе у једној датотеци, покрените Боотстрап да бисте обезбедили елегантну, доследну и једноставну основу за надоградњу.
Приступ
Ребоот се надовезује на Нормализе, пружајући многе ХТМЛ елементе са донекле упорним стиловима користећи само селекторе елемената. Додатни стил се ради само са класама. На пример, неке стилове поново покрећемо <table>
за једноставнију основну линију и касније обезбеђујемо .table
, .table-bordered
, и још много тога.
Ево наших смерница и разлога за избор онога што ћете заменити у Ребоот-у:
- Ажурирајте неке подразумеване вредности прегледача да бисте користили
rem
с уместоem
с за скалабилни размак компоненти. - Избегавајте
margin-top
. Вертикалне маргине се могу срушити, дајући неочекиване резултате. Што је још важније, један правацmargin
је једноставнији ментални модел. - За лакше скалирање у различитим величинама уређаја, блок елементи треба да користе
rem
с заmargin
с. - Декларације
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
.
Нативни скуп фонтова
Боотстрап користи „нативни скуп фонтова“ или „системски скуп фонтова“ за оптимално приказивање текста на сваком уређају и ОС. Ови системски фонтови су дизајнирани посебно за данашње уређаје на уму, са побољшаним приказивањем на екранима, подршком за променљиве фонтове и још много тога. Прочитајте више о изворним скуповима фонтова у овом чланку Смасхинг Магазина .
$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
стил.
Ово font-family
се примењује на <body>
и аутоматски се наслеђује широм Боотстрап-а. Да бисте променили глобални font-family
, ажурирајте $font-family-base
и поново компајлирајте Боотстрап.
Наслови и параграфи
Сви елементи наслова—нпр.— <h1>
и <p>
се ресетују да би били margin-top
уклоњени. Додати су наслови margin-bottom: .5rem
и параграфи margin-bottom: 1rem
за лакши размак.
Наслов | Пример |
---|---|
<h1></h1> |
х1. Боотстрап наслов |
<h2></h2> |
х2. Боотстрап наслов |
<h3></h3> |
х3. Боотстрап наслов |
<h4></h4> |
х4. Боотстрап наслов |
<h5></h5> |
х5. Боотстрап наслов |
<h6></h6> |
х6. Боотстрап наслов |
Листе
Све листе <ul>
— , <ol>
, и <dl>
— су margin-top
уклоњене и а margin-bottom: 1rem
. Угнежђене листе немају margin-bottom
. Такође смо ресетовали padding-left
он <ul>
и <ol>
елементе.
- Горња маргина свих листа је уклоњена
- И њихова доња маргина се нормализовала
- Угнежђене листе немају доњу маргину
- На овај начин имају уједначенији изглед
- Нарочито када их прати више ставки на листи
- Леви паддинг је такође ресетован
- Ево уређене листе
- Са неколико ставки на листи
- Има исти општи изглед
- Као претходна неуређена листа
За једноставнији стил, јасну хијерархију и бољи размак, листе описа су ажурирале margin
с. <dd>
с ресетујте margin-left
и 0
додајте margin-bottom: .5rem
. <dt>
с су подебљане .
- Листе описа
- Листа описа је савршена за дефинисање појмова.
- Термин
- Дефиниција појма.
- Друга дефиниција за исти термин.
- Други термин
- Дефиниција за овај други термин.
Инлине код
Умотајте уметнуте исечке кода помоћу <code>
. Обавезно избегавајте ХТМЛ угаоне заграде.
<section>
требало би да буде умотано као инлине.
For example, <code><section></code> should be wrapped as inline.
Блокови кода
Користите <pre>
с за више редова кода. Још једном, обавезно избегните све угаоне заграде у коду ради правилног приказивања. Елемент <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>
с, као и скупови поља, такође су рестилизовани да се приказују као нека врста наслова.<label>
с су постављени наdisplay: inline-block
да дозвољавајуmargin
примену.<input>
с,<select>
с,<textarea>
с и<button>
с се углавном адресирају помоћу Нормализе, али Ребоот уклања и њиховеmargin
иline-height: inherit
такође поставља .<textarea>
с су модификовани тако да могу да се мењају само вертикално јер хоризонтална промена величине често „разбија” изглед странице.<button>
с и<input>
елементи дугмета имајуcursor: pointer
када:not(:disabled)
.
Ове промене, и још много тога, приказане су у наставку.
Подршка за унос датума и боје
Имајте на уму да сви претраживачи, односно Сафари, не подржавају у потпуности уносе датума .
Показивачи на дугмадима
Поновно покретање укључује побољшање за 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 Маркет Ст, Суите 900
Сан Францисцо, ЦА 94103
П: (123) 456-7890 Пуно име
фирст.ласт@екампле.цом
Блоцккуоте
Подразумевано margin
за блок цитате је 1em 40px
, па смо то ресетовали 0 0 1rem
на нешто што је конзистентније са другим елементима.
Добро познати цитат, садржан у елементу блок цитата.
Неко познат у наслову извора
Инлине елементи
Елемент <abbr>
добија основни стил како би се истакао међу текстом пасуса.
Резиме
Подразумевано cursor
у резимеу је text
, па смо то ресетовали на да pointer
бисмо пренели да се са елементом може ступити у интеракцију кликом на њега.
Неки детаљи
Више информација о детаљима.
Још више детаља
Ево још детаља о детаљима.
ХТМЛ5 [hidden]
атрибут
ХТМЛ5 додаје нови глобални атрибут под називом[hidden]
, који је display: none
подразумевано стилизован. Позајмивши идеју од ПуреЦСС-а , побољшавамо ову подразумевану вредност тако што [hidden] { display: none !important; }
помажемо да спречимо display
да случајно буде замењена.
<input type="text" hidden>
јКуери некомпатибилност
[hidden]
није компатибилан са јКуери-јем $(...).hide()
и $(...).show()
методама. Због тога тренутно не подржавамо [hidden]
друге технике за управљање display
елементима.
Да бисте само променили видљивост елемента, што значи да display
он није измењен и да елемент и даље може да утиче на ток документа, користите класу уместо.invisible
тога.