Негизги CSS

Жаңы, ырааттуу көрүнүштү жана сезимди камсыз кылуу үчүн негизги HTML элементтери стилдештирилген жана кеңейтилүүчү класстар менен өркүндөтүлгөн.

Аталышы жана негизги көчүрмөсү

Типографиялык масштаб

Бүтүндөй типографиялык тор биздин variables.less файлыбыздагы эки Less өзгөрмөсүнө негизделген: @baseFontSizeжана @baseLineHeight. Биринчиси - бүтүндөй колдонулган негизги шрифт-өлчөмү, экинчиси - базалык сызыктын бийиктиги.

Биз ошол өзгөрмөлөрдү жана кээ бир математиканы бардык түрүбүздүн четтерин, толтургучтарын жана сызык бийиктиктерин жана башкаларды түзүү үчүн колдонобуз.

Негизги тексттин мисалы

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

Коргоочу корпустун көчүрмөсү

Кошуу менен абзацты өзгөчө кылыңыз .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. 1-башкы

h2. 2-башкы

h3. 3-башкы

h4. 4-башкы

h5. 5-башкы
h6. 6-башкы

Басым, дарек жана аббревиатура

Элемент Колдонуу Кошумча
<strong> Маанилүү тексттин үзүндүсүн баса белгилөө үчүн Жок
<em> Стресс менен тексттин үзүндүсүн баса белгилегени үчүн Жок
<abbr> Кыскартууларды жана аббревиатураларды ороп, курсордун кеңейтилген версиясын көрсөтөт

titleКеңейтилген текст үчүн кошумча атрибутту кошуу

.initialismБаш тамгалар үчүн классты колдонуңуз .
<address> Байланыш маалыматы үчүн, анын жакынкы ата-бабасы же бүткүл иш органы Бардык саптарды бүтүрүү менен форматтоо сакталсын<br>

Баса колдонуу

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.

Эскертүү: HTML5те колдонуудан тартынбаңыз <b>, <i>бирок алардын колдонулушу бир аз өзгөрдү. <b>кошумча маани бербестен сөздөрдү же сөз айкаштарын бөлүп көрсөтүү үчүн колдонулат, ал эми <i>негизинен үн, техникалык терминдер ж.б.у.с.

Мисал даректер

<address>Бул жерде тег кантип колдонсо болоруна эки мисал келтирилген :

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Толук аты-жөнү
[email protected]

Аббревиатуралардын мисалдары

Атрибуту бар аббревиатуралардын titleылдый жагындагы ачык чекиттери жана курсордун курсорунун курсору бар. Бул колдонуучуларга курсактагы бир нерсе көрсөтүлө тургандыгын кошумча көрсөтөт.

initialismКлассты кыскартууга тексттин көлөмүн бир аз кичирээк берип, типографиялык гармонияны жогорулатуу үчүн кошуңуз .

HTML кесилген нандан бери эң жакшы нерсе.

Аттрибут сөзүнүн аббревиатурасы attr болуп саналат .

Blockquotes

Элемент Колдонуу Кошумча
<blockquote> Башка булактан мазмунду цитаталоо үчүн блок деңгээлиндеги элемент

citeURL булагы үчүн атрибут кошуу

Калкырылган опциялар үчүн колдонуу .pull-leftжана .pull-rightкласстар
<small> Колдонуучуга цитата кошуу үчүн кошумча элемент, адатта чыгарманын аталышы бар автор Булактын <cite>аталышын же атын тегерегине коюңуз

Блок цитатаны кошуу үчүн <blockquote>каалаган HTMLди цитата катары ороп алыңыз. Түз цитаталар үчүн биз сунуштайбыз <p>.

<small>Булагыңызга шилтеме кылуу үчүн кошумча элементти кошуңуз жана &mdash;стилдөө максатында анын алдында сызыкча аласыз.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Атактуу бирөө </small>
  4. </blockquote>

Блок тырмакчалардын мисалы

Демейки блок тырмакчалар төмөнкүдөй стилделет:

Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante venenatis.

Жумушта атактуу адам

