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

Бүтэн хэвлэх сүлжээ нь манай 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 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. Doec sed odio dui.

Өргөдлийг ашиглах

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>:

Товчлолын жишээ

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

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
• Масса дахь бүхэл тоо
• Дээд зэрэглэлийн 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>

Тодорхойлолтын жагсаалтууд

Тодорхойлолтын жагсаалт нь нэр томъёог тодорхойлоход төгс төгөлдөр юм.

Euismod

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.

Шугаманд

Кодын доторлогооны хэсгүүдийг <code>.

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

Үндсэн блок

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

<p>Жишээ текст энд байна...</p>

<pre>
  <p>Жишээ текстийг эндээс...</p>
</pre>

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

Google Prettify

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

<p> Жишээ текст энд байна... </p>

<pre class = "prettyprint 
     linenums" >
  <p>Жишээ текстийг эндээс...</p>
</pre>

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

<хүснэгт>
  <толгой>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</хүснэгт>

Унших, бүтцийг хадгалахын тулд хүснэгтүүдийг автоматаар хэдхэн хүрээгээр загварчилдаг. 2.0-тэй бол .tableанги шаардлагатай.

<хүснэгт анги = "хүснэгт" > 
  …
</хүснэгт>

Тахө зураасыг нэмж ширээгээ бага зэрэг гоёмсог болго—зүгээр л .table-stripedанги нэмээрэй.

Тайлбар: Sprited хүснэгтүүд нь :nth-childCSS сонгогчийг ашигладаг бөгөөд IE7-IE8 дээр байхгүй.

<хүснэгт анги = "хүснэгт хүснэгт судалтай" > 
  …
</хүснэгт>

Хүснэгтийг бүхэлд нь тойруулан хүрээ, гоо зүйн үүднээс дугуйрсан булангуудыг нэмнэ.

<хүснэгт анги = "хүснэгт хүснэгтээр хүрээлэгдсэн" > 
  …
</хүснэгт>

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

<хүснэгт анги = "хүснэгт хүснэгтээр хураангуйлсан" > 
  …
</хүснэгт>

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

<хүснэгт анги = "хүснэгт-судалтай хүснэгт-хүрээтэй хүснэгт-конденсац" > 
  ...
</хүснэгт>

Уян хатан HTML болон CSS

Bootstrap дээрх маягтуудын хамгийн сайн тал нь таны бүх оролт, хяналтыг тэмдэглэгээндээ хэрхэн бүтээсэнээс үл хамааран гайхалтай харагддаг. Илүүдэл HTML шаардлагагүй, гэхдээ бид үүнийг шаарддаг хүмүүст зориулж загваруудыг өгдөг.

Илүү төвөгтэй загварууд нь хялбархан загварчлах, үйл явдлыг холбоход зориулсан товч бөгөөд өргөтгөх боломжтой ангиудтай ирдэг тул та алхам бүрт хамрагдах болно.

Дөрвөн загвар багтсан

Bootstrap нь дөрвөн төрлийн маягтын байршлыг дэмждэг.

• Босоо (өгөгдмөл)
• Хайх
• Шугаманд
• Хэвтээ

Янз бүрийн хэлбэрийн маягтын байршлын хувьд тэмдэглэгээнд зарим өөрчлөлт оруулах шаардлагатай боловч удирдлага нь ижил хэвээр үлдэж, ажиллах болно.

Хяналтын төлөв болон бусад

Bootstrap-ийн маягтууд нь оролт, текст талбар, таны хүсэн хүлээж буй сонголт зэрэг бүх үндсэн хэлбэрийн удирдлагын хэв маягийг агуулдаг. Гэхдээ энэ нь хавсаргасан болон өмнөх оролт, шалгах хайрцагны жагсаалтыг дэмжих зэрэг хэд хэдэн захиалгат бүрэлдэхүүн хэсгүүдтэй ирдэг.

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

V2.0-ийн тусламжтайгаар бид маягтын хэв маягийн хувьд илүү хөнгөн, ухаалаг өгөгдмөл тохиргоотой болсон. Нэмэлт тэмдэглэгээ байхгүй, зөвхөн маягтын хяналт.

Анхдагч WebKit-ийн хэв маягийг тусгаж, .form-searchнэмэлт дугуйрсан хайлтын талбаруудыг нэмнэ үү.

Оролтууд нь эхлэхийн тулд блокийн түвшин юм. .form-inlineболон хувьд .form-horizontalбид inline-block ашигладаг.

Юу багтсан байна

Зүүн талд бидний дэмждэг бүх өгөгдмөл маягтын хяналтыг харуулав. Энд тэмдэглэгдсэн жагсаалт байна:

• текст оруулах (текст, нууц үг, имэйл гэх мэт)
• шалгах хайрцаг
• радио
• сонгох
• олон сонголт
• файлын оролт
• текст талбар

v2.0-тэй шинэ өгөгдмөл

