Типографска скала

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

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

Пример текст на телото

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Донец сед одо дуи.

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

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>може да се користи ознаката:

Примери за кратенки

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

HTML е најдоброто нешто од исечениот леб.

Кратенка од зборот атрибут е attr .

За да вклучите блок цитат, завиткајте го <blockquote>кој било HTML како цитат. За директни цитати препорачуваме <p>.

Вклучете изборен <small>елемент за да го наведете вашиот извор и ќе добиете цртичка —пред него за стилски цели.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante venenatis. </p>
  <small> Некој познат </small>
</blockquote>

Стандардните блок-цитати се стилизирани вака:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante venenatis.

Некој познат во Body of work

За да го поставите вашиот блок цитат надесно, додадете class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante venenatis.

Некој познат во Body of work

Ненарачана

<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 class="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>.

На пример , делот < code> </ code > треба да се завитка како внатрешен .  

Основен блок

Користете <pre>за повеќе линии код. Погрижете се да ги претворите сите карти во нивните уникодни знаци за правилно прикажување.

<p>Примерок текст овде...</p>

<пред>
  <p>Примерок текст овде...</p>
</pre>

Забелешка: Не заборавајте да го чувате кодот во <pre>ознаките што е можно поблиску до лево; ќе ги прикаже сите јазичиња.

Google Prettify

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

<p> Примерок текст овде... </p>

<pre class = "убав принт 
     лини“ >
  <p>Примерок текст овде...</p>
</pre>

Преземете го google-code-prettify и погледнете го readme за тоа како да го користите.

<табела>
  <глава>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

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

<table class = "table" > 
  …
</table>

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

Забелешка: Sprited табелите го користат :nth-childизбирачот CSS и не е достапен во IE7-IE8.

<table class = "табела маса-риги" > 
  …
</table>

Додајте граници околу целата маса и заоблени агли за естетски цели.

<table class = "табела граничи со маса" > 
  …
</table>

Направете ги вашите табели покомпактни со додавање на .table-condensedкласата за да се преполови полнењето на ќелиите на табелата (од 8 px на 4 px).

<table class = "table table-condensed" > 
  …
</table>

Слободно комбинирајте која било од класите на табелата за да постигнете различен изглед со користење на која било од достапните класи.

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

Флексибилен HTML и CSS

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

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

Вклучени четири распореди

Bootstrap доаѓа со поддршка за четири типа распоред на форми:

• Вертикално (стандардно)
• Пребарување
• Во линија
• Хоризонтална

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

Контролирајте ги состојбите и многу повеќе

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

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

Со v2.0, имаме полесни и попаметни стандардни поставки за стилови на форми. Без дополнителна ознака, само контроли за форма.

Одразувајќи ги стандардните стилови на WebKit, само додадете .form-searchза дополнително заоблени полиња за пребарување.

Влезовите се на ниво на блок за почеток. За .form-inlineи .form-horizontal, ние користиме внатрешен блок.

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

На левата страна се прикажани сите стандардни контроли за формулари што ги поддржуваме. Еве ја листата со точки:

• внесување текст (текст, лозинка, е-пошта, итн.)
• поле за избор
• радио
• изберете
• повеќекратен избор
• внесување датотека
• текстуална област

Нови стандардни со v2.0

До v1.4, стандардните стилови на форми на Bootstrap го користеа хоризонталниот распоред. Со Bootstrap 2, го отстранивме тоа ограничување за да имаме попаметни, поскалабилни стандардни поставки за која било форма.

Редизајнирани состојби на прелистувачот

Bootstrap содржи стилови за фокусирани и disabledсостојби поддржани од прелистувачот. Го отстрануваме стандардниот веб-кит outlineи применуваме на box-shadowнегово место за :focus.

Потврда на формуларот

Вклучува и стилови за валидација за грешки, предупредувања и успех. За користење, додајте ја класата на грешка во околината .control-group.

<сет на полиња
  class = "грешка во контролната група" >
  …
</fieldset>

Подгответе и прикачете влезови

Влезните групи - со дополнет или претходно поставен текст - обезбедуваат лесен начин да се даде повеќе контекст за вашите влезови. Одлични примери го вклучуваат знакот @ за кориснички имиња на Твитер или $ за финансии.

Поле за избор и радија

До верзијата 1.4, Bootstrap бараше дополнително обележување околу полињата за избирање и радија за да ги наредат. Сега, едноставно е да се повтори она <label class="checkbox">што го обвива <input type="checkbox">.

Вградените полиња за избор и радија се исто така поддржани. Само додајте .inlineна било кој .checkboxили .radioи ќе завршиш.

Вметнати форми и прикачете/закачете

За да користите prepend или додавање влезови во вградена форма, задолжително поставете ги .add-onи inputна иста линија, без празни места.

Формирајте текст за помош

За да додадете текст за помош за внесувањата на вашата форма, вклучете текст <span class="help-inline">за помош или блок за текст за помош со <p class="help-block">после влезниот елемент.

Копчиња за дејства

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

За сидра и форми

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

Забелешка: Сите копчиња мора да ја вклучуваат .btnкласата. Треба да се применат стилови на копчиња <button>и <a>елементи за конзистентност.

Повеќе големини

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

Примарно дејство Акција

Примарно дејство Акција

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

За оневозможени копчиња, користете .btn-disabledза врски и :disabledза <button>елементи.

Примарно дејство Акција

Примарно дејство Акција

Компатибилност со вкрстени прелистувачи

Во IE9, го испуштаме градиентот на сите копчиња во корист на заоблените агли бидејќи IE9 не ги отсекува градиентите на заднината на аглите.

Поврзано, IE9 ги зајакнува оневозможените buttonелементи, прикажувајќи го текстот сив со непријатна текстуална сенка - за жал, не можеме да го поправиме ова.

Изграден како спрајт

Наместо секоја икона да биде дополнително барање, ние ги составивме во sprite - куп слики во една датотека што користи CSS за позиционирање на сликите со background-position. Ова е истиот метод што го користиме на Twitter.com и добро функционираше кај нас.

Сите класи на икони имаат префикс .icon-за соодветно именско растојание и опсег, слично како и нашите други компоненти. Ова ќе помогне да се избегнат конфликти со други алатки.

Glyphicons ни дозволи да го користиме сетот Halflings во нашиот комплет алатки со отворен код сè додека обезбедуваме врска и кредит овде во документите. Ве молиме размислете да го сторите истото во вашите проекти.

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

Со v2.0.0, избравме да користиме <i>ознака за сите наши икони, но тие немаат класа на букви - само споделен префикс. За да го користите, ставете го следниов код речиси насекаде:

<i class = "icon-search" </i> 

Достапни се и стилови за превртени (бели) икони, подготвени со една дополнителна класа:

<i class = "icon-search icon-white" ></i> 

Има 120 класи од кои можете да изберете за вашите икони. Само додадете <i>ознака со вистинските класи и ќе бидете подготвени. Целосната листа можете да ја најдете во sprites.less или токму овде во овој документ.

Случаи за употреба

Иконите се одлични, но каде би ги користел? Еве неколку идеи:

• Како визуелни елементи за навигација на вашата странична лента
• За чисто навигација управувана од икони
• За копчињата да помогнат да се пренесе значењето на дејството
• Со линкови за споделување контекст на дестинацијата на корисникот

Во суштина, секаде каде што можете да ставите <i>ознака, можете да ставите икона.

Освежи Исплата Избриши

Коментар Поставки Повеќе информации