CSS базасы

Скафолдинг өстендә, төп HTML элементлары стильләштерелгән һәм киңәйтелгән класслар белән көчәйтелгән, яңа, эзлекле күренеш һәм хисләр тудыру өчен.

Башлыклар һәм тән күчермәсе

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

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

Без бу үзгәрүчәннәрне, һәм кайбер математиканы кулланабыз, кырлар, паддинглар, һәм безнең төрле типтагы биеклекләр һәм башкалар.

Мисал тән тексты

Nullam quis risus ena urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус. Nullam id dolor id nibh ultricies транспорт.

Куркынычсызлык

Параграфны өстәп аерылып торыгыз .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor аукторы. Duis mollis, коммерция булмаган люктус.

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 fermentation massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

Искәрмә: HTML5 кулланырга ирек бирегез <b>, <i>ләкин аларны куллану бераз үзгәрде. <b>сүз яки фразеологизмнарны яктырту өчен, өстәмә әһәмият бирмичә <i>, күбесенчә тавыш, техник терминнар һ.б.

Мисал адреслары

Тэгны ничек куллануның ике мисалы <address>:

Твиттер , Inc.
_
_
Тулы исем
[email protected]

Мисал кыскартулар

Атрибутлы кыскартуларның titleҗиңел нокталы аскы чиге һәм кадак өстендә ярдәм курсоры бар. Бу кулланучыларга өстәмә күрсәткеч бирә, каядыр күрсәтеләчәк.

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

Киселгән икмәктән HTML иң яхшы әйбер.

Сыйфат атрибутының кыскартылышы .

Блоккотлар

Элемент Куллану Ихтимал
<blockquote> Башка чыганактан эчтәлек китерү өчен блок дәрәҗәсендәге элемент

citeЧыганак URL өчен атрибут өстәгез

Йөзелгән вариантлар өчен .pull-leftкласслар кулланыгыз.pull-right
<small> Кулланучының йөзен китерү өчен өстәмә элемент, гадәттә әсәр исеме булган автор Чыганакның <cite>исемен яки исемен әйләндереп алыгыз

Блоккотны кертү өчен, <blockquote>теләсә нинди HTML - ны цитата итеп урыгыз. Туры цитаталар өчен без а <p>.

Чыганагыгызны китерү өчен өстәмә <small>элемент кертегез, һәм сез аны &mdash;стилизацияләү максатыннан алырсыз.

  1. <blockquote>
  2. <p> Лорем ипсум долор амет утыра, консексетур элитасы. Integer posuere ante venenatis бетерә. </p>
  3. <small> танылган кеше </small>
  4. </blockquote>

Мисал блоккотлары

Килешенгән блоккотлар шулай итеп ясалган:

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante venenatis бетерә.

Эш органында танылган кеше

Блоккотыңны уңга йөзү өчен, өстә class="pull-right":

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante venenatis бетерә.

Эш органында танылган кеше

Исемлекләр

Тәртипсез

<ul>

  • Лорем ипсум долор амет утыра
  • Consectetur adipiscing elit
  • Массадагы тулы молести лорем
  • Претиум нисл аликетында фасилис
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Пурус содалес ультрикасы
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Энеан утыра
  • Порттор лоремасын алыгыз

Стильсез

<ul class="unstyled">

  • Лорем ипсум долор амет утыра
  • Consectetur adipiscing elit
  • Массадагы тулы молести лорем
  • Претиум нисл аликетында фасилис
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Пурус содалес ультрикасы
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Энеан утыра
  • Порттор лоремасын алыгыз

Заказлы

<ol>

  1. Лорем ипсум долор амет утыра
  2. Consectetur adipiscing elit
  3. Массадагы тулы молести лорем
  4. Претиум нисл аликетында фасилис
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Энеан утыра
  8. Порттор лоремасын алыгыз

Тасвирлау

<dl>

Тасвирлау исемлекләре
Тасвирлау исемлеге терминнарны билгеләү өчен бик яхшы.
Эвизмод
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida eget metus.
Малесуада портасы
Etiam porta sem maleuada 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 eget metus.
Малесуада портасы
Etiam porta sem maleuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentation massa justo sit amet risus.