Блок тырмакчаңызды оңго жылдыруу үчүн төмөнкүнү кошуңуз class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante venenatis.

Жумушта атактуу адам

Тизмелер

Тартипсиз

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • претиум nisl aliquet жылы Facilisis
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Анеан сит амет эрат нунц
  • Eget porttitor lorem

Unstyled

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • претиум nisl aliquet жылы Facilisis
  • Nulla volutpat aliquam velit
    • 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. Integer molestie lorem at massa
  4. претиум nisl aliquet жылы Facilisis
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Анеан сит амет эрат нунц
  8. Eget porttitor lorem

Description

<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.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Горизонталдуу сүрөттөмө

<dl class="dl-horizontal">

Сүрөттөмө тизмелери
Сүрөттөмө тизмеси терминдерди аныктоо үчүн идеалдуу.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
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. Тар көрүү портторунда алар демейки топтолгон макетке өзгөрөт.

Inline

Коддун саптык үзүндүлөрүн менен ороп алыңыз <code>.

  1. Мисалы , < code > бөлүмү </ code > сап катары оролгон болушу керек .

Негизги блок

<pre>Коддун бир нече саптары үчүн колдонуңуз . Туура рендеринг үчүн коддогу бурчтуу кашаалардан качууну унутпаңыз.

<p>Үлгү тексти бул жерде...</p>
  1. <pre>
  2. <p>Үлгү тексти бул жерде...</p>
  3. </pre>

Эскертүү: Тегдердин ичинде кодду <pre>мүмкүн болушунча солго жакын сактаңыз; ал бардык өтмөктөрдү көрсөтөт.

Каалоо боюнча сиз .pre-scrollableклассты кошо аласыз, ал 350px максималдуу бийиктикти орнотуп, Y огу сыдырма тилкесин камсыз кылат.

Google Prettify

Ошол эле <pre>элементти алып, жакшыртылган көрсөтүү үчүн эки кошумча классты кошуңуз.

  1. <p> Үлгү текст бул жерде... </p>
  1. <алдын ала класс = "prettyprint
  2. linenums" >
  3. <p>Үлгү тексти бул жерде...</p>
  4. </pre>

Google-code-prettify жүктөп алып, кантип колдонууну көрүү үчүн Readme'ди көрүңүз.

Таблица белгилөө

Tag Description
<table> Берилиштерди таблица форматында көрсөтүү үчүн таңуу элементи
<thead> <tr>Таблица тилкелерин белгилөө үчүн таблица баш саптары үчүн контейнер элементи ( ).
<tbody> <tr>Таблицанын негизги бөлүгүндөгү таблица саптары үчүн контейнер элементи ( ).
<tr> Бир катарда пайда болгон таблица уячаларынын ( <td>же ) топтому үчүн контейнер элементи<th>
<td> Демейки жадыбал уячасы
<th> Мамыча (же сап, масштабына жана жайгашуусуна жараша) энбелгилери үчүн атайын таблица уячасы
бир ичинде колдонулушу керек<thead>
<caption> Таблицада эмнени камтыган сүрөттөмө же кыскача маалымат, өзгөчө экранды окугандар үчүн пайдалуу
  1. <таблица>
  2. <thead>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </таблица>

Таблица параметрлери

аты Класс Description
Демейки Жок Стилдер жок, жөн гана мамычалар жана саптар
Негизги .table Катарлардын ортосундагы горизонталдуу сызыктар гана
Чектелген .table-bordered Бурчтарды тегеретет жана сырткы чекти кошот
Зебра-сызык .table-striped Так саптарга ачык боз фон түсүн кошот (1, 3, 5, ж.б.)
Конденсацияланган .table-condensed tdБардык жана thэлементтердин ичиндеги вертикалдуу толтурууну жарымынан 8 пикселден 4 пикселге чейин кыскартат

Мисал таблицалар

1. Демейки таблица стилдери

Таблицалар автоматтык түрдө окулушун камсыз кылуу жана структураны сактоо үчүн бир нече чектер менен стилделет. 2.0 менен .tableкласс талап кылынат.

  1. <таблица класс = "таблица" >
  2. </таблица>
