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

HTML5 баримт бичгийн төрөл

Bootstrap нь HTML5 баримт бичгийг ашиглахыг шаарддаг тодорхой HTML элементүүд болон CSS шинж чанаруудыг ашигладаг. Үүнийг бүх төслүүдийнхээ эхэнд оруулаарай.

<!doctype html>
<html lang="en">
  ...
</html>

Эхлээд гар утас

Bootstrap 2-ийн тусламжтайгаар бид хүрээний гол талуудад зориулсан гар утасны нэмэлт загваруудыг нэмсэн. Bootstrap 3-ын тусламжтайгаар бид төслийг эхнээс нь гар утсанд ээлтэй байхаар дахин бичсэн. Нэмэлт гар утасны загваруудыг нэмэхийн оронд тэдгээрийг яг гол руу нь шатаадаг. Үнэн хэрэгтээ Bootstrap бол хамгийн түрүүнд гар утас юм. Гар утасны анхны хэв маягийг тусдаа файлаас биш бүх номын сангаас олж болно.

Тохиромжтой дүрслэл болон мэдрэгчтэй томруулж харуулахын тулд харах талбарын мета шошгыг өөрийн <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noТа харагдацын мета шошго дээр нэмэх замаар хөдөлгөөнт төхөөрөмж дээрх томруулах чадварыг идэвхгүй болгож болно . Энэ нь томруулагчийг идэвхгүй болгож, хэрэглэгчид зөвхөн гүйлгэх боломжтой гэсэн үг бөгөөд энэ нь таны сайтыг уугуул аппликейшн шиг санагдуулна. Ерөнхийдөө бид үүнийг сайт болгон дээр санал болгодоггүй тул болгоомжтой байгаарай!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Типографи ба холбоосууд

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

дээр тохируулна background-color: #fff;ууbody
@font-family-base, @font-size-base, болон @line-height-baseшинж чанаруудыг хэвлэх суурь болгон ашигла
Глобал холбоосын өнгийг тохируулж @link-color, холбоосын доогуур зураасыг зөвхөн дээр хэрэглэнэ:hover

Эдгээр хэв маягийг дотроос олж болно scaffolding.less.

Normalize.css

Хөтөч хоорондын хөтчийг сайжруулахын тулд бид Nicolas Gallagher болон Jonathan Neal нарын төсөл болох Normalize.css -г ашигладаг .

Контейнер

Bootstrap нь сайтын агуулгыг боож, сүлжээний системийг байрлуулахын тулд агуулсан элементийг шаарддаг. Та төсөлдөө ашиглах хоёр савны аль нэгийг сонгож болно. paddingҮүнээс болоод бусад савнууд үүрлэх боломжгүй гэдгийг анхаарна уу .

.containerТогтмол өргөнтэй мэдрэгчтэй саванд ашиглах .

<div class="container">
  ...
</div>

.container-fluidХарах цонхныхоо өргөнийг бүхэлд нь хамарсан бүрэн өргөнтэй саванд ашиглаарай .

<div class="container-fluid">
  ...
</div>

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

Оршил

Сүлжээний системийг таны агуулгыг агуулсан хэд хэдэн мөр, баганаар дамжуулан хуудасны байршлыг бий болгоход ашигладаг. Bootstrap сүлжээний систем хэрхэн ажилладагийг эндээс үзнэ үү.

.containerМөрүүдийг зөв тэгшлэх, дүүргэхийн тулд (тогтмол өргөн) эсвэл .container-fluid(бүтэн өргөн) дотор байрлуулсан байх ёстой .
Баганын хэвтээ бүлгүүдийг үүсгэхийн тулд мөрүүдийг ашиглана уу.
Агуулгыг баганын дотор байрлуулах ёстой бөгөөд зөвхөн баганууд нь мөрийн шууд хүүхэд байж болно.
Урьдчилан тодорхойлсон сүлжээний ангиуд нь сүлжээний .rowбайршлыг .col-xs-4хурдан гаргах боломжтой. Илүү семантик зохион байгуулалтад бага хэмжээний холигчийг ашиглаж болно.
Баганууд нь сувгийн суваг (баганын агуулгын хоорондох зай) үүсгэдэг padding. Энэ дэвсгэрийг эхний болон сүүлчийн баганын мөрөнд .rows-ийн сөрөг зайгаар сольсон байна.
Доорх жишээнүүд яагаад хоцрогдсон нь сөрөг маржин юм. Энэ нь сүлжээний багана доторх контентыг сүлжээний бус контенттой зэрэгцүүлэн байрлуулах явдал юм.
Торон багануудыг таны оруулахыг хүсэж буй арван хоёр боломжтой баганын тоог зааж өгснөөр үүсгэнэ. Жишээлбэл, гурван тэнцүү баганад гурван .col-xs-4.
Хэрэв нэг эгнээнд 12-оос дээш багана байрлуулсан бол нэмэлт баганын бүлэг бүр нэг нэгж болж шинэ мөрөнд орооно.
Сүлжээний ангиуд нь дэлгэцийн өргөн нь таслах цэгийн хэмжээнээс их буюу тэнцүү төхөөрөмжүүдэд хамаарах ба жижиг төхөөрөмжүүдэд чиглэсэн сүлжээний ангиллыг хүчингүй болгодог. Иймд, жишээ .col-md-*нь элементэд дурын класс хэрэглэх нь зөвхөн дунд зэргийн төхөөрөмж дээрх загварт нөлөөлөөд зогсохгүй том хэмжээний төхөөрөмж дээр .col-lg-*анги байхгүй бол бас нөлөөлнө.

Эдгээр зарчмуудыг өөрийн коддоо хэрэгжүүлэх жишээнүүдийг харна уу.

Хэвлэл мэдээллийн асуулга

Бид сүлжээний системийнхээ гол таслах цэгүүдийг үүсгэхийн тулд бага файлууддаа дараах медиа асуултуудыг ашигладаг.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

max-widthБид эдгээр медиа асуулгад CSS-ийг илүү нарийн төхөөрөмжүүдэд хязгаарлахын тулд хааяа өргөжүүлдэг .

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Сүлжээний сонголтууд

Bootstrap сүлжээний систем нь олон төхөөрөмж дээр хэрхэн ажилладагийг хялбар хүснэгтээр хараарай.

	Нэмэлт жижиг төхөөрөмжүүд Утас (<768px)	Жижиг төхөөрөмжүүд Таблетууд (≥768px)	Дунд зэргийн төхөөрөмжүүд Ширээний компьютер (≥992px)	Том төхөөрөмжүүдийн ширээний компьютерууд (≥1200px)
Сүлжээний зан байдал	Бүх цаг үед хэвтээ	Эхлэхийн тулд хумигдсан, хугарлын цэгээс дээш хэвтээ
Савны өргөн	Байхгүй (автомат)	750px	970px	1170px
Ангийн угтвар	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# багана	12
Баганын өргөн	Автомат	~62px	~81px	~97px
Сувагны өргөн	30px (баганын тал бүр дээр 15px)
Суурин	Тиймээ
Офсет	Тиймээ
Баганын захиалга	Тиймээ

Жишээ нь: Овоолсон-хэвтээ

Нэг багц .col-md-*сүлжээний ангиудыг ашигласнаар та ширээний (дунд) төхөөрөмж дээр хэвтээ болохоосоо өмнө хөдөлгөөнт төхөөрөмж болон таблет төхөөрөмж дээр давхарласан үндсэн сүлжээний системийг үүсгэж болно. Сүлжээ баганыг дурын .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Жишээ нь: Шингэний сав

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

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Жишээ нь: Мобайл болон ширээний компьютер

Таны багануудыг жижиг төхөөрөмжүүдэд овоолсон байхыг хүсэхгүй байна уу? .col-xs-* .col-md-*Бага, дунд төхөөрөмжийн нэмэлт сүлжээ ангиудыг баганууддаа нэмж ашиглаарай . Энэ бүхэн хэрхэн ажилладаг талаар илүү сайн санаа авахын тулд доорх жишээг үзнэ үү.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Жишээ нь: гар утас, таблет, ширээний компьютер

.col-sm-*Таблет ангиудын тусламжтайгаар илүү динамик, хүчирхэг бүдүүвчийг бий болгосноор өмнөх жишээн дээр тулгуурлана уу .

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Жишээ нь: Багана боох

Хэрэв нэг эгнээнд 12-оос дээш багана байрлуулсан бол нэмэлт баганын бүлэг бүр нэг нэгж болж шинэ мөрөнд орооно.

.col-xs-9

.col-xs-4
9 + 4 = 13 > 12 тул 4 баганын өргөнтэй энэ div нь шинэ мөрөнд нэг залгаа нэгжээр ороогдоно.

.col-xs-6
Дараагийн баганууд шинэ мөрийн дагуу үргэлжилнэ.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Хариуцлагатай баганыг шинэчилсэн

