Групи на копчиња

Користете групи на копчиња за да споите повеќе копчиња заедно како една композитна компонента. Изградете ги со низа <a>или <button>елементи.

Можете исто така да комбинирате комплети <div class="btn-group">за <div class="btn-toolbar">посложени проекти.

Пример за обележување

Еве како HTML изгледа за стандардна група копчиња изградена со копчиња за ознаки за сидро:

<div class = "btn-група" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

И со лента со алатки за повеќе групи:

<div class = "btn-toolbar" > 
  <div class = "btn-група" > 
    ...
  </div>
</div>

Поле за избор и радио вкусови

Групите на копчиња можат да функционираат и како радија, каде што може да биде активно само едно копче, или полиња за избор, каде што може да биде активен кој било број на копчиња. Погледнете ги Javascript документите за тоа.

Добијте го Javascript »

Главите горе

CSS за групи на копчиња е во посебна датотека, button-groups.less.

Спуштање на копчињата

Користете кое било копче за да активирате паѓачко мени со тоа што ќе го ставите во a .btn-groupи ќе обезбедите соодветна ознака на менито.

Пример за обележување

Слично на групата копчиња, нашата ознака користи редовно обележување на копчињата, но со неколку додатоци за да го усоврши стилот и да го поддржи паѓачкиот приклучок за jQuery на Bootstrap.

<div class = "btn-група" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Акција
    <span class = "caret" ></span> 
  </a>
  <ul class = „паѓачко мени“ > 
    <!-- линкови од паѓачкото мени -->
  </ul>
</div>

Спуштање на копчињата за поделување

Надоврзувајќи се на стиловите на групите на копчињата и обележувањето, лесно можеме да создадеме копче за поделба. Копчињата за поделба имаат стандардно дејство лево и паѓачко копче надесно со контекстуални врски.

Пример за обележување

Ги прошируваме нормалните паѓачки копчиња за да обезбедиме второ дејство на копче кое работи како посебен активирач за паѓање.

<div class = "btn-група" > 
  <a class = "btn" href = "#" > Дејство </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = „паѓачко мени“ > 
    <!-- линкови од паѓачкото мени -->
  </ul>
</div>

Моќна основна класа

Сите компоненти за навигација овде - јазичиња, апчиња и списоци - споделуваат исти основни ознаки и стилови низ .navкласата.

Зошто јазичиња и апчиња

Јазичињата и апчињата во Bootstrap се изградени на <ul>ист јадро HTML, листа на врски. Заменете помеѓу јазичиња или апчиња само со класа.

Двете опции се одлични за под-секции на содржина или за навигација помеѓу страници со сродна содржина.

Основни јазичиња

Земете редовни <ul>врски и додајте .nav-tabs:

• Дома
• Профил
• Пораки

<ul class = "nav nav-tabs" > 
  <li class = „активен“ > 
    <a href = "#" > Дома </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Основни апчиња

Земете го истиот HTML, но .nav-pillsнаместо тоа користете:

• Дома
• Профил
• Пораки

<ul class = "nav nav-pills" > 
  <li class = „активен“ > 
    <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.

Одете на страната Javascript за да ги прочитате документите за иницијализирање на паѓачките списоци во Bootstrap.

Јазичиња со паѓачки мени

• Дома
• Профил
• Спуштање
  • Акција
  • Уште една акција
  • Нешто друго овде
  • Одделена врска

<ul class = "nav nav-tabs" > 
  <li class = „паѓачко долу“ > 
    <a class = "паѓачко-префрлање" 
       data-toggle = „паѓачко долу“
       href = "#" >
        Спуштање
        <b class = "caret" ></b> 
      </a>
    <ul class = „паѓачко мени“ > 
      <!-- врски -->
    </ul>
  </li>
</ul>

Апчиња со капки

• Дома
• Профил
• Спуштање
  • Акција
  • Уште една акција
  • Нешто друго овде
  • Одделена врска

<ul class = "nav nav-pills" > 
  <li class = „паѓачко долу“ > 
    <a class = "паѓачко-префрлање" 
       data-toggle = „паѓачко долу“
       href = "#" >
        Спуштање
        <b class = "caret" ></b> 
      </a>
    <ul class = „паѓачко мени“ > 
      <!-- врски -->
    </ul>
  </li>
</ul>

Навигација во стил на апликација

Списоците за навигација обезбедуваат едноставен и лесен начин за градење групи на навигациски врски со опционални заглавија. Најдобро се користат во страничните ленти како што е Finder во OS X.

Структурно, тие се изградени на истите основни стилови на навигација како табовите и таблетите, така што употребата и прилагодувањето се едноставни.

Со икони

Списоците за навигација исто така лесно се опремуваат со икони. Додајте ја соодветната <i>ознака со класата и ќе бидете подготвени.

