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

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

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

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

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

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

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

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

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

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

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

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

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

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

Javascript алыгыз »

Идарә итә

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

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

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

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

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

Кнопка төркеменә охшаган, безнең билгеләр регуляр төймә билгесен куллана, ләкин стильне чистарту һәм 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>

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

Мондагы барлык диңгез компонентлары - таблицалар, таблеткалар, исемлекләр - класс аша бер үк төп билгеләрне һәм стильләрне бүлешәләр ..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>һәм сез куелдыгыз.

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

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

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

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

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

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

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

JQuery плагины

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

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>

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

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

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

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

Диңгез тактасын күренү портының өске өлешенә урнаштыру өчен .navbar-fixed-top, тышкы дивка өстәргә .navbar,.

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

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

Бренд исеме

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

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

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 алыгыз

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

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

Мисаллар

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

• Өй

• Өй /
• Китапханә

• Өй /
• Китапханә /
• Мәгълүмат

Билгеләү

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>

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

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

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

Яңа класс

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өчен һәм туры килгән башлам өчен.

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

Сызылган

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

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