Негізгі CSS

Базалық HTML элементтері жаңа, дәйекті көрініс пен сезімді қамтамасыз ету үшін кеңейтілетін сыныптармен стильдендірілген және жетілдірілген.

Тақырыптар және негізгі көшірме

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

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

Біз осы айнымалы мәндерді және кейбір математиканы барлық түріміздің жиектерін, толтырғыштарын және жол биіктігін және т.б. жасау үшін қолданамыз.

Негізгі мәтіннің мысалы

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis disparturient Montes, nascetur ridiculus mus. Көлік құралын пайдалану мүмкін емес.

Негізгі корпустың көшірмесі

Қосу арқылы абзацты ерекшелендіріңіз .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.

Ескертпе:<b> HTML5 - де қолдануға <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 .

Тырнақшалар

Элемент Қолданылуы Қосымша
<blockquote> Басқа көзден мазмұнды цитаталауға арналған блок деңгейіндегі элемент

citeБастапқы URL үшін төлсипат қосыңыз

Қалқымалы опциялар үшін пайдалану .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 elit. Integer posuere erat a ante venenatis.

Жұмыс органында танымал біреу

Блоктауды оңға жылжыту үшін мынаны қосыңыз class="pull-right":

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

Жұмыс органында танымал біреу

Тізімдер

Ретсіз

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Массадағы бүтін molestie lorem
  • Pretium nisl aliquet ішіндегі жеңілдету
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Іріңді сода
    • Vestibulum laoreet porttitor sem
    • Тіріссіз еркіндікке ие болыңыз
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Стильсіз

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Массадағы бүтін molestie lorem
  • Pretium nisl aliquet ішіндегі жеңілдету
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Іріңді сода
    • Vestibulum laoreet porttitor sem
    • Тіріссіз еркіндікке ие болыңыз
  • 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. Массадағы бүтін molestie lorem
  4. 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.
Doec id elit non mi porta gravida және eget metus.
Малесуада порта
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.
Doec id elit non mi porta gravida және 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>.

  1. Мысалы , <code> бөлімі </ code > кірістірілген ретінде оралуы керек .

Негізгі блок

<pre>Кодтың бірнеше жолы үшін пайдаланыңыз . Дұрыс көрсету үшін кодтағы кез келген бұрыштық жақшалардан құтылуды ұмытпаңыз.

<p>Үлгі мәтін осында...</p>
  1. <алдын ала>
  2. <p>Үлгі мәтін осында...</p>
  3. </pre>

Ескертпе:<pre> Тегтердегі кодты мүмкіндігінше солға жақын ұстауды ұмытпаңыз ; ол барлық қойындыларды көрсетеді.

.pre-scrollableСіз 350 пиксель максимум биіктігін орнататын және у осінің айналдыру жолағын қамтамасыз ететін сыныпты қосуға болады.

Google Prettify

Бірдей <pre>элементті алыңыз және жақсартылған көрсету үшін екі қосымша сыныпты қосыңыз.

  1. <p> Мәтін үлгісі осында... </p>
  1. <алдын ала сынып = "prettyprint
  2. linenums» >
  3. <p>Үлгі мәтін осында...</p>
  4. </pre>

Google-code-prettify жүктеп алыңыз және оны қалай пайдалану керектігін қараңыз.

Кестені белгілеу

Тег Сипаттама
<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. </кесте>

Кесте опциялары

Аты Сынып Сипаттама
Әдепкі Жоқ Стильдер жоқ, тек бағандар мен жолдар
Негізгі .table Жолдар арасындағы тек көлденең сызықтар
Шектелген .table-bordered Бұрыштарды дөңгелектейді және сыртқы жиекті қосады
Зебра жолағы .table-striped Тақ жолдарға ашық сұр фон түсін қосады (1, 3, 5, т.б.)
Конденсацияланған .table-condensed tdБарлық және thэлементтер ішінде 8 пиксельден 4 пиксельге дейін тік толтыруды екіге бөледі

Мысал кестелер

1. Әдепкі кесте мәнерлері

Оқуды қамтамасыз ету және құрылымды сақтау үшін кестелер автоматты түрде бірнеше жиектермен стильденеді. 2.0 нұсқасымен .tableсынып қажет.

  1. <кесте класы = "кесте" >
  2. </кесте>
# Аты Тек Пайдаланушы аты
1 белгі Отто @mdo
2 Джейкоб Торнтон @май
3 Ларри құс @twitter

2. Жолақты үстел

Зебра жолақтарын қосу арқылы кестелеріңізбен аздап сәнді болыңыз — тек .table-stripedсыныпты қосыңыз.