Пример листа за навигација

Земете список со врски и додајте 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>

Пример со икони

Истиот пример, но со <i>ознаки за икони.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Библиотека
    </a>
  </li>
  ...
</ul>

Што е вклучено

Оживувајте ги вашите јазичиња со едноставен приклучок за префрлање помеѓу содржината преку јазичиња. Bootstrap ги интегрира табовите со табли во четири стилови: горе (стандардно), десно, долу и лево.

Менувањето меѓу нив е лесно и бара само малку менување на означување.

Пример за таблици

За да ги направите јазичињата со јазичиња, завиткајте ги .nav-tabsво друга див со класа .tabbable.

Прилагоден приклучок за jQuery

Сите јазичиња со табли се напојуваат со нашиот лесен приклучок за jQuery. Прочитајте повеќе за тоа како да ги оживеете јазичињата со јазичиња на страницата со документи на Javascript.

Земете го Javascript →

Јазичиња на дното

Превртете го редоследот на HTML и додајте класа за да ставите јазичиња на дното.

<div class = "јазичиња за јазичиња-подолу" > 
  <div class = „таб-содржина“ > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Јазичиња лево

Заменете ја класата за да ставите јазичиња лево.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = „таб-содржина“ > 
    ...
  </div>
</div>

Јазичиња на десната страна

Заменете ја класата за да ставите јазичиња на десната страна.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = „таб-содржина“ > 
    ...
  </div>
</div>

Navbar скелиња

На лентата за навигација потребни се само неколку дивови за добро да се структурира за статичен или фиксен приказ.

<div class = „navbar“ > 
  <div class = „navbar-inner“ > 
    <div class = „контејнер“ > 
      ...
    </div>
  </div>
</div>

За да ја направите лентата за навигација фиксирана на горниот дел од приказот, додајте .navbar-fixed-topво најоддалечениот дел, .navbar. Во вашиот CSS, ќе треба да го земете предвид и преклопувањето што го предизвикува со додавање padding-top: 40px;на вашиот <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" > 
  <input type = "text" class = "search-query" placeholder = "Барај" >   
</form>

Факултативна одговорна варијација

Во зависност од количината на содржина во горната лента, можеби ќе сакате да ги имплементирате опциите што реагираат. За да го направите тоа, завиткајте ја вашата содржина за навигација во див .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>  
 
      <!-- Сè што сакате скриено на 940 пиксели или помалку, ставете го овде -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-пребарување, .navbar-form, итн -->
      </div>
 
    </div>
  </div>
</div>

Врски за навигација

Едноставно се додаваат ставките за Navig преку неуредени списоци.

<ul class = "nav" > 
  <li class = „активен“ > 
    <a href = "#" > Дома </a> 
  </li>
  <li><a href = "#" > Врска </a></li> 
  <li><a href = "#" > Врска </a></li> 
</ul>

Додавање паѓачки списоци

Додавањето паѓачки списоци во навигација е многу едноставно, но бара употреба на нашиот приклучок за Javascript .

<ul class = "nav" > 
  <li class = „паѓачко долу“ > 
    <a href = "#" 
          класа = "паѓачко-префрлање"
          data-toggle = „паѓачко долу“ >
          Сметка
          <b class = "caret" ></b> 
    </a>
    <ul class = „паѓачко мени“ > 
      ...
    </ul>
  </li>
</ul>

Земете го Javascript →

Зошто да ги користите

Навигацијата Breadcrumb се користи како начин да им се покаже на корисниците каде се наоѓаат во апликација или локација, но не и за примарна навигација. Чувајте ја нивната употреба ретка и концизна за да биде најефективна.

Примери

Еден пример прикажан како што може да биде прикажан на повеќе страници.

• Дома

• Дома /
• Библиотека

• Дома /
• Библиотека /
• Податоци

Означување

HTML е вашата стандардна неуредена листа со врски.

<ul class = „лебна трошка“ > 
  <li>
    <a href = "#" > Почетна страница </a> <span class = "делител" > / </span>   
  </li>
  <li>
    <a href = "#" > Библиотека </a> <span class = "divider" > / </span>   
  </li>
  <li class = „активен“ > 
    <a href = "#" > Податоци </a> 
  </li>
</ul>

Кога да се користи

Ултра поедноставена и минимално стилизирана страница инспирирана од Rdio, одлична за апликации и резултати од пребарување. Големиот блок е тешко да се пропушти, лесно може да се скалира и обезбедува големи области за кликнување.

Државни врски на страницата

Врските се приспособливи и работат во голем број околности со вистинската класа. .disabledза врски што не се кликнуваат и .activeза тековната страница.

Флексибилно усогласување

Додадете која било од двете изборни класи за да го промените порамнувањето на врските за страници: .pagination-centeredи .pagination-right.

