Компонентлар

Навигация, хәбәрләр, поповерлар һәм башкаларны тәэмин итү өчен Bootstrap эчендә дистәләгән кабат кулланыла торган компонентлар төзелгән.

Кнопка төркемнәре

Бер составлы компонент буларак берничә төймәгә кушылу өчен төймә төркемнәрен кулланыгыз. <a>Аларны бер-бер артлы яки <button>элементлар белән төзегез .

Сез шулай ук комплектларны катлаулырак проектларга берләштерә <div class="btn-group">аласыз <div class="btn-toolbar">.

Мисал билгесе

HTML ничек анкор тегү төймәләре белән төзелгән стандарт төймә төркемен эзли:

<div class = "btn-group" > 
  <a class = "btn" href = "#"> 1 </a> _  
  <a class = "btn" href = "#"> 2 </a> _  
  <a class = "btn" href = "#"> 3 </a> _  
</div>

Multipleәм берничә төркем өчен кораллар плитәсе белән:

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Такталар һәм радио тәмләре

Кнопка төркемнәре шулай ук радио булып эшли ала, анда бер генә төймә актив булырга мөмкин, яисә теләсә нинди төймә актив булган пункт. Моның өчен Javascript документларын карагыз .

Javascript алыгыз »

Идарә итә

Кнопка төркемнәре өчен CSS аерым файлда, төймә-төркемнәр.less.

Кнопка тамчылары

Ачылган менюны эшләтеп җибәрү өчен, теләсә нинди төймә кулланыгыз, аны менюга урнаштырыгыз .btn-groupһәм тиешле меню билгесен бирегез.

Мисал билгесе

Кнопка төркеменә охшаган, безнең билгеләр регуляр төймә билгесен куллана, ләкин стильне чистарту һәм Bootstrap тамчысы jQuery плагинына булышу өчен берничә өстәмә белән.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    Эш
    <span class = "caret" > </span> 
  </a>
  <ul class = "тамчы-меню" > 
    <! - тамчы меню сылтамалары ->
  </ul>
</div>

Кнопка тамчыларын бүлегез

Кнопка группасы стильләренә һәм билгеләргә нигезләнеп, без җиңел генә ярылу төймәсен ясый алабыз. Сплит төймәләре сул якта стандарт хәрәкәтне һәм контекст сылтамалар белән уңда тамчы күчү.

Мисал билгесе

Аерым тамчы триггеры булып эшләгән икенче төймә хәрәкәтен тәэмин итү өчен без гадәти төймә тамчыларында киңәябез.

<div class = "btn-group" > 
  <a class = "btn" href = "#"> Эш </a> _  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    <span class = "caret" > </span> 
  </a>
  <ul class = "тамчы-меню" > 
    <! - тамчы меню сылтамалары ->
  </ul>
</div>

Lightиңел дефолтлар Бер үк билгеләр, төрле класслар

Көчле база сыйныфы

Мондагы барлык диңгез компонентлары - таблицалар, таблеткалар, исемлекләр - класс аша бер үк төп билгеләрне һәм стильләрне бүлешәләр ..nav

Нигә таблицалар һәм дарулар

Bootstrap'тагы таблицалар һәм таблеткалар <ul>бер үк үзәк HTML, сылтамалар исемлеге белән төзелгән. Таблицалар яки таблеткалар арасында класс белән алыштырыгыз.

Ике вариант эчтәлекнең бүлекчәләре яки бәйләнешле эчтәлек битләре арасында навигация өчен бик яхшы.

Төп салынмалар

Даими <ul>сылтамалар алыгыз һәм өстәгез .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li класс = "актив" > 
    <a href = "#"> Өй </a> _ 
  </li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

Төп дарулар

Шул ук HTML алыгыз, ләкин .nav-pillsаның урынына кулланыгыз:

<ul class = "nav nav-таблеткалар" > 
  <li класс = "актив" > 
    <a href = "#"> Өй </a> _ 
  </li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

Такталар Таблицаларны яки даруларны вертикаль ясагыз

Ничек урнаштырырга

Таблицалар һәм таблеткалар килешү буенча горизонталь булганлыктан .nav-stacked, вертикаль тезелгән булып күренсен өчен, икенче классны өстәгез.

Такталар

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Тапланган дарулар

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Алга киткән диңгез компонентлары өчен

Бай менюлар җиңел булды

