Примери за брзи почетак

Требате брзе шаблоне? Погледајте ове основне примере које смо саставили:

Подразумевана мрежа

Подразумевани систем мреже обезбеђен као део Боотстрап-а је мрежа са 16 колона ширине 940 пиксела. То је укус популарног система мреже 960, али без додатних маргина/подстава на левој и десној страни.

Пример ознаке мреже

Као што је овде приказано, основни распоред се може креирати са две „колоне“, од којих свака обухвата низ од 16 основних колона које смо дефинисали као део нашег система мреже. Погледајте примере у наставку за више варијација.

<див цласс = "ров" > 
  <див цласс = "спан6" > 
    ...
  </див>
  <див цласс = "спан10" > 
    ...
  </див>
</див>

Угнеждене колоне

Угнездите свој садржај ако морате тако што ћете направити а .rowунутар постојеће колоне.

Пример угнежђених колона

<див цласс = "ров" > 
  <див цласс = "спан12" > 
    Ниво 1 колоне
    <див цласс = "ров" > 
      <див цласс = "спан6" > 
        Ниво 2
      </див>
      <див цласс = "спан6" > 
        Ниво 2
      </див>
    </див>
  </див>
</див>

Замотајте сопствену мрежу

У Боотстрап је уграђено неколико варијабли за прилагођавање подразумеваног система мреже од 940 пиксела. Уз мало прилагођавања, можете да измените величину колона, њихових олука и контејнера у коме се налазе.

Унутар мреже

Променљиве потребне за модификацију мрежног система тренутно се налазе у variables.less.

Сада да прилагодите

Измена мреже значи промену три@grid-* променљиве и поновно компајлирање датотека Лесс.

Боотстрап је опремљен за руковање мрежним системом са до 24 колоне; подразумевано је само 16. Ево како би ваше променљиве мреже изгледале прилагођене мрежи од 24 колоне.

@гридЦолумнс : 24 ;       
@гридЦолумнВидтх : 20пк ;   
@гридГуттерВидтх : 20пк ;   

Када се поново компајлира, бићете подешени!

Фиксни распоред

Подразумевани и једноставан 940 пиксела ширине, центриран изглед за скоро сваку веб локацију или страницу коју обезбеђује један <div.container>.

<боди>
  <див цласс = "цонтаинер" > 
    ...
  </див>
</боди>

Флуид лаиоут

Алтернативна, флексибилна течна структура странице са минималном и максималном ширином и левом бочном траком. Одлично за апликације и документе.

<боди>
  <див цласс = "цонтаинер-флуид" > 
    <див цласс = "сидебар" > 
      ...
    </див>
    <див цласс = "цонтент" > 
      ...
    </див>
  </див>
</боди>

Наслови и копија

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

Цела типографска мрежа је заснована на две мање променљиве у нашој датотеци варијабли.лесс: @basefontи @baseline. Прва је основна величина фонта која се користи у целом, а друга је висина основне линије.

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

х1. Наслов 1

х2. Наслов 2

х3. Наслов 3

х4. Наслов 4

х5. Наслов 5

х6. Наслов 6

Пример параграфа

Нуллам куис рисус егет урна моллис орнаре вел еу лео. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус. Нуллам ид долор ид нибх ултрициес вехицула ут ид елит.

Пример наслова Има поднаслов…

Мисц. елемената

Коришћење нагласка, адреса и скраћеница

<strong> <em> <address> <abbr>

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

Ознаке за нагласак ( <strong>и <em>) треба да се користе да укажу на додатну важност или нагласак речи или фразе у односу на њену околну копију. Користите <strong>за важност и <em>за наглашавање стреса .

Нагласак у пасусу

Фусце дапибус , теллус ац цурсус цоммодо , тортор маурис цондиментум нибх , ут ферментум масса јусто сит амет рисус. Маеценас фауцибус моллис интердум. Нулла витае елит либеро, а пхаретра аугуе.

Напомена: И даље је у реду да користите <b>и <i>ознаке у ХТМЛ5 и не морају да буду подебљане и курзивне (мада ако постоји више семантичког елемента, користите га). <b>има за циљ да истакне речи или фразе без преношења додатне важности, док <i>је углавном за глас, техничке термине итд.

Аддрессес

Елемент <address>се користи за контакт информације за свог најближег претка или за целокупан рад. Ево два примера како се може користити:

Напомена: Сваки ред у а <address>мора се завршити преломом реда ( <br />) или бити умотан у ознаку на нивоу блока (нпр.<p> ) да би правилно структурирао садржај.

Скраћенице

За скраћенице и акрониме, користите <abbr>ознаку ( <acronym>је застарела у ХТМЛ5 ). Ставите скраћени образац у ознаку и поставите наслов за комплетно име.

