Мисал

Сылтамалар исемлеген күрсәтү өчен алыштырыла торган, контекст меню. JavaScript плагины белән интерактив ясалган .

<ul class = "dropdown-menu" роль = "меню" aria-labelledby = "dropdownMenu" >   
  <li> <a tabindex = "-1" href = "#"> Эш </a> </li >  
  <li> <a tabindex = "-1" href = "#"> Тагын бер гамәл </a> </li>  
  <li> <a tabindex = "-1" href = "#"> Монда бүтән нәрсә </a> </li>  
  <li класс = "бүлүче" > </li> 
  <li> <a tabindex = "-1" href = "#"> Аерылган сылтама </a> </li >  
</ul>

Билгеләү

Ачылучы менюны гына карасак, монда кирәкле HTML. Сезгә тамчы триггерын һәм тамчы менюны .dropdown, яки игълан иткән бүтән элементны төрергә кирәк position: relative;. Аннары менюны ясагыз.

<div class = "тамчы" > 
  <! - Ачылуны алыштыру өчен сылтама яки төймә ->
  <ul class = "тамчы-меню" роль = "меню" aria- labelledby = "dLabel" >   
    <li> <a tabindex = "-1" href = "#"> Эш </a> </li >  
    <li> <a tabindex = "-1" href = "#"> Тагын бер гамәл </a> </li>  
    <li> <a tabindex = "-1" href = "#"> Монда бүтән нәрсә </a> </li>  
    <li класс = "бүлүче" > </li> 
    <li> <a tabindex = "-1" href = "#"> Аерылган сылтама </a> </li >  
  </ul>
</div>

Вариантлар

Менюларны уңга тигезләгез һәм өстәмә төшү дәрәҗәләрен кертегез.

Менюларны тигезләү

Ачылучы менюны уңга тигезләү өчен .pull-rightөстәгез ..dropdown-menu

<ul class = "тамчы-меню тарту-уң" роль = "меню" aria- labelledby = "dLabel" >   
  ...
</ul>

Инвалид меню вариантлары

.disabledСсылканы сүндерү өчен <li>тамчыга өстәгез .

<ul class = "dropdown-menu" роль = "меню" aria-labelledby = "dropdownMenu" >   
  <li> <a tabindex = "-1" href = "#"> Даими сылтама </a> </li >  
  <li class = "инвалид" > <a tabindex = "-1" href = "#"> Инвалид сылтама </a> </li >   
  <li> <a tabindex = "-1" href = "#"> Башка сылтама </a> </li >  
</ul>

Түбән менюлар

Өстәмә дәрәҗәдәге менюларны өстәгез, OS Xныкы кебек, гади билгеләр өстәмәләре белән. Автоматик стиллау өчен булган тамчы менюдагы .dropdown-submenuтеләсә кемгә өстәгез .li

Килешү

Тамчы

Сул асты меню

<ul class = "тамчы-меню" роль = "меню" aria- labelledby = "dLabel" >   
  ...
  <li class = "тамчы-субмену" > 
    <a tabindex = "-1" href = "#"> Күбрәк вариантлар </a>  
    <ul class = "тамчы-меню" > 
      ...
    </ul>
  </li>
</ul>

Мисаллар

Ике төп вариант, тагын ике конкрет вариация белән бергә.

Бер төймә төркеме

.btnБер- бер артлы төймәләр урыгыз .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Сул </button> 
  <төймә класс = "btn" > Урта </button> 
  <button class = "btn" > Уң </button> 
</div>

Берничә төймә төркемнәре

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

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

Вертикаль төймә төркемнәре

Кнопкалар җыелмасы горизонталь түгел, вертикаль рәвештә тезелгән булып күренсен.

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

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

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

Кнопка төркемнәрендәге тамчылар

Идарә итә!Төшү төймәләре дөрес күрсәтү өчен .btn-groupиндивидуаль рәвештә үзләренә төрелергә тиеш ..btn-toolbar

Гомуми күзәтү һәм мисаллар

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

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

Барлык төймә зурлыклары белән эшли

Төп төймә тамчылары теләсә нинди зурлыкта эшли : .btn-large, .btn-smallяки .btn-mini.

JavaScript кирәк

Кнопка тамчылары Bootstrap тамчы плагинының эшләвен таләп итә.

Кайбер очракларда, мобиль кебек, тамчы менюлар күренеш читендә таралачак. Сезгә тигезләнүне кул белән яки махсус JavaScript белән чишәргә кирәк.

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

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