Дөрвөн шатлалтай сүлжээнүүдийн тусламжтайгаар та тодорхой завсарлагааны цэгүүдэд нэг нь нөгөөгөөсөө өндөр байдаг тул баганууд тань зөв арилдаггүй асуудалтай тулгарах нь гарцаагүй. Үүнийг засахын тулд a .clearfixболон манай хариу үйлдэл үзүүлэх хэрэгслийн ангиудыг ашиглана уу .

.col-xs-6 .col-sm-3
Харах цонхны хэмжээг өөрчлөх юм уу утсан дээрээ шалгаарай.

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Та хариу үйлдэл үзүүлэх цэгүүдэд баганыг цэвэрлэхээс гадна офсет, түлхэх, татах зэргийг дахин тохируулах шаардлагатай байж магадгүй . Сүлжээний жишээн дээрх үйлдлийг харна уу .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Сувагуудыг зайлуулах

Нэг эгнээ болон энэ нь .row-no-guttersангитай баганауудын суваг шуудууг ав.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Багануудыг нөхөх

Ангиудыг ашиглан багануудыг баруун тийш зөөнө үү .col-md-offset-*. Эдгээр ангиуд нь баганын зүүн захыг *баганаар нэмэгдүүлнэ. Жишээлбэл, дөрвөн багана дээр .col-md-offset-4шилжинэ ..col-md-4

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Та мөн .col-*-offset-0ангиудын доод сүлжээний түвшний офсетийг хүчингүй болгож болно.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Үүрлэх баганууд

Өөрийн агуулгыг өгөгдмөл сүлжээнд оруулахын тулд одоо байгаа баганад шинэ .rowба багц багана нэмнэ үү. Суурилуулсан мөрүүд нь 12 ба түүнээс цөөн тоог нэмэх баганын багцыг агуулсан байх ёстой (боломжтой бүх 12 баганыг ашиглах шаардлагагүй)..col-sm-*.col-sm-*

Түвшин 1: .col-sm-9

Түвшин 2: .col-xs-8 .col-sm-6

Түвшин 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Баганын захиалга

.col-md-push-*Өөрчлөгч болон .col-md-pull-*ангиллаар суулгасан сүлжээ баганын дарааллыг хялбархан өөрчил .

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Холимог болон хувьсагч бага

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

Хувьсагч

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

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Холимог

Холимогуудыг сүлжээний хувьсагчтай хамт тус тусад нь сүлжээ баганын семантик CSS үүсгэхэд ашигладаг.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Хэрэглээний жишээ

Та хувьсагчдыг өөрийн тохируулсан утгуудаар өөрчилж болно, эсвэл зүгээр л үндсэн утгуудтай нь холигчдыг ашиглаж болно. Үндсэн тохиргоог ашиглан хоёр баганын хоорондох зайг бий болгох жишээ энд байна.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Гарчиг

<h1>-ээр дамжуулан бүх HTML гарчиг <h6>боломжтой. Гарчгийн фонтын загварт тааруулахыг хүссэн ч текстээ шугаман дээр харуулахыг хүсэж байгаа үед зориулсан ангиуд бас боломжтой .h1..h6

h1. Ачаалагчийн гарчиг	Хагас хол 36px
h2. Ачаалагчийн гарчиг	Хагас 30px
h3. Ачаалагчийн гарчиг	Хагас 24px
h4. Ачаалагчийн гарчиг	Хагас 18px
h5. Ачаалагчийн гарчиг	Хагас 14px
h6. Ачаалагчийн гарчиг	Хагас 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<small>Ерөнхий шошго эсвэл .smallанги бүхий аль ч гарчигт хөнгөн, хоёрдогч текст үүсгэ .

h1. Bootstrap heading Хоёрдогч текст

h2. Bootstrap heading Хоёрдогч текст

h3. Bootstrap heading Хоёрдогч текст

h4. Bootstrap heading Хоёрдогч текст

h5. Bootstrap heading Хоёрдогч текст

h6. Bootstrap heading Хоёрдогч текст

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Биеийн хуулбар

Bootstrap-ийн дэлхийн анхдагч font-sizeхэмжээ нь 14px бөгөөд 1.428line-height байна . Энэ нь болон бүх догол мөрөнд хамаарна. Нэмж дурдахад, (догол мөрүүд) тооцоолсон шугамын өндрийн хагасын доод талын зайг (өгөгдмөлөөр 10px) авдаг.<body><p>

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.

Cum sociis natoque penatibus and magnis dis aparturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Үндсэн биеийн хуулбар

-ийг нэмснээр догол мөрийг онцлон харуулах .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Бага зардлаар барьсан

Типографийн хуваарь нь хувьсагчийн хоёр Less хувьсагч дээр суурилдаг.less : @font-size-baseболон @line-height-base. Эхнийх нь үндсэн үсгийн хэмжээ, хоёр дахь нь үндсэн мөрийн өндөр юм. Бид эдгээр хувьсагч болон энгийн математикийг ашиглан бүх төрлийн захын зай, дэвсгэр, шугамын өндрийг болон бусад зүйлийг үүсгэдэг. Тэдгээрийг тохируулж, Bootstrap тохируулна.

Дотор текстийн элементүүд

Тэмдэглэгдсэн текст

Бусад контекстэд хамааралтай текстийг тодруулахын тулд <mark>шошгыг ашиглана уу.

Та тэмдэглэгээг ашиглаж болноонцлохтекст.

You can use the mark tag to <mark>highlight</mark> text.

Устгасан текст

Устгасан текстийн блокуудыг зааж өгөхийн тулд <del>шошгыг ашиглана уу.

~~Энэ текстийн мөрийг устгасан текст гэж үзэх зорилготой.~~

<del>This line of text is meant to be treated as deleted text.</del>

Зураасан бичвэр

Холбогдохоо больсон текстийн блокуудыг зааж өгөхийн тулд <s>шошгыг ашиглана уу.

~~Энэ текстийн мөрийг үнэн зөв байхаа больсон гэж үзэх зорилготой.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Текст оруулсан

Баримт бичигт нэмэлт оруулахын тулд <ins>шошгыг ашиглана уу.

Энэ текстийн мөрийг баримт бичигт нэмэлт болгон авч үзэх зорилготой.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Доор зурсан текст

Текстийн доогуур зурахын тулд <u>шошгыг ашиглана уу.

Энэ текстийн мөрийг доогуур зураасаар буулгана

<u>This line of text will render as underlined</u>

Хөнгөн загвартай HTML-ийн өгөгдмөл онцлох тэмдэглэгээг ашиглана уу.

Жижиг текст

Текстийн доторлогоо эсвэл блокуудыг онцлохын тулд <small>шошгыг ашиглан текстийг эхийн хэмжээтэй 85%-д тохируулна уу. font-sizeГарчиг элементүүд нь үүрлэсэн элементүүдийн хувьд өөрийн гэсэн хүлээн авдаг <small>.

.smallТа аль нэгийн оронд доторх элементийг ашиглаж болно <small>.

Энэ текстийн мөрийг нарийн хэвлэмэл хэлбэрээр авч үзэх зорилготой.

<small>This line of text is meant to be treated as fine print.</small>

Зоригтой

Илүү хүнд үсгийн жинтэй текстийн хэсгийг онцлон тэмдэглэхэд зориулагдсан.

Дараах текстийн хэсэг нь тод текст хэлбэрээр бичигдсэн байна.

<strong>rendered as bold text</strong>

Налуу

Текстийн хэсэгчилсэн хэсгийг налуу үсгээр онцлон тэмдэглэхийн тулд.

Дараах текстийн хэсэг нь налуу бичээстэй байна.

<em>rendered as italicized text</em>

Өөр элементүүд

HTML5 дээр <b>чөлөөтэй ашиглах боломжтой . Энэ нь ихэвчлэн дуу хоолой, техникийн нэр томъёо гэх мэт нэмэлт ач холбогдол өгөхгүйгээр үг, хэллэгийг тодруулах зорилготой юм .<i><b><i>

Тохируулгын ангиуд

Текстийг зэрэгцүүлэх анги бүхий бүрэлдэхүүн хэсгүүдэд текстийг хялбархан тохируулаарай.

Зүүн зэрэгцүүлсэн текст.

Төвд зэрэгцүүлсэн текст.

Баруун зэрэгцүүлсэн текст.

Зөвшөөрөгдсөн текст.

Боох текст байхгүй.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Өөрчлөлтийн ангиуд

Текстийг том үсгээр бичих анги бүхий бүрэлдэхүүн хэсгүүдэд текстийг хувиргах.

Жижиг үсгээр бичсэн текст.

Том үсгээр бичсэн текст.

Томоор бичсэн текст.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Товчлол