Идарә итә! Горизонталь тасвирлау исемлеге сул багана төзәтмәсенә туры килерлек терминнарны кисәр text-overflow. Таррак күренешләрдә алар килешү буенча урнаштырылган макетка үзгәрәчәкләр.

Киң төзелештә

Кодның сызыкларын урыгыз <code>.

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

Төп блок

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

<p> Монда текст үрнәге ... </p>
  1. <pre>
  2. & lt; p & gt; Монда үрнәк текст ... & lt; / p & gt;
  3. </pre>

Искәрмә: кодны <pre>тэглар эчендә мөмкин кадәр сул якка саклагыз. ул барлык кыстыргычларны күрсәтәчәк.

Сез өстәмә рәвештә .pre-scrollableмаксималь биеклекне 350px куячак һәм у күчәре әйләндерү тактасын тәэмин итә торган классны өсти аласыз.

Google Prettify

Бер үк <pre>элементны алыгыз һәм көчәйтелгән күрсәтү өчен ике өстәмә класс өстәгез.

  1. <p> Монда текст үрнәге ... </p>
  1. <pre class = "prettyprint
  2. тукымалар " >
  3. & lt; p & gt; Монда үрнәк текст ... & lt; / p & gt;
  4. </pre>

Google-code-prettify-ны йөкләү һәм куллану өчен укуны карау.

Таблицаны билгеләү

Тег Тасвирлау
<table> Таблицаны форматта күрсәтү өчен элементны төрү
<thead> <tr>Өстәл баганаларын билгеләргә өстәл башы рәтләре өчен контейнер элементы
<tbody> <tr>Өстәл тәнендәге контейнер элементы
<tr> Бер рәттә барлыкка килгән өстәл күзәнәкләре ( <td>яки ) өчен контейнер элементы<th>
<td> Килешү өстәл шакмаклары
<th> Колонка өчен махсус өстәл шакмаклары (яки рәт, масштабына һәм урнашуына карап) этикеткалар
кулланылырга тиеш<thead>
<caption> Таблицаның нинди булуын тасвирлау яки кыскача мәгълүмат, аеруча экран укучылары өчен файдалы
  1. <таблица>
  2. <баш>
  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 Рәтләр арасында горизонталь сызыклар гына
Чик белән чикләнгән .table-bordered Почмакларны әйләндерә һәм тышкы чикне өсти
Зебра-полоса .table-striped Сәер рәтләргә ачык соры фон төсе өсти (1, 3, 5 һ.б.)
Конденсацияләнгән .table-condensed tdБарлык һәм thэлементлар эчендә 8px-dan 4px-га кадәр вертикаль паддерны кисәләр

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

1. Килешү өстәл стиле

Таблицалар автоматик рәвештә берничә чик белән генә ясалган, укуны тәэмин итү һәм структураны саклау. 2.0 белән .tableкласс кирәк.

  1. <өстәл сыйныфы = "таблица" >
  2. </table>
# Исем Фамилия Кулланучы исеме
1 Билге Отто @mdo
2 Ягъкуб Торнтон @fat
3 Ларри Кош @twitter

2. Сызылган өстәл

Зебра-стрипинг өстәп, өстәлләрегез белән бераз хыялланыгыз - .table-stripedклассны өстәгез.

Искәрмә: сызыклы таблицалар :nth-childCSS селекторын кулланалар һәм IE7-IE8 мөмкин түгел.

  1. <өстәл классы = "өстәл сызыгы" >
  2. </table>
# Исем Фамилия Кулланучы исеме
1 Билге Отто @mdo
2 Ягъкуб Торнтон @fat
3 Ларри Кош @twitter

3. Чикләнгән өстәл

Эстетик максатларда бөтен өстәл һәм түгәрәк почмаклар чикләрен өстәгез.

  1. <өстәл класы = "өстәл өстәле белән чикләнгән" >
  2. </table>
# Исем Фамилия Кулланучы исеме
1 Билге Отто @mdo
Билге Отто @getbootstrap
2 Ягъкуб Торнтон @fat
3 Ларри Кош @twitter

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

