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

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

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

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

Иң яхшы тәҗрибәләр

Без төймә төркемнәрен һәм кораллар тактасын куллану өчен түбәндәге күрсәтмәләрне тәкъдим итәбез:

Buttonәрвакыт бер төймә төркемендә бер үк элементны кулланыгыз, <a>яки <button>.
Бер үк төймә төркемендә төрле төстәге төймәләрне кушмагыз.
Текстка яисә аның урынына иконалар кулланыгыз, ләкин кирәк булганда alt һәм титул текстын кертегез.

Бәйләнешле төймә төркемнәре тамчылары белән (аста карагыз) аерым чакырылырга һәм максатчан тәртипне күрсәтү өчен һәрвакыт тамчы каретны кертергә тиеш.

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

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

<div class = "btn-group" > 
  <төймә класс = "btn" > 1 </button> 
  <төймә класс = "btn" > 2 </button> 
  <төймә класс = "btn" > 3 </button> 
</div>

Кораллар аскысы

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

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

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

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

Javascript алыгыз »

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

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

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

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

Ачылган менюны эшләтеп җибәрү өчен, теләсә нинди төймә кулланыгыз, аны менюга урнаштырыгыз .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>

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

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

Javascript кирәк

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

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

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

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

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

Зурлыклар

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

<div class = "btn-group" > 
  ...
  <ul class = "тамчы-меню тарту-уң" > 
    <! - тамчы меню сылтамалары ->
  </ul>
</div>

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

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

<div class = "btn-group" > 
  <төймә класс = "btn" > Эш </button> 
  <төймә класс = "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

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

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

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

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

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

Даими <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>һәм сез куелдыгыз.

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

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

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

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

Сылтамалар исемлеген алыгыз һәм өстәгез 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 бүлектә.

Howdy, I'm in Section 2.

What up girl, this is Section 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 тәртибен борыгыз һәм астына кыстыргычлар куяр өчен класс өстәгез.

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

Howdy, I'm in Section B.

What up girl, this is Section C.

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

Сул якта

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

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

Howdy, I'm in Section B.

What up girl, this is Section C.

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

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

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

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

Howdy, I'm in Section B.

What up girl, this is Section C.

<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.

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

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

Диңгез тактасын куйгач, астындагы яшерен мәйданны исәпкә алырга онытмагыз. 40px яки аннан да күбрәк өстәмә өстәргә <body>. Моны Bootstrap CSS үзәгеннән соң һәм өстәмә җаваплы CSS алдыннан өстәргә онытмагыз.

Бренд исеме

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

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

Диңгез тактасында формалар

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

<форма класс = "navbar-форма тарту-сул" > 
  <кертү тибы = "текст" класс = "span2" >  
</form>

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

<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>

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

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

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

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

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

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

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

Javascript алыгыз

Диңгез тактасында текст

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

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

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

Мисаллар

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

Билгеләү

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

<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 тарафыннан рухландырылган, кушымталар һәм эзләү нәтиҗәләре өчен бик яхшы. Зур блокны сагыну авыр, җиңел масштаблы, зур басу өлкәләрен тәэмин итә.

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

Сылтамалар көйләнә һәм дөрес класс белән берничә шартларда эшли. .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>

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

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

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

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

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

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

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

<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">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>`

Турында

Бейджлар - күрсәткечне күрсәтү яки ниндидер санау өчен кечкенә, гади компонентлар. Алар гадәттә Mail.app кебек электрон почта клиентларында яки мобиль кушымталарда табыла.

Мөмкин класслар

Исем	Мисал	Билгеләү
Килешү	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-error">6</span>`
Мәгълүмат	8	`<span class="badge badge-info">8</span>`
Кире	10	`<span class="badge badge-inverse">10</span>`

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

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

Билгеләү

Эчтәлекне divшундый итеп төрегез:

<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> Мисал бит башы </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 транспорт чарасы.

Эш Эш

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

Эскизлар (моңа .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 class = "уяу" > 
  <a class = "close" data-dismiss = "alert"> × </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" data-dismiss = "alert"> × </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>

Сызылган

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

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

Анимация

Сызылган мисалны ала һәм анимацияли (IE юк).

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

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

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

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

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

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

Тәртип

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

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

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

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

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

Скважиналар

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

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

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

Икона

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

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

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

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

Иң яхшы тәҗрибәләр

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

Кораллар аскысы

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

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

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

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

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

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

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

Javascript кирәк

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

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

Зурлыклар

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

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

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

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

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

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

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

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

Төп дарулар

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

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

Такталар

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

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

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

Таблицалар

Таблеткалар

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

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

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

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

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

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

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

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

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

JQuery плагины

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

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

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

Сул якта

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

Навбар

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

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

Тикшерелгән диңгез тактасы

Бренд исеме

Диңгез тактасында формалар

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

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

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

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

Диңгез тактасында текст

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

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

Мисаллар

Билгеләү

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

Күп битле бит

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

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

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

Мисаллар

Билгеләү

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

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

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

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

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

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

Бейдж күрсәткечләре һәм укылмаган саннар

Турында

Мөмкин класслар

Типографик компонентлар Битнең башы һәм эчтәлекне сегментлау өчен герой берәмлеге