<abbr>Товчлол болон товчилсон үгэнд зориулсан HTML-ийн элементийн загварчлагдсан хэрэгжилт нь хулган дээр өргөжсөн хувилбарыг харуулах. Атрибут бүхий товчилсон үгс нь titleдоод талдаа цайвар тасархай хүрээтэй, гүйлгэхэд туслах курсортой байдаг бөгөөд энэ нь хулганаар болон туслах технологийн хэрэглэгчдэд нэмэлт контекстийг өгдөг.

Үндсэн товчлол

Аттрибут гэдэг үгийн товчлол нь attr юм.

<abbr title="attribute">attr</abbr>

Инициализм

.initialismҮсгийн хэмжээг арай бага болгохын тулд товчлол дээр нэмнэ үү .

HTML бол зүссэн талхнаас хойшхи хамгийн сайн зүйл юм.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Хаяг

Хамгийн ойрын өвөг дээдэс эсвэл ажлын бүх хэсгийн холбоо барих мэдээллийг өгнө үү. Бүх мөрийг -ээр төгсгөж форматыг <br>хадгална.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Бүтэн нэр
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

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

Таны документ доторх өөр эх сурвалжаас авсан агуулгын блокуудыг иш татахын тулд.

Өгөгдмөл блок ишлэл

Ямар <blockquote>ч HTML -г ишлэл болгон ороорой. Шулуун ишлэлийн хувьд бид <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote сонголтууд

Стандартын энгийн хувилбаруудад зориулж хэв маяг, агуулгын өөрчлөлт <blockquote>.

Эх сурвалжийг нэрлэх

<footer>Эх сурвалжийг тодорхойлохын тулд a нэмнэ үү . Эх сурвалжийн бүтээлийн нэрийг <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.

Эх сурвалжийн гарчигт алдартай нэгэн

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Өөр дэлгэцүүд

.blockquote-reverseБаруун талд зэрэгцүүлсэн агуулга бүхий блок ишлэл нэмэх .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.

Эх сурвалжийн гарчигт алдартай нэгэн

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Жагсаалтууд

Захиалгагүй

Захиалга нь тодорхой хамааралгүй зүйлсийн жагсаалт .

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>
  <li>...</li>
</ul>

Захиалсан

Захиалга нь тодорхой хамааралтай зүйлсийн жагсаалт .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Масса дахь бүхэл тоо
Дээд зэрэглэлийн nisl aliquet дахь Facilisis
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Загваргүй

Жагсаалтын зүйлсийн өгөгдмөл list-styleболон зүүн талын зайг арилга (зөвхөн шууд хүүхдүүдэд). Энэ нь зөвхөн хүүхдийн шууд жагсаалтын зүйлд хамаатай бөгөөд та ямар ч үүрлэсэн жагсаалтад анги нэмэх шаардлагатай гэсэн үг юм.

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="list-unstyled">
  <li>...</li>
</ul>

Шугаманд

Жагсаалтын бүх зүйлийг нэг мөрөнд display: inline-block;хөнгөн дэвсгэртэй байрлуул.

Lorem ipsum
Phasellus iaculis
Үгүй ээ

<ul class="list-inline">
  <li>...</li>
</ul>

Тодорхойлолт

Холбогдох тайлбар бүхий нэр томъёоны жагсаалт.

Тодорхойлолтын жагсаалтууд: Тодорхойлолтын жагсаалт нь нэр томъёог тодорхойлоход төгс төгөлдөр юм.
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.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Хэвтээ тайлбар

Нэр томъёо, тайлбарыг зэрэгцүүлэн <dl>байрлуул. Өгөгдмөл s шиг давхарлаж эхэлдэг <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.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Автомат таслах

Хэвтээ тайлбарын жагсаалт нь зүүн баганад багтахааргүй хэт урт нэр томъёог тайрах болно text-overflow. Нарийхан харагдах цонхонд тэдгээр нь өгөгдмөл овоолсон байрлал руу өөрчлөгдөнө.

Шугаманд

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

Жишээлбэл, <section>шугамаар ороосон байх ёстой.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Хэрэглэгчийн оруулсан

<kbd>Гараар ихэвчлэн оруулдаг оролтыг заахдаа ашиглана уу .

Лавлахыг солихын тулд директорийн cdнэрийг бичээд дараа нь оруулна уу.
Тохиргоог засахын тулд дарна уу ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Үндсэн блок

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

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

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

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

Хувьсагч

Хувьсагчдыг зааж өгөхийн тулд <var>тагийг ашиглана уу.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Жишээ гаралт

Програмын түүвэр гаралтыг блокуудыг зааж өгөхийн тулд <samp>шошгыг ашиглана уу.

Энэ текстийг компьютерийн програмын жишээ гаралт гэж үзэх зорилготой.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Үндсэн жишээ

Үндсэн хэв маягийн хувьд-хөнгөн дэвсгэр ба зөвхөн хэвтээ хуваагч- үндсэн ангиллыг .tableдурын <table>. Энэ нь хэт их хэрэгцээтэй мэт санагдаж болох ч хуанли, огноо сонгогч зэрэг бусад залгаасуудад зориулсан хүснэгтүүдийг өргөнөөр ашигладаг тул бид хүснэгтийн загваруудыг тусгаарлахаар шийдсэн.

Хүснэгтийн нэмэлт тайлбар.
#	Нэр	Овог	Хэрэглэгчийн нэр
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Ларри	шувуу	@twitter

<table class="table">
  ...
</table>

Судалчлагдсан эгнээ

.table-stripedдоторх хүснэгтийн аль ч мөрөнд тахө зураас нэмэхийн тулд ашиглана уу <tbody>.

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

Судалчлагдсан хүснэгтүүд нь :nth-childInternet Explorer 8 дээр байдаггүй CSS сонгогчоор загварчлагдсан байдаг.

#	Нэр	Овог	Хэрэглэгчийн нэр
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Ларри	шувуу	@twitter

<table class="table table-striped">
  ...
</table>

Хилтэй ширээ

.table-borderedХүснэгт болон нүднүүдийн бүх талын хүрээг нэмнэ үү .

#	Нэр	Овог	Хэрэглэгчийн нэр
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Ларри	шувуу	@twitter

<table class="table table-bordered">
  ...
</table>

Мөрүүдийг гүйлгэнэ үү

.table-hoverДотор хүснэгтийн мөрүүд дээр хулганын төлөвийг идэвхжүүлэхийн тулд нэмэх <tbody>.

#	Нэр	Овог	Хэрэглэгчийн нэр
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Ларри	шувуу	@twitter

<table class="table table-hover">
  ...
</table>

Хураангуй ширээ

.table-condensedХүснэгтийг илүү нягт нямбай болгохын тулд эсийн дэвсгэрийг хагасаар нь багасгаж нэмнэ .

#	Нэр	Овог	Хэрэглэгчийн нэр
1	Марк	Отто	@mdo
2	Жейкоб	Торнтон	@ тарган
3	Шувуу Ларри		@twitter

<table class="table table-condensed">
  ...
</table>

Контекст ангиуд

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

Анги	Тодорхойлолт
`.active`	Тодорхой мөр эсвэл нүдэнд хулганы өнгийг хэрэглэнэ
`.success`	Амжилттай эсвэл эерэг үйлдлийг илэрхийлдэг
`.info`	Төвийг сахисан мэдээллийн өөрчлөлт эсвэл үйлдлийг илэрхийлнэ
`.warning`	Анхаарал хандуулах шаардлагатай байж болзошгүй анхааруулгыг илэрхийлнэ
`.danger`	Аюултай эсвэл сөрөг байж болзошгүй үйлдлийг илэрхийлнэ

#	Баганын гарчиг	Баганын гарчиг	Баганын гарчиг
1	Баганын агуулга	Баганын агуулга	Баганын агуулга
2	Баганын агуулга	Баганын агуулга	Баганын агуулга
3	Баганын агуулга	Баганын агуулга	Баганын агуулга
4	Баганын агуулга	Баганын агуулга	Баганын агуулга
5	Баганын агуулга	Баганын агуулга	Баганын агуулга
6	Баганын агуулга	Баганын агуулга	Баганын агуулга
7	Баганын агуулга	Баганын агуулга	Баганын агуулга
8	Баганын агуулга	Баганын агуулга	Баганын агуулга
9	Баганын агуулга	Баганын агуулга	Баганын агуулга

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Туслах технологид утгыг дамжуулах

Хүснэгтийн мөр эсвэл тусдаа нүдэнд утгыг нэмэхийн тулд өнгийг ашиглах нь зөвхөн харааны заалтыг өгдөг бөгөөд энэ нь дэлгэц уншигч гэх мэт туслах технологийн хэрэглэгчдэд хүргэхгүй. Өнгөөөр тэмдэглэсэн мэдээлэл нь агуулгаасаа тодорхой (холбогдох хүснэгтийн мөр/нүд дэх харагдах текст) эсвэл .sr-onlyангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.