Өстәл күзәнәкләрен ябыштыру өчен класс өстәп, өстәлләрегезне тагын да тыгызрак .table-condensedитегез (8px-dan 4px-га кадәр).

  1. <өстәл класы = "өстәл өстәл-конденсацияләнгән" >
  2. </table>
# Исем Фамилия Кулланучы исеме
1 Билге Отто @mdo
2 Ягъкуб Торнтон @fat
3 Ларри Кош @twitter

5. Аларның барысын да берләштерегез!

Төрле класслардан файдаланып, төрле кыяфәткә ирешү өчен өстәл классларының теләсә кайсысын берләштерергә иренегез.

  1. <өстәл классы = "өстәл таблицасы сызыклы өстәл белән чикләнгән өстәл конденсацияләнгән" >
  2. ...
  3. </table>
Тулы исем
# Исем Фамилия Кулланучы исеме
1 Билге Отто @mdo
2 Ягъкуб Торнтон @fat
3 Ларри Кош @twitter

Эластик HTML һәм CSS

Bootstrap формаларының иң яхшы ягы - сезнең барлык керемнәрегез һәм контрольләрегез, сез аларны ничек билгеләсәгез дә, бик яхшы күренәләр. Артык HTML кирәк түгел, ләкин без аны таләп итүчеләр өчен үрнәкләр тәкъдим итәбез.

Катлаулырак макетлар җиңел стиллау һәм вакыйгаларны бәйләү өчен үзенчәлекле һәм масштаблы класслар белән килә, шуңа күрә сез һәр адымда яктыртыласыз.

Дүрт макет кертелгән

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

  • Вертикаль (килешү)
  • Эзләү
  • Киң төзелештә
  • Горизонталь

Төрле форма макетлары билгеләр өчен кайбер үзгәрешләр таләп итә, ләкин контрольләр үзләре кала һәм үзләрен шулай тоталар.

Контроль хәлләр һәм башкалар

Bootstrap формаларына кертү, текстария кебек төп форма контроле өчен стильләр керә, һәм сез көткәнне сайлагыз. Ләкин ул шулай ук ​​кушылган һәм алдан кертелгән керемнәр һәм пунктлар исемлеге өчен ярдәм кебек махсус компонентлар белән килә.

Хата, кисәтү, уңыш кебек дәүләтләр форма белән идарә итүнең һәр төре өчен кертелгән. Инвалид контроль өчен стильләр дә кертелгән.

Дүрт төр

Bootstrap гади веб-формаларның дүрт стиле өчен гади билгеләр һәм стильләр тәкъдим итә.

Исем Класс Тасвирлау
Вертикаль (килешү) .form-vertical (таләп ителми) Контроль өстендә тезелгән, сул як ярлыклар
Киң төзелештә .form-inline Сул тигезләнгән ярлык һәм компакт стиль өчен блок-контроль
Эзләү .form-search Типик эзләү эстетикасы өчен өстәмә түгәрәк текст кертү
Горизонталь .form-horizontal Контроль белән бер сызыкта сул, уң тигезләнгән ярлыклар

Форма контроле ярдәмендә үрнәк формалар , өстәмә билгеләр юк

Төп форма

Өстәмә билгеләрсез акыллы һәм җиңел дефолтлар.

Монда блок дәрәҗәсендәге ярдәм тексты.

  1. <форма класс = "яхшы" >
  2. <label> Ярлыкның исеме </label>
  3. <кертү тибы = "текст" класс = "span3" урын хуҗасы = "Нәрсәдер языгыз ..." >
  4. <span class = "help-block" > Монда блок дәрәҗәсендәге ярдәм тексты. </span>
  5. <label class = "checkbox" >
  6. <кертү тибы = "пункт" > Мине тикшерегез
  7. </label>
  8. <төймә тибы = "тапшыру" класс = "btn" > Тапшыру </button>
  9. </form>

Эзләү формасы

Формага .form-searchһәм . .search-query_input

  1. <форма класс = "яхшы форма-эзләү" >
  2. <кертү тибы = "текст" класс = "кертү-урта эзләү-сорау" >
  3. <төймә тибы = "тапшыру" класс = "btn" > Эзләү </button>
  4. </form>

Эчке форма

