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

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

Стандардна мрежа

Стандардниот мрежен систем обезбеден како дел од Bootstrap е мрежа со 16 колони широка 940 пиксели. Тоа е вкус на популарниот 960 grid систем, но без дополнителна маргина/полнење на левата и десната страна.

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

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

<div class = „ред“ > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Вгнездени колони

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

Пример за вгнездени колони

<div class = „ред“ > 
  <div class = "span12" > 
    Ниво 1 од колоната
    <div class = „ред“ > 
      <div class = "span6" > 
        Ниво 2
      </div>
      <div class = "span6" > 
        Ниво 2
      </div>
    </div>
  </div>
</div>

Тркалајте ја сопствената решетка

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

Внатре во решетката

Променливите потребни за менување на мрежниот систем моментално сите се наоѓаат во preboot.less.

Сега за приспособување

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

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

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Откако ќе се прекомпајлирате, ќе бидете наместени!

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

Стандардниот и едноставен распоред со ширина од 940 пиксели, центриран за речиси секоја веб-локација или страница обезбедена од еден <div.container>.

<тело>
  <div class = „контејнер“ > 
    ...
  </div>
</body>

Распоред на течност

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

<тело>
  <div class = „контејнер-флуид“ > 
    <div class = „странична лента“ > 
      ...
    </div>
    <div class = „содржина“ > 
      ...
    </div>
  </div>
</body>

Наслови и копирајте

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

Целата типографска мрежа се заснова на две Less променливи во нашата датотека preboot.less: @basefontи @baseline. Првата е основната големина на фонтот што се користи насекаде, а втората е висината на основната линија.

Ги користиме тие променливи, и малку математика, за да создадеме маргини, додатоци и височини на линии од сите наши типови и многу повеќе.

h1. Заглавие 1

h2. Заглавие 2

h3. Заглавие 3

h4. Заглавие 4

h5. Заглавие 5

h6. Заглавие 6

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

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Разно. елементи

Користење на акцент, адреси и кратенки

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

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

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

Нагласување во параграф

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

Забелешка: Сè уште е во ред да се користат <b>и <i>ознаки во HTML5 и тие не мора да бидат стилизирани задебелени и закосени, соодветно (иако ако има посемантички елемент, користете го). <b>е наменет за истакнување на зборови или фрази без да се пренесе дополнително значење, а <i>најчесто е за гласовни, технички термини итн.

Адреси

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

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

Кратенки

За кратенки и акроними, користете ја <abbr>ознаката ( <acronym>е застарена во HTML5 ). Ставете го стенографијата во ознаката и поставете наслов за целосното име.

Блокцитати

<blockquote> <p> <small>

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број поставете е раат а ante venenatis dapibus posuere velit aliquet.

д-р Џулиус Хиберт

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број поставете е раат а ante venenatis dapibus posuere velit aliquet. </p>
  <small> д-р Јулиус Хиберт </small>
</blockquote>

Ненарачана<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Цел број molestie lorem at massa
• Фацилиза во претиум нисл аликет
• Нула волутпат аликвам велит
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Енеан седат амет ерат нунц
• Eget porttitor lorem

Нестилизиран<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Цел број molestie lorem at massa
• Фацилиза во претиум нисл аликет
• Нула волутпат аликвам велит
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Енеан седат амет ерат нунц
• Eget porttitor lorem

Нарачано<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Цел број molestie lorem at massa
4. Фацилиза во претиум нисл аликет
5. Нула волутпат аликвам велит
6. Faucibus porta lacus fringilla vel
7. Енеан седат амет ерат нунц
8. Eget porttitor lorem

Описdl

Списоци со опис

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

Еуизмод

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

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

Etiam porta sem malesuada magna mollis euismod.

Код

<code> <pre>

Направете го вашиот код во стил со две едноставни ознаки. За уште поголема извонредност преку Javascript, внесете ја библиотеката за усовршување на кодот на Google и ќе бидете подготвени.

Презентирање на код

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

<div>
  <h1>Наслов</h1>
  <p>Нешто овде...</p>
</div>

<div> <h1> Наслов </h1> <p> Нешто овде... </p> </div>
  
  

Вградени етикети

<span class="label">

Обрнете внимание или означете која било фраза во текстот на вашето тело.

Обележете што било

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

Медиумска мрежа

Прикажувајте сликички со различни големини на страници со мал HTML отпечаток и минимални стилови.

Примери за сликички

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

Големи

Средно

Мали

Кодирање на нив

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

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "слика" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "слика" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Градење табели

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

Табелите се одлични - за многу работи. На одличните табели, сепак, им треба малку љубов за обележување за да бидат корисни, скалабилни и читливи (на ниво на код). Еве неколку совети кои ќе ви помогнат.

Секогаш завиткајте ги заглавјата на вашите колони <thead>така што хиерархијата да биде <thead>> <tr>> <th>.

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