Хариуцлагатай хүснэгтүүд

Хүснэгтийг жижиг төхөөрөмжүүд дээр (768 пикселээс доош) хэвтээ байдлаар гүйлгэхийн тулд аль нэгийг .tableнь ороож, хариу үйлдэл үзүүлэх хүснэгт үүсгээрэй. .table-responsive768px-ээс том хэмжээтэй зүйлийг үзэхэд эдгээр хүснэгтэд ямар ч ялгаа харагдахгүй.

Босоо хайчлах/тайрах

Хариуцлагатай хүснэгтүүд нь хүснэгтийн overflow-y: hiddenдоод эсвэл дээд ирмэгээс хэтэрсэн аливаа контентыг хасдаг -г ашигладаг. Ялангуяа энэ нь унадаг цэс болон бусад гуравдагч талын виджетүүдийг таслах боломжтой.

Firefox болон талбарын багцууд

widthFirefox нь хариу үйлдэл үзүүлэх хүснэгтэд саад учруулдаг зарим нэг эвгүй талбарын загвартай . Үүнийг бид Bootstrap-д өгдөггүй Firefox -д зориулсан хакеруудгүйгээр дарж болохгүй.

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Дэлгэрэнгүй мэдээллийг Stack Overflow хариултыг уншина уу .

#	Хүснэгтийн гарчиг	Хүснэгтийн гарчиг	Хүснэгтийн гарчиг	Хүснэгтийн гарчиг	Хүснэгтийн гарчиг	Хүснэгтийн гарчиг
1	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд
2	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд
3	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд

#	Хүснэгтийн гарчиг	Хүснэгтийн гарчиг	Хүснэгтийн гарчиг	Хүснэгтийн гарчиг	Хүснэгтийн гарчиг	Хүснэгтийн гарчиг
1	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд
2	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд
3	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд	Хүснэгтийн нүд

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Үндсэн жишээ

Бие даасан маягтын хяналтууд нь зарим глобал хэв маягийг автоматаар хүлээн авдаг. Бүх текстийн <input>, <textarea>, болон <select>элементүүдийг анхдагчаар тохируулсан .form-control. width: 100%;Шошго болон удирдлагыг .form-groupхамгийн оновчтой зайд боож өгнө.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Маягтын бүлгийг оролтын бүлгүүдтэй хольж болохгүй

Маягтын бүлгийг оролтын бүлгүүдтэй шууд хольж болохгүй . Үүний оронд оролтын бүлгийг маягтын бүлгийн дотор байрлуул.

Дотор хэлбэр

Зүүн талд зэрэгцүүлсэн болон шугаман блокийн удирдлагад зориулж маягтдаа .form-inline(заавал байх албагүй ) нэмнэ үү . Энэ нь зөвхөн хамгийн багадаа 768px өргөнтэй харагдах цонхны хэлбэрт хамаарна.<form>

Тусгай өргөн шаардлагатай байж магадгүй

Оролтууд болон сонголтуудыг width: 100%;Bootstrap-д анхдагч байдлаар ашигласан. Inline маягт дотор бид үүнийг дахин тохируулсан бөгөөд width: auto;ингэснээр олон удирдлага нэг мөрөнд байх болно. Таны зохион байгуулалтаас хамааран нэмэлт захиалгат өргөн шаардлагатай байж болно.

Үргэлж шошго нэмнэ үү

Хэрэв та оролт бүрт шошго оруулахгүй бол дэлгэц уншигчид таны маягттай холбоотой асуудалтай тулгарах болно. .sr-onlyЭдгээр доторлогооны маягтуудын хувьд та классыг ашиглан шошгыг нууж болно . aria-label, aria-labelledbyэсвэл titleшинж чанар гэх мэт туслах технологид шошго өгөх өөр аргууд байдаг . Хэрэв эдгээрийн аль нь ч байхгүй бол дэлгэц уншигчид хэрэв байгаа бол атрибутыг ашиглаж болно , гэхдээ шошгоны бусад аргуудыг орлуулахыг зөвлөдөггүйг placeholderанхаарна уу .placeholder

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Хэвтээ хэлбэр

Bootstrap-ийн урьдчилан тодорхойлсон тор ангиудыг ашиглан маягт дээр нэмж хэвтээ байрлалд шошго болон формын хяналтын бүлгүүдийг зэрэгцүүлнэ .form-horizontal(энэ нь заавал байх албагүй <form>). Үүнийг хийснээр .form-groups-г сүлжээний эгнээ болгон өөрчлөх тул .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Дэмжигдсэн удирдлага

Стандарт маягтын хяналтын жишээ маягтын байршлын жишээнд дэмжигдсэн.

Оролтууд

Хамгийн түгээмэл хэлбэрийн хяналт, текст дээр суурилсан оролтын талбарууд. Бүх HTML5 төрлийн дэмжлэг багтана: text, password, datetime, datetime-local, date, month, time, week, , number, email, url, search, tel, болон color.

Төрөл бүрийн мэдэгдэл шаардлагатай

Оролтууд typeнь зөв зарлагдсан тохиолдолд л бүрэн загварлаг болно.

<input type="text" class="form-control" placeholder="Text input">

Оролтын бүлгүүд

Текстийн өмнө болон/эсвэл дараа нь нэгдсэн текст эсвэл товчлуур нэмэхийн тулд <input>оролтын бүлгийн бүрэлдэхүүн хэсгийг шалгана уу .

Текстареа

Текстийн олон мөрийг дэмждэг маягтын удирдлага. rowsШаардлагатай бол атрибутыг өөрчлөх .

<textarea class="form-control" rows="3"></textarea>

Шалгах хайрцаг ба радио

Сонголтууд нь жагсаалтаас нэг буюу хэд хэдэн сонголтыг сонгоход зориулагдсан бол радио нь олон сонголтоос нэг сонголтыг сонгоход зориулагдсан.

Идэвхгүй болгосон чагт хайрцаг болон радиог дэмждэг боловч эцэг эхийн дээр хулган дээр "зөвшөөрөгдөөгүй" курсор оруулахын тулд та эцэг эх , , , эсвэл гэсэн ангиллыг <label>нэмэх шаардлагатай ..disabled.radio.radio-inline.checkbox.checkbox-inline

Өгөгдмөл (овоолсон)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Inline checkboxs болон radios

Нэг мөрөнд гарч ирэх удирдлагад хэд хэдэн шалгах хайрцаг эсвэл радио дээр .checkbox-inlineэсвэл ангиудыг ашиглана уу..radio-inline

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Шошго текстгүй тэмдэглэгээ болон радио

Хэрэв танд текст байхгүй <label>бол оролт нь таны бодож байсан шиг байрлана. Одоогоор зөвхөн шугаман бус шалгах хайрцаг болон радио дээр ажилладаг. Туслах технологид зориулсан шошго (жишээ нь, ашиглах aria-label) байхаа мартуузай.

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Сонгодог

Safari болон Chrome-ын олон төрлийн сонгомол цэсүүд нь бөөрөнхий булантай байдаг бөгөөд тэдгээрийг border-radiusшинж чанараараа өөрчлөх боломжгүй байдаг.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select>Атрибут бүхий удирдлагын хувьд multipleолон сонголтыг анхдагчаар харуулав.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Статик хяналт

Хэрэв та маягт доторх маягтын шошгоны хажууд энгийн текстийг байрлуулах шаардлагатай .form-control-staticбол <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Төвлөрөх байдал

outlineБид зарим маягтын удирдлага дээрх анхдагч хэв маягийг устгаад box-shadowоронд нь a хэрэглэнэ :focus.

Демо `:focus`төлөв

Дээрх жишээний оролт нь манай баримт бичигт байгаа :focusтөлөвийг харуулахын тулд өөрчлөн хэв маягийг ашигладаг .form-control.

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

disabledХэрэглэгчийн харилцан үйлчлэлээс сэргийлэхийн тулд оролт дээр логик шинж чанарыг нэмнэ үү . Идэвхгүй болсон оролтууд илүү хөнгөн харагдах ба not-allowedкурсор нэмнэ.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Идэвхгүй талбарын багц

Доторх бүх удирдлагыг нэг дор идэвхгүй болгохын тулд disabledатрибутыг a -д нэмнэ үү .<fieldset><fieldset>

-ийн холбоосын функцийн талаар анхааруулга`<a>`

