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

Целата типографска мрежа се заснова на две 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>може да се користи ознаката:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Целосно име
[email protected]

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

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

Додајте ја initialismкласата во кратенка за да ја зголемите хармонијата на типографската хармонија со тоа што ќе и дадете малку помала големина на текстот.

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.

Хоризонтален опис

<dl class="dl-horizontal">

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

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

Еуизмод

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.

Felis euismod semper eget lacinia

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

---

Главите горе! Списоците со хоризонтални описи ќе ги скратат термините кои се премногу долги за да се вклопат во поправката на левата колона text-overflow. Во потесни пристаништа за гледање, тие ќе се променат на стандардниот распоред на наредени распоред.

Во линија

Завиткајте ги вградените фрагменти од кодот со <code>.

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

Основен блок

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

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

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

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

Опционално може да ја додадете .pre-scrollableкласата која ќе постави максимална висина од 350 пиксели и ќе обезбеди лента за лизгање со y-оска.

Google Prettify

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

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

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

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

Означете	Опис
<table>	Елемент за завиткување за прикажување на податоци во табеларен формат
<thead>	Елемент на контејнер за редовите на заглавието на табелата ( <tr>) за означување на колоните на табелата
<tbody>	Елемент на контејнер за редови на табелата ( <tr>) во телото на табелата
<tr>	Елемент на контејнер за збир на ќелии на табелата ( <td>или <th>) што се појавуваат на еден ред
<td>	Стандардна ќелија на табелата
<th>	Специјална табела за етикети за колони (или ред, во зависност од опсегот и поставеноста) Мора да се користи во<thead>
<caption>	Опис или резиме на она што содржи табелата, особено корисно за читателите на екранот

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

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

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

#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
2	Јаков	Торнтон	@масти
3	Лери	птицата	@twitter

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

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

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

#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
2	Јаков	Торнтон	@масти
3	Лери	птицата	@twitter

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

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

#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
	Означи	Ото	@getbootstrap
2	Јаков	Торнтон	@масти
3	Лери птицата		@twitter

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

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

#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
2	Јаков	Торнтон	@масти
3	Лери птицата		@twitter

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

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

	Целосно име
#	Име	Презиме	Корисничко име
1	Означи	Ото	@mdo
2	Јаков	Торнтон	@масти
3	Лери птицата		@twitter

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

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

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

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

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

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

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

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

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

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

Основна форма

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

Име на етикетата

Пример текст за помош на ниво на блок овде.

Провери ме Поднесете

<form class = „добро“ > 
  <label> Име на етикетата </label>
  <input type = "text" class = "span3" placeholder = "Напишете нешто..." >   
  <span class = "help-block" > Пример текст за помош на ниво на блок овде. </span> 
  <label class = "проверка" > 
    <input type = "checkbox" > Проверете ме 
  </label>
  <button type = "submit" class = "btn" > Поднеси </button>  
</form>

Формулар за пребарување

Додадете .form-searchво формата и .search-queryво input.

Пребарување

<form class = "барај форма-пребарување" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Барај </button>  
</form>

Вградена форма

Додадете .form-inlineза префинетост на вертикалното порамнување и растојанието на контролите на формата.

Запомни ме Најави се

<form class = "well form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Лозинка" >   
  <label class = "проверка" > 
    <input type = "checkbox" > Запомни ме 
  </label>
  <button type = "submit" class = "btn" > Најавете се </button>  
</form>

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

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

Внесување текст

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

Поле за избор

Опција една е ова и тоа - не заборавајте да вклучите зошто е одлично

Изберете список

нешто 2 3 4 5

Избор на повеќекони

1 2 3 4 5

Внесување на датотека

Текстареа

Зачувајте ги промените Откажи

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

Со оглед на горенаведениот распоред на формата на пример, тука е ознаката поврзана со првата влезна и контролна група. Сите класи .control-group, .control-label, и .controlsсе потребни за стилизирање.

<form class = „форма-хоризонтална“ > 
  <сет на полиња>
    <legend> Текст на легендата </legend>
    <div class = "контролна група" > 
      <label class = "control-label" for = "input01" > Внесување текст </label>  
      <div class = "контроли" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Текст за помош за поддршка </p> 
      </div>
    </div>
  </fieldset>
</form>

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

---

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

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

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

Фокусиран влез

Влез што не може да се уредува

Некоја вредност овде

Оневозможен влез

Оневозможено поле за избор

Ова е оневозможено поле за избор

Внесување со предупредување

Можеби нешто тргна наопаку

Внесување со грешка

Поправете ја грешката

Внесување со успех

Ууууу!

Изберете со успех

1 2 3 4 5 Ууууу!

Зачувајте ги промените Откажи

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

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

---

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

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

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

---

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

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

---

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

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

Формирајте големини на решетки

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

Користете ги истите .span*класи од мрежниот систем за влезни големини.

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

Можете исто така да користите статични класи кои не се пресликуваат на мрежата, не се прилагодуваат на одговорните стилови на CSS или сметка за различни типови на контроли (на пример, inputнаспроти select).

Подготвен текст

@

Еве некој текст за помош

Додаден текст

.00

Еве повеќе текст за помош