Ескертпе: Жолақты кестелер :nth-childCSS селекторын пайдаланады және IE7-IE8 нұсқасында қол жетімді емес.

  1. <кесте класы = "кесте жолақты кесте" >
  2. </кесте>
# Аты Тек Пайдаланушы аты
1 белгі Отто @mdo
2 Джейкоб Торнтон @май
3 Ларри құс @twitter

3. Жиектелген кесте

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

  1. <кесте класы = "кестемен жиектелген" >
  2. </кесте>
# Аты Тек Пайдаланушы аты
1 белгі Отто @mdo
белгі Отто @getbootstrap
2 Джейкоб Торнтон @май
3 Ларри құс @twitter

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

Кесте ұяшық толтырғышын екіге (8 пиксельден 4 пиксельге дейін) қысқарту үшін сыныпты қосу арқылы кестелеріңізді .table-condensedықшамдаңыз.

  1. <кесте класы = "кесте-конденсацияланған кесте" >
  2. </кесте>
# Аты Тек Пайдаланушы аты
1 белгі Отто @mdo
2 Джейкоб Торнтон @май
3 Ларри құс @twitter

5. Олардың барлығын біріктіріңіз!

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

  1. <кесте класы = "үстел кесте жолақты кесте жиектелген кесте ықшамдалған" >
  2. ...
  3. </кесте>
Толық аты
# Аты Тек Пайдаланушы аты
1 белгі Отто @mdo
2 Джейкоб Торнтон @май
3 Ларри құс @twitter

Икемді HTML және CSS

Bootstrap бағдарламасындағы пішіндердің ең жақсы бөлігі - барлық енгізулеріңіз бен басқару элементтеріңіз оларды түзетуде қалай құрастырсаңыз да тамаша көрінеді. Артық HTML талап етілмейді, бірақ біз оны қажет ететіндерге үлгілерді береміз.

Күрделі орналасулар оңай сәндеу және оқиғаларды байланыстыру үшін қысқаша және масштабталатын сыныптармен келеді, сондықтан сіз әр қадамда қамтыласыз.

Төрт макет кіреді

Bootstrap пішін макеттерінің төрт түріне қолдау көрсетеді:

  • Тік (әдепкі)
  • Іздеу
  • Кезекте
  • Көлденең

Пішін орналасуларының әртүрлі түрлері белгілеу үшін кейбір өзгерістерді талап етеді, бірақ басқару элементтерінің өздері қалады және бірдей әрекет етеді.

Басқару күйлері және т.б

Bootstrap пішіндері енгізу, мәтіндік аумақ және сіз күткен таңдау сияқты барлық негізгі пішін басқару элементтеріне арналған мәнерлерді қамтиды. Бірақ ол сонымен қатар қосылған және алдын ала енгізілген енгізулер және құсбелгілер тізімдерін қолдау сияқты бірқатар реттелетін компоненттермен бірге келеді.

Қате, ескерту және сәттілік сияқты күйлер пішінді басқарудың әрбір түріне қосылады. Сондай-ақ ажыратылған басқару элементтеріне арналған мәнерлер қамтылған.

Формалардың төрт түрі

Bootstrap қарапайым веб-пішіндердің төрт стилі үшін қарапайым белгілеу мен стильдерді қамтамасыз етеді.

Аты Сынып Сипаттама
Тік (әдепкі) .form-vertical (қажет емес) Басқару элементтерінің үстіне жинақталған, солға тураланған белгілер
Кезекте .form-inline Ықшам стиль үшін солға реттелген жапсырма және кірістірілген блокты басқару элементтері
Іздеу .form-search Әдеттегі іздеу эстетикасы үшін қосымша дөңгелек мәтін енгізу
Көлденең .form-horizontal Солға, оңға тураланған белгілерді басқару элементтерімен бір жолда жылжытыңыз

Тек пішін басқару элементтерін пайдаланатын үлгі пішіндер , қосымша түзетулер жоқ

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

Қосымша белгілеусіз ақылды және жеңіл әдепкі мәндер.

Мұнда блок деңгейіндегі анықтама мәтінінің мысалы.

  1. <форма класы = «жақсы» >
  2. <label> Белгі атауы </label>
  3. <input type = "text" class = "span3" placeholder = "Bir нәрсе теріңіз..." >
  4. <span class = "help-block" > Мұнда блок деңгейіндегі анықтама мәтінінің мысалы. </span>
  5. <label class = "құсбелгі" >
  6. <енгізу түрі = "құсбелгі" > Мені тексеріңіз
  7. </label>
  8. <button type = "submit" class = "btn" > Жіберу </button>
  9. </form>

