Десетици компоненти за повеќекратна употреба изградени за да обезбедат навигација, предупредувања, поповери и многу повеќе.
Контекстуално мени за приказ на списоци со врски. Направено е интерактивно со паѓачкиот приклучок за Javascript .
- <ul class = "dropdown-menu" role = "мени" 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 class = „разделник“ ></li>
- <li><a tabindex = "-1" href = "#" > Одделена врска </a></li>
- </ul>
Гледајќи го само паѓачкото мени, еве го потребниот HTML. Треба да го завиткате активирањето на паѓачкото мени и паѓачкото мени во .dropdown
, или друг елемент што декларира position: relative;
. Потоа само креирајте го менито.
- <div class = „паѓачко долу“ >
- <!-- Врска или копче за префрлување на паѓачкото мени -->
- <ul class = "dropdown-menu" role = "мени" 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 class = „разделник“ ></li>
- <li><a tabindex = "-1" href = "#" > Одделена врска </a></li>
- </ul>
- </div>
Порамнете ги менијата надесно и додадете вклучете дополнителни нивоа на паѓачки мени.
Додај .pull-right
во a .dropdown-menu
надесно порамни го паѓачкото мени.
- <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
Додајте дополнително ниво на паѓачки менија, кои се појавуваат на лебдењето како оние на OS X, со некои едноставни додатоци за обележување. Додајте .dropdown-submenu
во кое било li
во постоечкото паѓачко мени за автоматско стилизирање.
- <ul class = "dropdown-menu" role = "мени" aria-labelledby = "dLabel" >
- ...
- <li class = „паѓачко-подмени“ >
- <a tabindex = "-1" href = "#" > Повеќе опции </a>
- <ul class = „паѓачко мени“ >
- ...
- </ul>
- </li>
- </ul>
Едноставна страница инспирирана од Rdio, одлична за апликации и резултати од пребарување. Големиот блок е тешко да се пропушти, лесно може да се скалира и обезбедува големи области за кликнување.
- <div class = „страница“ >
- <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
за врски што не се кликнуваат и .active
за означување на тековната страница.
- <div class = „страница“ >
- <ul>
- <li class = "disabled" ><a href = "#" > Претходно </a></li>
- <li class = "активен" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </div>
Можете опционално да ги замените активните или оневозможените сидра за распони за да ја отстраните функционалноста на кликнувањето додека ги задржувате наменетите стилови.
- <div class = „страница“ >
- <ul>
- <li class = "disabled" ><span> Претходно </span></li>
- <li class = "активен" ><span> 1 </span></li>
- ...
- </ul>
- </div>
Додадете една од двете изборни класи за да го промените порамнувањето на врските за страници: .pagination-centered
и .pagination-right
.
- <div class = "пагинација-центрирана на страницата" >
- ...
- </div>
- <div class = „пагинација-десно“ >
- ...
- </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>
Пејџер-врските исто така ја користат .disabled
класата за општа корист од страницата.
- <ul class = „пејџер“ >
- <li class = "претходно оневозможено" >
- <a href = "#" > ← Постари </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> |
Лесна, флексибилна компонента за прикажување на клучните содржини на вашата страница. Работи добро на сајтови со маркетинг и содржина.
Ова е едноставна херојска единица, едноставна компонента во стилот на џамботрон за привлекување дополнително внимание на истакнатата содржина или информации.
- <div class = "херој-единица" >
- <h1> Наслов </h1>
- <p> Таглин </p>
- <p>
- <a class = "btn btn-primary btn-large" >
- Научи повеќе
- </a>
- </p>
- </div>
Едноставна обвивка за h1
соодветно распоредување и сегментирање на делови од содржината на страницата. Може да го користи h1
стандардниот small
елемент, како и повеќето други компоненти (со дополнителни стилови).
- <div class = „заглавие на страницата“ >
- <h1> Пример заглавие на страницата <small> Подтекст за заглавие </small></h1>
- </div>
Стандардно, сликичките на Bootstrap се дизајнирани да прикажуваат поврзани слики со минимално потребно обележување.
Со малку дополнително обележување, можно е да се додаде секаков вид HTML содржина како наслови, параграфи или копчиња во сликички.
Сликичките (претходно .media-grid
до верзијата 1.4) се одлични за решетки од фотографии или видеа, резултати од пребарување слики, малопродажни производи, портфолија и многу повеќе. Тие можат да бидат врски или статична содржина.
Означувањето на сликичките е едноставно - сè што е потребно е ul
со кој било број елементи. li
Тој е исто така супер флексибилен, овозможувајќи секаков тип на содржина со само малку повеќе обележување за да се завитка вашата содржина.
Конечно, компонентата за сликички ги користи постоечките мрежни системски класи - како .span2
или .span3
- за контрола на димензиите на сликичките.
Како што споменавме претходно, потребната ознака за сликички е лесна и јасна. Еве поглед на стандардното поставување за поврзани слики :
- <ul class = „сликички“ >
- <li class = "span4" >
- <a href = "#" class = "слика" >
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </ul>
За прилагодена содржина на HTML во сликички, ознаката малку се менува. За да дозволиме содржина на ниво на блок насекаде, ја заменуваме <a>
со <div>
вака:
- <ul class = „сликички“ >
- <li class = "span4" >
- <div class = „слика“ >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> ознака за сликички </h3>
- <p> Наслов на сликичка... </p>
- </div>
- </li>
- ...
- </ul>
Истражете ги сите ваши опции со различните класи на мрежа што ви се достапни. Можете исто така да мешате и поклопувате различни големини.
Завиткајте го секој текст и опционално копче за отфрлање .alert
за основна предупредувачка порака за предупредување.
- <div class = „аларм“ >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <strong> Предупредување! </strong> Најдобро проверете се, не изгледате премногу добро.
- </div>
Прелистувачите Mobile Safari и Mobile Opera, покрај data-dismiss="alert"
атрибутот, бараат и href="#"
за отфрлање на предупредувањата при користење на <a>
ознака.
- <a href = "#" class = "close" data-dismiss = "alert" > × </a>
Алтернативно, можете да користите <button>
елемент со атрибутот податоци, што се одлучивме да го направиме за нашите документи. Кога користите <button>
, мора да вклучите type="button"
или вашите формулари можеби нема да се достават.
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
Користете го приклучокот за предупредувања jQuery за брзо и лесно отфрлање на предупредувањата.
За подолги пораки, зголемете го полнењето на горниот и долниот дел од обвивката за предупредување со додавање .alert-block
.
Најдобро проверете се, не изгледате премногу добро. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alert alert-block" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <h4> Предупредување! </h4>
- Најдобро проверете се, не сте ...
- </div>
Додајте изборни класи за да ја промените конотацијата на предупредувањето.
- <div class = "предупредување-грешка за предупредување" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "информации за предупредување за предупредување" >
- ...
- </div>
Стандардна лента за напредок со вертикален градиент.
- <div class = „напредок“ >
- <div class = "bar" style = " ширина : 60 %; " </div>
- </div>
Користи градиент за да создаде ефект на риги. Не е достапно во IE7-8.
- <div class = "напредок напредок-шарени" >
- <div class = "bar" style = " ширина : 20 %; " </div>
- </div>
Додајте .active
во за да .progress-striped
ги анимирате лентите од десно кон лево. Не е достапно во сите верзии на IE.
- <div class = "progress progress-striped active" >
- <div class = "bar" style = " ширина : 40 %; " </div>
- </div>
Ставете повеќе ленти во истото .progress
за да ги наредете.
- <div class = „напредок“ >
- <div class = "bar bar-success" style = " ширина : 35 %; " ></div>
- <div class = "bar bar-warning" style = " ширина : 20 %; " </div>
- <div class = "bar bar-danger" style = " ширина : 10 %; " </div>
- </div>
Лентите за напредок користат некои од истите копчиња и класи на предупредување за конзистентни стилови.
- <div class = "прогрес напредок-информации" >
- <div class = "bar" style = " ширина : 20 % " ></div>
- </div>
- <div class = „напредок напредок-успех“ >
- <div class = "bar" style = " ширина : 40 % " ></div>
- </div>
- <div class = „предупредување за напредок“ >
- <div class = "bar" style = " ширина : 60 % " ></div>
- </div>
- <div class = "прогрес напредок-опасност" >
- <div class = "bar" style = " ширина : 80 % " ></div>
- </div>
Слично на цврстите бои, имаме разновидни ленти за напредок.
- <div class = "progress progress-info progress-striped" >
- <div class = "bar" style = " ширина : 20 % " ></div>
- </div>
- <div class = "напредок напредок-успех напредок-шарени" >
- <div class = "bar" style = " ширина : 40 % " ></div>
- </div>
- <div class = "progress progress-warning progress-striped" >
- <div class = "bar" style = " ширина : 60 % " ></div>
- </div>
- <div class = "напредок напредок-опасност напредок-шарени" >
- <div class = "bar" style = " ширина : 80 % " ></div>
- </div>
Лентите за напредок користат градиенти, транзиции и анимации CSS3 за да ги постигнат сите нивни ефекти. Овие функции не се поддржани во IE7-9 или постари верзии на Firefox.
Верзиите порано од Internet Explorer 10 и Opera 12 не поддржуваат анимации.
Користете го бунарот како едноставен ефект на елемент за да му дадете вметнат ефект.
- <div class = „добро“ >
- ...
- </div>
Контролирајте ги облогите и заоблените агли со две опционални класи на модификатори.
- <div class = „добро добро-голем“ >
- ...
- </div>
- <div class = „добро добро-мал“ >
- ...
- </div>
Користете ја генеричката икона за затворање за отфрлање содржини како модали и предупредувања.
- <button class = "close" > × </button>
На уредите со iOS им е потребен href="#" за настани со кликнување ако повеќе користите сидро.
- <a class = "close" href = "#" > × </a>
Едноставни, фокусирани часови за мали промени во приказот или однесувањето.
Плови елемент лево
- класа = "повлече-лево"
- . повлече - лево {
- плови : лево ;
- }
Пловете елемент десно
- класа = "повлече-десно"
- . повлече - десно {
- плови : десно ;
- }
Променете ја бојата на елементот во#999
- класа = „исклучено“
- . исклучен звук {
- боја : #999;
- }
Исчистете го float
на кој било елемент
- класа = "чисто поправка"
- . поправи {
- * зумирање : 1 ;
- &: пред ,
- &: после {
- приказ : табела ;
- содржина : "" ;
- }
- &: после {
- јасно : и двете ;
- }
- }