Примери

Стандардната компонента за страничење е флексибилна и работи во голем број варијации.

Означување

Завиткано во <div>, пагинирањето е само <ul>.

<div class = „страница“ > 
  <ul>
    <li><a href = "#" > Претходна </a></li> 
    <li class = „активен“ > 
      <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 class = „претходна“ > 
    <a href = "#" > ← Постари </a> 
  </li>
  <li class = „следно“ > 
    <a href = "#" > Понови → </a> 
  </li>
</ul>

Стандардни сликички

Стандардно, сликичките на Bootstrap се дизајнирани да прикажуваат поврзани слики со минимално потребно обележување.

Високо приспособлив

Со малку дополнително обележување, можно е да се додаде секаков вид HTML содржина како наслови, параграфи или копчиња во сликички.

• 

  Етикета за сликички

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Акција Акција

• 

  Етикета за сликички

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Акција Акција

Зошто да користите сликички

Сликичките (претходно .media-gridдо верзијата 1.4) се одлични за решетки од фотографии или видеа, резултати од пребарување слики, малопродажни производи, портфолија и многу повеќе. Тие можат да бидат врски или статична содржина.

Едноставно, флексибилно обележување

Означувањето на сликичките е едноставно - сè што е потребно е ulсо кој било број елементи. liТој е исто така супер флексибилен, овозможувајќи секаков тип на содржина со само малку повеќе обележување за да се завитка вашата содржина.

Користи големини на колони на мрежа

Конечно, компонентата за сликички ги користи постоечките мрежни системски класи - како .span2или .span3- за контрола на димензиите на сликичките.

Обележувањето

Како што споменавме претходно, потребната ознака за сликички е лесна и јасна. Еве поглед на стандардното поставување за поврзани слики :

<ul class = „сликички“ > 
  <li class = "span3" > 
    <a href = "#" class = "слика" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

За прилагодена содржина на HTML во сликички, ознаката малку се менува. За да дозволиме содржина на ниво на блок насекаде, ја заменуваме <a>со <div>вака:

<ul class = „сликички“ > 
  <li class = "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 со едноставна класа.

<div class = „аларм“ > 
  <a class = "close" > × </a> 
  <strong> Предупредување! </strong> Најдобро проверете се, не изгледате премногу добро.
</div>

Лесно проширете ја стандардната порака за предупредување со две изборни класи: .alert-blockза повеќе контроли за полнење и текст и .alert-headingза совпаѓање на насловот.

<div class = "alert alert-block" > 
  <a class = "close" > × </a> 
  <h4 class = "alert-heading" > Предупредување! </h4> 
  Најдобро проверете се, не сте ...
</div>

Грешка или опасност

<div class = "предупредување-грешка за предупредување" > 
  ...
</div>

Успех

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

Информации

<div class = "информации за предупредување за предупредување" > 
  ...
</div>

Основни

Стандардна лента за напредок со вертикален градиент.

<div class = „напредок“ > 
  <div class = „бар“ 
       style = " ширина : 60 %; " ></div> 
</div>

Пругасти

Користи градиент за да создаде ефект на риги.

<div class = "прогрес напредок-информации 
     напредок-шарени" >
  <div class = „бар“ 
       style = " ширина : 20 %; " ></div> 
</div>

Анимирани

Го зема примерот со пруги и го анимира.

<div class = "напредок напредок-опасност 
     активен со прогресиски ленти" >
  <div class = „бар“ 
       style = " ширина : 40 %; " ></div> 
</div>

Дополнителни бои

Лентите за напредок користат некои од истите имиња на класи ка��о копчиња и предупредувања за сличен стил.

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

Алтернативно, можете да ги приспособите ПОМАЛКУ датотеките и да ги прелистувате вашите сопствени бои и големини.

Однесување

Лентите за напредок користат CSS3 транзиции, па ако динамично ја прилагодите ширината преку Javascript, таа непречено ќе ја промени големината.

Ако ја користите .activeкласата, вашите .progress-stripedленти за напредок ќе ги анимираат лентите од лево кон десно.

Поддршка на прелистувачот

Лентите за напредок користат градиенти, транзиции и анимации CSS3 за да ги постигнат сите нивни ефекти. Овие функции не се поддржани во IE7-8 или постари верзии на Firefox.

Opera не поддржува анимации во моментов.

Велс

Користете го бунарот како едноставен ефект на елемент за да му дадете вметнат ефект.

<div class = „добро“ > 
  ...
</div>

Значки

Користете значка на елемент за непрочитано броење или како едноставен индикатор.

<span class = "значка" > 3 </div> 

Затвори икона

Користете ја генеричката икона за затворање за отфрлање содржини како модали и предупредувања.

×

<a class = "close" > × </a>