Блоцккуотес

<blockquote> <p> <small>

Како цитирати

Да бисте укључили блок цитат, умотајте га и <blockquote>ознаке . Користите елемент да наведете свој извор и добићете ем цртицу испред њега.<p><small><small>&mdash;

Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте вененатис дапибус посуере велит аликует.

др Јулиус Хибберт

<блоцккуоте>
  <п> Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте вененатис дапибус посуере велит аликует. </п>
  <смалл> Др. Јулиус Хибберт </смалл>
</блоцккуоте>

Унордеред<ul>

• Лорем ипсум долор сит амет
• Цонсецтетур адиписцинг елит
• Интегер молестие лорем ат масса
• Фацилисис ин претиум нисл аликует
• Нулла волутпат аликуам велит
  • Пхаселлус иацулис некуе
  • Пурус содалес ултрициес
  • Вестибулум лаореет порттитор сем
  • Ац тристикуе либеро волутпат ат
• Фауцибус порта лацус фрингилла вел
• Аенеан сит амет ерат нунц
• Егет порттитор лорем

Унстилед<ul.unstyled>

• Лорем ипсум долор сит амет
• Цонсецтетур адиписцинг елит
• Интегер молестие лорем ат масса
• Фацилисис ин претиум нисл аликует
• Нулла волутпат аликуам велит
  • Пхаселлус иацулис некуе
  • Пурус содалес ултрициес
  • Вестибулум лаореет порттитор сем
  • Ац тристикуе либеро волутпат ат
• Фауцибус порта лацус фрингилла вел
• Аенеан сит амет ерат нунц
• Егет порттитор лорем

Наручено<ol>

1. Лорем ипсум долор сит амет
2. Цонсецтетур адиписцинг елит
3. Интегер молестие лорем ат масса
4. Фацилисис ин претиум нисл аликует
5. Нулла волутпат аликуам велит
6. Фауцибус порта лацус фрингилла вел
7. Аенеан сит амет ерат нунц
8. Егет порттитор лорем

Описdl

Листе описа

Листа описа је савршена за дефинисање појмова.

Еуисмод

Вестибулум ид лигула порта фелис ​​еуисмод семпер егет лациниа одио сем нец елит.

Донец ид елит нон ми порта гравида ат егет метус.

Малесуада порта

Етиам порта сем малесуада магна моллис еуисмод.

Код

<code> <pre>

Улепшајте свој код у стилу са две једноставне ознаке. За још више сјаја путем јавасцрипт-а, убаците Гоогле-ову библиотеку кода и спремни сте.

Представљање кода

Код, блокови или само исечци у линији, могу се приказати са стилом само умотавањем у десну ознаку. За блокове кода који обухватају више редова, користите <pre>елемент. За инлине код користите <code>елемент.

<див>
  <х1>Наслов</х1>
  <п>Нешто управо овде...</п>
</див>

<див> <х1> Наслов </х1> <п> Нешто управо овде... </п> </див>
  
  

Инлине ознаке

<span class="label">

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

Означите било шта

Некад вам је била потребна једна од оних модерних новости ! или Важне ознаке приликом писања кода? Па, сада их имате. Ево шта је подразумевано укључено:

Мрежа медија

Прикажите сличице различитих величина на страницама са малим ХТМЛ отиском и минималним стиловима.

Пример сличица

Сличице .media-gridмогу бити било које величине, али најбоље функционишу када се мапирају директно на уграђени Боотстрап систем мреже. Ширина слике као што је 90, 210 и 330 комбинује се са неколико пиксела допуна да би се изједначиле величине .span2, .span4, и .span6колоне.

Велики

Средње

Мала

Кодирање их

Мреже медија су једноставне за употребу и прилично једноставне на страни означавања. Њихове димензије су искључиво засноване на величини укључених слика.

<ул цласс = "медиа-грид" > 
  <ли>
    < а хреф = "#" > 
      <имг цласс = "тхумбнаил" срц = "хттпс://плацехолд.ит/330к230" алт = "" >   
    </а>
  </ли>
  <ли>
    < а хреф = "#" > 
      <имг цласс = "тхумбнаил" срц = "хттпс://плацехолд.ит/330к230" алт = "" >   
    </а>
  </ли>
</ул>

Грађевински столови

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Столови су одлични - за много ствари. Међутим, за сјајне табеле је потребно мало маркупирања да би биле корисне, скалабилне и читљиве (на нивоу кода). Ево неколико савета који ће вам помоћи.

Увек умотајте заглавља колона у <thead>тако да је хијерархија <thead>> <tr>> <th>.