<div class = "btn-group" > 
  <төймә класс = "btn" > Эш </button> 
  <төймә класс = "btn тамчы-күчү" мәгълүмат-күчү = "төшү" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "тамчы-меню" > 
    <! - тамчы меню сылтамалары ->
  </ul>
</div>

Зурлыклар

Өстәмә төймә классларын кулланыгыз .btn-mini, .btn-smallяисә .btn-largeзурлык өчен.

<div class = "btn-group" > 
  <төймә класс = "btn btn-mini" > Эш </button> 
  <төймә классы = "btn btn-мини тамчы-күчү" мәгълүмат-күчү = "төшү" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "тамчы-меню" > 
    <! - тамчы меню сылтамалары ->
  </ul>
</div>

Тамчы менюлары

Тамчы менюлары шулай ук ата-анасына бер класс өстәп, астыннан өскә күчерелергә мөмкин .dropdown-menu. Ул юнәлешне борып җибәрәчәк .caretһәм менюның үзен өстән аска түгел, ә астыннан өскә күчерәчәк.

<div class = "btn-group dropup" > 
  <төймә класс = "btn" > Тамчы </button> 
  <төймә класс = "btn тамчы-күчү" мәгълүмат-күчү = "төшү" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "тамчы-меню" > 
    <! - тамчы меню сылтамалары ->
  </ul>
</div>

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

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

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

Даими <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>

Инвалид хәл

Теләсә нинди диңгез компоненты (таблицалар, таблеткалар, яки исемлек) .disabledөчен соры сылтамалар өстәгез, эффектлар юк . hrefСылтамалар чирттереләчәк, ләкин, атрибутны бетермәсәгез . Альтернатив рәвештә, сез бу басуларны булдырмас өчен махсус JavaScript куллана аласыз.

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

Компонент тигезләү

Nav сылтамаларын тигезләү өчен, .pull-leftяисә .pull-rightфайдалы классларны кулланыгыз. Ике класс та күрсәтелгән юнәлештә CSS йөзүен өстәячәк.

Тотрыклы

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

Такталар

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

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

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

Тамчы

Бераз өстәмә HTML һәм тамчы 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>

Хәрби исемлекләр

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

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

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

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

ТамгаДиңгез исемлегендә оя ясау өчен class="nav nav-list", теләсә нинди ояга кертегез <ul>.

Горизонталь бүлүчеләр

Класс белән буш исемлек ясап, горизонталь бүлүче өстәгез .divider:

<ul class = "nav nav-list" > 
  ...
  <li класс = "бүлүче" > </li> 
  ...
</ul>

Таблицалар

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

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

Таблицаларны таблицалар ясау өчен, .tab-paneһәрбер кыстыргыч өчен уникаль ID булдырыгыз һәм аларны төрегез .tab-content.

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

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

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

<div class = "таблица" > <! - Сул / уң кыстыргычлар өчен генә кирәк ->  
  <ul class = "nav nav-tabs" > 
    <li class = "актив" > <a href = "#tab1" data-toggle = "tab"> 1 бүлек </a> </li >   
    <li> <a href = "#tab2" data-toggle = "tab"> 2 бүлек </a> </li >  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane актив" id = "tab1" >  
      <p> Мин 1 бүлектә. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Хауди, мин 2 бүлектә. </p>
    </div>
  </div>
</div>

Таблицаларда

Таблицалар бетсен өчен, .fadeһәрберсенә өстәгез .tab-pane.

JQuery плагины кирәк

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

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

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

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>

Төп диңгез тактасы

Башлау өчен, диңгез такталары статик (өскә куелмаган) һәм проект исеменә һәм төп навигациягә ярдәм күрсәтәләр. .containerСайтыгызның киңлеген һәм эчтәлеген билгеләгән а эчендә урнаштырыгыз.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#"> Титул </a> _  
    <ul class = "nav" > 
      <li class = "актив" > <a href = "#"> Өй </a> </li>  
      <li> <a href = "#"> Ссылка </a> </li> 
      <li> <a href = "#"> Ссылка </a> </li> 
    </ul>
  </div>
</div>

Навбар компонентлары

Бренд

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

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

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

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

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

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

<ul class = "nav" > 
  ...
  <li класс = "бүлүче-вертикаль" > </li> 
  ...
</ul>

Формалар

Форманы дөрес стильләү һәм урнаштыру өчен, аста күрсәтелгәнчә тиешле класслар өстәгез. Килешенгән форма өчен, аны яисә .navbar-formдөрес итеп тигезләү өчен кертегез..pull-left.pull-right

<форма класс = "navbar-форма тарту-сул" > 
  <кертү тибы = "текст" класс = "span2" >  
  <төймә тибы = "тапшыру" класс = "btn" > Тапшыру </button>  