Пример: Стандардни стилови на табели

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

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

Пример: Зебра-риги

Уживајте во вашите маси со додавање зебра-ленти - само додајте ја .zebra-stripedкласата.

Забелешка: Zebra-striping е прогресивно подобрување кое не е достапно за постарите прелистувачи како IE8 и подолу.

<table class = "зебра-риги" > 
...
</table>

Пример: Зебра-риги со/TableSorter.js

Земајќи го претходниот пример, ја подобруваме корисноста на нашите табели со обезбедување на функционалност за сортирање преку jQuery и приклучокот Tablesorter . Кликнете на заглавието на која било колона за да го промените сортирањето.

<script src = "js/jquery/jquery.tablesorter.min.js" </script> 
<скрипта > 
  $ ( функција () { 
    $ ( "table# sortTableExample" ). подредувач на табели ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "зебра-риги" > 
  ...
</table>

Стандардни стилови

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

Наредени форми

Додадете .form-stackedво HTML-от на вашата форма и ќе имате етикети на врвот на нивните полиња наместо лево. Ова функционира одлично ако вашите обрасци се кратки или имате две колони со влезови за потешки форми.

Формирајте големини на полиња

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

Почнувајќи од верзијата 1.3.0, ги додадовме класите за големина засновани на мрежа за елементите на формата. Ве молиме користете ги овие преку постоечките класи .mini, .small, итн.

Копчиња

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

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

Пример копчиња

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

Алтернативни големини

Дали сакате поголеми или помали копчиња? Имајте го тоа!

Состојба со инвалидитет

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

Врски

Копчиња

Што е тоа

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

Приспособливо

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

Вклучени се паѓачки склопови

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

Јазичиња и апчиња

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

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

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

<ul class = „јазичиња“ > 
  <li class = "active" ><a href = "#" > Дома </a></li>  
  <li><a href = "#" > Профил </a></li> 
  <li><a href = "#" > Пораки </a></li> 
  <li><a href = "#" > Поставки </a></li> 
  <li><a href = "#" > Контактирајте </a></li> 
</ul>

• Дома
• Профил
• Пораки
• Поставки
• Контакт

<ul class = „апчиња“ > 
  <li class = "active" ><a href = "#" > Дома </a></li>  
  <li><a href = "#" > Профил </a></li> 
  <li><a href = "#" > Пораки </a></li> 
  <li><a href = "#" > Поставки </a></li> 
  <li><a href = "#" > Контактирајте </a></li> 
</ul>

Трошки од леб

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

• Дома

• Дома /
• Средна страница

• Дома /
• Средна страница /
• Друг

• Дома /
• Средна страница /
• Уште еден /
• Ти си тука

<ul class = „лебна трошка“ > 
  <li><a href = "#" > Почетна </a> <span class = "делител" > / </span></li>   
  <li><a href = "#" > Средна страница </a> <span class = "делител" > / </span></li>   
  <li><a href = "#" > Уште една </a> <span class = "делител" > / </span></li>   
  <li class = "active" > Тука сте </li> 
</ul>

Пагинација

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

<div class = „страница“ > 
  <ul>
    <li class = "претходна оневозможена" ><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 = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > Следно → </a></li>  
  </ul>
</div>

Основни предупредувања

.alert-message

Еднолиниски пораки за истакнување на неуспехот, можниот неуспех или успехот на некоја акција. Особено корисни за форми.

Добијте го Javascript »

Пример код

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

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

.alert-message.block-message

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

Добијте го Javascript »

Пример код

<div class = "предупредување за блок-порака за предупредување" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Свет гуакамоле! Ова е предупредување! </strong> Најдобро проверете се, не изгледате премногу добро. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Направете ја оваа акција </a> <a class = "btn small" href = "#" > Или направете го ова </a>     
  </div>
</div>

Модали

Модали - дијалози или светлосни кутии - се одлични за контекстуални дејства во ситуации каде што е важно да се одржува контекстот на позадината.

Добијте го Javascript »

Совети за алатки

Twipsies се супер корисни за да му помогнат на збунетиот корисник и да го насочи во вистинската насока.

Добијте го Javascript »

Поповери

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

Добијте го Javascript »

Започнување

Интегрирањето на Javascript со библиотеката Bootstrap е супер лесно. Подолу ги разгледуваме основите и ви нудиме неколку прекрасни приклучоци за да започнете!

Прикажи javascript документи »

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

Оживувајте некои од основните компоненти на Bootstrap со нови приспособени приклучоци кои работат со jQuery и Ender . Ве охрабруваме да ги проширите и менувате за да одговараат на вашите специфични развојни потреби.

Дали е потребен javascript?

Не! Bootstrap е дизајниран прво и основно да биде CSS библиотека. Овој javascript обезбедува основен интерактивен слој на врвот на вклучените стилови.

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

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