V1.4 хүртэл Bootstrap-ийн өгөгдмөл хэлбэрийн загварууд нь хэвтээ байрлалыг ашигласан. Bootstrap 2-ын тусламжтайгаар бид ямар ч хэлбэрийн хувьд илүү ухаалаг, илүү өргөтгөх боломжтой өгөгдмөл тохиргоотой болохын тулд энэ хязгаарлалтыг арилгасан.

Хөтчийн төлөвийг дахин боловсруулсан

Bootstrap нь хөтчийг дэмждэг төвлөрсөн болон disabledтөлөвт зориулсан хэв маягийг санал болгодог. Бид өгөгдмөл Webkit-ийг устгаад оронд нь " outlinea"-г хэрэглэнэ .box-shadow:focus

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

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

<талбарын багц
  class = "control-group error" >
  …
</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">

Үйлдлийн товчлуурууд

Дүрмээр бол товчлууруудыг зөвхөн үйлдэлд ашиглах ёстой бол гипер холбоосыг объектод ашиглах ёстой. Жишээлбэл, "Татаж авах" нь товчлуур байх ёстой бөгөөд "сүүлийн үйл ажиллагаа" нь холбоос байх ёстой.

Зангуу болон хэлбэрийн хувьд

Товчлуурын хэв маягийг ашигласан бүх зүйлд .btnхэрэглэж болно. Гэхдээ ихэвчлэн та эдгээрийг зөвхөн <a>болон <button>элементүүдэд хэрэглэхийг хүсдэг.

Тайлбар: Бүх товчлуурууд нь .btnангийг агуулсан байх ёстой. Товчлуурын хэв маягийг тууштай байлгахын тулд элементүүд <button>болон элементүүдэд хэрэглэнэ.<a>

Олон хэмжээтэй

Илүү том эсвэл жижиг товчлуурууд танд таалагдаж байна уу? Болоорой!

Үндсэн үйлдэл Үйлдэл

Үндсэн үйлдэл Үйлдэл

Идэвхгүй байдал

Идэвхгүй товчлууруудын .btn-disabledхувьд холбоос болон элементүүдийн :disabledхувьд ашиглана уу.<button>

Үндсэн үйлдэл Үйлдэл

Үндсэн үйлдэл Үйлдэл

Хөтөч хоорондын нийцтэй байдал

IE9-д бид бүх товчлуур дээрх градиентийг бөөрөнхийлсөн булангийн оронд буулгадаг, учир нь IE9 нь арын градиентийг булан руу тайрдаггүй.

Үүнтэй холбоотой IE9 нь идэвхгүй болсон buttonэлементүүдийг сэргээж, текстийг саарал өнгөтэй болгож, муухай текст сүүдэртэй болгодог—харамсалтай нь бид үүнийг засах боломжгүй.

Спрайт хэлбэрээр бүтээгдсэн

Дүрс бүрийг нэмэлт хүсэлт болгохын оронд бид тэдгээрийг спрайт болгон эмхэтгэсэн - нэг файлд байгаа олон тооны зургийг CSS ашиглан байршуулсан background-position. Энэ бол бидний Twitter.com дээр ашигладаг арга бөгөөд энэ нь бидэнд сайнаар нөлөөлсөн.

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

Glyphicons нь манай нээлттэй эхийн хэрэглүүр дэх Halflings багцыг ашиглах боломжийг бидэнд олгосон бөгөөд ингэснээр бид энд баримт бичигт холбоос болон кредитийг оруулсан болно. Төсөлдөө ижил зүйлийг хийх талаар бодож үзээрэй.

Яаж хэрэглэх вэ

V2.0.0-ийг ашигласнаар бид <i>бүх дүрсэндээ шошго ашиглахаар сонгосон боловч тэдгээрт кейс анги байхгүй - зөвхөн хуваалцсан угтвар. Ашиглахын тулд дараах кодыг хаана ч байрлуулна уу:

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

Урвуутай (цагаан) дүрсэнд зориулсан загварууд бас нэг нэмэлт ангиар бэлэн болсон байна:

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

Таны дүрсийг сонгох 120 анги байдаг. <i>Зүгээр л тохирох ангиудын шошго нэмээд л бэлэн болно. Та бүрэн жагсаалтыг sprites.less эсвэл яг эндээс энэ баримтаас олж болно.

Хэрэглэх тохиолдлууд

Дүрсүүд нь гайхалтай, гэхдээ тэдгээрийг хаана ашиглах вэ? Энд хэдэн санаа байна:

• Таны хажуугийн самбарын навигацийн дүрслэл болгон
• Зөвхөн дүрс дээр суурилсан навигацийн хувьд
• Үйлдлийн утгыг илэрхийлэх товчлуурууд
• Хэрэглэгчийн очих газар дээрх контекстийг хуваалцах холбоосуудтай

Үндсэндээ та хаана ч гэсэн <i>шошго тавьж болно, та дүрс тэмдэг тавьж болно.

Сэргээх Тооцоо хийх Устгах

Сэтгэгдэл Тохиргоо Илүү мэдээлэл