Десетици компоненти за повеќекратна употреба се вградени во Bootstrap за да обезбедат навигација, предупредувања, поповери и многу повеќе.
Ултра поедноставена и минимално стилизирана страница инспирирана од 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>
Етикети | Означување |
---|---|
Стандардно | <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> |
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 содржина како наслови, параграфи или копчиња во сликички.
Сликичките (претходно .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
.
Bootstrap доаѓа со одличен приклучок за jQuery кој поддржува пораки за предупредување, што го прави нивното отфрлање брзо и лесно.
Завиткајте ја вашата порака и изборната икона за затворање во div со едноставна класа.
- <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 et.
- <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>
Користи градиент за да создаде ефект на риги.
- <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>
Користете ја генеричката икона за затворање за отфрлање содржини како модали и предупредувања.
- <a class = "close" > × </a>