Өгөгдмөл байдлаар, хөтчүүд a доторх бүх эх хэлбэрийн хяналтыг ( <input>, <select>болон <button>элементүүд) <fieldset disabled>идэвхгүй болгож, гар болон хулганы харилцан үйлчлэлээс сэргийлнэ. Гэсэн хэдий ч, хэрэв таны маягт мөн <a ... class="btn btn-*">элементүүдийг агуулж байвал эдгээрт зөвхөн pointer-events: none. Товчлуурын идэвхгүй байдлын тухай хэсэгт (ялангуяа зангууны элементүүдийн дэд хэсэгт) дурдсанчлан , энэ CSS шинж чанар хараахан стандартчилагдаагүй байгаа бөгөөд Opera 18 болон түүнээс доош хувилбарууд эсвэл Internet Explorer 11 дээр бүрэн дэмжигдээгүй байгаа бөгөөд хожсон. 'Гар хэрэглэгчид анхаарлаа төвлөрүүлэх эсвэл эдгээр холбоосыг идэвхжүүлэхэд саад болохгүй. Тиймээс аюулгүй байхын тулд ийм холбоосыг идэвхгүй болгохын тулд захиалгат JavaScript ашиглана уу.

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

Bootstrap нь эдгээр хэв маягийг бүх хөтөч дээр ашиглах боловч Internet Explorer 11 болон түүнээс доош хувилбарууд disabledнь <fieldset>. Эдгээр хөтчүүдийн талбарын багцыг идэвхгүй болгохын тулд захиалгат JavaScript ашиглана уу.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Зөвхөн унших төлөв

readonlyОролтын утгыг өөрчлөхөөс сэргийлэхийн тулд оролт дээр логик шинж чанарыг нэмнэ үү . Зөвхөн унших боломжтой оролтууд нь илүү хөнгөн харагдана (ямар нэгэн идэвхгүй оролттой адил), гэхдээ стандарт курсорыг хадгална.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Тусламжийн текст

Маягтын хяналтын түвшний тусламжийн текстийг блоклох.

Тусламжийн текстийг маягтын удирдлагатай холбох

aria-describedbyТусламжийн текст нь атрибут ашиглахтай холбоотой маягтын удирдлагатай шууд холбоотой байх ёстой . Энэ нь хэрэглэгч анхаарлаа төвлөрүүлэх эсвэл удирдлага руу орох үед дэлгэц уншигч гэх мэт туслах технологиуд энэ тусламжийн текстийг зарлах болно.

<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Баталгаажуулалтын төлөвүүд

Bootstrap нь маягтын удирдлага дээрх алдаа, анхааруулга, амжилтын төлөвийн баталгаажуулалтын хэв маягийг агуулдаг. Ашиглахын тулд эх элемент дээр .has-warning, .has-error, эсвэл нэмнэ үү. .has-successТухайн элемент доторх дурын .control-label, .form-control, болон .help-blockбаталгаажуулалтын хэв маягийг хүлээн авна.

Баталгаажуулалтын төлөвийг туслах технологи, өнгөний харалган хэрэглэгчдэд дамжуулах

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

Төрийн өөр заалтыг мөн зааж өгсөн эсэхийг шалгаарай. Жишээлбэл, та маягтын хяналтын <label>текстэнд төлөв байдлын талаархи зөвлөмжийг оруулах боломжтой (дараах кодын жишээнд байгаа шиг), Глифконыг (ангилыг ашиглан тохирох өөр тексттэй - Glyphicon жишээнүүдийг.sr-only үзнэ үү ) оруулах эсвэл нэмэлт тусламжийн текст блок. Туслах технологийн хувьд хүчингүй хэлбэрийн удирдлагад мөн атрибут оноож болно.aria-invalid="true"

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Нэмэлт дүрс бүхий

Мөн та зөв дүрс бүхий нэмэлт санал хүсэлтийн дүрсүүдийг нэмж болно .has-feedback.

Санал хүсэлтийн дүрс нь зөвхөн текстийн <input class="form-control">элементүүдтэй ажилладаг.

Дүрс, шошго, оролтын бүлгүүд

Шошгогүй оролт болон баруун талд нэмэлт оруулгатай оролтын бүлгүүдэд санал хүсэлтийн дүрсийг гараар байрлуулах шаардлагатай . Хүртээмжтэй байдлын үүднээс бүх оролтод шошго өгөхийг танд зөвлөж байна. Хэрэв та шошгуудыг харуулахаас сэргийлэхийг хүсвэл .sr-onlyангийн хамт нуу. Хэрэв та шошгогүйгээр хийх ёстой бол topсанал хүсэлтийн дүрсний утгыг тохируулна уу. Оролтын бүлгүүдийн хувьд rightнэмэлтийнхээ өргөнөөс хамааран утгыг тохирох пикселийн утгад тохируулна уу.

Туслах технологид дүрсний утгыг дамжуулах

Дэлгэц уншигч гэх мэт туслах технологиуд дүрсний утгыг зөв илэрхийлэхийн тулд нэмэлт далд текстийг .sr-onlyангид оруулах ёстой бөгөөд энэ нь ашиглахтай холбоотой маягтын удирдлагатай шууд холбоотой байх ёстой aria-describedby. Өөрөөр хэлбэл, утгыг (жишээлбэл, тодорхой текст оруулах талбарт анхааруулга байгаа гэх мэт) <label>маягтын удирдлагатай холбоотой бодит текстийг өөрчлөх гэх мэт өөр хэлбэрээр дамжуулж байгаа эсэхийг шалгаарай.

Дараах жишээнүүдэд тус тусын хэлбэрийн хяналтын баталгаажуулалтын төлөвийг <label>текст өөрөө дурьдсан боловч дээрх техникийг ( .sr-onlyтекст ба ашиглан aria-describedby) тайлбарлах зорилгоор оруулсан болно.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Хэвтээ болон шугаман хэлбэрийн нэмэлт дүрсүүд

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

`.sr-only`Нуугдсан шошготой нэмэлт дүрсүүд

Хэрэв та маягтын хяналтыг (атрибут гэх мэт шошгоны бусад сонголтуудыг ашиглахын оронд) .sr-onlyнуухын тулд анги ашигладаг бол Bootstrap нь дүрсийг нэмсний дараа түүний байрлалыг автоматаар тохируулна.<label>aria-label

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Хэмжээг хянах

зэрэг ангиудыг ашиглан өндрийг .input-lg, зэрэг сүлжээ баганын ангиудыг ашиглан өргөнийг тохируулна уу .col-lg-*.

Өндөр хэмжээ

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

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Хэвтээ хэлбэрийн бүлгийн хэмжээ

эсвэл .form-horizontalнэмэх замаар шошгоны хэмжээг хурдан хэмжиж, хяналтыг хэлбэржүүлнэ ..form-group-lg.form-group-sm

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Баганын хэмжээ

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

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Товчлуурын шошго

<a>, <button>, эсвэл <input>элемент дээр товчлуурын ангиллыг ашиглана уу.

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Контекст тусгай хэрэглээ

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

Товчлуурын үүрэг гүйцэтгэдэг холбоосууд

Хэрэв <a>элементүүд нь одоогийн хуудасны өөр баримт бичиг эсвэл хэсэг рүү шилжихийн оронд хуудасны функцийг идэвхжүүлдэг товчлуурын үүрэг гүйцэтгэдэг бол тэдгээрт мөн тохирох role="button".

Хөтөч хоорондын дүрслэл

Шилдэг туршлагын хувьд бид аль болох элементийг ашиглахыг зөвлөж байна<button> бид хөтчөөс хөтчөөр таарч тохирохыг баталгаажуулахын тулд

Бусад зүйлсийн дотор Firefox <30-д алдаа байдаг бөгөөдline-height энэ нь биднийг -based товчлууруудыг тохируулахаас сэргийлж <input>, Firefox дээрх бусад товчлууруудын өндөртэй яг таарахгүй байх шалтгаан болдог.

Сонголтууд

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

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Туслах технологид утгыг дамжуулах

Товчлуур дээр утгыг нэмэхийн тулд өнгө ашиглах нь зөвхөн харааны заалтыг өгдөг бөгөөд дэлгэц уншигч гэх мэт туслах технологийн хэрэглэгчдэд дамжуулахгүй. Өнгөөөр тэмдэглэсэн мэдээлэл нь агуулгаасаа (товчны харагдахуйц текст) тодорхой байх эсвэл .sr-onlyангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.

Хэмжээ

Илүү том эсвэл жижиг товчлуурууд танд таалагдаж байна уу? Нэмэлт хэмжээтэй .btn-lgбол , .btn-sm, эсвэл нэмнэ үү ..btn-xs

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

-г нэмж блокийн түвшний товчлууруудыг үүсгэнэ үү .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Идэвхтэй байдал

Идэвхтэй үед товчлуурууд дарагдсан харагдана (хар дэвсгэр, бараан хүрээ, сүүдэртэй). Элементүүдийн хувьд <button>энэ нь дамжуулан хийгддэг :active. Элементүүдийн хувьд <a>энэ нь .active. Гэсэн хэдий ч, хэрэв та идэвхтэй төлөвийг программын дагуу хуулбарлах шаардлагатай бол .activeon <button>s (мөн атрибутыг оруулах ) ашиглаж болно.aria-pressed="true"