Додадете и прикачете

$ .00

Додадете со копче

Оди!

Додаток со две копчиња

Пребарување Опции

Вградени полиња за избор

1 2 3

Поле за избор

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

Забелешка: Етикетите ги опкружуваат сите опции за многу поголеми области за кликнување и поупотреблива форма.

Радио копчиња

Опција една е ова и тоа - не заборавајте да вклучите зошто е одлично Опцијата два може е нешто друго, а ако ја изберете ќе ја поништите опцијата еден

Зачувајте ги промените Откажи

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

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

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

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

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

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

Дали сакате поголеми или помали копчиња? Додадете .btn-large, .btn-small, или .btn-miniза две дополнителни големини.

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

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

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

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

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

Примарна врска Врска

Примарно копче Копче

Главите горе! Овде користиме .disabledкако услужна класа, слична на заедничката .activeкласа, така што не е потребен префикс.

Една класа, повеќе ознаки

Користете ја .btnкласата на <a>, <button>, или <input>елемент.

Врска Копче

<a class = "btn" href = "" > Врска </a>  
<button class = "btn" type = "поднеси" >  
  Копче
</button>
<влезна класа = "btn" тип = "копче"  
         вредност = „Влез“ >
<внеси класа = "btn" тип = "поднеси"  
         вредност = "Поднеси" >

Како најдобра практика, обидете се да го совпаднете елементот за вашиот контекст за да обезбедите совпаѓање на прикажување меѓу прелистувачите. Ако имате input, користете го <input type="submit">за вашето копче.

• икона-стакло
• икона-музика
• пребарување на икони
• икона-плик
• икона-срце
• икона-ѕвезда
• икона-ѕвезда-празна
• икона-корисник
• икона-филм
• икона-та-голема
• икона-та
• икона-та листа
• икона-ок
• икона-отстрани
• икона-зумирање
• икона-зумирање
• исклучување на иконата
• икона-сигнал
• икона-запчаник
• икона-ѓубре
• икона-дома
• икона-датотека
• икона-време
• икона-пат
• икона-преземи-алт
• преземање на икони
• икона-подигање
• икона-инбокс
• икона-игра-круг
• икона-повтори
• освежување на иконите
• icon-list-alt
• икона-заклучување
• икона-знаме
• икона-слушалки

• исклучување на јачината на иконата
• икона-намалување на јачината на звукот
• зголемување на јачината на иконата
• икона-qcode
• икона-баркод
• икона-ознака
• икони-ознаки
• икона-книга
• икона-обележувач
• печатење на икони
• икона-камера
• икона-фонт
• задебелена икона
• икона-курзив
• икона-текст-висина
• икона-текст-ширина
• икона-порамни-лево
• икона-порамнување-центар
• икона-порамни-десно
• икона-порамни-оправда
• листа на икони
• икона-вовлекување-лево
• икона-вовлекување-десно
• икона-facetime-видео
• икона-слика
• икона-молив
• икона-мапа-маркер
• икона-прилагоди
• икона-нијанса
• икона-уредување
• икона-споделување
• проверка на иконите
• икона-поместување
• икона-чекор-назад
• икона-брзо-назад

• икона-наназад
• играње со икони
• икона-пауза
• икона-стоп
• икона-напред
• икона-брзо напред
• икона-чекор-напред
• исфрлање на иконата
• икона-шеврон-лево
• икона-шеврон-десно
• икона-плус-знак
• икона-минус-знак
• икона-отстрани-знак
• икона-во ред
• икона-прашање-знак
• икона-инфо-знак
• икона-скриншот
• икона-отстрани-круг
• икона-ok-круг
• икона-забрана-круг
• икона-стрелка-лево
• икона-стрелка-десно
• икона-стрелка нагоре
• икона-стрелка-надолу
• икона-сподели-алт
• icon-size-full
• икона-промени големина-мала
• икона-плус
• икона-минус
• икона-ѕвездичка
• икона-извичник-знак
• икона-подарок
• икона-лист
• икона-оган
• икона-отворени очи

• икона-затвори очи
• икона-предупредувачки знак
• икона-рамнина
• икона-календар
• икона-случајно
• икона-коментар
• икона-магнет
• икона-шеврон-ап
• икона-шеврон-долу
• икона-ретвит
• икона-количка
• икона-папка-затвори
• икона-папка-отвори
• икона-промена на големина-вертикална
• icon-size-horizontal
• икона-HDD
• икона-bullhorn
• икона-ѕвонче
• икона-сертификат
• икона-палци нагоре
• икона-палци-надолу
• икона-рака-десно
• икона-рака-лево
• икона-рака нагоре
• икона-рака надолу
• икона-круг-стрелка-десно
• икона-круг-стрелка-лево
• икона-круг-стрелка-нагоре
• икона-круг-стрелка-надолу
• икона-глобус
• икона-клуч
• икони-задачи
• икона-филтер
• икона-актовка
• икона на цел екран

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

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

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

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

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

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

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

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

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

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

Главите горе! Кога користите покрај низи текст, како во копчињата или на навигациските врски, погрижете се да оставите празно место по <i>ознаката за правилно растојание.

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

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

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

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

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

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

И-мејл адреса