Іздеу пішіні

Пішінге .form-searchжәне . .search-query_input

  1. <форма класы = «жақсы пішін іздеу» >
  2. <енгізу түрі = «мәтін» класы = «енгізу-орташа іздеу-сұрау» >
  3. <button type = "submit" class = "btn" > Search </button>
  4. </form>

Кірістірілген пішін

.form-inlineПішін басқару элементтерінің тік туралануын және аралығын дәлдікке қосыңыз .

  1. <пішін класы = «ұңғыма-inline» >
  2. <енгізу түрі = «мәтін» сыныбы = «енгізу-кіші» толтырғыш = «Электрондық пошта» >
  3. <input type = "password" class = "input-small" толтырғышы = "Пароль" >
  4. <label class = "құсбелгі" >
  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 = "басқару элементтері" >
  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. <өріс жинағы
  2. class = "басқару тобының қатесі" >
  3. </fieldset>
Мұнда кейбір құндылық
Бірдеңе дұрыс болмады
Қатені түзетіңіз
Уау!
Уау!

Пішін басқару элементтерін кеңейту

Енгізулерді алдын ала қосу және қосу

Енгізу топтары — қосылған немесе алдын ала мәтіні бар — енгізулеріңізге көбірек мәтінмән берудің оңай жолын қамтамасыз етеді. Керемет мысалдарға Twitter пайдаланушы аттары үшін @ белгісі немесе қаржы үшін $ кіреді.


Құсбелгілер мен радиолар

V1.4 нұсқасына дейін Bootstrap оларды жинақтау үшін құсбелгілер мен радиолардың айналасында қосымша белгілеуді қажет етті. <label class="checkbox">Енді орамды қайталау қарапайым мәселе <input type="checkbox">.

Кірістірілген құсбелгілер мен радиоларға да қолдау көрсетіледі. .inlineКез келген .checkboxнемесе біреуіне қоссаңыз болғаны .radio.


Кірістірілген пішіндер және қосу/алдын алу

Кірістірілген пішінде кірістіру немесе қосуды пайдалану үшін .add-onжәне inputбос орынсыз бір жолға қоюды ұмытпаңыз.


Анықтама мәтінін қалыптастыру

Пішін енгізулері үшін анықтама мәтінін қосу үшін кірістірілген анықтама мәтінін немесе енгізу элементінен кейінгі <span class="help-inline">анықтама мәтін блогын қосыңыз.<p class="help-block">

.span*Енгізу өлшемдері үшін тор жүйесіндегі бірдей сыныптарды пайдаланыңыз .

Сондай-ақ, сіз торға сәйкес келмейтін, жауап беретін CSS мәнерлеріне бейімделмейтін немесе басқару элементтерінің әртүрлі түрлерін есепке алмайтын статикалық сыныптарды пайдалана аласыз (мысалы, inputқарсы select).

@

Міне, кейбір көмек мәтіні

.00
Мұнда қосымша анықтама мәтіні бар
$ .00

Ескертпе: Белгілер үлкенірек басу аймақтары мен пайдалануға қолайлы пішін үшін барлық опцияларды қоршайды.

Түйме class="" Сипаттама
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. <button class = "btn" type = "жіберу" >
  3. Түйме
  4. </button>
  5. <енгізу класы = "btn" түрі = "түйме"
  6. мән = "Кіріс" >
  7. <енгізу сыныбы = "btn" түрі = "жіберу"
  8. мән = «Жіберу» >