Bootstrap кыстыргычларында һәм таблеткаларда төшү менюлары бик җиңел һәм бераз өстәмә HTML һәм җиңел jQuery плагины таләп итә.

Bootstrap'та тамчыларны башлау турындагы документларны уку өчен Javascript битенә керегез .

Таблицалар

<ul class = "nav nav-tabs" > 
  <li класс = "төшү" > 
    <a class = "тамчы-күчү" 
       data-toggle = "тамчы"
       href = "#" >
        Төшү
        <b класс = "карет" > </b> 
      </a>
    <ul class = "тамчы-меню" > 
      <! - сылтамалар ->
    </ul>
  </li>
</ul>

Таблеткалар

<ul class = "nav nav-таблеткалар" > 
  <li класс = "төшү" > 
    <a class = "тамчы-күчү" 
       data-toggle = "тамчы"
       href = "#" >
        Төшү
        <b класс = "карет" > </b> 
      </a>
    <ul class = "тамчы-меню" > 
      <! - сылтамалар ->
    </ul>
  </li>
</ul>

Хәрби исемлекләр Гади такталар төзегез, ян ягы өчен бик яхшы

Кушымта стиле навигациясе

Nav исемлекләре өстәмә башлыклар белән диңгез сылтамалары төркемнәрен төзүнең гади һәм җиңел ысулын тәкъдим итә. Алар X X-та табучы кебек ян такталарда иң яхшы кулланыла.

Структур яктан, алар таблицалар һәм таблеткалар белән бер үк төп диңгез стилендә төзелгән, шуңа күрә куллану һәм көйләү туры.

Иконалар белән

Nav исемлекләрен иконалар белән җиһазлау да җиңел. Класс белән тиешле тегны өстәгез <i>һәм сез куелдыгыз.

Мисал исемлеге

Сылтамалар исемлеген алыгыз һәм өстәгез class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Исемлек башы
  </li>
  <li класс = "актив" > 
    <a href = "#"> Өй </a> _ 
  </li>
  <li>
    <a href = "#"> Китапханә </a> _ 
  </li>
  ...
</ul>

Иконалар белән мисал

Шул ук мисал, ләкин <i>иконалар өчен теглар белән.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#"> _ 
      <i класс = "иконка-китап" > </i> 
      Китапханә
    </a>
  </li>
  ...
</ul>

Таблицалар nav javascript аша таблицаларны тормышка китерегез

Нәрсә кертелгән

Таблицалар аша эчтәлекне алыштыру өчен гади плагин белән таблицаларны тормышка китерегез. Bootstrap өстәл таблицаларын дүрт стильдә берләштерә: өске (килешү), уң, аскы һәм сул.

Алар арасында үзгәрү җиңел һәм бик аз билгеләрне үзгәртү таләп ителә.

Таблица мисалы

.nav-tabsТаблицаларны таблицалар ясау өчен , бүтән дивага класс белән төрегез .tabbable.

Мин 1 бүлектә.

Хоуди, мин 2 бүлектә.

Нәрсә кыз, бу 3 бүлек.

JQuery плагины

Барлык өстәл таблицалары безнең җиңел jQuery плагины белән эшләнгән. Javascript документлар битендә таблицаларны ничек тормышка ашыру турында күбрәк укыгыз.

Javascript алыгыз

Туры билгеләр

Таблицалар салынмаларын куллану өчен төрү дивасы, таблицалар җыелмасы һәм эчтәлекле таблицалар җыелмасы кирәк.

<div class = "таблица" > 
  <ul class = "nav nav-tabs" > 
    <li class = "актив" > <a href = "#1" data-toggle = "tab"> 1 бүлек </a> </li >   
    <li> <a href = "#2" data-toggle = "tab"> 2 бүлек </a> </li >  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane актив" id = "1" >  
      <p> Мин 1 бүлектә. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Хауди, мин 2 бүлектә. </p>
    </div>
  </div>
</div>

Теләсә нинди юнәлештә

Түбәндәге салынмалар

HTML тәртибен борыгыз һәм астына кыстыргычлар куяр өчен класс өстәгез.

Мин А бүлегендә.

Хоуди, мин В бүлегендә.

Нәрсә кыз, бу С бүлеге.

<div class = "таблицалар-аста" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Сул якта

Сулга таблицалар куяр өчен классны алыштырыгыз.

Мин А бүлегендә.

Хоуди, мин В бүлегендә.