Товчлуурын элемент

Энэ нь псевдо анги тул нэмэх шаардлагагүй :active, гэхдээ хэрэв та ижил дүр төрхийг хүчлэх шаардлагатай бол үргэлжлүүлээд нэмнэ үү .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Зангуу элемент

Товчлуур дээр .activeанги нэмнэ үү .<a>

Үндсэн холбоос Холбоос

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

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

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

Товчлуурын элемент

Товчлуур дээр disabledатрибут нэмнэ үү .<button>

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

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

Хэрэв та энэ disabledатрибутыг -д нэмбэл <button>Internet Explorer 9 болон түүнээс доош хувилбарууд нь текстийг саарал өнгөтэй болгож, бидний засч залруулах боломжгүй муухай текст сүүдэртэй болгоно.

Зангуу элемент

Товчлуур дээр .disabledанги нэмнэ үү .<a>

Үндсэн холбоос Холбоос

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Бид .disabledэнд энгийн ангитай адил хэрэглээний анги болгон ашигладаг .activeтул угтвар шаардлагагүй.

Холбоосын үйл ажиллагааны анхааруулга

Энэ анги нь s- pointer-events: noneийн холбоосын функцийг идэвхгүй болгохыг оролдоход ашигладаг <a>боловч CSS шинж чанар нь хараахан стандартчилагдаагүй байгаа бөгөөд Opera 18 болон түүнээс доош хувилбарууд эсвэл Internet Explorer 11-д бүрэн дэмжигдээгүй байна. Нэмж дурдахад pointer-events: none, гарыг дэмждэг хөтөч дээр ч гэсэн. навигаци нь ямар ч нөлөөгүй хэвээр байгаа бөгөөд энэ нь хараатай гар хэрэглэгчид болон туслах технологийн хэрэглэгчид эдгээр холбоосыг идэвхжүүлэх боломжтой хэвээр байх болно. Тиймээс аюулгүй байхын тулд ийм холбоосыг идэвхгүй болгохын тулд захиалгат JavaScript ашиглана уу.

Хариуцлагатай зургууд

Bootstrap 3 дээрх зургуудыг анги нэмэх замаар хариу үйлдэл үзүүлэх боломжтой болгож болно .img-responsive. Энэ нь зурагт хамаарах бөгөөд max-width: 100%;ингэснээр энэ нь үндсэн элементэд сайн масштабтай болно.height: auto;display: block;

.img-responsiveАнги ашигладаг зургуудыг голлуулахын тулд .center-blockоронд нь ашиглана уу .text-center. Хэрэглээний талаарх дэлгэрэнгүй мэдээллийг туслах ангийн хэсгээс үзнэ үү ..center-block

SVG зураг болон IE 8-10

Internet Explorer 8-10 дээр SVG зургууд .img-responsiveнь пропорциональ бус хэмжээтэй байдаг. Үүнийг засахын тулд width: 100% \9;шаардлагатай бол нэмнэ үү. Bootstrap нь үүнийг автоматаар ашигладаггүй, учир нь энэ нь бусад зургийн форматад хүндрэл учруулдаг.

<img src="..." class="img-responsive" alt="Responsive image">

Зургийн хэлбэрүүд

<img>Аливаа төсөлд дүрсийг хялбархан загварчлахын тулд элементэд анги нэмнэ үү .

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

Internet Explorer 8-д бөөрөнхий булангуудыг дэмждэггүй гэдгийг санаарай.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Контекст өнгө

Цөөн хэдэн онцлох хэрэглээний ангиудын тусламжтайгаар утгыг өнгөөр дамжуулаарай. Эдгээрийг мөн холбоосуудад хэрэглэж болох бөгөөд бидний өгөгдмөл холбоосын хэв маягтай адил хулганаар бараан болно.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Онцлогтой харьцах

Заримдаа өөр сонгогчийн онцлогоос шалтгаалан онцлох ангиудыг ашиглах боломжгүй байдаг. Ихэнх тохиолдолд, текстээ <span>ангид оруулах нь хангалттай.

Туслах технологид утгыг дамжуулах

Утга нэмэхийн тулд өнгийг ашиглах нь зөвхөн харааны заалтыг өгдөг бөгөөд энэ нь дэлгэц уншигч гэх мэт туслах технологийн хэрэглэгчдэд хүргэхгүй. Өнгөөөр тэмдэглэсэн мэдээлэл нь агуулгаас нь тодорхой харагдаж байгаа эсэхийг шалгаарай (контекст өнгө нь зөвхөн текст/тэмдэглэгээнд байгаа утгыг бэхжүүлэхэд ашиглагддаг) эсвэл .sr-onlyангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр оруулсан эсэхийг шалгаарай. .

Контекст суурь

Контекст текстийн өнгөний ангиудтай адил элементийн дэвсгэрийг дурын контекст ангид хялбархан тохируулж болно. Зангууны бүрэлдэхүүн хэсгүүд нь текстийн ангиудтай адил хулганаар бараан болно.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Онцлогтой харьцах

Заримдаа өөр сонгогчийн онцлогоос шалтгаалан контекст суурь ангиллыг ашиглах боломжгүй байдаг. Зарим тохиолдолд, өөрийн элементийн агуулгыг <div>ангид оруулах нь хангалттай тойрон гарах арга юм.

Туслах технологид утгыг дамжуулах

Контекст өнгөний нэгэн адил өнгөөр дамжуулж буй аливаа утгыг зөвхөн үзүүлэнгийн бус форматаар дамжуулж байгаа эсэхийг шалгаарай.

Хаах дүрс

Модал болон сэрэмжлүүлэг зэрэг контентыг хаахын тулд ерөнхий хаах дүрс тэмдгийг ашиглана уу.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Карет

Унждаг функц болон чиглэлийг зааж өгөхийн тулд каретуудыг ашиглана уу. Унтраах цэсэнд анхдагч тэмдэглэгээ автоматаар солигдоно гэдгийг анхаарна уу .

<span class="caret"></span>

Түргэн хөвөгч

Элементийг классаар зүүн эсвэл баруун тийш хөвүүлэх. !importantонцлогтой холбоотой асуудлаас зайлсхийхийн тулд оруулсан болно. Ангиудыг холимог болгон ашиглаж болно.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Төвийн контент блокууд

Элементийг тохируулж display: block, дундуур нь тохируулна уу margin. Холимог болон ангиллаар авах боломжтой.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Цэвэрлэх

Үндсэн элементfloat дээр нэмэх замаар s-г хялбархан арилгана . Николас Галлахерын алдаршуулсан бичил засварыг ашигладаг. Мөн холигч болгон ашиглаж болно..clearfix

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

Агуулгыг харуулах, нуух

Элементийг болон ангиудыг ашиглан харуулах эсвэл нуухыг ( дэлгэц уншигчдад оруулаад ) хүчээр хийнэ үү. Эдгээр ангиуд нь хурдан хөвөгчтэй адил өвөрмөц байдлын зөрчилдөөнөөс зайлсхийхэд ашигладаг . Тэдгээр нь зөвхөн блокийн түвшинг солиход л боломжтой. Тэд мөн холигч болгон ашиглаж болно..show.hidden!important

.hideболомжтой боловч энэ нь дэлгэц уншигчдад үргэлж нөлөөлдөггүй бөгөөд v3.0.1-ээс хойш хуучирсан . эсвэл оронд нь хэрэглэнэ .hidden..sr-only

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

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Дэлгэц уншигч болон гарын навигацийн контент

-тэй дэлгэц уншигчаас бусад бүх төхөөрөмжид элементийг нуух .sr-only. Элемент .sr-onlyанхаарлаа .sr-only-focusableтөвлөрүүлэх үед дахин харуулахын тулд (жишээ нь зөвхөн гар ашигладаг) -тай хослуул. Хүртээмжтэй байдлын шилдэг туршлагыг дагаж мөрдөхөд зайлшгүй шаардлагатай . Мөн хольц болгон ашиглаж болно.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Зураг солих

.text-hideЭлементийн текстийн агуулгыг дэвсгэр зургаар солиход туслах анги эсвэл холимгийг ашиглана уу.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

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

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

Боломжтой ангиуд

Харах цонхны завсарлагаан дээр агуулгыг сэлгэхийн тулд боломжтой ангиудын дан эсвэл хослолыг ашиглана уу.

	Хэт жижиг төхөөрөмжүүдУтас (<768px)	Жижиг төхөөрөмжүүдТаблет (≥768px)	Дунд зэргийн төхөөрөмжШирээний компьютер (≥992px)	Том төхөөрөмжүүдШирээний компьютер (≥1200px)
