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

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

Најдобри практики

Ги препорачуваме следниве упатства за користење групи копчиња и алатници:

• Секогаш користете го истиот елемент во една група копчиња <a>или <button>.
• Не мешајте копчиња со различни бои во иста група копчиња.
• Користете икони како додаток или наместо текст, но не заборавајте да вклучите алт и наслов текст каде што е соодветно.

Поврзани групи на копчиња со паѓачки склопки (види подолу) треба да се повикуваат одделно и секогаш да вклучуваат паѓачка лента за да го означат планираното однесување.

Стандарден пример

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

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

Пример на лентата со алатки

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

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

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

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

Добијте го Javascript »

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

Главите горе! Копчињата со паѓачки копчиња мора да бидат поединечно завиткани во нив .btn-groupза .btn-toolbarправилно прикажување.

Преглед и примери

Користете кое било копче за да активирате паѓачко мени со тоа што ќе го ставите во 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>

Работи со сите големини на копчиња

Спуштањето на копчињата работи во која било големина. вашите копчиња се големини до .btn-large, .btn-small, или .btn-mini.

Потребен е Javascript

За паѓачкото копче потребно е да функционира паѓачкиот приклучок Bootstrap .

Во некои случаи - како мобилните - паѓачкото мени ќе се протега надвор од приказот. Порамнувањето треба да го решите рачно или со сопствен Javascript.

Преглед и примери

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

Големини

Користете ја дополнителната класа на копчиња .btn-mini, .btn-small, или .btn-largeза димензионирање.

<div class = "btn-група" > 
  ...
  <ul class = "паѓачкото мени повлекување-десно" > 
    <!-- линкови од паѓачкото мени -->
  </ul>
</div>

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

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

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

Испаѓачки менија

Паѓачките менија, исто така, може да се префрлаат од долу нагоре со додавање на една класа на непосредниот родител на .dropdown-menu. Ќе ја преврти насоката на .caretи ќе го препозиционира самото мени за да се движи од дното нагоре наместо од врвот надолу.

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

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

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

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

Јазичињата и таблетите се одлични за делови од содржината или за навигација помеѓу страници со поврзана содржина.

Порамнување на компонентите

За да ги усогласите врските за навигација, користете ги .pull-leftили .pull-rightкласите на услужните програми. Двете класи ќе додадат CSS плови во наведената насока.

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

Земете редовни <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.

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

• Дома
• Помош
• Спуштање
  • Action
  • Another action
  • Something else here
  • Separated link
• Спуштање
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

• Дома
• Помош
• Спуштање
  • Action
  • Another action
  • Something else here
  • Separated link
• Спуштање
  • Action
  • Another action
  • Something else here
  • Separated link

<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>ознака со класата и ќе бидете подготвени.

Хоризонтални разделувачи

Додајте хоризонтален делител со создавање празна ставка од списокот со класата .divider, вака:

<ul class = "nav nav-list" > 
  ...
  <li class = „разделник“ ></li> 
  ...
</ul>

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

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

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

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

Кога ќе ја залепите лентата за навигација, не заборавајте да ја земете предвид скриената област одоздола. Додадете 40 пиксели или повеќе од додавање на <body>. Не заборавајте да го додадете ова по основниот Bootstrap CSS и пред опционалниот одговорен CSS.

Име на брендот

Едноставна врска за прикажување на вашиот бренд или име на проектот бара само ознака за сидро.

<a class = "brand" href = "#" >  
  Име на проектот
</a>

Форми во лентата за навигација

За правилно стилизирање и позиционирање на формуларот во лентата за навигација, додајте ги соодветните класи како што е прикажано подолу. За стандардна форма, вклучете .navbar-formили .pull-leftили .pull-rightза правилно усогласување.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

За поприспособена форма за пребарување, додајте ја .navbar-searchкласата за да примате специјализирани стилови во лентата за навигација.

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

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

<ul class = "nav" > 
  ...
  <li class = "разделник-вертикално" </li> 
  ...
</ul>

Порамнување на компонентите

За да порамните навигација, формулар за пребарување или текст, користете ги класите .pull-leftили .pull-rightуслужните програми. Двете класи ќе додадат CSS плови во наведената насока.

Додавање паѓачки менија

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

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

Земете го Javascript →

Текст во лентата за навигација

Завиткајте низи текст во <p>ознака за правилно водење и боја.

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

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

Примери

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

• Дома

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

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

Означување

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

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

За пејџер

Компонентата на пејџер е збир на врски за едноставни имплементации на страници со светло обележување и уште полесни стилови. Одлично е за едноставни сајтови како блогови или списанија.

Факултативна оневозможена состојба

Пејџер-врските ја користат и општата .disabledкласа од страницата.

Стандарден пример

Стандардно, пејџерот центрира врски.

• Претходна
• Следно

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

За

Значките се мали, едноставни компоненти за прикажување на некој вид индикатор или број. Тие најчесто се наоѓаат во клиентите за е-пошта како Mail.app или на мобилните апликации за притисни известувања.

Достапни часови

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

Означување

Завиткајте ја вашата содржина на divвака:

<div class = "херој-единица" > 
  <h1> Наслов </h1>
  <p> Таглин </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Научи повеќе
    </a>
  </p>
</div>

Едноставна обвивка за h1соодветно распоредување и сегментирање на делови од содржината на страницата. Може да го користи h1стандардниот smallелемент, како и повеќето други компоненти (со дополнителни стилови).

<div class = „заглавие на страницата“ > 
  <h1> Пример заглавие на страницата </h1>
</div>

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

Стандардно, сликичките на 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" data-dismiss = "alert" > × </a>  
  <strong> Предупредување! </strong> Најдобро проверете се, не изгледате премногу добро.
</div>

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

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" > × </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>

Пругасти

Користи градиент за да создаде ефект на риги (без IE).

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

Анимирани

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

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

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

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

Решетки со риги

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

Однесување

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

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

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

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

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

Велс

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

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

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

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

×

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