CSS
Глобаль CSS көйләүләре, фундаменталь HTML элементлары стилизацияләнгән һәм киңәйтелгән класслар белән камилләштерелгән, һәм алдынгы челтәр системасы.
Гомуми күзәтү
Bootstrap инфраструктурасының төп өлешләренә, шул исәптән яхшырак, тизрәк, көчлерәк веб үсешенә карашыбызны алыгыз.
HTML5 доктипы
Bootstrap HTML5 доктипын куллануны таләп иткән кайбер HTML элементларын һәм CSS үзлекләрен куллана. Барлык проектларыгыз башында да кертегез.
<!doctype html>
<html lang="en">
...
</html>Башта мобиль
Bootstrap 2 ярдәмендә без рамның төп аспектлары өчен өстәмә мобиль дустанә стильләр өстәдек. Bootstrap 3 ярдәмендә без баштан мобиль дус булырга проектны яңадан яздык. Өстәмә мобиль стильләр өстәү урынына, алар үзәккә пешерәләр. Чынлыкта, Bootstrap башта мобиль . Мобиль беренче стильләрне аерым файллар урынына бөтен китапханәдә табарга мөмкин.
Дөрес күрсәтүне һәм зурайтуны тәэмин итү өчен , визупорт мета-тегын өстәгез <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Сез мобиль җайланмаларда зурайту мөмкинлекләрен user-scalable=noвизупорт мета-тегына өстәп сүндерә аласыз. Бу зурайтуны туктата, димәк, кулланучылар әйләндерә ала, һәм сезнең сайтта туган кушымта кебек тоела. Гомумән, без моны һәр сайтта тәкъдим итмибез, сак булыгыз!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Типография һәм сылтамалар
Bootstrap төп глобаль дисплей, типография һәм сылтама стильләрен куя. Аерым алганда, без:
- .Әр
background-color: #fff;сүзнеңbody @font-family-baseБезнең типографик база буларак ,,@font-size-baseһәм@line-height-baseатрибутларны кулланыгыз- Глобаль сылтама төсен куегыз
@link-colorһәм сылтама сызыкларын гына кулланыгыз:hover
Бу стильләрне эчтән табарга мөмкин scaffolding.less.
Normalize.css
Яхшыртылган кросс-браузер өчен без Normalize.css кулланабыз, Николас Галлагер һәм Джонатан Нил проекты .
Контейнерлар
Bootstrap сайт эчтәлеген төрү һәм безнең челтәр системасын урнаштыру өчен элементны таләп итә. Сез үз проектларыгызда куллану өчен ике контейнерның берсен сайлый аласыз. Игътибар итегез, paddingкүп нәрсә аркасында, контейнер да оя кормый.
.containerFixedаваплы тотрыклы киңлек контейнеры өчен кулланыгыз .
<div class="container">
...
</div>.container-fluidВизпортның бөтен киңлеген үз эченә алган тулы киңлек контейнеры өчен кулланыгыз .
<div class="container-fluid">
...
</div>Челтәр системасы
Bootstrap җаваплы, мобиль беренче сыеклык челтәре системасын үз эченә ала, җайланма яки күренеш күләме арта барган саен 12 баганага кадәр тарала. Бу җиңел урнаштыру вариантлары өчен алдан билгеләнгән классларны , шулай ук күбрәк семантик макетлар ясау өчен көчле миксиннарны үз эченә ала .
Кереш сүз
Челтәр системалары сезнең эчтәлекне урнаштырган рәтләр һәм баганалар аша бит макетларын ясау өчен кулланыла. Менә Bootstrap челтәре системасы ничек эшли:
- Дөрес тигезләү һәм ябыштыру өчен рәтләр
.container(тотрыклы киңлек) яки.container-fluid(тулы киңлек) урнаштырылырга тиеш. - Колонналарның горизонталь төркемнәрен булдыру өчен рәтләр кулланыгыз.
- Эчтәлек баганалар эчендә урнаштырылырга тиеш, һәм баганалар гына тиз арада балалар булырга мөмкин.
- Алдан билгеләнгән челтәр класслары ошый
.rowһәм.col-xs-4челтәр макетларын тиз ясарга мөмкин. Азрак миксиннар семантик макетлар өчен дә кулланылырга мөмкин. - Колонналар аша чокырлар ясыйлар (багана эчтәлеге арасындагы аермалар)
padding. Бу паддер беренче һәм соңгы багана өчен рәтләрдә тискәре маржа аша офсетланган.row. - Тискәре маржа ни өчен түбәндәге мисаллар искергән. Челтәр баганаларындагы эчтәлек челтәр булмаган эчтәлек белән тезелгән.
- Челтәр баганалары сез озын булырга теләгән унике багана санын күрсәтеп ясала. Мәсәлән, өч тигез багана өчне кулланыр иде
.col-xs-4. - Әгәр бер рәт эчендә 12 дән артык багана урнаштырылса, өстәмә баганаларның һәр төркеме, бер берәмлек буларак, яңа сызыкка уралачак.
- Челтәр класслары экран киңлеге зуррак яки тигез булган җайланмаларга кагыла, һәм кечерәк җайланмаларга юнәлтелгән челтәр классларын юкка чыгара. Шуңа күрә, мәсәлән, теләсә нинди
.col-md-*классны элементка куллану аның урта җайланмалардагы стиленә тәэсир итми, ә.col-lg-*класс булмаса, зур җайланмаларда да.
Бу принципларны сезнең кодка куллану өчен мисалларга карагыз.
Медиа сораулары
Безнең челтәр системасында төп өзекләр булдыру өчен, без Кечкенә Файлларда түбәндәге медиа сорауларын кулланабыз.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }Без вакыт-вакыт бу медиа соравларында max-widthCSS-ны тар җайланмалар җыелмасына чикләү өчен кертәбез.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }Челтәр вариантлары
Bootstrap челтәр системасының аспектлары уңайлы җайланма белән берничә җайланмада ничек эшләвен карагыз.
| Өстәмә кечкенә җайланмалар Телефоннар (<768px) | Кечкенә җайланмалар Планшетлар (≥768px) | Урта җайланмалар Эш өстәле (≥992px) | Зур җайланмалар Эш өстәле (≥1200px) | |
|---|---|---|---|---|
| Челтәр тәртибе | Горизонталь һәрвакыт | Башлау өчен җимерелде, нокталар өстендә горизонталь | ||
| Контейнер киңлеге | Беркем дә (авто) | 750px | 970px | 1170px |
| Класс префиксы | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # баганалар | 12 | |||
| Колонның киңлеге | Авто | ~ 62px | ~ 81px | ~ 97px |
| Гаттер киңлеге | 30px (багананың һәр ягында 15px) | |||
| Оя | Әйе | |||
| Офсет | Әйе | |||
| Колонкага заказ бирү | Әйе | |||
Exampleрнәк: горизонталь
Челтәр классларының бер комплектын кулланып .col-md-*, сез өстәл (урта) җайланмаларда горизонталь булганчы, мобиль җайланмаларда һәм планшет җайланмаларында (өстәмә кечкенәдән кечкенә диапазонда) тупланган төп челтәр системасын булдыра аласыз. Челтәр баганаларын теләсә нинди урынга урнаштырыгыз .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Мисал: сыек контейнер
.containerAnyзегезнең тышкы ягыгызны үзгәртеп, теләсә нинди киңлектәге челтәр макетын тулы киңлек макетына әйләндерегез .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Мисал: Мобиль һәм эш өстәле
Сезнең колонналарның кечкенә җайланмаларда урнашуын теләмисезме? .col-xs-* .col-md-*Колонналарга өстәп, өстәмә кечкенә һәм урта җайланма челтәр классларын кулланыгыз . Барысы да ничек эшләвен яхшырак белү өчен түбәндәге мисалны карагыз.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Мисал: Мобиль, планшет, эш өстәле
.col-sm-*Планшет класслары белән тагын да динамик һәм көчле макетлар булдырып, алдагы мисалга нигез салыгыз .
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>Мисал: багана төрү
Әгәр бер рәт эчендә 12 дән артык багана урнаштырылса, өстәмә баганаларның һәр төркеме, бер берәмлек буларак, яңа сызыкка уралачак.
.col-xs-9
.col-xs-4
9 + 4 = 13> 12 булганнан, бу 4 баганалы киң див бер янәшә берәмлек буларак яңа сызыкка төрелә.
9 + 4 = 13> 12 булганнан, бу 4 баганалы киң див бер янәшә берәмлек буларак яңа сызыкка төрелә.
.col-xs-6
Киләсе баганалар яңа сызык буенча дәвам итә.
Киләсе баганалар яңа сызык буенча дәвам итә.
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>Columnаваплы багана яңартыла
Дүрт яруслы челтәрләр булганда, сез кайбер пунктларда сезнең колонкаларыгыз икенчесенә караганда озынрак булганга, төгәл чистартылмаган проблемаларга керергә тиеш. Моны төзәтер өчен, а .clearfixһәм безнең җаваплы коммуналь классларның комбинациясен кулланыгыз .
.col-xs-6 .col-sm-3
Сезнең күренешнең размерын үзгәртегез яки мисал өчен телефоныгызда тикшерегез.
Сезнең күренешнең размерын үзгәртегез яки мисал өчен телефоныгызда тикшерегез.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>Responsаваплы өзекләрдә багананы чистартуга өстәп, сезгә офсетларны, этәргечләрне яисә тартмаларны яңартырга кирәк булырга мөмкин . Моны челтәр мисалында карагыз .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>Чокырларны бетерегез
Чокырларны рәттән алып ташлагыз, ул .row-no-guttersкласс белән баганалар.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<div class="row row-no-gutters">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Колонналарны офсетлау
.col-md-offset-*Дәресләр ярдәмендә баганаларны уңга күчерегез . Бу класслар багананың сул читен *баганалар буенча арттыралар. Мәсәлән, дүрт багана өстендә .col-md-offset-4хәрәкәт итә..col-md-4
.col-md-4
.col-md-4 .col-md-офсет-4
.col-md-3 .col-md-офсет-3
.col-md-3 .col-md-офсет-3
.col-md-6 .col-md-офсет-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>Сез шулай ук .col-*-offset-0класслар белән түбән челтәр катламнарыннан офсетларны кире кагарга мөмкин.
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>Оя баганалары
Эчтәлекне килешү челтәре белән оялау өчен, булган баганага яңа .rowһәм баганалар җыелмасы өстәгез . Ояланган рәтләр 12 яки аннан да азрак булган баганалар җыелмасын кертергә тиеш (барлык 12 багананы куллану таләп ителми)..col-sm-*.col-sm-*
1 дәрәҗә: .col-sm-9
2 нче дәрәҗә: .col-xs-8 .col-sm-6
2 нче дәрәҗә: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>Колонкага заказ бирү
Безнең урнаштырылган челтәр баганаларының тәртибен .col-md-push-*һәм .col-md-pull-*үзгәртүче класслары белән җиңел үзгәртегез.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>Аз миксиннар һәм үзгәрүләр
Тиз макетлар өчен алдан төзелгән челтәр классларына өстәп , Bootstrap үз гади, семантик макетларыгызны тиз ясау өчен аз үзгәрүчәннәрне һәм миксиннарны үз эченә ала.
Variзгәрешләр
Variзгәрешлеләр баганалар санын, чокырның киңлеген һәм йөзә торган баганаларны башлау өчен медиа соравын билгели. Без боларны югарыда документлаштырылган челтәр классларын, шулай ук түбәндә күрсәтелгән махсус миксиннар өчен кулланабыз.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Миксинс
Миксиннар челтәр үзгәрүчеләре белән берлектә аерым челтәр баганалары өчен семантик CSS булдыру өчен кулланыла.
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}Мисал куллану
Сез үзгәрүчәннәрне үзегезнең кыйммәтләрегезгә үзгәртә аласыз, яисә миксиннарны аларның төп кыйммәтләре белән куллана аласыз. Ике багана макетын булдыру өчен, килешенгән көйләүләрне куллану мисалы.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>Типография
Башлыклар
Барлык HTML башламнары <h1>да <h6>бар. .h1Дәресләр аша .h6шулай ук бар, чөнки сез шрифт стиленә туры килергә теләгәндә, ләкин сезнең текстның эчтә күрсәтелүен телисез.
h1. Ботстрап башы |
Семибольд 36px |
h2. Ботстрап башы |
Семибольд 30px |
h3. Ботстрап башы |
Семибольд 24px |
h4. Ботстрап башы |
Семибольд 18px |
h5. Ботстрап башы |
Семибольд 14px |
h6. Ботстрап башы |
Семибольд 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6><small>Гомуми тэг яки .smallкласс белән теләсә нинди башламда җиңелрәк, икенчел текст ясагыз .
h1. Икенче текст |
h2. Икенче текст |
h3. Икенче текст |
h4. Икенче текст |
h5. Икенче текст |
h6. Икенче текст |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>Тән күчермәсе
Bootstrap-ның глобаль дефолты 14px , 1,428 font-sizeбелән . Бу һәм барлык абзацларда кулланыла. Моннан тыш, (параграфлар) аларның саналган сызык биеклегенең ярты маржасын алалар (килешү буенча 10px).line-height<body><p>
Nullam quis risus ena urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус. Nullam id dolor id nibh ultricies транспорт.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, коммерция булмаган луктус, портитор лигула, ec lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam diamet eget risus varius blandit амет булмаган магнит утыра. Donec id elit non mi porta gravida eget metus. Duis mollis, коммерция булмаган луктус, портитор лигула, ec lacinia odio sem nec elit.
<p>...</p>Куркынычсызлык
Параграфны өстәп аерылып торыгыз .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor аукторы. Duis mollis, коммерция булмаган люктус.
<p class="lead">...</p>Кечкенә белән төзелгән
Типографик масштаб үзгәрүчәннәрдә ике азрак үзгәрүчәнлеккә нигезләнгән . Беренчесе - төп шрифт зурлыгы, икенчесе - төп сызык биеклеге. Без бу үзгәрүчәннәрне һәм кайбер гади математиканы кулланабыз, барлык төрләребезнең кырларын, паддерларын, сызык биеклекләрен булдыру өчен. Аларны көйләгез һәм Bootstrap адаптацияләре.@font-size-base@line-height-base
Текст элементлары
Билгеләнгән текст
Башка контексттагы актуальлеге аркасында текстның эшләвен күрсәтү өчен, <mark>тегны кулланыгыз.
Сез билге тамгасын куллана аласызаерып күрсәттекст.
You can use the mark tag to <mark>highlight</mark> text.Бетерелгән текст
Бетерелгән текст блокларын күрсәтү өчен <del>тегны кулланыгыз.
Бу текст сызыгы бетерелгән текст кебек каралачак.
<del>This line of text is meant to be treated as deleted text.</del>Тәртип
Инде актуаль булмаган текст блокларын күрсәтү өчен <s>тегны кулланыгыз.
Бу текст сызыгы төгәл түгел дип санала.
<s>This line of text is meant to be treated as no longer accurate.</s>Керелгән текст
Документка өстәмәләр күрсәтү өчен <ins>тег кулланыгыз.
Бу текст сызыгы документка өстәмә итеп каралырга тиеш.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Сызылган текст
Текстны ассызыклау өчен <u>тегны кулланыгыз.
Бу текст сызыгы ассызыкланганча күрсәтеләчәк
<u>This line of text will render as underlined</u>HTMLиңел стильләр белән HTML'ның төп басым тэгларын кулланыгыз.
Кечкенә текст
Эчтәлекне яки текст блокларын ассызыклау өчен, <small>текстны ата-ананың 85% зурлыгына куегыз. font-sizeБаш элементлар ояланган өчен үзләрен ала<small> .
Сез альтернатив .smallрәвештә теләсә нинди урынны куллана аласыз <small>.
Бу текст сызыгы яхшы басма кебек каралачак.
<small>This line of text is meant to be treated as fine print.</small>Калын
Авыррак шрифтлы текстның фрагментына басым ясау өчен.
Түбәндәге текстның фрагменты калын текст рәвешендә күрсәтелә .
<strong>rendered as bold text</strong>Италия
Италия белән текстның фрагментына басым ясау өчен.
Түбәндәге текстның фрагменты итализацияләнгән текст рәвешендә күрсәтелә .
<em>rendered as italicized text</em>Альтернатив элементлар
<b>HTML5'та кулланырга ирек бирегез <i>. <b>сүз яки фразеологизмнарны яктырту өчен, өстәмә әһәмият бирмичә <i>, күбесенчә тавыш, техник терминнар һ.б.
Тигезләү класслары
Текстны тигезләү класслары булган компонентларга җиңел итеп күчерегез.
Сул тигезләнгән текст.
Centerзәк тигезләнгән текст.
Уң тигезләнгән текст.
Акланган текст.
Орган текст юк.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>Трансформация класслары
Текстны капитализация класслары белән компонентларда үзгәртү.
Түбән текст.
Upperгары текст.
Баш хәреф белән язылган текст.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Кыскартулар
HTML <abbr>элементын кыскартулар һәм кыскартулар өчен стилизацияләнгән киңәйтү версиясен күрсәтү өчен. Атрибутлы кыскартулар titleҗиңел нокталы аскы чиккә ия һәм йөртүдә ярдәмче курсорга ия.
Төп кыскарту
Сыйфат атрибутының кыскартылышы .
<abbr title="attribute">attr</abbr>Инициализм
.initialismБераз кечерәк шрифт өчен кыскартуга өстәгез .
Киселгән икмәктән HTML иң яхшы әйбер.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Адреслар
Иң якын бабалар яки бөтен эш органнары өчен контакт мәгълүматларын тәкъдим итегез. Барлык юлларны тәмамлап форматлауны саклагыз <br>.
Twitter, Inc.
1355 Market Street, Suite 900
Сан-Франциско, CA 94103
P: (123) 456-7890 Тулы исем
[email protected]
1355 Market Street, Suite 900
Сан-Франциско, CA 94103
P: (123) 456-7890 Тулы исем
[email protected]
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>Блоккотлар
Документыгыздагы бүтән чыганактан эчтәлек блокларын китерү өчен.
Килешү блоккоте
<blockquote>HTMLәрбер цитата итеп урыгыз . Туры цитаталар өчен без а <p>.
Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante erat.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Блоккот вариантлары
Стандарттагы гади үзгәрешләр өчен стиль һәм эчтәлек үзгәрә <blockquote>.
Чыганакны атау
<footer>Чыганакны ачыклау өчен а өстәргә . Чыганакның исемен урап алыгыз <cite>.
Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante erat.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>Альтернатив дисплейлар
.blockquote-reverseУңга тигезләнгән эчтәлек белән блоккот өстәгез .
<blockquote class="blockquote-reverse">
...
</blockquote>Исемлекләр
Тәртипсез
Заказ ачыктан-ачык мөһим булмаган әйберләр исемлеге .
- Лорем ипсум долор амет утыра
- Consectetur adipiscing elit
- Массадагы тулы молести лорем
- Претиум нисл аликетында фасилис
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Пурус содалес ультрикасы
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Энеан утыра
- Порттор лоремасын алыгыз
<ul>
<li>...</li>
</ul>Заказлы
Заказ ачыктан-ачык мөһим булган әйберләр исемлеге .
- Лорем ипсум долор амет утыра
- Consectetur adipiscing elit
- Массадагы тулы молести лорем
- Претиум нисл аликетында фасилис
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Энеан утыра
- Порттор лоремасын алыгыз
<ol>
<li>...</li>
</ol>Стильсез
Исемлек әйберләрендәге килешү list-styleһәм сул маржаны бетерегез (шунда ук балалар гына). Бу бары тик балалар исемлеге пунктларына гына кагыла , димәк, сез ояланган исемлекләр өчен класс өстәргә тиеш.
- Лорем ипсум долор амет утыра
- Consectetur adipiscing elit
- Массадагы тулы молести лорем
- Претиум нисл аликетында фасилис
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Пурус содалес ультрикасы
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Энеан утыра
- Порттор лоремасын алыгыз
<ul class="list-unstyled">
<li>...</li>
</ul>Киң төзелештә
Барлык исемлек әйберләрен дә бер сызыкка урнаштырыгыз display: inline-block;.
- Лорем ипсум
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>Тасвирлау
Аларга бәйләнгән тасвирламалар белән терминнар исемлеге.
- Тасвирлау исемлекләре
- Тасвирлау исемлеге терминнарны билгеләү өчен бик яхшы.
- Эвизмод
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida eget metus.
- Малесуада портасы
- Etiam porta sem maleuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Горизонталь тасвирлау
Терминнарны һәм тасвирламаларны янәшә тезегез <dl>. Килешү <dl>с кебек тезелгән башлана, ләкин диңгез киңлеге киңәйгәндә, шулай эшләгез.
- Тасвирлау исемлекләре
- Тасвирлау исемлеге терминнарны билгеләү өчен бик яхшы.
- Эвизмод
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida eget metus.
- Малесуада портасы
- Etiam porta sem maleuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentation massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Авто-кисү
Горизонталь тасвирлау исемлеге сул баганага туры килерлек терминнарны кисәр text-overflow. Таррак күренешләрдә алар килешү буенча урнаштырылган макетка үзгәрәчәкләр.
Код
Киң төзелештә
Кодның сызыкларын урыгыз <code>.
Мисал өчен,
<section>сызык итеп төрергә кирәк.
For example, <code><section></code> should be wrapped as inline.Кулланучы кертү
<kbd>Гадәттә клавиатура аша кертелгән керүне күрсәтү өчен кулланыгыз .
Белешмәлекне күчерү
cdөчен, каталогның исемен языгыз.
Көйләүләрне үзгәртү өчен басыгыз ctrl + ,
Көйләүләрне үзгәртү өчен басыгыз 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>Төп блок
<pre>Кодның берничә сызыгы өчен кулланыгыз . Дөрес күрсәтү өчен кодтагы теләсә нинди почмактан сакланыгыз.
<p> Монда текст үрнәге ... </p>
<pre><p>Sample text here...</p></pre>Сез өстәмә рәвештә .pre-scrollableклассны өсти аласыз, ул максималь биеклекне 350px куячак һәм y күчәре әйләндерү тактасын тәэмин итә.
Variзгәрешләр
Variзгәрешләрне күрсәтү өчен <var>тег кулланыгыз.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Ampleрнәк чыгару
Программадан үрнәк чыгару блокларын күрсәтү өчен <samp>тег кулланыгыз.
Бу текст компьютер программасының үрнәге булып каралачак.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Таблицалар
Төп мисал
Төп стиллау өчен - җиңел паддер һәм горизонталь бүлүчеләр - төп классны .tableтеләсә кемгә өстәгез <table>. Бу супер артык кирәк кебек тоелырга мөмкин, ләкин календарь һәм дата сайлау кебек плагиннар өчен таблицаларның киң кулланылышын исәпкә алып, без үзебезнең өстәл стильләрен аерырга булдык.
| # | Исем | Фамилия | Кулланучы исеме |
|---|---|---|---|
| 1 | Билге | Отто | @mdo |
| 2 | Ягъкуб | Торнтон | @fat |
| 3 | Ларри | Кош |
<table class="table">
...
</table>Сызыклы рәтләр
Зебра- стрипингны .table-stripedөстәгез, теләсә нинди өстәл рәтенә <tbody>.
Браузерның яраклашуы
Сызылган таблицалар CSS селекторы аша ясалган :nth-child, бу Internet Explorer 8дә булмаган.
| # | Исем | Фамилия | Кулланучы исеме |
|---|---|---|---|
| 1 | Билге | Отто | @mdo |
| 2 | Ягъкуб | Торнтон | @fat |
| 3 | Ларри | Кош |
<table class="table table-striped">
...
</table>Чикләнгән өстәл
.table-borderedТаблицаның һәм шакмакларның һәр ягына чикләр өстәгез .
| # | Исем | Фамилия | Кулланучы исеме |
|---|---|---|---|
| 1 | Билге | Отто | @mdo |
| 2 | Ягъкуб | Торнтон | @fat |
| 3 | Ларри | Кош |
<table class="table table-bordered">
...
</table>Ховер рәтләре
.table-hoverА эчендә өстәл рәтләренә менү халәтен булдыру өчен өстәгез <tbody>.
| # | Исем | Фамилия | Кулланучы исеме |
|---|---|---|---|
| 1 | Билге | Отто | @mdo |
| 2 | Ягъкуб | Торнтон | @fat |
| 3 | Ларри | Кош |
<table class="table table-hover">
...
</table>Конденсацияләнгән өстәл
Өстәлләрне .table-condensedяртыга кисеп, таблицаларны тагын да тыгызрак ясарга.
| # | Исем | Фамилия | Кулланучы исеме |
|---|---|---|---|
| 1 | Билге | Отто | @mdo |
| 2 | Ягъкуб | Торнтон | @fat |
| 3 | Ларри Кош | ||
<table class="table table-condensed">
...
</table>Контекст дәресләре
Өстәл рәтләренә яки аерым күзәнәкләргә төсле класслар кулланыгыз.
| Класс | Тасвирлау |
|---|---|
.active |
Кайсы төсне билгеле рәткә яки шакмакка куллана |
.success |
Уңышлы яки уңай эшне күрсәтә |
.info |
Нейтраль информацион үзгәрешне яки эшне күрсәтә |
.warning |
Игътибар кирәк булган кисәтүне күрсәтә |
.danger |
Куркыныч яки потенциаль тискәре эшне күрсәтә |
| # | Колоннаның башы | Колоннаның башы | Колоннаның башы |
|---|---|---|---|
| 1 | Колоннаның эчтәлеге | Колоннаның эчтәлеге | Колоннаның эчтәлеге |
| 2 | Колоннаның эчтәлеге | Колоннаның эчтәлеге | Колоннаның эчтәлеге |
| 3 | Колоннаның эчтәлеге | Колоннаның эчтәлеге | Колоннаның эчтәлеге |
| 4 | Колоннаның эчтәлеге | Колоннаның эчтәлеге | Колоннаның эчтәлеге |
| 5 | Колоннаның эчтәлеге | Колоннаның эчтәлеге | Колоннаның эчтәлеге |
| 6 | Колоннаның эчтәлеге | Колоннаның эчтәлеге | Колоннаның эчтәлеге |
| 7 | Колоннаның эчтәлеге | Колоннаның эчтәлеге | Колоннаның эчтәлеге |
| 8 | Колоннаның эчтәлеге | Колоннаның эчтәлеге | Колоннаның эчтәлеге |
| 9 | Колоннаның эчтәлеге | Колоннаның эчтәлеге | Колоннаның эчтәлеге |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>Ярдәмче технологияләргә мәгънә җиткерү
Өстәл рәтенә яки аерым шакмакка мәгънә өстәү өчен төс куллану визуаль күрсәткеч кенә бирә, ул ярдәмче технология кулланучыларга җиткерелмәячәк - экран укучылары кебек. Төс белән күрсәтелгән мәгълүматның эчтәлектән ачык булуын (тиешле таблицада / шакмакта күренгән текст), яки .sr-onlyкласс белән яшерелгән өстәмә текст кебек альтернатив чаралар аша кертелүен тәэмин итегез.
Onsаваплы таблицалар
Кечкенә җайланмаларда (768px астында) горизонталь әйләндерү өчен .tableтеләсә нинди төрү белән җаваплы таблицалар төзегез . .table-responsive768px киңлектән зуррак нәрсәне караганда, сез бу таблицаларда бернинди аерма күрмисез.
Вертикаль кисү / кисү
Onsаваплы таблицалар кулланыла overflow-y: hidden, алар өстәлнең аскы яисә өске кырларыннан арткан эчтәлекне кисеп ала. Аерым алганда, бу тамчы менюларны һәм бүтән өченче як виджетларын кисәргә мөмкин.
Firefox һәм кырлар
Firefox-ның ниндидер уңайсыз кыр стиле widthбар, ул җаваплы таблицага комачаулый. Бу без Bootstrap'та тәкъдим итмәгән Firefox спецификасы булмаса, моны кире кагарга ярамый:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Күбрәк мәгълүмат алу өчен, бу юлны ташлагыз .
| # | Өстәл башы | Өстәл башы | Өстәл башы | Өстәл башы | Өстәл башы | Өстәл башы |
|---|---|---|---|---|---|---|
| 1 | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге |
| 2 | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге |
| 3 | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге |
| # | Өстәл башы | Өстәл башы | Өстәл башы | Өстәл башы | Өстәл башы | Өстәл башы |
|---|---|---|---|---|---|---|
| 1 | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге |
| 2 | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге |
| 3 | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге | Өстәл күзәнәге |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Формалар
Төп мисал
Индивидуаль форма контроле автоматик рәвештә ниндидер глобаль стилизация ала. Барлык тексталь <input>, <textarea>һәм <select>элементлар килешү буенча .form-controlкуелган width: 100%;. .form-groupОптималь аралар өчен этикеткаларны һәм контроль әйберләрне урыгыз .
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>Форма төркемнәрен кертү төркемнәре белән кушмагыз
Форма төркемнәрен кертү төркемнәре белән турыдан-туры кушмагыз . Киресенчә, форма төркеме эчендә кертү төркемен оялагыз.
Эчке форма
Сул якка тигезләнгән һәм блок-блок контроле өчен үз формагызга өстәгез .form-inline(бу а булырга тиеш түгел ). Бу бары тик ким дигәндә 768px киңлектәге формаларга кагыла.<form>
Гадәттәге киңлекләр таләп ителергә мөмкин
Керүләр һәм сайлау width: 100%;Bootstrap'та килешү буенча кулланылган. Эчке формалар эчендә, без width: auto;берничә контроль бер сызыкта яши алырлык итеп урнаштырабыз. Сезнең урнашуыгызга карап, өстәмә махсус киңлекләр кирәк булырга мөмкин.
Waysәрвакыт этикеткалар өстәгез
Screenәрбер кертү өчен ярлык кертмәсәгез, экран укучылары сезнең формаларда кыенлыклар кичерәчәк. Бу сызык формалары өчен сез этикеткаларны .sr-onlyкласс ярдәмендә яшерә аласыз. Ярдәмче технологияләр өчен ярлык бирүнең альтернатив ысуллары бар, мәсәлән aria-label, aria-labelledbyяки titleатрибут. Әгәр дә боларның берсе дә булмаса, экран укучылары , булган placeholderочракта, атрибутны куллана алалар, ләкин исегездә тотыгыз, placeholderбүтән маркировкалау ысулларын алыштыру буларак куллану киңәш ителми.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>Горизонталь форма
Bootstrap алдан билгеләнгән челтәр классларын кулланыгыз, этикеткаларны һәм форма белән идарә итү төркемнәрен горизонталь макетта .form-horizontalформага өстәп (бу булырга тиеш түгел <form>). Моны эшләү .form-groupчелтәр рәтләре кебек тоела, шуңа кирәк түгел .row.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>Ярдәмче контроль
Стандарт форма контроле үрнәкләре форма макетында ярдәм итә.
Керүләр
Иң еш очрый торган форма контроле, текстка нигезләнгән кертү кырлары. Барлык HTML5 төрләренә дә ярдәм textкертә : ,,,,,,,,,,,, һәм . _ _ _ _ _passworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor
Декларация кирәк
Керүләр тулысынча typeигълан ителсә генә ясалачак.
<input type="text" class="form-control" placeholder="Text input">Керү төркемнәре
Интеграль текст яки төймәләр өстәү өчен һәм / яки текстка нигезләнгәннән соң <input>, кертү төркеме компонентын карагыз .
Текстария
Берничә текстны хуплаучы форма контроле. rowsКирәк булганда атрибутны үзгәртегез .
<textarea class="form-control" rows="3"></textarea>Такталар һәм радио
Такталар исемлектә бер яки берничә вариантны сайлау өчен, радиолар күпләрдән бер вариантны сайлау өчен.
Инвалид тикшерү тартмалары һәм радиолар ярдәм итә, ләкин ата-ананың йөрүендә "рөхсәт ителмәгән" курсор белән тәэмин итү өчен <label>сезгә .disabledклассны ата-анага өстәргә кирәк .radio, яки ..radio-inline.checkbox.checkbox-inline
Килешү буенча (тезелгән)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>Керү тартмалары һәм радио
Бер үк сызыкта күренгән контроль өчен, яисә радиолар сериясендә .checkbox-inlineяки классларда кулланыгыз ..radio-inline
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>Ярлык текстлары булмаган рамкалар һәм радиолар
Әгәр дә сезнең текстыгыз <label>булмаса, кертү сез көткәнчә урнашкан. Хәзерге вакытта сызыксыз рамкаларда һәм радиоларда гына эшли. Ассистив технологияләр өчен билгеле бер форма бирергә онытмагыз (мәсәлән, куллану aria-label).
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>Сайлый
Игътибар итегез, күпчелек туган сайлау менюлары, ягъни Safari һәм Chrome - түгәрәк почмаклары бар, аларны border-radiusхарактеристика аша үзгәртеп булмый.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><select>Атрибут белән идарә итү өчен , multipleберничә вариант килешү буенча күрсәтелә.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Статик контроль
Гади текстны форма этикеткасы янына урнаштырырга кирәк булганда, .form-control-staticклассны а <p>.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>Фокус торышы
outlineКайбер форма контроллерында демократик стильләрне бетерәбез һәм box-shadowаның урынына кулланабыз :focus.
Демо :focusторышы
Aboveгарыдагы мисал кертү безнең документларда махсус стильләрне куллана :focus, а .form-control.
Инвалид хәл
disabledКулланучының үзара бәйләнешен булдырмас өчен кертүгә буле атрибутын өстәгез . Инвалид керемнәр җиңелрәк күренә һәм not-allowedкурсор өсти.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Инвалид кырлар
Барлык контрольне берьюлы сүндерү өчен disabledатрибутны өстәгез .<fieldset><fieldset>
Ссылка функциональлеге турында саклык<a>
Килешү буенча, браузерлар барлык туган форма контроллерын ( һәм элементларын) инвалид дип саныйлар <input>, аларда клавиатура һәм тычканның үзара бәйләнешен булдырмыйлар. Ләкин, сезнең формада элементлар да бар икән, аларга бары тик стиль биреләчәк . Кнопкалар өчен инвалид хәл турында бүлектә әйтелгәнчә (һәм анкор элементлары өчен махсус бүлектә), бу CSS милеге әле стандартлаштырылмаган һәм 18-нче һәм аннан түбән операда, яки Internet Explorer 11-дә тулысынча булышмый, һәм җиңде. клавиатура кулланучыларына бу сылтамаларны тупларга яки активлаштырырга комачауламый. Шулай итеп, куркынычсыз булу өчен, мондый сылтамаларны сүндерү өчен махсус JavaScript кулланыгыз.<select><button><fieldset disabled><a ... class="btn btn-*">pointer-events: none
Браузерның яраклашуы
disabledBootstrap бу стильләрне барлык браузерларда кулланса да, Internet Explorer 11 һәм аннан түбәндә атрибутны тулысынча хупламыйлар <fieldset>. Бу браузерларда кырны сүндерү өчен махсус JavaScript кулланыгыз.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>Уку
readonlyКерү кыйммәтен үзгәртүдән саклап калу өчен , буле атрибутын өстәгез . Уку өчен генә керемнәр җиңелрәк күренә (инвалид керемнәр кебек), ләкин стандарт курсорны саклагыз.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Ярдәм тексты
Форма контроле өчен блок дәрәҗәсе ярдәм тексты.
Ярдәм текстын форма контроле белән бәйләү
Ярдәм тексты aria-describedbyатрибутны куллану белән бәйле форма контроле белән ачыктан-ачык бәйләнештә булырга тиеш. Бу ярдәмче технологияләр - экран укучылары кебек - кулланучы контрольгә кергәндә яки кергәндә бу ярдәм текстын игълан итәчәк.
<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>Тикшерү
Bootstrap форма контролендә хата, кисәтү, уңыш шартлары өчен тикшерү стильләрен үз эченә ала. Ата-ана элементын куллану, өстәү .has-warningяки .has-errorөстәү . .has-successТеләсә нинди .control-label, .form-controlһәм .help-blockбу элемент эчендә тикшерү стильләре алыначак.
Ярдәмче технологияләргә һәм төсле кулланучыларга тикшерү халәтен җиткерү
Бу форма контроле торышын белдерү өчен бу тикшерү стильләрен куллану визуаль, төскә нигезләнгән күрсәткеч бирә, бу ярдәмче технология кулланучыларга - экран укучылары кебек - яки төсле кулланучыларга җиткерелмәячәк.
Дәүләтнең альтернатив күрсәткече дә бирелүен тәэмин итегез. Мисал өчен, сез форма контроле <label>текстына дәүләт турында күрсәтмә кертә аласыз (түбәндәге код мисалындагы кебек), Глификонны.sr-only кертә аласыз ( класс ярдәмендә тиешле альтернатив текст белән - Глификон мисалларын карагыз ), яисә өстәмә ярдәм текст блокы. Аерым алганда, ярдәмче технологияләр өчен яраксыз форма контроле дә aria-invalid="true"атрибут билгеләнергә мөмкин.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>Өстәмә иконалар белән
Сез шулай ук өстәмә кире иконаларны .has-feedbackһәм дөрес иконаны өсти аласыз.
Фикер алышу иконалары текст <input class="form-control">элементлары белән генә эшли.
Икона, этикеткалар, кертү төркемнәре
Фикер алышу иконаларын кул белән урнаштыру ярлыксыз кертүләр өчен һәм уң яктагы өстәмә кертү төркемнәре өчен кирәк. Сезгә барлык керемнәр өчен этикеткалар бирергә дәртләндерелә. Әгәр дә сез этикеткаларны күрсәтмәскә телисез икән, аларны .sr-onlyкласс белән яшерегез. Әгәр сез этикеткаларсыз эшләргә тиеш булсагыз top, кире кайту иконасының бәясен көйләгез. Керү төркемнәре өчен, rightаддонның киңлегенә карап, кыйммәтне тиешле пиксель бәясенә көйләгез.
Икона мәгънәсен ярдәмче технологияләргә җиткерү
Ярдәмче технологияләр - экран укучылары кебек - иконаның мәгънәсен дөрес җиткерү өчен, өстәмә яшерен текст .sr-onlyкласска кертелергә тиеш һәм ул куллану белән бәйле форма контроле белән ачыктан-ачык бәйләнештә булырга тиеш aria-describedby. Альтернатив рәвештә, мәгънәнең (мәсәлән, билгеле бер текст кертү кыры өчен кисәтү барлыгы) башка формада китерелүен тәэмин итегез, мәсәлән <label>, форма контроле белән бәйле фактның текстын үзгәртү.
Түбәндәге мисаллар текстның үзендә тиешле форма контроллерының тикшерү торышын искә алсалар да, <label>югарыдагы техника ( .sr-onlyтекстны кулланып aria-describedby) иллюстратив максатларда кертелгән.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>Горизонталь һәм эчке формаларда өстәмә иконалар
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>Яшерен .sr-onlyэтикеткалар белән өстәмә иконалар
Әгәр дә сез .sr-onlyформа контролен яшерү өчен классны куллансагыз <label>(атрибут кебек башка маркировкалау вариантларын куллану урынына aria-label), Bootstrap иконаның позициясен кушылганнан соң автоматик рәвештә көйләячәк.
(уңыш)
@
(уңыш)
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>Контроль зурлык
Кебек класслар кулланып биеклекләр куегыз .input-lg, челтәр колоннасы классларын кулланып киңлекләр куегыз .col-lg-*.
Биеклек үлчәме
Кнопка зурлыкларына туры килгән озынрак яки кыска форма контроллерын булдырыгыз.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>Горизонталь форма төркем зурлыклары
Тиз зурлыктагы этикеткалар һәм форма контроле .form-horizontalөстәп .form-group-lgяки .form-group-sm.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>Колоннаның зурлыгы
Керелгән киңлекләрне җиңел куллану өчен, керемнәрне челтәр баганаларына яисә теләсә нинди ата-аналар элементына төрегез.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>Кнопкалар
Кнопка теглары
<a>А , <button>яки <input>элементтагы төймә классларын кулланыгыз .
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">Контекстка хас куллану
<a>Кнопка класслары һәм <button>элементлары кулланылса да , <button>безнең диңгез һәм диңгез компонентлары эчендә элементлар гына ярдәм итә.
Кнопка ролен башкаручы сылтамалар
Әгәр <a>элементлар төймәләр ролен башкару өчен кулланылса - агымдагы биттәге бүтән документка яки бүлеккә күчү урынына, биттәге функцияне эшләтеп җибәрү - аларга шулай ук тиешле бирелергә тиеш role="button".
Кросс-браузер күрсәтү
Иң яхшы практика буларак, без кросс-браузер рендерингына туры килү өчен мөмкин булганда элементны кулланырга киңәш итәбез .<button>
Башка әйберләр арасында Firefox <30 хата бар, бу безгә нигезләнгән төймәләрне куярга комачаулый, line-heightһәм <input>алар Firefox'тагы башка төймәләрнең биеклегенә туры килми.
Вариантлар
Стильле төймә ясау өчен мөмкин булган төймә классларының теләсә кайсысын кулланыгыз.
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>Ярдәмче технологияләргә мәгънә җиткерү
Кнопкага мәгънә өстәү өчен төс куллану визуаль күрсәткеч кенә бирә, ул ярдәмче технологияләрне кулланучыларга җиткерелмәячәк - экран укучылары кебек. Төс белән күрсәтелгән мәгълүматның эчтәлектән (төймәнең күренгән тексты) ачык булуын, яки .sr-onlyкласс белән яшерелгән өстәмә текст кебек альтернатив чаралар аша кертелүен тәэмин итегез.
Зурлыклар
Зуррак яки кечерәк төймәләр? Өстәмә яки өстәмә зурлыклар өчен .btn-lg..btn-sm.btn-xs
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>Блок дәрәҗәсе төймәләрен ясагыз - ата-ананың тулы киңлеген киңәйтеп .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>Актив хәл
Актив булганда төймәләр басылган булып күренәчәк (караңгы фон, караңгы чик һәм күләгә кертү). Элементлар өчен <button>бу аша башкарыла :active. <a>Элементлар өчен .active. Шулай да, сез актив дәүләтне программалы рәвештә кабатларга тиеш булсагыз , сез (һәм атрибутны кертә аласыз ) куллана .activeаласыз .<button>aria-pressed="true"
Кнопка элементы
Псевдо-класс булганга өстәргә кирәк түгел :active, ә бер үк күренешне көчләргә кирәк булса, алга барыгыз һәм өстәгез .active.
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>Анкор элементы
.activeКлассны <a>төймәләргә өстәгез .
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>Инвалид хәл
Кнопкаларны кире кайтарып бетереп булмый opacity.
Кнопка элементы
disabledАбруйны <button>төймәләргә өстәгез .
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>Браузерның яраклашуы
disabledӘгәр дә сез атрибутны өстәсәгез <button>, Internet Explorer 9 һәм аннан түбән текст тексты күләгәсе белән без төзәтә алмыйбыз.
Анкор элементы
.disabledКлассны <a>төймәләргә өстәгез .
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>Без .disabledмонда гомуми класска охшаган коммуналь класс буларак кулланабыз .active, шуңа күрә бернинди префикс та кирәк түгел.
Функциональлекне бәйләү
Бу класс с pointer-events: none-ның сылтама функциясен сүндерергә тырыша <a>, ләкин CSS милеге әле стандартлаштырылмаган һәм 18-нче һәм аннан да түбән опера яки Internet Explorer 11-дә тулысынча булышмый. Моннан тыш, хәтта ярдәм күрсәтүче браузерларда да pointer-events: none, клавиатурада . навигация тәэсирсез кала, димәк, клавиатура кулланучылары һәм ярдәмче технологияләр кулланучылары бу сылтамаларны активлаштыра алалар. Шулай итеп, куркынычсыз булу өчен, мондый сылтамаларны сүндерү өчен махсус JavaScript кулланыгыз.
Рәсемнәр
Onsаваплы сурәтләр
.img-responsiveBootstrap 3-тәге рәсемнәр класс өстәү аша җаваплы булырга мөмкин . Бу кулланыла max-width: 100%;, height: auto;һәм display: block;рәсемгә, ул төп элементка яхшы тараза.
.img-responsiveКлассны кулланган рәсемнәрне үзәкләштерү өчен , .center-blockурынына кулланыгыз .text-center. Куллану турында тулырак мәгълүмат өчен ярдәмче класслар бүлеген карагыз ..center-block
SVG рәсемнәре һәм IE 8-10
Internet Explorer 8-10, SVG рәсемнәре .img-responsiveпропорциональ булмаган зурлыкта. Моны төзәтер өчен, width: 100% \9;кирәк булганда өстәгез. Bootstrap моны автоматик рәвештә кулланмый, чөнки ул башка рәсем форматларында кыенлыклар тудыра.
<img src="..." class="img-responsive" alt="Responsive image">Рәсем формалары
<img>Төрле проекттагы рәсемнәрне җиңел стильләү өчен элементка класслар өстәгез .
Браузерның яраклашуы
Онытмагыз, Internet Explorer 8 түгәрәк почмакларга булышмый.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Ярдәмче класслар
Контекст төсләр
Мәгънәне төсләр аша җиткерү файдалы класслар белән җиткерегез. Болар шулай ук сылтамаларга кулланылырга мөмкин һәм безнең килешү стиле кебек караңгыда караңгыланыр.
Fusce dapibus, tellus ac cursus commodo, җәберләүче mauris nibh.
Nullam id dolor id nibh ultricies транспорт чарасы.
Duis mollis, est commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam diamet eget risus varius blandit амет булмаган магнит утыра.
Etiam porta sem maleuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>Конкретлык белән эш итү
Кайвакыт басым классларын бүтән селекторның үзенчәлеге аркасында кулланып булмый. Күпчелек очракта, текстны <span>класс белән төрү өчен җитәрлек эш.
Ярдәмче технологияләргә мәгънә җиткерү
Мәгънә өстәү өчен төс куллану визуаль күрсәткеч кенә бирә, ул ярдәмче технологияләр кулланучыларга җиткерелмәячәк - экран укучылары кебек. Төс белән күрсәтелгән мәгълүматның эчтәлектән ачык булуын тәэмин итегез (контекстуаль төсләр текстта / билгеләрдә булган мәгънәне ныгыту өчен кулланыла), яки .sr-onlyкласс белән яшерелгән өстәмә текст кебек альтернатив чаралар ярдәмендә кертелә. .
Контексталь фон
Контекст текст тексты классларына охшаган, элементның фонын теләсә нинди контекстуаль класска урнаштырыгыз. Анкор компонентлары, текст класслары кебек, караңгыда караңгыланырлар.
Nullam id dolor id nibh ultricies транспорт чарасы.
Duis mollis, est commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam diamet eget risus varius blandit амет булмаган магнит утыра.
Etiam porta sem maleuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>Конкретлык белән эш итү
Кайвакыт контекстуаль фон классларын бүтән селекторның үзенчәлеге аркасында кулланып булмый. <div>Кайбер очракларда, элементның эчтәлеген класс белән төрү өчен җитәрлек эш .
Ярдәмче технологияләргә мәгънә җиткерү
Контекстик төсләрдәге кебек , төс аша бирелгән теләсә нинди мәгънә шулай ук презентацияләнмәгән форматта бирелсен.
Икона
Модаль һәм сигнализация кебек эчтәлекне кире кагу өчен гомуми якын иконаны кулланыгыз.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Каретлар
Тамчы функциясен һәм юнәлешен күрсәтү өчен каретларны кулланыгыз. Игътибар итегез, тамчы менюда килешү карет автоматик рәвештә кире кайтачак .
<span class="caret"></span>Тиз йөзә
Элементны класс белән сулга яки уңга йөзегез. !importantконкрет проблемалардан саклану өчен кертелгән. Дәресләрне шулай ук миксиннар итеп кулланырга мөмкин.
<div class="pull-left">...</div>
<div class="pull-right">...</div>// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}Contentзәк эчтәлек блоклары
Элементны display: blockурнаштырыгыз margin. Миксин һәм класс буларак бар.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Clearfix
Ата-аналар элементынаfloat өстәп җиңел чистарту . Николас Галлагер популярлаштырган микро клификсны куллана . Миксин буларак та кулланырга мөмкин..clearfix
<!-- Usage as a class -->
<div class="clearfix">...</div>// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}Эчтәлекне күрсәтү һәм яшерү
Элементны күрсәтергә яки яшерергә ( шул исәптән экран укучылары өчен ) .showһәм .hiddenкласслар кулланып. Бу класслар тиз йөзү!important кебек үк, конфликтлардан саклану өчен кулланалар . Алар блок дәрәҗәсен алыштыру өчен генә бар. Аларны шулай ук миксиннар итеп кулланырга мөмкин.
.hideбар, ләкин ул һәрвакыт экран укучыларына тәэсир итми һәм v3.0.1 булганча искергән . Кулланыгыз .hiddenяисә .sr-onlyаның урынына.
Моннан тыш, .invisibleэлементның күренүчәнлеген үзгәртү өчен кулланырга мөмкин, димәк, displayул үзгәртелмәгән һәм элемент документ агымына тәэсир итә ала.
<div class="show">...</div>
<div class="hidden">...</div>// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}Экран укучысы һәм клавиатура навигациясе эчтәлеге
Экран укучыларыннан кала барлык җайланмаларга элементны яшерегез .sr-only. Элементны .sr-onlyтупланган .sr-only-focusableвакытта күрсәтү өчен берләшегез (мәсәлән, клавиатура кулланучысы гына). Иң яхшы тәҗрибәләргә иярү өчен кирәк . Миксиннар буларак та кулланырга мөмкин.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}Рәсемне алыштыру
.text-hideЭлементның текст эчтәлеген фон рәсеме белән алыштырырга булышу өчен класс яки миксин кулланыгыз .
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Onsаваплы коммуналь хезмәтләр
Мобиль яктан тизрәк үсеш өчен, бу файдалы классларны медиа соравы аша җайланма аша күрсәтү һәм яшерү өчен кулланыгыз. Шулай ук бастырылганда эчтәлекне алыштыру өчен файдалы класслар кертелгән.
Аларны чикләнгән нигездә кулланырга тырышыгыз һәм бер үк сайтның бөтенләй башка версияләрен булдырмагыз. Киресенчә, аларны һәр җайланманың презентациясен тулыландыру өчен кулланыгыз.
Мөмкин класслар
Визпорт пунктлары аша эчтәлекне алыштыру өчен булган классларның бер яки комбинациясен кулланыгыз.
| Өстәмә кечкенә җайланмаларТелефоннар (<768px) | Кечкенә җайланмаларПланшетлар (≥768px) | Урта җайланмаларЭш өстәле (≥992px) | Зур җайланмаларЭш өстәле (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Күренеп тора | Яшерен | Яшерен | Яшерен |
.visible-sm-* |
Яшерен | Күренеп тора | Яшерен | Яшерен |
.visible-md-* |
Яшерен | Яшерен | Күренеп тора | Яшерен |
.visible-lg-* |
Яшерен | Яшерен | Яшерен | Күренеп тора |
.hidden-xs |
Яшерен | Күренеп тора | Күренеп тора | Күренеп тора |
.hidden-sm |
Күренеп тора | Яшерен | Күренеп тора | Күренеп тора |
.hidden-md |
Күренеп тора | Күренеп тора | Яшерен | Күренеп тора |
.hidden-lg |
Күренеп тора | Күренеп тора | Күренеп тора | Яшерен |
V3.2.0 булганга, .visible-*-*һәр нокта өчен класслар өч төрле була, берсе displayтүбәндә күрсәтелгән һәр CSS милек кыйммәте өчен.
| Дәресләр төркеме | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Шулай итеп, өстәмә кечкенә ( xs) экраннар өчен, булган .visible-*-*класслар : .visible-xs-block,, .visible-xs-inlineһәм .visible-xs-inline-block.
Класслар .visible-xs,, һәм шулай ук бар, ләкин .visible-smv3.2.0 буенча искергән . Алар якынча эквивалент , бәйләнешле элементларны алыштыру өчен өстәмә махсус очраклардан кала ..visible-md.visible-lg.visible-*-block<table>
Дәресләрне бастыру
Даими җаваплы классларга охшаган, аларны бастыру өчен эчтәлекне алыштыру өчен кулланыгыз.
| Дәресләр | Браузер | Басма |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Яшерен | Күренеп тора |
.hidden-print |
Күренеп тора | Яшерен |
Класс .visible-printшулай ук бар, ләкин v3.2.0 буенча искергән . Бу якынча элементлар .visible-print-blockөчен өстәмә махсус очраклардан кала, якынча эквивалент.<table>
Тест очраклары
Браузерыгызның размерын үзгәртегез яки җаваплы җайланмаларны сынап карау өчен төрле җайланмаларга йөкләгез.
Күренеп тора ...
Яшел билгеләр элементның хәзерге күренештә күренүен күрсәтә.
Өстәмә кечкенә
X Х-кечкенә
Кечкенә
Small Кечкенәдән күренеп тора
Урта
Medium Уртада күренеп тора
Зур
Large Зур күренеп тора
X Х-кечкенә һәм кечкенә
Medium Урта һәм зур
X Х-кече һәм уртада күренеп тора
Small Кечкенә һәм зур
X Х-кечкенә һәм зур
Small Кечкенә һәм уртада күренеп тора
Яшерен ...
Монда, яшел билгеләр шулай ук элементның хәзерге күренештә яшерелгәнен күрсәтәләр.
Аз куллану
Bootstrap's CSS Less, үзгәртелгән, миксин һәм CSS компиляциясе функцияләре кебек өстәмә функциональ эшкәрткечкә нигезләнгән. Чыганакны кулланырга теләүчеләр, тупланган CSS файллары урынына азрак файллар, без кулланган күпсанлы үзгәрүчәннәрне һәм миксиннарны куллана алалар.
Челтәр үзгәрүчәннәре һәм миксиннар Челтәр системасы бүлегендә капланган .
Ботстрап төзү
Bootstrap ким дигәндә ике ысул белән кулланылырга мөмкин: тупланган CSS яки чыганак Файллар чыганагы белән. Кечкенә файлларны туплау өчен , кирәкле боерыкларны эшләтеп җибәрү өчен сезнең үсеш мохитегезне ничек урнаштыру турында Башлау бүлегенә мөрәҗәгать итегез.
Өченче як компиляция кораллары Bootstrap белән эшләргә мөмкин, ләкин алар безнең төп команда белән булышмый.
Variзгәрешләр
Variзгәрешләр бөтен проект буенча төсләр, аралар яки шрифт стеклары кебек еш кулланыла торган кыйммәтләрне үзәкләштерү һәм бүлешү ысулы буларак кулланыла. Тулы өзелү өчен, клиентны карагыз .
Төсләр
Ике төс схемасын җиңел кулланыгыз: соры һәм семантик. Соры төсләр еш кулланыла торган кара төсләргә тиз керү мөмкинлеген бирә, ә семантик мәгънәле контекстуаль кыйммәтләргә билгеләнгән төрле төсләрне үз эченә ала.
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;Бу төс үзгәрүләренең теләсә кайсысын кулланыгыз яки аларны сезнең проект өчен мәгънәле үзгәрүчәннәргә күчерегез.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Скафолдинг
Сайтыгызның скелетының төп элементларын тиз көйләү өчен берничә үзгәреш.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Сылтамалар
Бер кыйммәт белән дөрес төс белән сылтамаларны җиңел стильләгез.
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}Игътибар итегез, @link-hover-colorфункцияне, Кечкенәдән тагын бер искиткеч коралны, автомат рәвештә дөрес төс төсен булдыру өчен куллана. Сез куллана аласыз darken,, lightenһәм .saturatedesaturate
Типография
Берничә тиз үзгәрүчән белән сезнең типны, текст күләмен, әйдәп баручы һәм башкаларны җиңел куегыз. Bootstrap җиңел типографик миксиннар белән тәэмин итү өчен боларны куллана.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;Икона
Сезнең иконаларның урнашу урынын һәм файл исемен көйләү өчен ике тиз үзгәрүчән.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Компонентлар
Bootstrap буенча компонентлар гомуми кыйммәтләрне билгеләү өчен кайбер үзгәртелгән үзгәрешләрне кулланалар. Монда иң еш кулланыла.
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;Сатучы миксиннар
Сатучы миксиннар - сезнең тупланган CSS-ка барлык сатучы префиксларын кертеп, берничә браузерга булышу өчен миксиннар.
Бокс-размер
Компонентларның бокс моделен бер миксин белән торгызыгыз. Контекст өчен Мозилладан бу файдалы мәкаләне карагыз .
Миксин Autoprefixer кертү белән v3.2.0 буенча искергән . Арткы яраклашуны саклау өчен, Bootstrap миксинны Bootstrap v4 кадәр куллануны дәвам итәчәк.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Түгәрәк почмаклар
Бүгенге көндә барлык заманча браузерлар префикс булмаган border-radiusмилекне хуплыйлар. Шулай итеп, .border-radius()миксин юк, ләкин Bootstrap объектның билгеле бер ягында ике почмакны тиз әйләндерү өчен кыска юлларны үз эченә ала.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}Сандык (Тамчы) күләгәләре
Әгәр сезнең аудиториягез соңгы һәм иң зур браузерларны һәм җайланмаларны кулланса, box-shadowмилекне үзегез генә кулланыгыз. Әгәр дә сезгә иске Android (v4 алдыннан) һәм iOS җайланмалары (iOS 5 алдыннан) ярдәме кирәк булса, кирәкле префиксны алу өчен искергән миксин кулланыгыз.-webkit
Миксин v3.1.0 буенча искергән , чөнки Bootstrap стандарт милекне хупламаган искергән платформаларны рәсми рәвештә хупламый. Арткы яраклашуны саклап калу өчен, Bootstrap миксинны Bootstrap v4 кадәр куллануны дәвам итәчәк.
Сезнең тартма күләгәсендә төсләр кулланыгыз rgba(), алар фон белән мөмкин кадәр бер-берсенә кушылалар.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Күчешләр
Эластиклык өчен берничә миксин. Барлык күчү мәгълүматларын бер белән куегыз, яисә кирәк булганда аерым тоткарлануны һәм озынлыкны күрсәтегез.
Автопрефикс кертү белән, катнашмалар v3.2.0 буенча искергән . Арткы яраклашуны саклап калу өчен, Bootstrap миксиннарны Bootstrap v4 кадәр куллануны дәвам итәчәк.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}Трансформацияләр
Anyәрбер әйберне әйләндерү, масштаблау, тәрҗемә итү (күчерү) яки шуу.
Автопрефикс кертү белән, катнашмалар v3.2.0 буенча искергән . Арткы яраклашуны саклап калу өчен, Bootstrap миксиннарны Bootstrap v4 кадәр куллануны дәвам итәчәк.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}Анимацияләр
Барлык декларациядә CSS3 анимация үзлекләрен куллану өчен бер миксин, индивидуаль үзлекләр өчен башка миксиннар.
Автопрефикс кертү белән, катнашмалар v3.2.0 буенча искергән . Арткы яраклашуны саклап калу өчен, Bootstrap миксиннарны Bootstrap v4 кадәр куллануны дәвам итәчәк.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}Ачыклык
Барлык браузерлар өчен караңгылыкны куегыз һәм filterIE8 өчен кире кайтуны тәэмин итегез.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Урнаштыручы текст
Eachәр өлкәдә форма контроле өчен контекст бирегез.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}Колонналар
Бер элемент эчендә CSS аша баганалар булдыру.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}Градиентлар
Anyәртөрле ике төсне фон градиентына әйләндерегез. Алга китегез һәм юнәлеш куегыз, өч төс кулланыгыз, яки радиаль градиент кулланыгыз. Бер миксин ярдәмендә сез кирәк булган барлык префиксланган синтаксисларны аласыз.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Сез шулай ук стандарт ике төсле, сызыклы градиент почмагын күрсәтә аласыз:
#gradient > .directional(#333; #000; 45deg);Сезгә чәчтараш стилендәге градиент кирәк булса, бу да җиңел. Бер төсне генә күрсәтегез һәм без тонык ак полосаны капларбыз.
#gradient > .striped(#333; 45deg);Антны күтәрегез һәм аның урынына өч төс кулланыгыз. Беренче төсне, икенче төсне, икенче төснең төс тукталышын куегыз (процент бәясе 25%), һәм өченче төс бу катнашмалар белән:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Идарә итә! Сезгә градиентны бетерергә кирәк булса, filterсез кушкан IE-спецификаны бетерегез. Сез моны .reset-filter()миксин ярдәмендә куллана аласыз background-image: none;.
Коммуналь миксиннар
Коммуналь миксиннар - билгеле бер максатка яки эшкә ирешү өчен башка бәйләнешсез CSS үзлекләрен берләштергән миксиннар.
Clearfix
Теләсә нинди элементка өстәргә оныт class="clearfix", урынына кирәк булганда .clearfix()миксин өстә. Николас Галлагердан алынган микро клификс куллана .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Горизонталь үзәкләштерү
Ата-анасы эчендә теләсә нинди элементны тиз арада урнаштырыгыз. Таләп итүне widthяки max-widthкуярга.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Ярдәмчеләрнең зурлыгы
Предметның үлчәмнәрен җиңелрәк күрсәтегез.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Размерлы текстлар
Текстария яки бүтән элемент өчен размерны үзгәртү җиңел. Нормаль браузер тәртибе өчен дефектлар ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Киселгән текст
Бер миксин белән эллипс белән текстны җиңел кисегез. Элемент blockяки inline-blockдәрәҗә булырга тиеш.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Ретина рәсемнәре
Ике рәсем юлын һәм @ 1x рәсем үлчәмнәрен күрсәтегез, һәм Bootstrap @ 2x медиа соравы бирәчәк. Әгәр дә сездә хезмәт итәр өчен бик күп рәсемнәр булса, торле рәсемегезне CSS кул белән бер медиа соравына языгыз.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}Сасс куллану
Bootstrap Less өстендә төзелгән булса, аның рәсми Sass порты да бар . Без аны аерым GitHub складында саклыйбыз һәм конверсия скрипты белән яңартулар эшлибез.
Нәрсә кертелгән
Sass портының аерым репо булганы һәм бераз башка аудиториягә хезмәт итүе сәбәпле, проектның эчтәлеге төп Bootstrap проектыннан бик нык аерылып тора. Бу Sass портының мөмкин кадәр күбрәк Sass нигезендәге системалар белән туры килүен тәэмин итә.
| .Л | Тасвирлау |
|---|---|
lib/ |
Ruby асылташ коды (Sass конфигурациясе, Rail һәм Compass интеграцияләре) |
tasks/ |
Конвертер сценарийлары (Сасска аз агымга борылу) |
test/ |
Компиляция тестлары |
templates/ |
Компас пакеты манифесты |
vendor/assets/ |
Sass, JavaScript һәм шрифт файллары |
Rakefile |
Эчке биремнәр, тырма һәм әйләндерү кебек |
Бу файлларның эшләвен күрү өчен Sass портының GitHub складына керегез .
Урнаштыру
Sass өчен Bootstrap-ны ничек урнаштыру һәм куллану турында мәгълүмат алу өчен, GitHub репозитарийы белән танышыгыз . Бу иң заманча чыганак һәм Rail, Compass һәм стандарт Sass проектлары белән куллану өчен мәгълүматны үз эченә ала.