# Биринчи аты Акыркы аты Колдонуучунун аты
1 Марк Отто @mdo
2 Жакып Торнтон @fat
3 Ларри чымчык @twitter

2. чаар үстөл

Зебра сызыгын кошуу менен үстөлдөрүңүздү бир аз кооздоңуз — .table-stripedклассты кошуңуз.

Эскертүү: Чаардуу таблицалар :nth-childCSS селекторун колдонушат жана IE7-IE8де жок.

  1. <таблица класс = "таблица-сызык" >
  2. </таблица>
# Биринчи аты Акыркы аты Колдонуучунун аты
1 Марк Отто @mdo
2 Жакып Торнтон @fat
3 Ларри чымчык @twitter

3. Чектелген үстөл

Эстетикалык максаттар үчүн бүт үстөлдүн айланасына чектерди жана тегеректелген бурчтарды кошуңуз.

  1. <таблица классы = "таблица менен чектеш" >
  2. </таблица>
# Биринчи аты Акыркы аты Колдонуучунун аты
1 Марк Отто @mdo
Марк Отто @getbootstrap
2 Жакып Торнтон @fat
3 Ларри куш @twitter

4. Конденсацияланган стол

.table-condensedТаблицаларыңыздын уяча толтургучтарын экиге (8 пикселден 4 пикселге чейин) кыскартуу үчүн класс кошуп, таблицаларыңызды компакттуу кылыңыз .

  1. <таблица класс = "таблица-конденсацияланган" >
  2. </таблица>
# Биринчи аты Акыркы аты Колдонуучунун аты
1 Марк Отто @mdo
2 Жакып Торнтон @fat
3 Ларри куш @twitter

5. Алардын баарын бириктириңиз!

Колдо болгон класстардын каалаганын колдонуу менен ар кандай көрүнүшкө жетүү үчүн үстөл класстарынын каалаганын айкалыштыруудан тартынбаңыз.

  1. <таблица классы = "таблица-сызык стол-чектелген стол-конденсацияланган" >
  2. ...
  3. </таблица>
Толук аты
# Биринчи аты Акыркы аты Колдонуучунун аты
1 Марк Отто @mdo
2 Жакып Торнтон @fat
3 Ларри куш @twitter

Ийкемдүү HTML жана CSS

Bootstrap'теги формалардын эң жакшы жери - бул сиздин бардык киргизүүлөрүңүз жана башкаруу элементтериңиз, аларды белгилөөдө кандай курсаңыз да, сонун көрүнөт. Ашыкча HTML талап кылынбайт, бирок биз аны талап кылгандар үчүн үлгүлөрдү беребиз.

Татаал макеттер жеңил стилдештирүү жана окуяны бириктирүү үчүн кыска жана масштабдуу класстар менен келет, андыктан ар бир кадамда камтылгансыз.

Төрт макеттер камтылган

Bootstrap форма макеттеринин төрт түрүн колдоо менен келет:

  • Вертикалдуу (демейки)
  • Издөө
  • Inline
  • Горизонталдуу

Форма макеттеринин ар кандай түрлөрү белгилөө үчүн кээ бир өзгөртүүлөрдү талап кылат, бирок башкаруу элементтеринин өзүлөрү ошол эле бойдон калат.

Башкаруу мамлекеттери жана башкалар

Bootstrap формаларына киргизүү, текст аймагы жана сиз күткөн тандоо сыяктуу бардык базалык форманы башкаруу үчүн стилдер кирет. Бирок ал ошондой эле тиркелген жана алдын ала киргизилген киргизүүлөр жана белги кутучаларынын тизмелерин колдоо сыяктуу бир катар ыңгайлаштырылган компоненттер менен келет.

Ката, эскертүү жана ийгилик сыяктуу мамлекеттер форманы башкаруунун ар бир түрү үчүн камтылган. Ошондой эле өчүрүлгөн башкаруу үчүн стилдер камтылган.

Формалардын төрт түрү

Bootstrap жалпы веб формаларынын төрт стили үчүн жөнөкөй белгилөө жана стилдерди камсыз кылат.