.form-inlineВертикаль тигезләү һәм форма белән идарә итү аралыгы нечкәлеккә өстәгез .

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

Горизонталь формалар

Уң якта күрсәтелгән - без хуплаган барлык форма контрольләре. Менә пуля исемлеге:

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

Ирекле текстка өстәп, HTML5 текстка нигезләнгән кертү шулай күренә.

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

Aboveгарыдагы мисал формасының макетын исәпкә алып, монда беренче кертү һәм контроль төркем белән бәйләнгән билгеләр. Стиллау өчен .control-group, .control-labelһәм .controlsкласслар кирәк.

  1. <форма класс = "форма-горизонталь" >
  2. <кыры>
  3. <legend> Легенда тексты </legend>
  4. <div class = "контроль-төркем" >
  5. <label class = "control-label" өчен = "input01" > Текст кертү </label>
  6. <div class = "контроль" >
  7. <кертү тибы = "текст" класс = "кертү-хларге" id = "кертү01" >
  8. <p class = "help-block" > Ярдәм текстына булышу </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Форма белән идарә итү халәтләре

Bootstrap браузер ярдәмендә тупланган стильләр өчен стильләр disabled. Килешенгән Вебкитны бетерәбез outlineһәм box-shadowаның урынына кулланабыз :focus.


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

Бу шулай ук ​​хаталар, кисәтүләр, уңыш өчен тикшерү стильләрен үз эченә ала. Куллану өчен, тирә-юньгә хата классын өстәгез .control-group.

  1. <кыр
  2. класс = "контроль-төркем хата" >
  3. </fieldset>
Кайбер кыйммәтләр монда
Нәрсәдер дөрес булмагандыр
Зинһар, хатаны төзәтегез
Woohoo!
Woohoo!

Форма контролен киңәйтү

Керүләрне өстәү һәм өстәү

Керү төркемнәре - кушылган яки алдан язылган текст белән - сезнең керемнәр өчен күбрәк контекст бирүнең җиңел ысулы. Зур мисалларга Твиттер кулланучы исемнәре өчен @ билге яки финанс өчен $ керә.


Такталар һәм радио

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 стильләренә яраклашалар, яки төрле контроль төрләр өчен хисап язалар (мәсәлән, inputvs. select).

@

Менә кайбер ярдәм тексты

.00
Менә күбрәк ярдәм тексты
$ .00

Искәрмә: этикеткалар зуррак басу өлкәләре һәм кулланырлык форма өчен барлык вариантларны чолгап ала.