Нәрсә кыз, бу С бүлеге.

<div class = "таблицалар-сул" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Уң яктагы кыстыргычлар

Уңга таблицалар куяр өчен классны алыштырыгыз.

Мин А бүлегендә.

Хоуди, мин В бүлегендә.

Нәрсә кыз, бу С бүлеге.

<div class = "таблицалар таблицасы-уң" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Статик диңгез тактасы мисалы

Проект исеме, навигация һәм эзләү формасы булган статик (өскә куелмаган) диңгез тактасы мисалы.

Навбар скафолдингы

Диңгез тактасы статик яки тотрыклы күрсәтү өчен аны яхшы төзү өчен берничә дивс таләп итә.

<div class = "navbar" > 
  <div class = "navbar-эчке" > 
    <div class = "контейнер" > 
      ...
    </div>
  </div>
</div>

Диңгез тактасын күренү портының өске өлешенә урнаштыру өчен .navbar-fixed-top, тышкы дивка өстәргә .navbar,. padding-top: 40px;Сезнең CSSда сезгә шулай ук килеп чыккан капма-каршылыкны исәпкә алырга кирәк булачак <body>.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Бренд исеме

Сезнең брендыгызны яки проект исемегезне күрсәтү өчен гади сылтама бары тик анкор тегын гына таләп итә.

<a class = "brand" href = "#"> _  
  Проект исеме
</a>

Эзләү формасы

.navbar-searchЭзләү формалары класс белән диңгез тактасында махсус стильләр ала . Аны кертү .pull-leftяки тигезләү өчен .pull-right.form

<form class = "navbar-search pull-left" > 
  <кертү тибы = "текст" класс = "эзләү-сорау" урын хуҗасы = "Эзләү" >   
</form>

Ихтимал җаваплы үзгәрү

Topгары такталардагы эчтәлек күләменә карап, сез җаваплы вариантларны тормышка ашырырга теләрсез. Моның өчен, диңгез эчтәлеген div эчендә урыгыз .nav-collapse.collapse, һәм диңгез тактасын алыштыру төймәсен өстәгез , .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-эчке" > 
    <div class = "контейнер" > 
 
      <! - .btn-navbar җимерелгән диңгез тактасы эчтәлеген алыштыру өчен кулланыла ->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse">   
        <span class = "icon-bar" > </span> 
        <span class = "icon-bar" > </span> 
        <span class = "icon-bar" > </span> 
      </a>
 
      <! - Брендны күрсәтергә теләсәгез, анда калдырыгыз ->
      <a class = "brand" href = "#"> Проект исеме </a>  
 
      <! - Сез 940px яки аннан да азрак яшерергә теләгән бар нәрсәне монда урнаштырыгыз ->
      <div class = "nav-collapse" > 
        <! - .nav, .navbar-search, .navbar-форма һ.б. ->
      </div>
 
    </div>
  </div>
</div>

Идарә итә! Navаваплы диңгез тактасы җимерелү плагинын таләп итә .

Nav сылтамалары

Диңгез әйберләрен тәртипсез исемлекләр аша өстәү гади.

<ul class = "nav" > 
  <li класс = "актив" > 
    <a href = "#"> Өй </a> _ 
  </li>
  <li> <a href = "#"> Ссылка </a> </li> 
  <li> <a href = "#"> Ссылка </a> </li> 
</ul>

Тамчыларны өстәү

Диңгезгә тамчыларны өстәү бик гади, ләкин безнең javascript плагинын куллануны таләп итә .

<ul class = "nav" > 
  <li класс = "төшү" > 
    <a href = "#" 
          класс = "тамчы-күчү"
          data-toggle = "тамчы" >
          Хисап
          <b класс = "карет" > </b> 
    </a>
    <ul class = "тамчы-меню" > 
      ...
    </ul>
  </li>
</ul>

Javascript алыгыз

Нигә аларны кулланырга

Икмәк пешерү навигациясе кулланучыларга кушымта яки сайт эчендә булган урыннарын күрсәтү ысулы буларак кулланыла, ләкин төп навигация өчен түгел. Аларның эффектив булуы өчен сирәк һәм үзенчәлекле булыгыз.

Мисаллар

Берничә биттә күрсәтелергә мөмкин булган бер мисал.

Билгеләү

HTML - сылтамалар белән сезнең стандарт тәртипсез исемлек.

