Примери за бърз старт

Нуждаете се от бързи шаблони? Вижте тези основни примери, които събрахме:

Решетка по подразбиране

Мрежовата система по подразбиране, предоставена като част от Bootstrap, е мрежа с 16 колони с ширина 940px. Това е разновидност на популярната мрежова система 960, но без допълнително поле/подложка от лявата и дясната страна.

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

Както е показано тук, може да се създаде основно оформление с две „колони“, всяка от които обхваща няколко от 16-те основни колони, които дефинирахме като част от нашата мрежова система. Вижте примерите по-долу за повече варианти.

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Вложени колони

Вложете съдържанието си, ако трябва, като създадете .rowв съществуваща колона.

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

<div class = "row" > 
  <div class = "span12" > 
    Ниво 1 на колоната
    <div class = "row" > 
      <div class = "span6" > 
        Ниво 2
      </div>
      <div class = "span6" > 
        Ниво 2
      </div>
    </div>
  </div>
</div>

Превъртете своя собствена мрежа

В Bootstrap са вградени няколко променливи за персонализиране на мрежовата система от 940px по подразбиране. С малко персонализиране можете да промените размера на колоните, техните канали и контейнера, в който се намират.

Вътре в решетката

Всички променливи, необходими за модифициране на мрежовата система, в момента се намират в variables.less.

Сега за персонализиране

Модифицирането на мрежата означава промяна на трите @grid-*променливи и повторно компилиране на Less файловете.

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

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

След прекомпилиране ще бъдете готови!

Фиксирано оформление

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

<тяло>
  <div class = "контейнер" > 
    ...
  </div>
</body>

Плавно оформление

Алтернативна, гъвкава течна структура на страницата с минимална и максимална ширина и лява странична лента. Страхотно за приложения и документи.

<тяло>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Заглавия и копие

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

Цялата типографска мрежа се основава на две променливи Less в нашия файл variables.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, a pharetra augue.

Забележка: Все още е добре да използвате <b>и <i>тагове в HTML5 и не е необходимо те да бъдат стилизирани съответно с получер и курсив (въпреки че ако има по-семантичен елемент, използвайте го). <b>има за цел да подчертава думи или фрази, без да придава допълнителна важност, докато <i>е предимно за глас, технически термини и т.н.

Адреси

Елементът <address>се използва за информация за контакт за най-близкия му предшественик или за цялата работа. Ето два примера как може да се използва:

Забележка: Всеки ред в <address>трябва да завършва с нов ред ( <br />) или да бъде обвит в таг на ниво блок (напр. <p>), за да се структурира правилно съдържанието.

Съкращения

За съкращения и акроними използвайте <abbr>етикета ( <acronym>е отхвърлен в HTML5 ). Поставете съкратената форма в тага и задайте заглавие за пълното име.

Блокови цитати

<blockquote> <p> <small>

Как да цитирам

За да включите блоков цитат, обвийте <blockquote>около <p>и <small>етикети. Използвайте <small>елемента, за да цитирате източника си и ще получите тире em —преди него.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Д-р Юлиус Хибърт

<блоков цитат>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Д-р Юлиус Хибърт </small>
</blockquote>

Неподредени<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

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

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Поръчан<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Описаниеdl

Списъци с описания

Списъкът с описания е идеален за дефиниране на термини.

Euismod

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>

Пример: Съкратена таблица

За таблици, които изискват повече данни в по-тесни пространства, използвайте кондензирания вкус, който намалява подложката наполовина. Може да се използва и заедно с граници и зебра-ивици, точно като стиловете на таблицата по подразбиране.

Пример: Таблица с граници

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

<table class = "bordered-table" > 
  ...
</table>

Пример: райе на зебра

Вземете малко фантазия с вашите маси, като добавите зебра - просто добавете .zebra-stripedкласа.

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

< клас на таблицата = "zebra-striped" > 
  ...
</table>

Пример: Зеброво райе с TableSorter.js

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

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

Стилове по подразбиране

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

Подредени форми

Добавете .form-stackedкъм HTML кода на вашия формуляр и ще имате етикети в горната част на техните полета, вместо отляво. Това работи чудесно, ако вашите формуляри са кратки или имате две колони с входове за по-тежки формуляри.

Размери на полетата на формуляра

Персонализирайте всяка форма input, selectили textareaширина, като добавите само няколко класа към вашето маркиране.