аты Класс Description
Вертикалдуу (демейки) .form-vertical (милдеттүү эмес) Башкаруу элементтеринин үстүнө тизилген, солго тегизделген энбелгилер
Inline .form-inline Компакт стил үчүн солго тегизделген энбелги жана саптык блокту башкаруу
Издөө .form-search Кадимки издөө эстетикасы үчүн кошумча тегеректелген текст киргизүү
Горизонталдуу .form-horizontal Солго, оңго тегизделген энбелгилерди башкаруу элементтери менен бир сапта калкытуу

Жөн гана форманы башкаруу элементтерин колдонуучу формалар , кошумча белгилөө жок

Негизги форма

Акылдуу жана жеңил демейки кошумча белгилөөсүз.

Бул жерде блок деңгээлиндеги жардам текстинин мисалы.

  1. <форма класс = "жакшылык" >
  2. <label> Энбелги аты </label>
  3. <киргизүү түрү = "текст" класс = "span3" толтургуч = "Бир нерсени териңиз..." >
  4. <span class = "help-block" > Мисал блок деңгээлиндеги жардам тексти бул жерде. </span>
  5. <белги класс = "текшерүү кутусу" >
  6. <киргизүү түрү = "текшерүү" > Мени текшериңиз
  7. </label>
  8. <button type = "submit" class = "btn" > Тапшыруу </button>
  9. </form>

Издөө формасы

Формага .form-searchжана . .search-query_input

  1. <форма класс = "жакшы форма-издөө" >
  2. <киргизүү түрү = "текст" класс = "киргизүү-орто издөө-суроо" >
  3. <button type = "тапшыртуу " класс = "btn" > Издөө </button>
  4. </form>

Inline форма

Форманын .form-inlineбашкаруу элементтеринин вертикалдуу тегиздөөсүн жана аралыктарын жакшыртыңыз.

  1. <форма класс = "жакшы форма-inline" >
  2. <киргизүү түрү = "текст" класс = "киргизүү-кичинекей" толтургуч = "Электрондук почта" >
  3. <киргизүү түрү = "сырсөз" класс = "киргизүү-кичинекей" толтургуч = "Сырсөз" >
  4. <белги класс = "текшерүү кутусу" >
  5. <киргизүү түрү = "текшерүү кутусу" > Мени эсте
  6. </label>
  7. <button type = "submit" class = "btn" > Кирүү </button>
  8. </form>

Горизонталдык формалар

Оң жакта биз колдогон бардык демейки форманы башкаруу элементтери көрсөтүлгөн. Бул жерде маркерленген тизме:

  • текст киргизүү (текст, сырсөз, электрондук почта, ж.б.)
  • кутуча
  • радио
  • тандоо
  • бир нече тандоо
  • файл киргизүү
  • текст аймагы

Эркин формадагы тексттен тышкары, каалаган HTML5 текстке негизделген киргизүү ушундай көрүнөт.

Мисал белгилөө

Жогорудагы мисал форманын макетинин эске алуу менен, бул жерде биринчи киргизүү жана башкаруу тобу менен байланышкан белгилөө. , .control-group, .control-labelжана .controlsкласстардын баары стилдөө үчүн талап кылынат.

  1. <форма класс = "форма-горизонталдуу" >
  2. <талаа топтому>
  3. <legend> Легенда тексти </legend>
  4. <div class = "контролдоо тобу" >
  5. <label class = "control-label" for = "input01" > Текст киргизүү </label>
  6. <div class = "controls" >
  7. <киргизүү түрү = "текст" класс = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Колдоочу жардам тексти </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Форманын башкаруу абалы

Bootstrap браузер тарабынан колдоого алынган фокусталган жана disabledштаттар үчүн стилдерди өзгөчөлүктөрү. Демейки Webkitти алып салып, анын ордуна outlinea колдонобуз .box-shadow:focus


Форманы текшерүү