<ul class = "икмәк пешерү" > 
  <li>
    <a href = "#"> Өй </a> <span class = "divider" > / </span >   
  </li>
  <li>
    <a href = "#"> Китапханә </a> <span class = "divider" > / </span >   
  </li>
  <li класс = "актив" > 
    <a href = "#"> Мәгълүмат </a> _ 
  </li>
</ul>

Күп битле бит

Кайчан кулланырга

Ультра гади һәм минималь стильле пагинация Rdio тарафыннан рухландырылган, кушымталар һәм эзләү нәтиҗәләре өчен бик яхшы. Зур блокны сагыну авыр, җиңел масштаблы, зур басу өлкәләрен тәэмин итә.

Дәүләт бит сылтамалары

Сылтамалар көйләнә һәм дөрес класс белән берничә шартларда эшли. .disabledачылмаган сылтамалар .activeөчен һәм хәзерге бит өчен.

Эластик тигезләү

Пагинация сылтамаларының тигезләнешен үзгәртү өчен ике факультатив классның берсен дә өстәгез: .pagination-centeredһәм .pagination-right.

Мисаллар

Килешү пагинация компоненты сыгылучан һәм берничә вариациядә эшли.

Билгеләү

А белән уралган <div>, пагинация - а <ul>.

<div class = "pagination" > 
  <ul>
    <li> <a href = "#"> Алдагы </a> </li> 
    <li класс = "актив" > 
      <a href = "#"> 1 </a> _ 
    </li>
    <li> <a href = "#"> 2 </a> </li> 
    <li> <a href = "#"> 3 </a> </li> 
    <li> <a href = "#"> 4 </a> </li> 
    <li> <a href = "#"> Киләсе </a> </li> 
  </ul>
</div>

Пейджер Тиз алдагы һәм киләсе сылтамалар өчен

Пейджер турында

Пейджер компоненты - гади пагинация имплантацияләре өчен җиңел билгеләр һәм хәтта җиңелрәк стильләр өчен сылтамалар җыелмасы. Блог яки журнал кебек гади сайтлар өчен бик яхшы.

Килешенгән мисал

Килешү буенча, пейджер үзәкләре сылтамалар.

<ul class = "пейджер" > 
  <li>
    <a href = "#"> Алдагы </a> _ 
  </li>
  <li>
    <a href = "#"> Киләсе </a> _ 
  </li>
</ul>

Тигезләнгән сылтамалар

Альтернатив рәвештә, сез һәр сылтаманы якларга тигезли аласыз:

<ul class = "пейджер" > 
  <li класс = "алдагы" > 
    <a href = "#"> & larr ; Олы </a> 
  </li>
  <li класс = "киләсе" > 
    <a href = "#"> Яңа & rarr ; </a> 
  </li>
</ul>

Ярлыклар	Билгеләү
Килешү	`<span class="label">Default</span>`
Яңа	`<span class="label label-success">New</span>`
Кисәтү	`<span class="label label-warning">Warning</span>`
Мөһим	`<span class="label label-important">Important</span>`
Мәгълүмат	`<span class="label label-info">Info</span>`

Килешү эскизлар

Килешү буенча, Bootstrap эскизлары минималь кирәкле билгеләр белән бәйләнгән рәсемнәрне күрсәтү өчен эшләнгән.

Бик югары көйләнә

Бераз өстәмә билгеләр белән, баш символлар, параграфлар яки төймәләр кебек HTML эчтәлеген өстәргә мөмкин.

Эскиз этикеткасы

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ultricies транспорт чарасы.

Эш Эш
Эскиз этикеткасы

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ultricies транспорт чарасы.

Эш Эш

Ни өчен эскизларны кулланырга

Эскизлар (моңа .media-gridкадәр v1.4 кадәр) фото яки видео челтәрләре, рәсем эзләү нәтиҗәләре, ваклап сату продуктлары, портфолио һәм башкалар өчен бик яхшы. Алар сылтамалар яки статик эчтәлек булырга мөмкин.

Гади, сыгылмалы билгеләр

Эскизны билгеләү гади - ulтеләсә нинди liэлементлар белән кирәк. Бу шулай ук супер сыгылучан, эчтәлекне төрү өчен бераз күбрәк маркалы эчтәлек төренә мөмкинлек бирә.

Челтәр баганасы зурлыкларын куллана

Ниһаять, эскизлар компоненты булган челтәр системасы классларын куллана, .span2яки .span3эскиз үлчәмнәрен контрольдә тоту өчен.