Считано от v1.3.0, ние добавихме класове за оразмеряване, базирани на решетка, за елементи на форма. Моля, използвайте тези над съществуващите класове .mini, .small, и т.н.

Бутони

Като конвенция бутоните се използват за действия, докато връзките се използват за обекти. Например „Изтегляне“ може да бъде бутон, а „скорошна дейност“ може да бъде връзка.

Всички бутони по подразбиране имат светлосив стил, но могат да се прилагат редица функционални класове за различни цветови стилове. Тези класове включват син .primaryклас, светлосин .infoклас, зелен .successклас и червен .dangerклас.

Примерни бутони

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

Алтернативни размери

Искате ли по-големи или по-малки копчета? Имайте го!

Състояние с увреждания

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

Връзки

Бутони

Какво е

Нашата горна лента е фиксирана лента, която съдържа логото или името на уебсайта, основната навигация и формата за търсене.

Възможност за персонализиране

Всички елементи вътре, както и цялата горна лента, не са задължителни. Можете да изберете да включите лого/име, навигация, търсене и вторична навигация — или произволна комбинация от това.

Включени падащи менюта

Като част от основната навигация сме включили възможността да добавяте падащи менюта към вашата навигация. Вижте вторичната навигация по-горе (подравнена вдясно), за да видите как се прави. liЕтикетите с падащи менюта също поддържат показване .activeна текущия избор на страница.

Таблетки и хапчета

Създайте проста вторична навигация с <ul>. Сменяйте между раздели или хапчета, като добавите подходящия клас.

Чудесно за подраздели на съдържание, като нашите страници с настройки на акаунта и потребителски графики за превключване между страници с подобно съдържание. Предлага се в стилове с раздели или хапчета.

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

Разделите могат да се използват като обикновена навигация (зареждане на външни страници в същия раздел) или като области със съдържание с възможност за разделяне за размяна на панели със съдържание. Имаме плъгин за раздели , който може да се използва за интегриране на последния.

• У дома
• Профил
• Съобщения
• Настройки
• Контакт
• Падащо меню
  • Вторична връзка
  • Нещо друго тук
  • Друга връзка

<ul class = "tabs" > 
  <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>

галета

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

• У дома

• Начало /
• Средна страница

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

• Начало /
• Средна страница /
• още един /
• Ти си тук

<ul class = "breadcrumb" > 
  <li><a href = "#" > Начало </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Средна страница </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Друг </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Вие сте тук </li> 
</ul>

Пагинация

Изключително опростена и минималистична пагинация, вдъхновена от Rdio. Големият блок е трудно да се пропусне, лесно се мащабира и осигурява големи области за щракване.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Предишен </a></li>  
    <li class = "active" ><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 = "следващ" ><a href = "#" > Следващ → </a></li>  
  </ul>
</div>

Основни сигнали

.alert-message

Едноредови съобщения за подчертаване на неуспех, възможен неуспех или успех на действие. Особено полезен за формуляри.

Вземете javascript »

Примерен код

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

Блокиране на съобщения

.alert-message.block-message

За съобщения, които изискват малко обяснение, имаме предупреждения за стил на абзац. Те са идеални за бълбукане на по-дълги съобщения за грешка, предупреждение на потребител за предстоящо действие или просто представяне на информация за по-голям акцент върху страницата.

Вземете javascript »

Примерен код

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Свещено гуакамоле! Това е предупреждение! </strong> Най-добре е да проверите себе си, не изглеждате много добре. Nulla vitae elit libero, a 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 »

Попови

Използвайте изскачащи елементи, за да предоставите подтекстова информация на страница, без да засягате оформлението.

Вземете javascript »

Приготвяме се да започнем

Интегрирането на javascript с библиотеката Bootstrap е супер лесно. По-долу разглеждаме основите и ви предоставяме някои страхотни добавки, за да започнете!

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

Какво е включено

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

Необходим ли е javascript?

не! Bootstrap е проектиран преди всичко да бъде CSS библиотека. Този JavaScript предоставя основен интерактивен слой върху включените стилове.

Въпреки това, за тези, които се нуждаят от javascript, ние предоставихме добавките по-горе, за да ви помогнем да разберете как да интегрирате Bootstrap с javascript и да ви дадем бърза, лека опция за основната функционалност веднага.

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