Ал ошондой эле каталарды, эскертүүлөрдү жана ийгиликти текшерүү стилдерин камтыйт. Колдонуу үчүн, айланасындагы ката классын кошуңуз .control-group.

  1. <fieldset
  2. class = "контролдук топтун катасы" >
  3. </fieldset>
Бул жерде кээ бир баалуулуктар бар
Бир жерден ката кеткен болушу мүмкүн
Катаны оңдоңуз
Woohoo!
Woohoo!

Форма башкаруу элементтерин кеңейтүү

Киргизүүлөрдү алдын ала жана кошуу

Киргизүү топтору - тиркелген же алдына коюлган тексти бар - киргизүүлөрүңүз үчүн көбүрөөк контекст берүүнүн оңой жолун камсыздайт. Мыкты мисалдарга Twitter колдонуучу аттары үчүн @ белгиси же каржы үчүн $ кирет.


Белгилөө кутучалары жана радиолор

V1.4 чейин, Bootstrap аларды топтоо үчүн белги кутучаларынын жана радиолордун айланасында кошумча белги коюуну талап кылды. <label class="checkbox">Эми, бул ороп турган нерсени кайталоо жөнөкөй маселе <input type="checkbox">.

Inline белги кутучалары жана радиолор да колдоого алынат. .inlineЖөн гана каалаганына кошуңуз .checkboxже .radioбүттүңүз.


Саптык формалар жана тиркеңиз/алдынкы

Киргизүүлөрдү саптык формада алдын ала же кошумчалоону колдонуу үчүн, жана дегенди боштуксуз .add-onбир inputсапка коюуну унутпаңыз.


Форма жардам тексти

Форма киргизүүлөрүңүз үчүн жардам текстин кошуу үчүн , киргизүү элементинен кийинки <span class="help-inline">жардам текстин же жардам текст блогун кошуңуз.<p class="help-block">

.span*Киргизүү өлчөмдөрү үчүн тор системасынын бирдей класстарын колдонуңуз .

Сиз ошондой эле сетчатка картасын түзбөгөн, жооп берүүчү CSS стилдерине ыңгайлашпаган же башкаруунун ар кандай түрлөрүн эсепке албаган статикалык класстарды колдонсоңуз болот (мис., inputvs. select).

@

Бул жерде кээ бир жардам тексти

.00
Бул жерде дагы жардам тексти бар
$ .00

Эскертүү: Энбелгилер бир кыйла чоңураак чыкылдатуу аймактарынын жана колдонууга ыңгайлуу форманын бардык варианттарын курчап турат.

баскыч класс = "" Description
btn Градиент менен стандарттуу боз баскыч
btn btn-primary Кошумча визуалдык салмакты камсыздайт жана баскычтар топтомундагы негизги аракетти аныктайт
btn btn-info Демейки стилдерге альтернатива катары колдонулат
btn btn-success Ийгиликтүү же оң иш-аракетти көрсөтөт
btn btn-warning Бул иш-аракет менен сак болушу керек экенин көрсөтүп турат
btn btn-danger Кооптуу же потенциалдуу терс аракетти көрсөтөт
btn btn-inverse Семантикалык аракетке же колдонууга байланышпаган альтернативалуу кара боз баскыч

Аракеттер үчүн баскычтар

Эреже катары, баскычтар иш-аракеттер үчүн гана колдонулушу керек, ал эми гипершилтемелер объекттер үчүн колдонулушу керек. Мисалы, "Жүктөө" баскычы болушу керек, ал эми "акыркы аракеттер" шилтеме болушу керек.

.btnБаскыч стилдери класс колдонулган бардык нерсеге колдонулушу мүмкүн . <a>Бирок, адатта, сиз буларды жана <button>элементтерге гана колдонгуңуз келет .

Браузердин кайчылаш шайкештиги

IE9 тегеректелген бурчтардагы фон градиенттерин кеспейт, ошондуктан биз аны алып салабыз. Байланыштуу, IE9 иштен чыгарылган buttonэлементтерди жандырып, текстти боз түстө, биз оңдой албаган жагымсыз текст көлөкөсү менен көрсөтөт.

Бир нече өлчөмдөр