Билгеләү

Алда әйтелгәнчә, эскизлар өчен кирәкле билгеләр җиңел һәм туры. Менә бәйләнгән рәсемнәр өчен килешенгән көйләүгә күз салу :

<ul class = "эскизлар" > 
  <li класс = "span3" > 
    <a href = "#" class = "thumbnail"> _  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Эскизлардагы HTML эчтәлеге өчен, билгеләр бераз үзгәрә. Блок дәрәҗәсендәге эчтәлекне рөхсәт итәр <a>өчен , без <div>шуңа охшаганны алыштырабыз:

<ul class = "эскизлар" > 
  <li класс = "span3" > 
    <div class = "эскиз" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Эскиз этикеткасы </h5>
      <p> Эскиз язуы монда ... </p>
    </div>
  </li>
  ...
</ul>

Күбрәк мисаллар

Төрле челтәр класслары белән сезнең барлык вариантларыгызны өйрәнегез. Сез шулай ук төрле зурлыкларны кушып, туры китерә аласыз.

Lightиңел дефолтлар

Яңа класс

Bootstrap 2 ярдәмендә без төп классны гадиләштердек: .alertурынына .alert-message. Без шулай ук минималь кирәкле билгеләрне киметтек <p>- килешү буенча юк, бары тик ауттер <div>.

Бердәнбер хәбәр

Аз кодлы тагын да ныграк компонент өчен, без блок сигнализацияләрен, дифференциаль күренешне бетердек, күбрәк паддинг һәм гадәттә күбрәк текст белән килгән хәбәрләр. Класс шулай ук үзгәрде .alert-block.

Javascript белән бик яхшы бара

Bootstrap зур jQuery плагины белән килә, алар уяу хәбәрләрне хуплый, аларны тиз һәм җиңел җибәрә.

Плагин алыгыз »

Мисал хәбәрләре

Хәбәрегезне һәм өстәмә ябык иконаны гади класс белән бүлегез.

× Кисәтү! Иң яхшы тикшерү, сез бик яхшы күренмисез.

<div класс  = "уяу" >
  <a class = "ябык" × </a> _
  <strong> Кисәтү! </strong> Иң яхшы тикшерү, сез бик яхшы күренмисез.
</div>

Ике факультатив класс белән стандарт кисәтү хәбәрен җиңел генә киңәйтегез: .alert-blockкүбрәк паддинг һәм текст контроле .alert-headingөчен һәм туры килгән башлам өчен.

Кисәтү!

Иң яхшы тикшерү, сез бик яхшы күренмисез. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur һ.б.

<div class = "уяулык-блок" > 
  <a class = "close"> × </a> _ 
  <h4 класс = "уяу-баш" > Кисәтү! </h4> 
  Иң яхшы тикшерү, син түгел ...
</div>

Контекстуаль альтернатива Сигналның мәгънәсен үзгәртү өчен өстәмә класслар өстәгез

Хата яки куркыныч

× Әй! Берничә әйберне үзгәртегез һәм яңадан җибәрергә тырышыгыз.

<div class = "alert alert-error" > 
  ...
</div>

Уңыш

× Афәрин! Сез бу мөһим хәбәрне уңышлы укыйсыз.

<div class = "уяу уяу-уңыш" > 
  ...
</div>

Мәгълүмат

× Идарә итә! Бу кисәтү сезнең игътибарыгызга мохтаҗ, ләкин бу бик мөһим түгел.

<div class = "alert alert-info" > 
  ...
</div>

Мисаллар һәм билгеләр

Төп

Вертикаль градиент белән алга китеш сызыгы.

<div class = "алгарыш" > 
  <div class = "bar" 
       style = " width : 60 %; " > </div> 
</div>

Сызылган

Сызылган эффект булдыру өчен градиент куллана.

<div class = "прогресс-информация 
     прогресс-сызыклы " >
  <div class = "bar" 
       стиль = " киңлек : 20 %; " > </div> 
</div>

Анимация

Сызылган мисалны ала һәм анимацияли.

<div class = "алгарыш-куркыныч 
     прогресс-сызыклы актив " >
  <div class = "bar" 
       стиль = " киңлек : 40 %; " > </div> 
</div>

Вариантлар һәм браузер ярдәме

Өстәмә төсләр

Прогресс барлары бер үк класс исемнәрен төймәләр һәм охшаш стиллау өчен сигнализацияләр белән кулланалар.