Кнопка класс = "" Тасвирлау
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">

  • икона-пыяла
  • икона-музыка
  • иконка-эзләү
  • икона-конверт
  • иконка-йөрәк
  • икона-йолдыз
  • икона-йолдыз-буш
  • иконка-кулланучы
  • иконка-фильм
  • иконка-зур
  • иконка
  • иконка-исемлек
  • икона
  • иконка-бетерү
  • иконка-зурайту
  • иконаны зурайту
  • иконка
  • иконка-сигнал
  • иконка
  • икона-чүп
  • иконка-өй
  • иконка-файл
  • иконка-вакыт
  • иконка-юл
  • иконка-йөкләү-алт
  • иконка-йөкләү
  • иконка-йөкләү
  • иконка
  • иконка-уйнау
  • иконка-кабатлау
  • иконка-яңарту
  • иконка-исемлек-алт
  • иконка-йозак
  • иконка-флаг
  • икон-наушниклар
  • иконка-күләм-сүндерү
  • иконка-күләм күләме
  • иконка-күләм күләме
  • иконка-qrcode
  • иконка-штрих-код
  • иконка-тег
  • иконка
  • иконка-китап
  • иконка-кыстыргыч
  • иконка-бастыру
  • икона-камера
  • иконка-шрифт
  • иконка-калын
  • иконка
  • иконка-текст-биеклек
  • иконка-текст киңлеге
  • иконка-тигезләү-сул
  • иконка-тигезләү-үзәк
  • иконка-тигезләү-уң
  • иконка-тигезләү-аклау
  • иконка исемлеге
  • иконка-индент-сул
  • иконка-индент-уң
  • иконка-фасим-видео
  • иконка-рәсем
  • иконка-карандаш
  • икона-карта-маркер
  • иконка-көйләү
  • иконка
  • иконка-редакция
  • иконка-бүлешү
  • иконка-тикшерү
  • иконка-хәрәкәт
  • иконка-адым-артка
  • иконка-тиз-артка
  • иконка-артка
  • иконка-уйнау
  • иконка-пауза
  • иконка-тукталыш
  • иконка-алга
  • иконка-тиз алга
  • иконка-алга
  • иконка-чыгару
  • иконка-шеврон-сул
  • иконка-шеврон-уң
  • иконка-плюс-билге
  • иконка-минус-билге
  • иконка-бетерү-билге
  • иконка-ярый
  • иконка-сорау-билге
  • иконка-информация
  • иконка-скриншот
  • иконка-бетерү-түгәрәк
  • иконка-ок-түгәрәк
  • иконка-бан-түгәрәк
  • икона-ук-сул
  • иконка-ук-уң
  • иконка-ук
  • иконка-ук-аста
  • иконка-бүлешү-алт
  • иконка-размер-тулы
  • иконка-размер-кечкенә
  • икона-плюс
  • иконка-минус
  • иконка-йолдыз
  • иконка-игълан-билге
  • иконка-бүләк
  • иконка-яфрак
  • иконка-ут
  • иконка-күз
  • иконка-күзгә якын
  • иконка-кисәтүче билге
  • иконка-яссылык
  • иконка-календарь
  • иконка-очраклы
  • иконка-аңлатма
  • иконка-магнит
  • иконка-шеврон-up
  • иконка-шеврон-аста
  • иконка-ретвит
  • икона-кибет
  • иконка-папка-ябык
  • иконка-папка-ачык
  • иконка-размер-вертикаль
  • иконка-размер-горизонталь
  • иконка-hdd
  • иконка
  • иконка-кыңгырау
  • иконка-сертификат
  • иконка-бармаклар
  • иконка-бармак-аста
  • иконка-уң-уң
  • иконка-сул
  • иконка-кул
  • иконка-кул
  • иконка-түгәрәк-ук-уң
  • иконка-түгәрәк-ук-сул
  • иконка-түгәрәк-ук
  • иконка-түгәрәк-ук-ас
  • икона-глобус
  • иконка
  • иконка-биремнәр
  • иконка-фильтр
  • иконка-портфель
  • иконка-тулы экран

Сприт рәвешендә төзелгән

Eachәрбер иконаны өстәмә сорау ясау урынына, без аларны спритка тупладык - бер файлдагы рәсемнәр төркеме, алар белән CSS куллана background-position. Бу Twitter.com сайтында кулланган шул ук ысул һәм ул безнең өчен яхшы эшләде.

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

Глификоннар безгә ачык чыганаклар коралында урнаштырылган Halflings кулланырга рөхсәт бирделәр, без монда документларда сылтама һәм кредит бирсәк. Зинһар, сезнең проектларда да шулай эшләргә уйлагыз.

Ничек кулланырга

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

  1. <i класс = "иконка-эзләү" > </i>

Инверсия (ак) иконалар өчен стильләр дә бар, бер өстәмә класс белән әзер:

  1. <i класс = "иконка-эзләү иконасы-ак" > </i>

Сезнең иконалар өчен сайлау өчен 140 класс бар. Дөрес класслар белән тэг өстәгез, <i>сез куелдыгыз. Сез тулы исемлекне sprites.less яки монда таба аласыз.

Идарә итә! Текст сызыклары янында кулланганда, төймәләр яки диңгез сылтамалары кебек, <i>тиешле аралар өчен тегтан соң урын калдырыгыз.

Эшләрне кулланыгыз

Икона бик яхшы, ләкин аларны кайда кулланырга? Менә берничә идея:

  • Сезнең ян ягы навигациясе өчен визуаль
  • Икона белән идарә ителгән навигация өчен
  • Эшнең мәгънәсен җиткерү өчен төймәләр өчен
  • Кулланучының максатында контекстны бүлешү өчен сылтамалар белән

Асылда, тегны кая гына <i>куйсаң да, икона куя аласың.

Мисаллар

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