Шатны дээд талд 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.
| Элемент | Хэрэглээ | Нэмэлт |
|---|---|---|
<strong> |
Чухалтай текстийн хэсгийг онцлон тэмдэглэхийн тулд | Байхгүй |
<em> |
Стресстэй текстийн хэсгийг онцлон тэмдэглэсний төлөө | Байхгүй |
<abbr> |
Товчлол болон товчилсон үгсийг боож, товшилт дээр өргөжүүлсэн хувилбарыг харуулна |
.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>:
Атрибут бүхий товчилсон үгсийн titleдоод талын хүрээ нь цайвар тасархай бөгөөд хулгана дээр байрлах туслах курсортой. Энэ нь хэрэглэгчдэд ямар нэг зүйлийг хулганаар харуулах нэмэлт заалтыг өгдөг.
initialismТекстийн хэмжээг арай жижиг болгож, хэвлэх зохицлыг нэмэгдүүлэхийн тулд ангиллыг товчилсон үгэнд нэмнэ үү .
HTML бол зүссэн талхнаас хойшхи хамгийн сайн зүйл юм.
Аттрибут гэдэг үгийн товчлол нь attr юм.
| Элемент | Хэрэглээ | Нэмэлт |
|---|---|---|
<blockquote> |
Өөр эх сурвалжаас иш татахад зориулсан блок түвшний элемент |
.pull-leftба .pull-rightангиуд |
<small> |
Хэрэглэгчдэд чиглэсэн ишлэл нэмэх нэмэлт элемент, ихэвчлэн бүтээлийн гарчигтай зохиогч | <cite>Гарчиг эсвэл эх сурвалжийн нэрийг тойруулан байрлуул |
Блок ишлэл оруулахын тулд <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>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Анхаараарай! Хэвтээ тайлбарын жагсаалтууд нь зүүн баганын засварт багтахгүй хэт урт нэр томъёог таслах болно text-overflow. Нарийхан харагдах цонхонд тэдгээр нь өгөгдмөл овоолсон байрлал руу өөрчлөгдөнө.
Кодын доторлогооны хэсгүүдийг -ээр боож <code>өгнө.
- Жишээ нь , <code> хэсэг </ code > -ийг шугаман хэлбэрээр ороосон байх ёстой .
<pre>Олон мөр кодын хувьд ашиглах . Зөв дүрслэхийн тулд кодын өнцөгт хаалтаас зайлсхийхээ мартуузай.
<p>Жишээ текст энд байна...</p>
- <pre>
- <p>Жишээ текстийг эндээс...</p>
- </pre>
Тайлбар:<pre> Кодыг шошгон доторх зүүн талд аль болох ойр байлгахаа мартуузай ; энэ нь бүх табуудыг харуулах болно.
Та сонголтоор .pre-scrollableдээд тал нь 350px өндөрт тохируулж, у тэнхлэгийн гүйлгэх самбар өгөх анги нэмж болно.
Ижил <pre>элементийг аваад сайжруулсан дүрслэлд зориулж хоёр нэмэлт анги нэмнэ.
- <p> Жишээ текст энд байна... </p>
- <pre class = "prettyprint
- linenums" >
- <p>Жишээ текстийг эндээс...</p>
- </pre>
Google-code-prettify-г татаж аваад , хэрхэн ашиглахыг уншина уу.
| Tag | Тодорхойлолт |
|---|---|
<table> |
Өгөгдлийг хүснэгт хэлбэрээр харуулах боох элемент |
<thead> |
Хүснэгтийн толгойн мөрүүдэд зориулсан контейнер элемент ( <tr>) Хүснэгтийн багануудыг шошголох |
<tbody> |
<tr>Хүснэгтийн үндсэн хэсэгт ( ) хүснэгтийн мөрүүдэд зориулсан контейнер элемент |
<tr> |
Нэг мөрөнд харагдах хүснэгтийн нүднүүдийн багцын ( <td>эсвэл ) контейнер элемент<th> |
<td> |
Өгөгдмөл хүснэгтийн нүд |
<th> |
Багана (эсвэл мөр, хамрах хүрээ, байршлаас хамааран) шошгонд зориулсан хүснэгтийн тусгай нүдийг дотор нь ашиглах ёстой. <thead> |
<caption> |
Хүснэгтэнд юу багтсан тухай тайлбар эсвэл хураангуй, ялангуяа дэлгэц уншигчдад хэрэгтэй |
- <хүснэгт>
- <толгой>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </хүснэгт>
| Нэр | Анги | Тодорхойлолт |
|---|---|---|
| Өгөгдмөл | Байхгүй | Загвар байхгүй, зөвхөн багана, мөр байхгүй |
| Үндсэн | .table |
Мөр хоорондын зөвхөн хэвтээ шугамууд |
| Хилтэй | .table-bordered |
Булангуудыг бөөрөнхийлж, гадна талын хүрээ нэмнэ |
| Зебра-судал | .table-striped |
Сондгой эгнээнд цайвар саарал дэвсгэр өнгө нэмнэ (1, 3, 5 гэх мэт) |
| Өтгөрүүлсэн | .table-condensed |
tdБүх болон thэлементүүдийн доторх босоо дэвсгэрийг 8 пикселээс 4 пиксел хүртэл хагасаар багасгадаг |
Унших, бүтцийг хадгалахын тулд хүснэгтүүдийг автоматаар хэдхэн хүрээгээр загварчилдаг. 2.0-тэй бол .tableанги шаардлагатай.
- <хүснэгт анги = "хүснэгт" >
- …
- </хүснэгт>
| # | Нэр | Овог | Хэрэглэгчийн нэр |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Жейкоб | Торнтон | @ тарган |
| 3 | Ларри | шувуу |
Тахө зураасыг нэмж ширээгээ бага зэрэг гоёмсог болго—зүгээр л .table-stripedанги нэмээрэй.
Тайлбар: Судалчлагдсан хүснэгтүүд нь :nth-childCSS сонгогчийг ашигладаг бөгөөд IE7-IE8 дээр байхгүй.
- <хүснэгт анги = "хүснэгт хүснэгт судалтай" >
- …
- </хүснэгт>
| # | Нэр | Овог | Хэрэглэгчийн нэр |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Жейкоб | Торнтон | @ тарган |
| 3 | Ларри | шувуу |
Хүснэгтийг бүхэлд нь тойруулан хүрээ, гоо зүйн үүднээс дугуйрсан булангуудыг нэмнэ.
- <хүснэгт анги = "хүснэгт хүснэгтээр хүрээлэгдсэн" >
- …
- </хүснэгт>
| # | Нэр | Овог | Хэрэглэгчийн нэр |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| Марк | Отто | @getbootstrap | |
| 2 | Жейкоб | Торнтон | @ тарган |
| 3 | Шувуу Ларри | ||
.table-condensedХүснэгтийн үүрний дэвсгэрийг хагасаар (8px-аас 4px хүртэл) багасгах анги нэмж хүснэгтээ илүү авсаархан болго .
- <хүснэгт анги = "хүснэгтийн хураангуй хүснэгт" >
- …
- </хүснэгт>
| # | Нэр | Овог | Хэрэглэгчийн нэр |
|---|---|---|---|
| 1 | Марк | Отто | @mdo |
| 2 | Жейкоб | Торнтон | @ тарган |
| 3 | Шувуу Ларри | ||
Боломжтой ангиудын аль нэгийг ашиглан өөр өөр дүр төрхийг бий болгохын тулд хүснэгтийн аль ч ангиудыг нэгтгэж болно.
- <хүснэгт анги = "хүснэгт-судалтай хүснэгт-хүрээтэй хүснэгт-конденсац" >
- ...
- </хүснэгт>
| Бүтэн нэр | |||
|---|---|---|---|
| # | Нэр | Овог | Хэрэглэгчийн нэр |
| 1 | Марк | Отто | @mdo |
| 2 | Жейкоб | Торнтон | @ тарган |
| 3 | Шувуу Ларри | ||
Bootstrap дээрх маягтуудын хамгийн сайн тал нь таны бүх оролт, хяналтыг тэмдэглэгээндээ хэрхэн бүтээсэнээс үл хамааран гайхалтай харагддаг. Илүүдэл HTML шаардлагагүй, гэхдээ бид үүнийг шаарддаг хүмүүст зориулж загваруудыг өгдөг.
Илүү төвөгтэй загварууд нь хялбархан загварчлах, үйл явдлыг холбоход зориулсан товч бөгөөд өргөтгөх боломжтой ангиудтай ирдэг тул та алхам бүрт хамрагдах болно.
Bootstrap нь дөрвөн төрлийн маягтын байршлыг дэмждэг.
Янз бүрийн хэлбэрийн маягтын байршлын хувьд тэмдэглэгээнд зарим өөрчлөлт оруулах шаардлагатай боловч удирдлага нь ижил хэвээр үлдэж, ажилладаг.
Bootstrap-ийн маягтууд нь оролт, текст талбар, таны хүсэн хүлээж буй сонголт зэрэг бүх үндсэн хэлбэрийн удирдлагын хэв маягийг агуулдаг. Гэхдээ энэ нь хавсаргасан болон өмнөх оролт, шалгах хайрцагны жагсаалтыг дэмжих зэрэг хэд хэдэн захиалгат бүрэлдэхүүн хэсгүүдтэй ирдэг.
Маягтын хяналтын төрөл тус бүрд алдаа, сэрэмжлүүлэг, амжилт зэрэг үзүүлэлтүүдийг оруулсан болно. Мөн тахир дутуу удирдлагад зориулсан загваруудыг оруулсан болно.
Bootstrap нь нийтлэг вэб хэлбэрийн дөрвөн загварын энгийн тэмдэглэгээ, хэв маягийг өгдөг.
| Нэр | Анги | Тодорхойлолт |
|---|---|---|
| Босоо (өгөгдмөл) | .form-vertical (шаардлагагүй) |
Удирдлага дээр давхарласан, зүүн тийш зэрэгцүүлсэн шошгууд |
| Шугаманд | .form-inline |
Авсаархан хэв маягийн хувьд зүүн зэрэгцүүлсэн шошго болон шугаман блокийн удирдлага |
| Хайх | .form-search |
Ердийн хайлтын гоо зүйн хувьд нэмэлт дугуй текст оруулах |
| Хэвтээ | .form-horizontal |
Зүүн, баруун тийш зэрэгцүүлсэн шошгыг удирдлагатай нэг мөрөнд хөвөх |
Нэмэлт тэмдэглэгээгүйгээр ухаалаг, хөнгөн өгөгдмөл.
- <хэлбэрийн анги = "сайн" >
- <label> Шошгоны нэр </label>
- <оролтын төрөл = "текст" анги = "span3" орлуулагч = " Ямар нэгэн зүйл бичнэ үү ..." >
- <span class = "help-block" > Блок түвшний тусламжийн текстийг эндээс үзнэ үү. </span>
- <шошго анги = "checkbox" >
- <оролтын төрөл = "checkbox" > Намайг шалгаарай
- </label>
- <button type = "submit" class = "btn" > Илгээх </button>
- </form>
Маягт .form-searchболон . .search-query_input
- <form class = "сайн хэлбэр хайлт" >
- <оролтын төрөл = "текст" анги = "оролтын дунд хайлтын асуулга" >
- <button type = "submit" class = "btn" > Хайх </button>
- </form>
.form-inlineМаягтын удирдлагын босоо тэнхлэг, хоорондын зайг сайжруулахын тулд нэмнэ үү .
- <form class = "худаг form-inline" >
- <оролтын төрөл = "текст" анги = "оролт-жижиг" орлуулагч = "И-мэйл" >
- <оролтын төрөл = "нууц үг" анги = "оролт-жижиг" орлуулагч = "Нууц үг" >
- <шошго анги = "checkbox" >
- <оролтын төрөл = "checkbox" > Намайг санаарай
- </label>
- <button type = "submit" class = "btn" > Нэвтрэх </button>
- </form>
Баруун талд бидний дэмждэг бүх өгөгдмөл маягтын хяналтыг харуулав. Энд тэмдэглэгдсэн жагсаалт байна:
Дээрх жишээ маягтын байршлыг харгалзан эхний оролт ба хяналтын бүлэгтэй холбоотой тэмдэглэгээг энд харуулав. Загварын .control-groupхувьд .control-label, , болон .controlsангиуд бүгд шаардлагатай.
- <хэлбэрийн анги = "хэвтээ маягт" >
- <талбарын багц>
- <legend> Домог текст </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > Текст оруулах </label>
- <div class = "controls" >
- <оролтын төрөл = "текст" анги = "input-xlarge" id = "input01" >
- <p class = "help-block" > Тусламжийн текст </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap нь хөтчийг дэмждэг төвлөрсөн болон disabledтөлөвт зориулсан хэв маягийг санал болгодог. Бид өгөгдмөл Webkit -ийг устгаад оронд outlineнь a хэрэглэнэ .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">
Дүрс бүрийг нэмэлт хүсэлт болгохын оронд бид тэдгээрийг спрайт болгон эмхэтгэсэн - нэг файлд байгаа олон тооны зургийг CSS ашиглан байршуулсан background-position. Энэ бол бидний Twitter.com дээр ашигладаг арга бөгөөд энэ нь бидэнд сайнаар нөлөөлсөн.
.icon-Бүх дүрсний ангиуд нь бусад бүрэлдэхүүн хэсгүүдийн адил нэрний зай, хамрах хүрээг зөв тогтоохын тулд угтвартай байдаг . Энэ нь бусад хэрэгсэлтэй зөрчилдөхөөс зайлсхийхэд тусална.
Glyphicons нь манай нээлттэй эхийн хэрэглүүр дэх Halflings багцыг ашиглах боломжийг бидэнд олгосон бөгөөд ингэснээр бид энд баримт бичигт холбоос болон кредитийг оруулсан болно. Төсөлдөө ижил зүйлийг хийх талаар бодож үзээрэй.
Bootstrap нь <i>бүх дүрсэнд шошго ашигладаг боловч тэдгээрт кейс анги байхгүй - зөвхөн хуваалцсан угтвар. Ашиглахын тулд дараах кодыг хаана ч байрлуулна уу:
- <i class = "icon-search" ></i>
Урвуутай (цагаан) дүрсэнд зориулсан загварууд бас нэг нэмэлт ангиар бэлэн болсон байна:
- <i class = "icon-search icon-white" ></i>
Таны дүрсийг сонгох 140 анги байдаг. <i>Зүгээр л тохирох ангиудын шошго нэмээд л бэлэн болно. Та бүрэн жагсаалтыг sprites.less эсвэл яг эндээс энэ баримтаас олж болно.
Анхаараарай! <i>Товчлуур эсвэл навигацийн линк гэх мэт текстийн мөрийн хажууд ашиглахдаа шошгоны ард зай үлдээхээ мартуузай .
Дүрсүүд нь гайхалтай, гэхдээ тэдгээрийг хаана ашиглах вэ? Энд хэдэн санаа байна:
Үндсэндээ та хаана ч гэсэн <i>шошго тавьж болно, та дүрс тэмдэг тавьж болно.
Тэдгээрийг товчлуурууд, товчлуурын бүлгүүд, хэрэгслийн самбар, навигаци эсвэл хавсаргасан маягтын оролтод ашиглана уу.