`.visible-xs-*`	Харагдах	Нуугдсан	Нуугдсан	Нуугдсан
`.visible-sm-*`	Нуугдсан	Харагдах	Нуугдсан	Нуугдсан
`.visible-md-*`	Нуугдсан	Нуугдсан	Харагдах	Нуугдсан
`.visible-lg-*`	Нуугдсан	Нуугдсан	Нуугдсан	Харагдах
`.hidden-xs`	Нуугдсан	Харагдах	Харагдах	Харагдах
`.hidden-sm`	Харагдах	Нуугдсан	Харагдах	Харагдах
`.hidden-md`	Харагдах	Харагдах	Нуугдсан	Харагдах
`.hidden-lg`	Харагдах	Харагдах	Харагдах	Нуугдсан

v3.2.0-ийн байдлаар, таслах цэг бүрийн ангиуд нь доор жагсаасан .visible-*-*CSS өмчийн үнэ цэнэ тус бүрийн хувьд гурван хувилбартай байна.display

Ангиудын бүлэг	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Тиймээс, xsжишээлбэл, нэмэлт жижиг ( ) дэлгэцийн хувьд боломжтой .visible-*-*ангиуд нь: .visible-xs-block, .visible-xs-inline, болон .visible-xs-inline-block.

.visible-xs, .visible-sm, .visible-md, ангиуд .visible-lgбас байдаг боловч v3.2.0-с хойш хуучирсан . Холбогдох элементүүдийг .visible-*-blockсолих нэмэлт тусгай тохиолдлоос бусад тохиолдолд тэдгээр нь ойролцоогоор -тай тэнцүү байна .<table>

Ангиудыг хэвлэх

Энгийн хариу үйлдэл үзүүлэх ангиудтай адил эдгээрийг ашиглан контентыг хэвлэхийн тулд шилжүүлээрэй.

Ангиуд	Хөтөч	Хэвлэх
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Нуугдсан	Харагдах
`.hidden-print`	Харагдах	Нуугдсан

Анги .visible-printнь бас байгаа боловч v3.2.0-с хойш хуучирсан . -холбоотой элементүүдийн .visible-print-blockнэмэлт тусгай тохиолдлоос бусад тохиолдолд энэ нь ойролцоогоор -тай тэнцүү байна .<table>

Туршилтын тохиолдлууд

Хөтөчийнхөө хэмжээг өөрчлөх эсвэл өөр төхөөрөмж дээр ачаалж, хариу үйлдэл үзүүлэх хэрэгслийн ангиллыг туршиж үзээрэй.

Харагдана...

Ногоон тэмдэглэгээ нь тухайн элемент таны одоогийн харах хэсэгт харагдахыг илтгэнэ.

Хэт жижиг ✔ x-small дээр харагдана

Жижиг ✔ Жижигхэн дээр харагдана

Дунд ✔ Дундаж дээр харагдана

Том ✔ Томоор харагдана

Хэт жижиг, жижиг ✔ x-жижиг, жижиг дээр харагдана

Дунд болон том ✔ Дунд болон том хэмжээтэй харагдана

Нэмэлт жижиг, дунд ✔ x-жижиг, дунд зэрэгт харагдана

Жижиг, том ✔ Том, жижиг дээр харагдана

Хэт жижиг, том ✔ x-жижиг болон том дээр харагдана

Жижиг, дунд ✔ Жижиг, дунд зэрэгт харагдана

Нууцлагдсан...

Энд ногоон тэмдэглэгээ нь тухайн элемент таны одоогийн харах хэсэгт нуугдаж байгааг илтгэнэ.

Хэт жижиг ✔ x-small дээр нуугдсан

Жижиг ✔ Жижиг дээр нуугдсан

Дунд ✔ Дунд зэргийн дээр нуугдсан

Том ✔ Том дээр нуугдсан

Хэт жижиг, жижиг ✔ x-жижиг, жижиг дээр нуугдсан

Дунд болон том ✔ Дунд болон том дээр далдлагдсан

Нэмэлт жижиг, дунд ✔ x-жижиг, дунд зэрэгт далдлагдсан

Жижиг, том ✔ Том, жижиг дээр нуугдана

Хэт жижиг, том ✔ x-жижиг, том дээр далдлагдсан

Жижиг, дунд ✔ Жижиг, дунд хэсэгт далдлагдсан

Bootstrap-ийн CSS нь Less дээр бүтээгдсэн бөгөөд хувьсагч, холимог болон CSS-ийг эмхэтгэх функц зэрэг нэмэлт функц бүхий урьдчилсан процессор юм. Бидний эмхэтгэсэн CSS файлын оронд Less эх файлыг ашиглахыг хүсч буй хүмүүс бидний бүх хүрээнд ашигладаг олон тооны хувьсагч болон холимогуудыг ашиглаж болно.

Сүлжээний хувьсагчид болон холимгууд нь Сүлжээний системийн хэсэгт багтсан болно.

Bootstrap эмхэтгэж байна

Bootstrap-ийг дор хаяж хоёр аргаар ашиглаж болно: эмхэтгэсэн CSS эсвэл эх сурвалж Less файлууд. Less файлуудыг эмхэтгэхийн тулд шаардлагатай командуудыг ажиллуулахын тулд хөгжүүлэлтийн орчноо хэрхэн тохируулах талаар Эхлэх хэсгээс лавлана уу .

Гуравдагч талын эмхэтгэлийн хэрэгслүүд нь Bootstrap-тай ажиллах боломжтой боловч манай үндсэн баг үүнийг дэмждэггүй.

Хувьсагч

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

Өнгө

Саарал болон семантик гэсэн хоёр өнгөний схемийг хялбархан ашиглаарай. Саарал өнгийн өнгөнүүд нь хар өнгөний түгээмэл хэрэглэгддэг сүүдэрт хурдан нэвтрэх боломжийг олгодог бол семантик нь утга учиртай контекст утгуудаар хуваарилагдсан янз бүрийн өнгийг агуулдаг.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Эдгээр өнгөт хувьсагчийн аль нэгийг байгаагаар нь ашиглаарай эсвэл төсөлдөө илүү утга учиртай хувьсагчдад дахин хуваарилаарай.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Шатны шат

Таны сайтын араг ясны үндсэн элементүүдийг хурдан тохируулах цөөн тооны хувьсагчууд.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Холбоосууд

Зөвхөн нэг утгаар холбоосуудаа зөв өнгөөр хялбархан загварчлаарай.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

@link-hover-colorЭнэ нь зөв өнгийг автоматаар үүсгэхийн тулд Less-ийн өөр нэг гайхалтай хэрэгсэл болох функцийг ашигладаг болохыг анхаарна уу . Та darken, lighten, saturate, болон -г ашиглаж болно desaturate.

Типографи

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

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Дүрсүүд

Таны дүрсүүдийн байршил, файлын нэрийг өөрчлөх хоёр хурдан хувьсагч.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Бүрэлдэхүүн хэсгүүд

Bootstrap дээрх бүрэлдэхүүн хэсэг нь нийтлэг утгыг тохируулахын тулд зарим үндсэн хувьсагчдыг ашигладаг. Энд хамгийн түгээмэл хэрэглэгддэг.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Борлуулагчийн холимог

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

Хайрцагны хэмжээ

Бүрэлдэхүүн хэсгүүдийнхээ хайрцагны загварыг нэг холигчоор дахин тохируулна уу. Контекстийн хувьд Mozilla-н энэ хэрэгтэй нийтлэлийг үзнэ үү .

Autoprefixer-г нэвтрүүлсэн v3.2.0-с хойш холигч нь хуучирсан . Буцаж нийцтэй байдлыг хадгалахын тулд Bootstrap нь Bootstrap v4 хүртэл хольцыг дотооддоо үргэлжлүүлэн ашиглах болно.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Бөөрөнхий булан

Өнөөдөр орчин үеийн бүх хөтчүүд угтваргүй border-radiusшинж чанарыг дэмждэг. Иймд холих зүйл байхгүй .border-radius()ч Bootstrap нь объектын тодорхой талын хоёр буланг хурдан дугуйлах товчлолуудыг агуулдаг.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Хайрцаг (дусал) сүүдэр

box-shadowХэрэв таны зорилтот үзэгчид хамгийн сүүлийн үеийн, шилдэг хөтөч, төхөөрөмжийг ашиглаж байгаа бол үл хөдлөх хөрөнгийг дангаар нь ашиглахаа мартуузай . Хэрэв танд хуучин Android (v4-ээс өмнөх) болон iOS төхөөрөмжүүдэд (iOS 5-аас өмнөх) дэмжлэг хэрэгтэй бол хуучирсан холигчийг ашиглан шаардлагатай -webkitугтварыг сонгоорой.