</form>

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

Күбрәк көйләнгән эзләү формасы .navbar-searchөчен form, .search-queryдиңгез тактасында махсус стильләр өчен кертүгә өстәгез.

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

Компонент тигезләү

Nav сылтамаларын, эзләү формасын яки текстны тигезләгез, .pull-leftяисә .pull-rightфайдалы классларны кулланыгыз. Ике класс та күрсәтелгән юнәлештә CSS йөзүен өстәячәк.

Тамчыларны куллану

Бераз билгеләнү һәм тамчы тамчылары JavaScript плагины белән диңгезгә тамчыларны һәм тамчыларны өстәгез .

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

Күбрәк күрсәтү һәм тамчыларны чакыру турында мәгълүмат алу өчен JavaScript тамчы документларына керегез .

Текст

Текстның тезмәләрен элементка төрегез .navbar-text, гадәттә <p>тиешле әйдәп баручы һәм төс өчен тегка.

Ихтимал күрсәтү вариацияләре

Тышкы диварга өстәмә класс белән күренеш портының өске яисә аскы өлешенә көйләгез , .navbar.

Topгарыга урнаштырылган

Ким дигәндә 40px өстәп , .navbar-fixed-topаның астындагы яшерен мәйданны исәпкә алырга онытмагыз . Моны Bootstrap CSS үзәгеннән соң һәм өстәмә җаваплы CSS алдыннан өстәргә онытмагыз.padding<body>

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

Түбәнгә урнаштырылган

Аның урынына өстәгез .navbar-fixed-bottom.

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

Статик өске диңгез

Кушымтаны өстәп, тулы киңлектәге диңгез тактасын булдырыгыз .navbar-static-top. Класстан аермалы буларак .navbar-fixed-top, сезгә бернинди паддерны үзгәртергә кирәк түгел body.

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

Onsаваплы диңгез

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

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <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-collaps collapse" > 
        <! - .nav, .navbar-search, .navbar-форма һ.б. ->
      </div>
 
    </div>
  </div>
</div>

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

Кире үзгәрү

Кушып, диңгез тактасының тышкы кыяфәтен үзгәртегез .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Мисаллар

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

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

Стандарт пагинация

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

<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 = "#"> 5 </a> </li> 
    <li> <a href = "#"> Киләсе </a> </li> 
  </ul>
</div>

Вариантлар

Инвалид һәм актив хәлләр

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

<div class = "pagination" > 
  <ul>
    <li class = "инвалид" > <a href = "#"> & laquo; </a> </li>  
    <li class = "актив" > <a href = "#"> 1 </a> </li>  
    ...
  </ul>
</div>

Сез өстәмә рәвештә актив яки инвалид якорларны алыштыра аласыз, стильләрне саклап калганда, басу функциясен бетерү өчен.

<div class = "pagination" > 
  <ul>
    <li class = "инвалид" > <span> & laquo; </span> </li> 
    <li class = "актив" > <span> 1 </span> </li> 
    ...
  </ul>
</div>

Зурлыклар

Зуррак яки кечерәк пагинация? Өстәмә яки өстәмә зурлыклар өчен .pagination-large..pagination-small.pagination-mini

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Тигезләү

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

<div class = "пагинация пагинация-үзәк" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</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>

Ихтимал инвалид хәл

.disabledПейджер сылтамалары шулай ук пагинациядән гомуми ярдәм классын кулланалар .

<ul class = "пейджер" > 
  <li class = "алдагы инвалид" > 
    <a href = "#"> & larr ; Олы </a> 
  </li>
  ...
</ul>

Ярлыклар

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

Бейджлар

Исем	Мисал	Билгеләү
Килешү	1	`<span class="badge">1</span>`
Уңыш	2	`<span class="badge badge-success">2</span>`
Кисәтү	4	`<span class="badge badge-warning">4</span>`
Мөһим	6	`<span class="badge badge-important">6</span>`
Мәгълүмат	8	`<span class="badge badge-info">8</span>`
Кире	10	`<span class="badge badge-inverse">10</span>`

Easyиңел җимерелә

:emptyEasyиңел тормышка ашыру өчен, этикеткалар һәм бейджлар эчтәлек булмаганда (CSS селекторы аша) җимереләчәк .

Герой берәмлеге

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

Сәлам, Дөнья!

Бу гади герой берәмлеге, үзенчәлекле эчтәлеккә яки мәгълүматка өстәмә игътибарны җәлеп итү өчен гади джумботрон стилендәге компонент.

Тулырак