Слично заглављима колона, сав садржај тела ваше табеле треба да буде умотан у а <tbody>тако да је ваша хијерархија <tbody>> <tr>> <td>.

Пример: подразумевани стилови табеле

Све табеле ће бити аутоматски стилизоване само са основним ивицама да би се обезбедила читљивост и одржала структура. Нема потребе за додавањем додатних класа или атрибута.

<табле>
  ...
</табле>

Пример: сажета табела

За табеле које захтевају више података у скученим просторима, користите згуснуту арому која преполовите паддинг. Такође се може користити у комбинацији са ивицама и зебрастим пругама, баш као и подразумевани стилови табеле.

Пример: Обрубљена табела

Нека ваши столови изгледају мало елегантније тако што ћете заокружити углове и додати ивице са свих страна.

<табле цласс = "бордеред-табле" > 
  ...
</табле>

Пример: пругаста зебра

Будите мало маштовити са својим столовима додавањем зебрастих пруга—само додајте .zebra-stripedкласу.

Напомена: Зебра-трака је прогресивно побољшање које није доступно за старије прегледаче као што је ИЕ8 и старији.

<табле цласс = "зебра-пругаста" > 
  ...
</табле>

Пример: пругаста зебра са ТаблеСортер.јс

Узимајући претходни пример, побољшавамо корисност наших табела пружањем функционалности сортирања преко јКуери -ја и додатка Таблесортер . Кликните на заглавље било које колоне да бисте променили сортирање.

<сцрипт срц = "јс/јкуери/јкуери.таблесортер.мин.јс" ></сцрипт> 
<сцрипт > 
  $ ( функција () { 
    $ ( "табле#сортТаблеЕкампле" ). таблесортер ({ сортЛист : [[ 1 , 0 ]] });  
  });
</сцрипт>
<табле цласс = "зебра-пругаста" > 
  ...
</табле>

Подразумевани стилови

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

Наслагане форме

Додајте .form-stackedу ХТМЛ свог обрасца и имаћете ознаке на врху њихових поља уместо са леве стране. Ово одлично функционише ако су ваши обрасци кратки или имате две колоне уноса за теже формуларе.

Величине поља формулара

Прилагодите било који облик input, selectили textareaширину додавањем само неколико класа вашој маркацији.

Од верзије 1.3.0, додали смо класе за одређивање величине засноване на мрежи за елементе обрасца. Молимо користите ове преко постојећих .mini, .small, итд класа.

Дугмад

Као конвенција, дугмад се користе за радње, док се везе користе за објекте. На пример, „Преузми“ може бити дугме, а „недавна активност“ може бити веза.

Сви тастери су подразумевани светлосиви стил, али бројне функционалне класе се могу применити за различите стилове боја. Ове класе укључују плаву .primaryкласу, светлоплаву .infoкласу, зелену .successкласу и класу црвене боје .danger.

Пример дугмади

Стилови дугмади се могу применити на било шта са .btnпримењеним. Обично ћете желети да их примените само на елементе <a>, <button>, и селецт . <input>Ево како то изгледа:

Алтернативне величине

Желите већа или мања дугмад? Имајте то!

Дисаблед стате

За дугмад која нису активна или их је апликација онемогућила из једног или другог разлога, користите стање онемогућено. То је .disabledза везе и :disabledза <button>елементе.

Линкови

Дугмад

Шта је то

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

Прилагодљиво

Сви елементи унутар, као и цела горња трака такође су опциони. Можете одабрати да укључите логотип/име, навигацију, претрагу и секундарну навигацију—или било коју комбинацију тога.

Падајући мени укључени

Као део главне навигације, укључили смо могућност да додате падајуће меније у своју навигацију. Погледајте секундарну навигацију изнад (десно поравнато) да видите како се то ради. Падајуће liознаке такође подржавају .activeприказ тренутног избора странице.

Таблете и пилуле

Направите једноставну секундарну навигацију помоћу <ul>. Пребацивање између табова или таблета додавањем одговарајуће класе.

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

Пример основних картица

Картице се могу користити као редовна навигација (учитавање спољних страница у истој картици) или као области садржаја са картицама за замену окна садржаја. Имамо додатак за картице који се може користити за интеграцију овог другог.

• Кућа
• Профил
• Поруке
• Подешавања
• Контакт
• Испустити
  • Секундарна веза
  • Нешто друго овде
  • Још један линк

<ул цласс = "табс" > 
  <ли цласс = "ацтиве" >< а хреф = " # " > Почетна </а ></ли>  
  <ли>< а хреф = "#" > Профил </а ></ли> 
  <ли>< а хреф = "#" > Поруке </а ></ли> 
  <ли>< а хреф = "#" > Подешавања </а ></ли> 
  <ли>< а хреф = "#" > Контакт </а ></ли> 
