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
күп нәрсә аркасында, контейнер да оя кормый.
.container
Fixedаваплы тотрыклы киңлек контейнеры өчен кулланыгыз .
<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-width
CSS-ны тар җайланмалар җыелмасына чикләү өчен кертәбез.
@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-4
.col-md-4
.col-md-4
<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>
Мисал: сыек контейнер
.container
Anyзегезнең тышкы ягыгызны үзгәртеп, теләсә нинди киңлектәге челтәр макетын тулы киңлек макетына әйләндерегез .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
<!-- 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 баганалы киң див бер янәшә берәмлек буларак яңа сызыкка төрелә.
.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>
Колонналарны офсетлау
.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]
<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
Уңга тигезләнгән эчтәлек белән блоккот өстәгез .
Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante erat.
Чыганак исемендә
танылган кеше
<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 + ,
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>
тег кулланыгыз.
<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
Ларри
Кош
@twitter
<table class= "table" >
...
</table>
Сызыклы рәтләр
Зебра- стрипингны .table-striped
өстәгез, теләсә нинди өстәл рәтенә <tbody>
.
Браузерның яраклашуы
Сызылган таблицалар CSS селекторы аша ясалган :nth-child
, бу Internet Explorer 8дә булмаган.
#
Исем
Фамилия
Кулланучы исеме
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри
Кош
@twitter
<table class= "table table-striped" >
...
</table>
Чикләнгән өстәл
.table-bordered
Таблицаның һәм шакмакларның һәр ягына чикләр өстәгез .
#
Исем
Фамилия
Кулланучы исеме
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри
Кош
@twitter
<table class= "table table-bordered" >
...
</table>
Ховер рәтләре
.table-hover
А эчендә өстәл рәтләренә менү халәтен булдыру өчен өстәгез <tbody>
.
#
Исем
Фамилия
Кулланучы исеме
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри
Кош
@twitter
<table class= "table table-hover" >
...
</table>
Конденсацияләнгән өстәл
Өстәлләрне .table-condensed
яртыга кисеп, таблицаларны тагын да тыгызрак ясарга.
#
Исем
Фамилия
Кулланучы исеме
1
Билге
Отто
@mdo
2
Ягъкуб
Торнтон
@fat
3
Ларри Кош
@twitter
<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-responsive
768px киңлектән зуррак нәрсәне караганда, сез бу таблицаларда бернинди аерма күрмисез.
Вертикаль кисү / кисү
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>
<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
кертә : ,,,,,,,,,,,, һәм . _ _ _ _ _password
datetime
datetime-local
date
month
time
week
number
email
url
search
tel
color
<input type= "text" class= "form-control" placeholder= "Text 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
1
2
3
1
2
3
<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
характеристика аша үзгәртеп булмый.
1 2 3 4 5
<select class= "form-control" >
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option> 4</option>
<option> 5</option>
</select>
<select>
Атрибут белән идарә итү өчен , multiple
берничә вариант килешү буенча күрсәтелә.
1 2 3 4 5
<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
Браузерның яраклашуы
disabled
Bootstrap бу стильләрне барлык браузерларда кулланса да, 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 class= "sr-only" 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
бу элемент эчендә тикшерү стильләре алыначак.
<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>
безнең диңгез һәм диңгез компонентлары эчендә элементлар гына ярдәм итә.
Стильле төймә ясау өчен мөмкин булган төймә классларының теләсә кайсысын кулланыгыз.
Килешү
Башлангыч
Уңыш
Мәгълүмат
Кисәтү
хәвеф-хәтәр
Ссылка
<!-- 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>
Зуррак яки кечерәк төймәләр? Өстәмә яки өстәмә зурлыклар өчен .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
Класс <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
, шуңа күрә бернинди префикс та кирәк түгел.
Onsаваплы сурәтләр
.img-responsive
Bootstrap 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 () ;
}
Мобиль яктан тизрәк үсеш өчен, бу файдалы классларны медиа соравы аша җайланма аша күрсәтү һәм яшерү өчен кулланыгыз. Шулай ук бастырылганда эчтәлекне алыштыру өчен файдалы класслар кертелгән.
Аларны чикләнгән нигездә кулланырга тырышыгыз һәм бер үк сайтның бөтенләй башка версияләрен булдырмагыз. Киресенчә, аларны һәр җайланманың презентациясен тулыландыру өчен кулланыгыз.
Мөмкин класслар
Визпорт пунктлары аша эчтәлекне алыштыру өчен булган классларның бер яки комбинациясен кулланыгыз.
Өстәмә кечкенә җайланмаларТелефоннар (<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-sm
v3.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 Кечкенә һәм уртада күренеп тора
Яшерен ...
Монда, яшел билгеләр шулай ук элементның хәзерге күренештә яшерелгәнен күрсәтәләр.
Өстәмә кечкенә
X х-кечкенәдә яшерелгән
Кечкенә
Small Кечкенәгә яшерелгән
Урта
Med Уртада яшерелгән
Зур
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
һәм .saturate
desaturate
Типография
Берничә тиз үзгәрүчән белән сезнең типны, текст күләмен, әйдәп баручы һәм башкаларны җиңел куегыз. 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 ;
}
Ачыклык
Барлык браузерлар өчен караңгылыкны куегыз һәм filter
IE8 өчен кире кайтуны тәэмин итегез.
.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 проектлары белән куллану өчен мәгълүматны үз эченә ала.
Сасс өчен ботстрап