<div class = "герой-берәмлек" > 
  <h1> Башлам </h1>
  <p> Теглар </p>
  <p>
    <a class = "btn btn-primary btn-large"> 
      Тулырак
    </a>
  </p>
</div>

Бит башы

h1Биттәге эчтәлекнең сегмент бүлекчәләрен урынлы урнаштыру өчен гади кабык . Ул күпчелек компонентларны (өстәмә стильләр белән) h1куллана ала.small

<div class = "page-header" > 
  <h1> үрнәк бит башы <small> башлам өчен субтекст </small> </h1>
</div>

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

Килешү буенча, 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 транспорт чарасы.

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

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 класс = "span4" > 
    <a href = "#" class = "thumbnail"> _  
      <img data-src = "holder.js / 300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "эскизлар" > 
  <li класс = "span4" > 
    <div class = "эскиз" > 
      <img data-src = "holder.js / 300x200" alt = "" >  
      <h3> Эскиз этикеткасы </h3>
      <p> Эскиз язмасы ... </p>
    </div>
  </li>
  ...
</ul>

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

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

Килешү

.alertТөп кисәтү хәбәре өчен теләсә нинди текстны һәм өстәмә эштән чыгару төймәсен урыгыз .

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

<div class = "уяу" > 
  <төймә тибы = "төймә" класс = "ябу" мәгълүматны кире кагу = "уяу" > & вакыт; </button>   
  <strong> Кисәтү! </strong> Иң яхшы тикшерү, сез бик яхшы күренмисез.
</div>

Кнопкаларны кире кагу

data-dismiss="alert"Мобиль Сафари һәм Мобиль Опера браузерлары, атрибутка өстәп , тег href="#"кулланганда хәбәрләрне кире кагуны таләп итәләр.<a>

<a href = "#" class = "close" data-dismiss = "alert"> & times ; </a>

Альтернатив рәвештә, сез <button>безнең документлар өчен сайлаган мәгълүмат атрибуты булган элементны куллана аласыз. Кулланганда <button>сез кертергә тиеш, type="button"яисә формаларыгыз җибәрелмәскә мөмкин.

<төймә тибы = "төймә" класс = "ябу" мәгълүматны кире кагу = "уяу" > & вакыт; </button>

JavaScript аша хәбәрләрне кире кагарга

Сигнализацияләрне тиз һәм җиңел җибәрү өчен jQuery плагинын кулланыгыз .

Вариантлар

Озынрак хәбәрләр өчен, өстәп, аскы төргәкнең өске һәм аскы өлешен өстәгез .alert-block.

Кисәтү!

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

<div class = "уяулык-блок" > 
  <төймә тибы = "төймә" класс = "ябу" мәгълүматны кире кагу = "уяу" > & вакыт; </button>   
  <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>

Сызылган

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

<div class = "прогресс-сызыклы" > 
  <div class = "bar" style = " width : 20 %; " > </div>   
</div>

Анимация

Уңнан сулга полосаларны җанландыру өчен .activeөстәргә . .progress-stripedIEның барлык версияләрендә дә юк.

<div class = "прогресс-сызыклы актив" > 
  <div class = "bar" style = " width : 40 %; " > </div>   
</div>

Тапланган

.progressАларны туплау өчен берничә барны бер үк урынга урнаштырыгыз .

<div class = "алгарыш" > 
  <div class = "bar bar-success" style = " width : 35 %; " > </div>   
  <div class = "штрих-кисәтү" стиле = " киңлеге : 20 %; " > </div>   
  <div class = "bar-danger" style = " width : 10 %; " > </div>   
</div>

Вариантлар

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

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

<div class = "прогресс-информация" > 
  <div class = "bar" style = " width : 20 % " > </div>   
</div>
<div class = "прогресс-уңыш" > 
  <div class = "bar" style = " width : 40 % " > </div>   
</div>
<div class = "алгарыш-кисәтү" > 
  <div class = "bar" style = " width : 60 % " > </div>   
</div>
<div class = "алгарыш-куркыныч" > 
  <div class = "bar" style = " width : 80 % " > </div>   
</div>

Сызыклы барлар

Каты төсләргә охшаган, бездә төрле сызыклы прогресс барлары бар.

<div class = "прогресс прогресс-информация прогресс-сызыклы" > 
  <div class = "bar" style = " width : 20 % " > </div>   
</div>
<div class = "прогресс прогресс-уңыш прогресс-сызыклы" > 
  <div class = "bar" style = " width : 40 % " > </div>   
</div>
<div class = "алгарыш-кисәтүче прогресс-сызыклы" > 
  <div class = "bar" style = " width : 60 % " > </div>   