</ул>

Пример основних таблета

• Кућа
• Профил
• Поруке
• Подешавања
• Контакт

<ул цласс = "пилуле" > 
  <ли цласс = "ацтиве" >< а хреф = " # " > Почетна </а ></ли>  
  <ли>< а хреф = "#" > Профил </а ></ли> 
  <ли>< а хреф = "#" > Поруке </а ></ли> 
  <ли>< а хреф = "#" > Подешавања </а ></ли> 
  <ли>< а хреф = "#" > Контакт </а ></ли> 
</ул>

Хлебне мрвице

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

• Кућа

• Почетна /
• Средња страница

• Почетна /
• Средња страница /
• Још један

• Почетна /
• Средња страница /
• још један /
• Ти си овде

<ул цласс = "бреадцрумб" > 
  <ли>< а хреф = "#" > Почетна < /а> <спан цласс = "дивидер" > / </спан></ли>   
  <ли>< а хреф = "#" > Средња страница < /а> <спан цласс = "дивидер" > / </спан></ли>   
  <ли>< а хреф = "#" > Још један < /а> <спан цласс = "дивидер" > / </спан></ли>   
  <ли цласс = "ацтиве" > Овде сте </ли> 
</ул>

Пагинација

Ултра поједностављена и минимално стилизована пагинација инспирисана Рдио-ом. Велики блок је тешко промашити, лако је скалабилан и пружа велике површине кликова.

<див цласс = "пагинатион" > 
  <ул>
    <ли цласс = "прев дисаблед" >< а хреф = "#" > & ларр ; Претходно </а></ли>  
    <ли цласс = "ацтиве" >< а хреф = " # " > 1 </а ></ли>  
    <ли>< а хреф = "#" > 2 </а ></ли> 
    <ли>< а хреф = "#" > 3 </а ></ли> 
    <ли>< а хреф = "#" > 4 ​​</а ></ли> 
    <ли>< а хреф = "#" > 5 </а ></ли> 
    <ли цласс = "нект" > < а хреф = "#" > Нект &рарр; </а></ли>  
  </ул>
</див>

Основна упозорења

.alert-message

Поруке у једном реду за истицање неуспеха, могућег неуспеха или успеха акције. Посебно корисно за форме.

Преузмите јавасцрипт »

Пример кода

<див цласс = "упозорење о поруци упозорења" > 
  < а цласс = "цлосе" хреф = "#" > × < /а>  
  <п><стронг> Свети гуацамоле! </стронг> Најбоље је да се сами проверите, не изгледате баш добро. </п>
</див>

Блокирајте поруке

.alert-message.block-message

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

Преузмите јавасцрипт »

Пример кода

<див цласс = "упозорење о блок-поруци поруке упозорења" > 
  < а цласс = "цлосе" хреф = "#" > × < /а>  
  <п><стронг> Свети гуацамоле! Ово је упозорење! </стронг> Најбоље је да се сами проверите, не изгледате баш добро. Нулла витае елит либеро, а пхаретра аугуе. Праесент цоммодо цурсус магна, вел сцелерискуе нисл цонсецтетур ет. </п>
  <див цласс = "алерт-ацтионс" > 
    < а цласс = "бтн смалл" хреф = "#" > Предузми ову радњу < /а> < а цласс = "бтн смалл" хреф = "#" > Или уради ово < /а>     
  </див>
</див>

Модалс

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

Преузмите јавасцрипт »

Описи алатки

Твипсиес су веома корисни за помоћ збуњеном кориснику и усмеравање их у правом смеру.

Преузмите јавасцрипт »

Поповерс

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

Преузмите јавасцрипт »

Почетак

Интеграција јавасцрипт-а са Боотстрап библиотеком је супер једноставна. У наставку прелазимо на основе и пружамо вам неке сјајне додатке за почетак!

Прикажи јавасцрипт документе »

Шта је укључено

Оживите неке од примарних компоненти Боотстрапа помоћу нових прилагођених додатака који раде са јКуери и Ендер . Подстичемо вас да их проширите и модификујете како би одговарали вашим специфичним развојним потребама.

Да ли је јавасцрипт неопходан?

Јок! Боотстрап је дизајниран пре свега да буде ЦСС библиотека. Овај јавасцрипт пружа основни интерактивни слој на врху укључених стилова.

Међутим, за оне којима је потребан јавасцрипт, обезбедили смо горње додатке који ће вам помоћи да разумете како да интегришете Боотстрап са јавасцрипт-ом и да вам одмах пружимо брзу, лагану опцију за основну функционалност.

За више информација и да видите неке демонстрације уживо, погледајте нашу страницу документације додатака .