Ең жақсы тәжірибе ретінде, браузерлер арасындағы сәйкестікті қамтамасыз ету үшін мәтінмәнге арналған элементті сәйкестендіруге тырысыңыз. Егер сізде болса input, <input type="submit">түймені пайдаланыңыз.

  • белгіше-әйнек
  • белгіше-музыка
  • белгіше-іздеу
  • белгіше-конверт
  • белгіше-жүрек
  • белгіше-жұлдыз
  • белгіше-жұлдыз-бос
  • белгішесі-пайдаланушы
  • белгіше-фильм
  • үлкен белгіше
  • белгішесі-th
  • белгіше-тізім
  • белгішесі-жарайды
  • белгішесі-жою
  • белгішесін үлкейту
  • белгішесін кішірейту
  • белгішесі өшірулі
  • белгіше-сигнал
  • белгіше-тісті
  • белгішесі-қоқыс
  • белгішесі-үй
  • белгіше-файл
  • белгіше уақыты
  • белгіше-жол
  • icon-download-alt
  • белгішесі-жүктеу
  • белгішесі-жүктеп салу
  • белгішесі-кіріс жәшігі
  • белгіше-ойнату-шеңбері
  • белгішесі-қайталау
  • белгішесін жаңарту
  • icon-list-alt
  • белгіше-құлыптау
  • белгіше-жалау
  • иконка-құлаққаптар
  • белгіше-дыбыс өшіру
  • белгішесі-дыбысты азайту
  • белгішенің дыбыс деңгейін арттыру
  • белгішесі-qrcode
  • белгішесі-штрих-код
  • белгіше-тег
  • белгіше-тегтер
  • икон-кітап
  • белгіше-бетбелгі
  • белгішесін басып шығару
  • белгіше-камера
  • белгіше-қаріп
  • белгішесі қалың
  • белгіше-курсив
  • белгіше-мәтін-биіктігі
  • белгіше-мәтін-ені
  • белгішесін-туралау-солға
  • белгішені туралау орталығы
  • белгішесін-туралау-оңға
  • белгіше-туралау-негіздеу
  • белгішелер тізімі
  • белгіше-шегініс-солға
  • белгіше-шегініс-оңға
  • белгішесі-facetime-бейне
  • белгіше-сурет
  • белгіше-қарындаш
  • белгіше-карта-маркер
  • белгішесін реттеу
  • белгіше реңі
  • белгішесін өңдеу
  • белгішені бөлісу
  • белгіше-тексеру
  • белгішесін жылжыту
  • белгішесі-қадам-артқа
  • белгішесі-жылдам-артқа
  • белгішесі-артқа
  • белгішесін ойнату
  • белгішесі-үзіліс
  • белгішесі-тоқтату
  • белгішесін алға жылжыту
  • белгішесі-жылдам алға
  • белгішесі-алға
  • белгішесін шығару
  • белгішесі-шеврон-солға
  • белгішесі-шеврон-оң жақ
  • белгішесі-плюс-белгісі
  • белгіше-минус-белгісі
  • белгішесі-жою-белгісі
  • белгішесі-ок-белгісі
  • белгіше-сұрақ белгісі
  • белгіше-ақпарат-белгісі
  • белгіше-скриншот
  • белгішесін-жою-шеңберін
  • белгішесі-ок-шеңбер
  • белгішеге тыйым салу шеңбері
  • белгіше-көрсеткі-солға
  • белгіше-көрсеткі-оңға
  • белгішесі-жоғары
  • белгішесі-төмен көрсеткі
  • белгіше-бөліс-алт
  • белгіше өлшемін өзгерту-толық
  • белгіше-өлшемін-кіші
  • белгішесі-плюс
  • белгішесі-минус
  • белгіше-жұлдызша
  • белгіше-леп белгісі
  • белгіше-сыйлық
  • белгіше-жапырақ
  • белгіше-от
  • белгішесі-көз-ашық
  • белгішесі-көз-жабу
  • белгіше-ескерту белгісі
  • белгіше-жазықтық
  • белгіше-күнтізбе
  • белгішесі-кездейсоқ
  • белгіше-түсініктеме
  • белгіше-магнит
  • белгішесі-шеврон-жоғары
  • белгішесі-шеврон-төмен
  • белгішесі-ретвит
  • белгіше-сатып алу-себет
  • белгіше-қалта-жабу
  • белгіше-қалта-ашық
  • белгіше-өлшемін өзгерту-тік
  • белгіше-өлшемін өзгерту-көлденең
  • белгішесі-hdd
  • белгіше-бука
  • белгіше-қоңырау
  • белгіше-сертификат
  • белгішесі-бас бармақ
  • белгішесі-бас бармақ-төмен
  • белгішесі-қол-оң
  • белгішесі-сол жақ
  • белгішесін көтеру
  • белгішесі-төмен
  • белгіше-шеңбер-көрсеткі-оңға
  • белгіше-шеңбер-көрсеткі-солға
  • белгіше-шеңбер-жоғары көрсеткі
  • белгіше-шеңбер-төмен көрсеткі
  • белгіше-глобус
  • белгіше кілті
  • белгіше-тапсырмалар
  • белгіше-сүзгі
  • белгіше-портфель
  • белгішесі-толық экран

Спрайт ретінде құрастырылған

Әрбір белгішені қосымша сұрау жасаудың орнына, біз оларды спрайтқа - кескіндерді орналастыру үшін 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>тег қоюға болады, белгішені қоюға болады.

Мысалдар

Оларды түймелерде, құралдар тақтасы үшін түймелер топтарында, шарлау немесе алдын ала берілген пішін енгізулерінде пайдаланыңыз.