Bootstrap нь стандарт шинж чанарыг дэмждэггүй хуучирсан платформуудыг албан ёсоор дэмждэггүй тул миксин нь v3.1.0-с хойш хуучирсан . Буцаж нийцтэй байдлыг хадгалахын тулд Bootstrap нь Bootstrap v4 хүртэл хольцыг дотооддоо үргэлжлүүлэн ашиглах болно.

Хайрцагныхаа сүүдэрт өнгө хэрэглэхээ мартуузай, rgba()ингэснээр арын дэвсгэртэй аль болох жигд нийлнэ.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Шилжилтүүд

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

Автомат угтвар тохируулагчийг нэвтрүүлснээр v3.2.0 -с хойш холимгууд хуучирсан . Буцаж нийцтэй байдлыг хадгалахын тулд Bootstrap нь Bootstrap v4 хүртэл хольцыг дотооддоо үргэлжлүүлэн ашиглах болно.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Өөрчлөлтүүд

Аливаа объектыг эргүүлэх, масштаблах, орчуулах (зөөх) эсвэл хазайлгах.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Анимацууд

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

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Тунгалаг байдал

Бүх хөтчүүдэд тунгалаг байдлыг тохируулж, filterIE8-д нөөц боломж олгоно.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Орлуулагч текст

Талбар бүрийн доторх маягтын хяналтын контекстийг өгнө.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Багана

Нэг элемент дотор CSS-ээр багана үүсгэх.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Градиент

Дурын хоёр өнгийг дэвсгэр градиент болгон хялбархан эргүүлээрэй. Илүү боловсронгуй болгож, чиглэлээ тохируулах, гурван өнгө ашиглах эсвэл радиаль градиент ашиглана уу. Нэг холигчоор та шаардлагатай бүх угтвар синтаксуудыг авах болно.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Та мөн стандарт хоёр өнгийн шугаман градиентийн өнцгийг тодорхойлж болно:

#gradient > .directional(#333; #000; 45deg);

Хэрэв танд үсчин судалтай градиент хэрэгтэй бол энэ нь бас хялбар юм. Зөвхөн нэг өнгө зааж өгвөл бид тунгалаг цагаан судалтай болно.

#gradient > .striped(#333; 45deg);

Урьдчилан дээшлүүлж, оронд нь гурван өнгө хэрэглээрэй. Эхний өнгө, хоёр дахь өнгө, хоёр дахь өнгөний өнгөний цэг (25% гэх мэт хувийн утга), гурав дахь өнгийг эдгээр хольцоор тохируулна уу.

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Анхаар! Хэрэв та хэзээ нэгэн цагт градиентыг устгах шаардлагатай filterбол өөрийн нэмсэн IE-д хамаарах аливаа зүйлийг устгахаа мартуузай. .reset-filter()Үүний зэрэгцээ холигчийг ашиглан үүнийг хийж болно background-image: none;.

Хэрэглээний хольцууд

Хэрэглээний холимог нь тодорхой зорилго эсвэл даалгаварт хүрэхийн тулд өөр ямар ч хамааралгүй CSS шинж чанаруудыг нэгтгэдэг холимог юм.

Цэвэрлэх

Аливаа элемент дээр нэмэхээ мартаж class="clearfix", оронд нь шаардлагатай бол холигч нэмнэ. Николас Галлахераас гаргасан micro clearfix.clearfix() ашигладаг .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Хэвтээ төвлөрөл

Аливаа элементийг эцэг эх дотор нь хурдан голлуулаарай. Шаардлагатай widthэсвэл max-widthтохируулах.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Хэмжээ тогтоох туслахууд

Объектын хэмжээсийг илүү хялбараар зааж өгнө үү.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Хэмжээг нь өөрчлөх боломжтой текстийн талбарууд

Аливаа текст талбар эсвэл бусад элементийн хэмжээг өөрчлөх сонголтыг хялбархан тохируулаарай. Өгөгдмөл хөтчийн хэвийн үйл ажиллагаанд ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Текстийг багасгаж байна

Текстийг нэг холигчоор эллипс хэлбэрээр хялбархан тайраарай. Элемент нь түвшин blockэсвэл байх шаардлагатай inline-block.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Торлог бүрхэвчийн зургууд

Хоёр зургийн зам болон @1x зургийн хэмжээсийг зааж өгвөл Bootstrap нь @2x медиа асуулга өгөх болно. Хэрэв танд үйлчлэх олон зураг байгаа бол өөрийн торлог бүрхэвчийн дүрсний CSS-г нэг медиа асуулгад гараар бичих талаар бодож үзээрэй.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Bootstrap нь Less дээр суурилагдсан ч албан ёсны Sass порттой . Бид үүнийг тусдаа GitHub репозиторид хадгалж, хөрвүүлэх скриптээр шинэчлэлтүүдийг зохицуулдаг.

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

Sass порт нь тусдаа репотой бөгөөд арай өөр үзэгчдэд үйлчилдэг тул төслийн агуулга нь үндсэн Bootstrap төслөөс эрс ялгаатай. Энэ нь Sass портыг аль болох олон Sass дээр суурилсан системтэй нийцтэй байлгах боломжийг олгодог.

Зам	Тодорхойлолт
`lib/`	Ruby эрдэнийн код (Sass тохиргоо, Rails болон Compass интеграци)
`tasks/`	Хөрвүүлэгч скриптүүд (дээд урсгалыг Less руу Sass руу эргүүлэх)
`test/`	Эмхэтгэлийн тестүүд
`templates/`	Луужингийн багцын манифест
`vendor/assets/`	Sass, JavaScript болон фонтын файлууд
`Rakefile`	Тармуур, хөрвүүлэх зэрэг дотоод ажлууд

Sass портын GitHub репозитор руу орж эдгээр файлыг хэрхэн ажиллаж байгааг харна уу.

Суурилуулалт

Bootstrap for Sass-ийг хэрхэн суулгах, ашиглах талаар мэдээлэл авахыг хүсвэл GitHub репозиторыг уншина уу . Энэ нь хамгийн сүүлийн үеийн эх сурвалж бөгөөд Rails, Compass болон стандарт Sass төслүүдэд ашиглах мэдээллийг агуулдаг.

Sass-д зориулсан ачаалагч

CSS

Тойм

HTML5 баримт бичгийн төрөл

Эхлээд гар утас

Типографи ба холбоосууд

Normalize.css

Контейнер

Сүлжээний систем

Оршил

Хэвлэл мэдээллийн асуулга

Сүлжээний сонголтууд

Жишээ нь: Овоолсон-хэвтээ

Жишээ нь: Шингэний сав

Жишээ нь: Мобайл болон ширээний компьютер

Жишээ нь: гар утас, таблет, ширээний компьютер

Жишээ нь: Багана боох

Хариуцлагатай баганыг шинэчилсэн

Сувагуудыг зайлуулах

Багануудыг нөхөх

Үүрлэх баганууд

Баганын захиалга

Холимог болон хувьсагч бага

Хувьсагч

Холимог

Хэрэглээний жишээ

Типографи

Гарчиг

h1. Ачаалагчийн гарчиг

h2. Ачаалагчийн гарчиг

h3. Ачаалагчийн гарчиг

h4. Ачаалагчийн гарчиг

h5. Ачаалагчийн гарчиг

h6. Ачаалагчийн гарчиг

h1. Bootstrap heading Хоёрдогч текст

h2. Bootstrap heading Хоёрдогч текст

h3. Bootstrap heading Хоёрдогч текст

h4. Bootstrap heading Хоёрдогч текст

h5. Bootstrap heading Хоёрдогч текст

h6. Bootstrap heading Хоёрдогч текст

Биеийн хуулбар

Үндсэн биеийн хуулбар

Бага зардлаар барьсан

Дотор текстийн элементүүд

Тэмдэглэгдсэн текст

Устгасан текст

Зураасан бичвэр

Текст оруулсан

Доор зурсан текст

Жижиг текст

Зоригтой

Налуу

Өөр элементүүд

Тохируулгын ангиуд

Өөрчлөлтийн ангиуд

Товчлол

Үндсэн товчлол

Инициализм

Хаяг

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

Өгөгдмөл блок ишлэл

Blockquote сонголтууд

Эх сурвалжийг нэрлэх

Өөр дэлгэцүүд

Жагсаалтууд

Захиалгагүй

Захиалсан

Загваргүй

Шугаманд

Тодорхойлолт

Хэвтээ тайлбар

Автомат таслах

Код

Шугаманд

Хэрэглэгчийн оруулсан

Үндсэн блок

Хувьсагч

Жишээ гаралт

Хүснэгтүүд

Үндсэн жишээ

Судалчлагдсан эгнээ

Демо `:focus`төлөв

-ийн холбоосын функцийн талаар анхааруулга`<a>`

`.sr-only`Нуугдсан шошготой нэмэлт дүрсүүд