Чоңураак же кичине баскычтарды каалайсызбы? .btn-large, .btn-small, же .btn-miniкошумча эки өлчөм үчүн кошуңуз .


Өчүрүлгөн абал

Өчүрүлгөн баскычтар үчүн .disabledклассты шилтемелерге жана элементтердин disabledатрибутун кошуңуз.<button>

Негизги шилтеме Шилтеме

Көңүл бургула! Биз .disabledбул жерде жалпы класска окшош пайдалуу класс катары колдонобуз .active, ошондуктан эч кандай префикс талап кылынбайт.

Бир класс, бир нече тег

.btnКлассты <a>, <button>, же <input>элементте колдонуңуз .

Шилтеме
  1. <a class = "btn" href = "" > Шилтеме </a>
  2. <баскыч класс = "btn" түрү = "тапшыруу" >
  3. баскыч
  4. </button>
  5. <киргизүү класс = "btn" түрү = "баскычы"
  6. маани = "Киргизүү" >
  7. <киргизүү класс = "btn" түрү = "тапшыруу"
  8. мааниси = "Тапшыруу" >

Мыкты тажрыйба катары, браузерлер аралык рендерингдин дал келишин камсыз кылуу үчүн контекстиңизге элементти дал келтирүүгө аракет кылыңыз. Эгер сизде болсо input, баскычыңыз <input type="submit">үчүн колдонуңуз.

  • иконка-айнек
  • icon-музыка
  • icon-издөө
  • icon-конверт
  • икона-жүрөк
  • икон-жылдыз
  • иконка-жылдыз-бош
  • icon-user
  • икон-фильм
  • чоң иконка
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-алып салуу
  • сөлөкөтү-кичирейтүү
  • icon-кичирейтүү
  • сүрөтчө өчүрүү
  • белги-сигнал
  • icon-cog
  • icon-таштанды
  • icon-үй
  • icon-файл
  • иконка-убакыт
  • икон-жол
  • icon-download-alt
  • сөлөкөтү-жүктөө
  • сүрөтчө-жүктөө
  • icon-inbox
  • иконка-ойнотуу-тегерек
  • icon-кайталоо
  • icon-жаңылоо
  • icon-list-alt
  • icon-lock
  • icon-желек
  • icon-наушник
  • иконка-том-өчүрүү
  • иконка-көлөмүн азайтуу
  • икончанын көлөмүн жогорулатуу
  • icon-qrcode
  • icon-штрих-код
  • icon-тег
  • icon-тегдер
  • икон-китеп
  • сөлөкөтү-кыстарма
  • icon-басма
  • иконка-камера
  • icon-шрифт
  • сөлөкөтү калың
  • иконка-курсив
  • icon-тексттин бийиктиги
  • иконка-текст-эн
  • сөлөкөтү-тегиздөө-солго
  • icon-teng-center
  • сөлөкөтү-түздөө-оңго
  • icon-тегиздөө-актоо
  • сөлөкөт тизмеси
  • icon-indent-сол
  • icon-indent-оң
  • icon-facetime-video
  • иконка-сүрөт
  • иконка-карандаш
  • icon-карта-маркер
  • сөлөкөтү тууралоо
  • сөлөкөт түсү
  • icon-edit
  • сүрөтчө бөлүшүү
  • icon-текшерүү
  • иконка-жылуу
  • иконка-кадам артка
  • сөлөкөтү-тез-артка
  • иконка-артка
  • иконка ойноо
  • icon-тыныгуу
  • стоп-стоп
  • сүрөтчө алдыга
  • сөлөкөтү-тез алдыга
  • иконка-кадам алдыга
  • icon-чыгаруу
  • icon-chevron-сол
  • icon-chevron-оңго
  • icon-плюс-белгиси
  • icon-minus-белгиси
  • icon-алып салуу-белгиси
  • icon-ok-белгиси
  • icon-суроо белгиси
  • icon-info-белгиси
  • icon-скриншот
  • icon-чыгаруу-тегерек
  • icon-ok-circ
  • icon-ban-circle
  • сөлөкөтү-жебе-сол
  • сөлөкөтү-жебе-оңго
  • сөлөкөтү-жогору
  • сөлөкөтү-жебе-ылдый
  • icon-share-alt
  • icon-өлчөмүн-толук
  • иконка-размер-кичине
  • icon-plus
  • icon-минус
  • icon-жылдызча
  • icon-илеп белгиси
  • белги-белек
  • icon-жалбырак
  • иконка-от
  • иконка-көз ачык
  • icon-göz-жакын
  • icon-эскертүү белгиси
  • икон-учуктун
  • icon-календар
  • icon-кокустук
  • icon-comment
  • иконка-магнит
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-сауда-саба
  • icon-папка-жабуу
  • icon-папка-ачык
  • icon-өлчөмүн-вертикал
  • icon-өлчөмүн-горизонталдуу
  • icon-hdd
  • icon-bullhorn
  • icon-коңгуроо
  • icon-сертификат
  • сөлөкөтү бармак жогору
  • icon-бармак-ылдый
  • сүрөтчө-кол-оң
  • иконка-кол-сол
  • сөлөкөтү көтөрүү
  • сөлөкөтү-ылдый
  • сөлөкөтү-тегерек-жебе-оңго
  • сөлөкөтү-тегерек-жебе-сол
  • сөлөкөтү-тегерек-жебе-өйдө
  • иконка-тегерек-жебе-ылдый
  • сөлөкөтү-глобус
  • иконка ачкычы
  • icon-милдеттери
  • icon-фильтр
  • иконка-портфель
  • сөлөкөтү-толук экран