</div>
<div class = "прогресс прогресс-куркыныч прогресс-сызыклы" > 
  <div class = "bar" style = " width : 80 % " > </div>   
</div>

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

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

Internet Explorer 10 һәм Opera 12 белән чагыштырганда версияләр анимацияләрне хупламый.

Төрле төр компонентлар төзү өчен абстракт объект стильләре (блог аңлатмалары, Твитлар һ.б.) текст эчтәлеге белән бергә сул яки уңга тигезләнгән рәсемне күрсәтәләр.

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

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

Медиа башы

Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia conue felis faucibus.

Медиа башы

<div class = "media" > 
  <a class = "pull-left" href = "#"> _  
    <img class = "media-object" data-src = "holder.js / 64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 класс = "медиа-башлам" > Медиа рубрикасы </h4> 
    ...
 
    <! - Ояланган медиа объект ->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

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

Бераз өстәмә билгеләр белән сез исемлек эчендә медиа куллана аласыз (аңлатма җепләре яки мәкаләләр исемлеге өчен файдалы).

Медиа башы

Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis.

Ояланган медиа башы
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis.

Ояланган медиа башы
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis.

Ояланган медиа башы
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis.
Медиа башы
Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis.

<ul class = "медиа-исемлек" > 
  <li класс = "медиа" > 
    <a class = "pull-left" href = "#"> _  
      <img class = "media-object" data-src = "holder.js / 64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 класс = "медиа-башлам" > Медиа рубрикасы </h4> 
      ...
 
      <! - Ояланган медиа объект ->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Скважиналар

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

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

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

Өстәмә дәресләр

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

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

<div class = "яхшы-зур" > 
  ...
</div>

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

<div class = "яхшы-кечкенә" > 
  ...
</div>

Икона

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

<төймә класс = "ябу" > & вакыт; </button>

href="#"Әгәр дә сез якорь куллансагыз, iOS җайланмалары чирттерү вакыйгаларын таләп итә .

<a class = "close" href = "#"> & times ; </a>

Ярдәмче класслар

Кечкенә дисплей яки тәртип үзгәртү өчен гади, тупланган класслар.

.пул-сул

Калган элементны йөзегез

класс = "тарту-сул"

. тарту - сул {
  йөзү : сул ;
}

.пул-уң

Бер элементны уңда йөзегез

класс = "тарту-уң"

. тарту - уң {
  йөзү : уң ;
}

.әр сүзнең

Элемент төсен үзгәртегез#999

класс = "тавышсыз"

. тавышсыз {
  төс : # 999; 
}

.clearfix

floatТеләсә нинди элементны чистарт

класс = "Clearfix"

. Clearfix {
  * зурайту : 1 ; 
  &: элек ,
  &: соң {
    күрсәтү : таблица ;
    эчтәлеге : "" ; 
  }
  &: соң {
    ачык : икесе дә ;
  }
}

Тамчы менюлары

Мисал

Билгеләү

Вариантлар

Менюларны тигезләү

Инвалид меню вариантлары

Түбән менюлар

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

Мисаллар

Бер төймә төркеме

Берничә төймә төркемнәре

Вертикаль төймә төркемнәре

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

Кнопка төркемнәрендәге тамчылар

Кнопка төшү менюлары

Гомуми күзәтү һәм мисаллар

Барлык төймә зурлыклары белән эшли

JavaScript кирәк

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

Зурлыклар

Тамчы менюлары

Nav: таблицалар, дарулар, исемлекләр

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

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

Төп дарулар

Инвалид хәл

Компонент тигезләү

Тотрыклы

Такталар

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

Тамчы

Таблицалар

Таблеткалар

Хәрби исемлекләр

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

Горизонталь бүлүчеләр

Таблицалар

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

Таблицаларда

JQuery плагины кирәк

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

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

Сул якта

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

Навбар

Төп диңгез тактасы

Навбар компонентлары

Бренд

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

Формалар

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

Компонент тигезләү

Тамчыларны куллану

Текст

Ихтимал күрсәтү вариацияләре

Topгарыга урнаштырылган

Түбәнгә урнаштырылган

Статик өске диңгез

Onsаваплы диңгез

Кире үзгәрү

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

Мисаллар

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

Стандарт пагинация

Вариантлар

Инвалид һәм актив хәлләр

Зурлыклар

Тигезләү

Пейджер

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

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

Ихтимал инвалид хәл

Ярлыклар һәм бейджлар

Ярлыклар

Бейджлар

Easyиңел җимерелә

Типографик компонентлар

Герой берәмлеге

Сәлам, Дөнья!

Бит башы