.progress-info
.progress-success
.progress-danger

Альтернатив рәвештә, сез аз файлларны көйли аласыз, үз төсләрегезне һәм зурлыкларыгызны әйләндерә аласыз.

Тәртип

Прогресс барлары CSS3 күчешләрен кулланалар, шуңа күрә javascript аша киңлекне динамик көйләсәгез, ул шома үзгәрәчәк.

.activeӘгәр дә сез классны куллансагыз, .progress-stripedпрогресс барларыгыз сулдан уңга сызыкларны җанландырачак.

Браузер ярдәме

Прогресс барлары барлык эффектларына ирешү өчен CSS3 градиентларын, күчешләрен, анимацияләрен кулланалар. Бу функцияләр IE7-8 яки Firefox'ның иске версияләрендә булышмый.

Опера хәзерге вакытта анимацияләрне хупламый.

Скважиналар

Элементка гади эффект кебек үк, эффект кертү өчен кулланыгыз.

Менә мин коеда!

<div class = "әйбәт" > 
  ...
</div>

Бейджлар

Укылмаган санау өчен яки гади күрсәткеч өчен элементтагы бейдж кулланыгыз.

<span class = "бейдж" > 3 </div>

Икона

Модаль һәм сигнализация кебек эчтәлекне кире кагу өчен гомуми якын иконаны кулланыгыз.

<a class = "close"> & вакыт; </a>

Кнопка төркемнәре күбрәк кораллар плитәсенә охшаган функцияләр өчен төймәләргә кушылыгыз

Кнопка төркемнәре

Мисал билгесе

Такталар һәм радио тәмләре

Идарә итә

Кнопкалар тамчылары Контекстуаль төшү менюлары төймә төркемнәрендә төзелгән

Кнопка тамчылары

Мисал билгесе

Кнопка тамчыларын бүлегез

Мисал билгесе

Нав , таблицалар, таблеткалар

Lightиңел дефолтлар Бер үк билгеләр, төрле класслар

Көчле база сыйныфы

Нигә таблицалар һәм дарулар

Төп салынмалар

Төп дарулар

Такталар Таблицаларны яки даруларны вертикаль ясагыз

Ничек урнаштырырга

Такталар

Тапланган дарулар

Алга киткән диңгез компонентлары өчен

Бай менюлар җиңел булды

Таблицалар

Таблеткалар

Хәрби исемлекләр Гади такталар төзегез, ян ягы өчен бик яхшы

Кушымта стиле навигациясе

Иконалар белән

Мисал исемлеге

Иконалар белән мисал

Таблицалар nav javascript аша таблицаларны тормышка китерегез

Нәрсә кертелгән

Таблица мисалы

JQuery плагины

Туры билгеләр

Теләсә нинди юнәлештә

Түбәндәге салынмалар

Сул якта

Уң яктагы кыстыргычлар

Навбар

Статик диңгез тактасы мисалы

Навбар скафолдингы

Бренд исеме

Эзләү формасы

Ихтимал җаваплы үзгәрү

Nav сылтамалары

Тамчыларны өстәү

Икмәк кисәкләре

Нигә аларны кулланырга

Мисаллар

Билгеләү

Пагинация Эчтәлек аша пейджинг өчен ике вариант

Күп битле бит

Кайчан кулланырга

Дәүләт бит сылтамалары

Эластик тигезләү

Мисаллар

Билгеләү

Пейджер Тиз алдагы һәм киләсе сылтамалар өчен

Пейджер турында

Килешенгән мисал

Тигезләнгән сылтамалар

Этикеткалар этикеткасы һәм текстны аңлату

Эскизлар Рәсемнәр, видео, текст һ.б.

Килешү эскизлар

Бик югары көйләнә

Эскиз этикеткасы

Эскиз этикеткасы

Ни өчен эскизларны кулланырга

Гади, сыгылмалы билгеләр

Челтәр баганасы зурлыкларын куллана

Билгеләү

Күбрәк мисаллар

Уңыш, кисәтү, хата хәбәрләре өчен стильләр

Lightиңел дефолтлар

Яңа класс

Бердәнбер хәбәр

Javascript белән бик яхшы бара

Мисал хәбәрләре

Кисәтү!

Контекстуаль альтернатива Сигналның мәгънәсен үзгәртү өчен өстәмә класслар өстәгез