Спрайт катары курулган

Ар бир сөлөкөттү кошумча өтүнүч кылуунун ордуна, биз аларды спрайт кылып түздүк — бир файлдагы сүрөттөрдүн тобу, ал сүрөттөрдү CSS менен жайгаштыруу үчүн колдонот background-position. Бул биз Twitter.com сайтында колдонгон ыкма жана ал биз үчүн жакшы болду.

Бардык иконалар класстары .icon-башка компоненттерибиз сыяктуу туура аталыш мейкиндигин жана масштабын аныктоо үчүн префикстерге ээ. Бул башка куралдар менен чыр-чатактарды болтурбоо жардам берет.

Glyphicons бизге ачык булак куралдар топтомундагы Halflings топтомун колдонууга уруксат берди, эгерде биз бул жерде документтерде шилтеме жана кредитти камсыз кылсак. Сураныч, долбоорлоруңузда да ушундай кылыңыз.

Кантип колдонуу керек

Bootstrap бардык иконалар үчүн тег колдонот <i>, бирок аларда кейс классы жок — жалпы префикс гана. Колдонуу үчүн, төмөнкү кодду каалаган жерге коюңуз:

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

Ошондой эле бир кошумча класс менен даяр болгон тескери (ак) иконалар үчүн жеткиликтүү стилдер бар:

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

Сиздин иконалар үчүн тандоо үчүн 140 класс бар. Жөн гана туура класстар менен тег кошуңуз <i>жана сиз орнотуңуз. Толук тизмени sprites.less же дал ушул документте таба аласыз .

Көңүл бургула! Тексттин саптарынын жанында, баскычтардагы же навигация шилтемелериндегидей, <i>туура аралык үчүн тегден кийин боштук калтырууну унутпаңыз.

Колдонуу учурлары

Иконалар сонун, бирок аларды кайда колдонсо болот? Бул жерде бир нече идеялар бар:

  • Каптал тилкеңиздин навигациясы үчүн визуалдык көрүнүш катары
  • Таза сөлөкөт менен башкарылган навигация үчүн
  • Кыймылдын маанисин билдирүүгө жардам берүүчү баскычтар үчүн
  • Колдонуучунун көздөгөн жеринде контекстти бөлүшүү үчүн шилтемелер менен

Негизи, каалаган жерге <i>тег коюуга болот, сөлөкөтүн коюуга болот.

Мисалдар

Аларды баскычтарда, куралдар тилкеси үчүн баскыч топторунда, навигацияда же алдын ала форма киргизүүлөрүндө колдонуңуз.