Үндсэн CSS

Шатны дээд талд HTML-ийн үндсэн элементүүд нь шинэлэг, тогтвортой харагдах байдал, мэдрэмжийг өгөхийн тулд өргөтгөх боломжтой ангиудын тусламжтайгаар загварчлагдаж, сайжруулсан.

Гарчиг ба үндсэн хуулбар

Хэвлэлийн масштаб

Бүтэн хэвлэх сүлжээ нь манай variables.less файлын хоёр Less хувьсагч дээр суурилдаг: @baseFontSizeболон @baseLineHeight. Эхнийх нь үндсэн үсгийн хэмжээ, хоёр дахь нь үндсэн мөрийн өндөр юм.

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

Үндсэн текстийн жишээ

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis aparturient 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 юм.

Хаалттай ишлэл

Элемент Хэрэглээ Нэмэлт
<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. Бүхэл тоо posuere erat a ante venenatis. </p>
  3. <small> Алдартай хэн нэгэн </small>
  4. </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
  • Масса дахь бүхэл тоо
  • Дээд зэрэглэлийн nisl aliquet дахь Facilisis
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Идээний идээт ундаа
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutp at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Загваргүй

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Масса дахь бүхэл тоо
  • Дээд зэрэглэлийн nisl aliquet дахь Facilisis
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Идээний идээт ундаа
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutp at
  • 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. Масса дахь бүхэл тоо
  4. Дээд зэрэглэлийн nisl aliquet дахь Facilisis
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  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>өгнө.

  1. Жишээ нь , <code> хэсэг </ code > -ийг шугаман хэлбэрээр ороосон байх ёстой .

Үндсэн блок

<pre>Олон мөр кодын хувьд ашиглах . Зөв дүрслэхийн тулд кодын өнцөгт хаалтаас зайлсхийхээ мартуузай.

<p>Жишээ текст энд байна...</p>
  1. <pre>
  2. <p>Жишээ текстийг эндээс...</p>
  3. </pre>

Тайлбар:<pre> Кодыг шошгон доторх зүүн талд аль болох ойр байлгахаа мартуузай ; энэ нь бүх табуудыг харуулах болно.

Та сонголтоор .pre-scrollableдээд тал нь 350px өндөрт тохируулж, у тэнхлэгийн гүйлгэх самбар өгөх анги нэмж болно.

Google Prettify

Ижил <pre>элементийг аваад сайжруулсан дүрслэлд зориулж хоёр нэмэлт анги нэмнэ.

  1. <p> Жишээ текст энд байна... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Жишээ текстийг эндээс...</p>
  4. </pre>

Google-code-prettify-г татаж аваад , хэрхэн ашиглахыг уншина уу.

Хүснэгтийн тэмдэглэгээ

Tag Тодорхойлолт
<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-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. Хураангуй ширээ

.table-condensedХүснэгтийн үүрний дэвсгэрийг хагасаар (8px-аас 4px хүртэл) багасгах анги нэмж хүснэгтээ илүү авсаархан болго .

  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. <оролтын төрөл = "текст" анги = "span3" орлуулагч = " Ямар нэгэн зүйл бичнэ үү ..." >
  4. <span class = "help-block" > Блок түвшний тусламжийн текстийг эндээс үзнэ үү. </span>
  5. <шошго анги = "checkbox" >
  6. <оролтын төрөл = "checkbox" > Намайг шалгаарай
  7. </label>
  8. <button type = "submit" class = "btn" > Илгээх </button>
  9. </form>

Хайлтын маягт

Маягт .form-searchболон . .search-query_input

  1. <form class = "сайн хэлбэр хайлт" >
  2. <оролтын төрөл = "текст" анги = "оролтын дунд хайлтын асуулга" >
  3. <button type = "submit" class = "btn" > Хайх </button>
  4. </form>

Дотор хэлбэр

.form-inlineМаягтын удирдлагын босоо тэнхлэг, хоорондын зайг сайжруулахын тулд нэмнэ үү .

  1. <form class = "худаг form-inline" >
  2. <оролтын төрөл = "текст" анги = "оролт-жижиг" орлуулагч = "И-мэйл" >
  3. <оролтын төрөл = "нууц үг" анги = "оролт-жижиг" орлуулагч = "Нууц үг" >
  4. <шошго анги = "checkbox" >
  5. <оролтын төрөл = "checkbox" > Намайг санаарай
  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 = "control-group" >
  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 -ийг устгаад оронд outlineнь a хэрэглэнэ .box-shadow:focus


Маягтын баталгаажуулалт

Мөн алдаа, анхаару��лга, амжилтын баталгаажуулалтын хэв маягийг багтаасан болно. Ашиглахын тулд эргэн тойрон дахь алдааны ангиллыг нэмнэ үү .control-group.

  1. <талбарын багц
  2. class = "control-group error" >
  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*Оролтын хэмжээнүүдийн хувьд сүлжээний системийн ижил ангиудыг ашигла .

inputТа мөн сүлжээнд зураглаагүй, хариу үйлдэл үзүүлэх CSS загварт дасан зохицдоггүй эсвэл янз бүрийн төрлийн хяналтыг (жишээ нь, эсрэг 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. <button class = "btn" type = "submit" >
  3. Товчлуур
  4. </button>
  5. <оролтын анги = "btn" төрөл = "товч"
  6. утга = "Оролт" >
  7. <оролтын анги = "btn" төрөл = "илгээх"
  8. утга = "Илгээх" >

Шилдэг туршлагын хувьд хөтчөөс хөтчөөр хөрвүүлэхэд тохирсон байхын тулд тухайн элементийг контекст тааруулахыг хичээгээрэй. Хэрэв танд байгаа бол товчлуураа ашиглана inputуу .<input type="submit">

  • дүрс-шил
  • дүрс-хөгжим
  • дүрс хайлт
  • дүрс дугтуй
  • дүрс-зүрх
  • дүрс-од
  • дүрс-од-хоосон
  • дүрс хэрэглэгч
  • дүрс-кино
  • том дүрс
  • дүрс-th
  • жагсаалтын дүрс
  • дүрс - зүгээр
  • дүрс-устгах
  • дүрс-томруулах
  • дүрсийг жижигрүүлэх
  • дүрс унтарсан
  • дүрс дохио
  • дүрс араа
  • дүрс-хогийн сав
  • дүрс-гэр
  • дүрс файл
  • дүрс цаг
  • дүрс-зам
  • icon-download-alt
  • дүрс-татаж авах
  • дүрс байршуулах
  • Ирсэн имэйл хайрцаг
  • дүрс-тоглох-тойрог
  • дүрс-давталт
  • дүрс-шинэчлэх
  • icon-list-alt
  • дүрс түгжээ
  • дүрс-туг
  • дүрс-чихэвч
  • дүрс-дуус-унтраах
  • дүрс-дууг багасгах
  • дүрсийн дууг нэмэгдүүлэх
  • icon-qrcode
  • дүрс-баркод
  • дүрс тэмдэг
  • дүрс тэмдэг
  • дүрс-ном
  • хавчуургын тэмдэг
  • дүрс хэвлэх
  • дүрс камер
  • дүрс-фонт
  • дүрс тод
  • дүрс-налуу
  • дүрс-текст-өндөр
  • дүрс-текст-өргөн
  • дүрсийг зүүн тийш зэрэгцүүлнэ
  • icon-align-center
  • дүрсийг баруун тийш зэрэгцүүлэх
  • дүрсийг тэгшлэх-зохих
  • дүрс жагсаалт
  • дүрс-догол-зүүн
  • дүрс-догол-баруун
  • icon-facetime-video
  • дүрс-зураг
  • дүрс харандаа
  • дүрс-газрын тэмдэг-тэмдэглэгээ
  • дүрс-тохируулга
  • дүрсний өнгө
  • дүрс засварлах
  • дүрс хуваалцах
  • дүрс шалгах
  • дүрс-хөдөлгөөн
  • дүрс-алхам-буцах
  • дүрс-хурдан-буцах
  • дүрс - хойшоо
  • дүрс тоглох
  • дүрс-түр зогсоох
  • дүрс зогсолт
  • дүрсийг урагшлуулах
  • дүрс-хурдан урагшлуулах
  • дүрс-алхам урагшлах
  • дүрс гаргах
  • дүрс-chevron-зүүн
  • дүрс-chevron-баруун
  • дүрс нэмэх тэмдэг
  • дүрс хасах тэмдэг
  • дүрс арилгах-тэмдэг
  • тэмдэг-ок-тэмдэг
  • дүрс асуултын тэмдэг
  • дүрс мэдээлэл тэмдэг
  • дүрс-дэлгэцийн агшин
  • дүрс арилгах-тойрог
  • дүрс-ок-тойрог
  • дүрсийг хориглох тойрог
  • дүрс-сум-зүүн
  • дүрс-сум-баруун
  • дүрс-дээш
  • дүрс-сум-доош
  • icon-share-alt
  • дүрс-хэмжээг-өөрчлөх-бүрэн
  • дүрс-хэмжээг-жижиг
  • icon-нэмэх
  • дүрс-хасах
  • дүрс-од
  • дүрс тэмдэг
  • бэлэг тэмдэг
  • дүрс навч
  • дүрс-гал
  • дүрс нүд нээлттэй
  • нүд ойртсон дүрс
  • анхааруулах тэмдэг
  • дүрс-онгоц
  • дүрс-хуанли
  • дүрс санамсаргүй
  • дүрс-тайлбар
  • дүрс соронз
  • icon-chevron up
  • icon-chevron-down
  • icon-retweet
  • дүрс-сагс
  • дүрс хавтас-хаах
  • icon-хавтас-нээлттэй
  • дүрс-хэмжээг-босоо
  • дүрс-хэмжээг-хэвтээ
  • дүрс-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>шошго тавьж болно, та дүрс тэмдэг тавьж болно.

Жишээ

Тэдгээрийг товчлуурууд, товчлуурын бүлгүүд, хэрэгслийн самбар, навигаци эсвэл хавсаргасан маягтын оролтод ашиглана уу.