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

Олон арван дахин ашиглах боломжтой бүрэлдэхүүн хэсгүүдийг Bootstrap-д суулгасан бөгөөд ингэснээр навигаци, сэрэмжлүүлэг, попов болон бусад олон зүйлийг хангана.

Товчлуурын бүлгүүд

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

Шилдэг туршлагууд

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

  • Нэг товчлуурын бүлэгт ижил элементийг үргэлж ашиглаарай, <a>эсвэл <button>.
  • Нэг товчлуурын бүлэгт өөр өөр өнгийн товчлууруудыг хольж болохгүй.
  • Текстээс гадна эсвэл оронд нь дүрсийг ашиглах боловч тохиромжтой бол alt болон гарчгийн текстийг оруулахаа мартуузай.

Унждаг товчлууртай холбоотой товчлуурын бүлгүүдийг (доороос харна уу) тусад нь дуудах ёстой бөгөөд зориулалтын зан төлөвийг харуулахын тулд унадаг тэмдэглэгээг үргэлж оруулах ёстой.

Өгөгдмөл жишээ

HTML нь зангуу шошготой товчлуураар бүтээгдсэн стандарт товчлуурын бүлгийг хэрхэн хардаг вэ:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Хэрэгслийн самбарын жишээ

Илүү төвөгтэй бүрэлдэхүүн хэсгүүдийн хувьд багцуудыг <div class="btn-group">a болгон нэгтгэнэ .<div class="btn-toolbar">

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Checkbox болон радио амт

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

JavaScript авах »

Товчлуурын бүлгүүдийн уналт

Анхаараарай! Унтраах товчлууртай товчлууруудыг зөв дүрслэхийн тулд тус тусад нь .btn-groupдотор нь ороосон байх ёстой .btn-toolbar.

Унтраах товчлуурууд

Тойм ба жишээнүүд

Дурын товчлуурыг ашиглан доош унадаг цэсийг a дотор байрлуулж .btn-group, зохих цэсийн тэмдэглэгээг хийнэ үү.

Тэмдэглэгээний жишээ

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

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Үйлдэл
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- унадаг цэсний холбоосууд -->
  8. </ul>
  9. </div>

Бүх хэмжээтэй товчлууруудтай ажилладаг

Унтраах товчлуурууд ямар ч хэмжээтэй ажилладаг. таны товчлуурын хэмжээ .btn-large, .btn-small, эсвэл .btn-mini.

JavaScript шаарддаг

Унтраах товчлуурууд нь ажиллахын тулд Bootstrap унадаг залгаасыг шаарддаг .

Зарим тохиолдолд гар утас гэх мэт унадаг цэсүүд харах цонхны гадна талд гарч ирдэг. Та гар аргаар эсвэл захиалгат JavaScript ашиглан зэрэгцүүлэлтийг шийдэх хэрэгтэй.


Унтраах товчлууруудыг хуваах

Тойм ба жишээнүүд

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

Хэмжээ

Нэмэлт товчлуурын ангилал .btn-mini, .btn-small, эсвэл .btn-largeхэмжээг тохируулахын тулд ашиглана уу.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- унадаг цэсний холбоосууд -->
  5. </ul>
  6. </div>

Тэмдэглэгээний жишээ

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > Үйлдэл </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- унадаг цэсний холбоосууд -->
  8. </ul>
  9. </div>

Унтраах цэсүүд

Унждаг цэсийг мөн -ийн шууд эцэг эхэд нэг анги нэмснээр доороос дээш сольж болно .dropdown-menu. Энэ нь .caretцэсийн чиглэлийг эргүүлж, дээрээс доош биш доороос дээш шилжихийн тулд цэсийг өөрчилнө.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- унадаг цэсний холбоосууд -->
  8. </ul>
  9. </div>

Олон тооны хуудасны хуудаслалт

Хэзээ хэрэглэх вэ

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

Статистик хуудасны холбоосууд

Холбоосыг тохируулах боломжтой бөгөөд хэд хэдэн нөхцөлд тохирох ангиллын дагуу ажилладаг. .disabledтовших боломжгүй холбоос болон.active одоогийн хуудасны хувьд.

Уян хатан тохируулга

Хуудасны холбоосуудын зэрэгцүүлэлтийг өөрчлөхийн тулд хоёр нэмэлт ангийн аль нэгийг нэмнэ үү: .pagination-centeredболон .pagination-right.

Жишээ

Үндсэн хуудасны бүрэлдэхүүн хэсэг нь уян хатан бөгөөд хэд хэдэн хувилбараар ажилладаг.

Тэмдэглэгээ

Боодолтой <div>, хуудаснууд нь зүгээр л нэг <ul>.

  1. <div class = "хуудас" >
  2. <ul>
  3. <li><a href = "#" > Өмнөх </a></li>
  4. <li анги = "идэвхтэй" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Дараагийн </a></li>
  11. </ul>
  12. </div>

Пэйжер Өмнөх болон дараагийн холбоосыг хурдан авах боломжтой

Пейжерийн тухай

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

Нэмэлт идэвхгүй байдал

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

Өгөгдмөл жишээ

Анхдагч байдлаар, пейжер нь холбоосыг төвлөрүүлдэг.

  1. <ul class = "пейжер" >
  2. <li>
  3. <a href = "#" > Өмнөх </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Дараагийн </a>
  7. </li>
  8. </ul>

Зэрэгцүүлсэн холбоосууд

Эсвэл та холбоос бүрийг хажуу тал руу нь зэрэгцүүлж болно:

  1. <ul class = "пейжер" >
  2. <li анги = "өмнөх" >
  3. <a href = "#" > Хуучин </a>
  4. </li>
  5. <li анги = "дараагийн" >
  6. <a href = "#" > Шинэ → </a>
  7. </li>
  8. </ul>
Шошго Тэмдэглэгээ
Өгөгдмөл <span class="label">Default</span>
Амжилт <span class="label label-success">Success</span>
Анхааруулга <span class="label label-warning">Warning</span>
Чухал <span class="label label-important">Important</span>
Мэдээлэл <span class="label label-info">Info</span>
Урвуу <span class="label label-inverse">Inverse</span>

тухай

Тэмдгүүд нь ямар нэгэн үзүүлэлт эсвэл тоолоход зориулагдсан жижиг, энгийн бүрэлдэхүүн хэсгүүд юм. Тэдгээрийг ихэвчлэн Mail.app гэх мэт имэйл үйлчлүүлэгчид эсвэл түлхэх мэдэгдлийн мобайл апп-уудаас олдог.

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

Нэр Жишээ Тэмдэглэгээ
Өгөгдмөл 1 <span class="badge">1</span>
Амжилт 2 <span class="badge badge-success">2</span>
Анхааруулга 4 <span class="badge badge-warning">4</span>
Чухал 6 <span class="badge badge-important">6</span>
Мэдээлэл 8 <span class="badge badge-info">8</span>
Урвуу 10 <span class="badge badge-inverse">10</span>

Баатар нэгж

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

Тэмдэглэгээ

Өөрийн агуулгыг дараах байдлаар боож өгнө divүү:

  1. <div анги = "баатар-нэгж" >
  2. <h1> Гарчиг </h1>
  3. <p> Тайлбар </p>
  4. <p>
  5. <a анги = "btn btn-primary btn-large" >
  6. Илүү их судла
  7. </a>
  8. </p>
  9. </div>

Сайн уу, дэлхий!

Энэ бол онцлох контент эсвэл мэдээлэлд илүү анхаарал хандуулахад зориулагдсан энгийн баатрын нэгж, энгийн jumbotron загварын бүрэлдэхүүн хэсэг юм.

Илүү их судла

Хуудасны толгой хэсэг

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

  1. <div class = "page-header" >
  2. <h1> Жишээ хуудасны толгой хэсэг </h1>
  3. </div>

Өгөгдмөл өнгөц зураг

Анхдагч байдлаар, Bootstrap-ийн өнгөц зургууд нь хамгийн бага шаардлагатай тэмдэглэгээ бүхий холбосон зургуудыг харуулах зорилготой юм.

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

Бага зэрэг нэмэлт тэмдэглэгээ хийснээр гарчиг, догол мөр, товчлуур гэх мэт ямар ч төрлийн HTML контентыг өнгөц зурагт оруулах боломжтой.

  • Өнгөц зургийн шошго

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Үйлдэл Үйлдэл

  • Өнгөц зургийн шошго

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Үйлдэл Үйлдэл

Яагаад өнгөц зургийг ашиглах ёстой гэж

Өнгөц зураг (өмнө .media-gridнь v1.4 хүртэл) нь зураг эсвэл видеоны сүлжээ, зургийн хайлтын үр дүн, жижиглэнгийн бүтээгдэхүүн, багц болон бусад олон зүйлд тохиромжтой. Эдгээр нь холбоос эсвэл статик контент байж болно.

Энгийн, уян хатан тэмдэглэгээ

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

Сүлжээ баганын хэмжээг ашигладаг

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

Тэмдэглэгээ

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

  1. <ul class = "thumbnails" >
  2. <li анги = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Өнгөц зураг дээрх тусгай HTML агуулгын хувьд тэмдэглэгээ бага зэрэг өөрчлөгддөг. Блокны түвшний агуулгыг хаана ч зөвшөөрөхийн тулд бид дараах байдлаар <a>солино <div>:

  1. <ul class = "thumbnails" >
  2. <li анги = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Өнгөц зургийн шошго </h5>
  6. <p> Өнгөц зургийн тайлбар энд байна... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Илүү олон жишээ

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

Хөнгөн жингийн өгөгдмөл

Дахин бичсэн үндсэн анги

Bootstrap 2-ын тусламжтайгаар бид үндсэн ангиллыг хялбаршуулсан: .alertоронд нь .alert-message. Бид мөн шаардлагатай хамгийн бага тэмдэглэгээг багасгасан— <p>өгөгдмөлөөр үгүй ​​шаардлагагүй, зөвхөн гаднах <div>.

Ганц анхааруулах мессеж

Код багатай, илүү бат бөх бүрэлдэхүүн хэсэг болохын тулд бид блокийн дохиолол, илүү дүүргэлттэй ирдэг мессеж, ихэвчлэн илүү олон текстийг ялгах харагдацыг хассан. Анги нь мөн өөрчлөгдсөн .alert-block.


Javascript-тэй маш сайн ажилладаг

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

Plugin авах »

Жишээ сэрэмжлүүлэг

Мессеж болон нэмэлт хаах дүрсийг энгийн ангитай div-д боож өгнө үү.

Анхааруулга! Өөрийгөө шалгаарай, чи тийм ч сайн харагдахгүй байна.
  1. <div анги = "анхаарал" >
  2. <button class = "close" data-dississ = "anert" > × </button>
  3. <strong> Анхааруулга! </strong> Өөрийгөө шалгаарай, чи тийм ч сайн харагдахгүй байна.
  4. </div>

Анхаараарай! iOS төхөөрөмжүүд href="#"нь сэрэмжлүүлгийг хаахыг шаарддаг. Үүнийг болон зангуу хаах дүрсний өгөгдлийн атрибутыг оруулахаа мартуузай. Эсвэл та <button>бидний баримт бичигт ашиглахаар сонгосон өгөгдлийн шинж чанартай элементийг ашиглаж болно. Хэрэглэхдээ <button>та оруулах ёстойtype="button" , эс тэгвээс таны маягтыг илгээхгүй байж болно.

.alert-blockСтандарт сэрэмжлүүлгийн мессежийг нэмэлт дүүргэлт, текстийн удирдлага, .alert-headingтохирох гарчигт зориулсан хоёр нэмэлт ангиар хялбархан сунгана уу .

Анхааруулга!

Өөрийгөө шалгаарай, чи тийм ч сайн харагдахгүй байна. Nulla vitae elit libero, pharetra augue. Тэнд commodo cursus magna, vel sclerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dississ = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Анхааруулга! </h4>
  4. Өөрийгөө шалгасан нь дээр, чи...
  5. </div>

Контекст хувилбарууд Анхааруулгын утгыг өөрчлөхийн тулд нэмэлт анги нэмнэ

Алдаа эсвэл аюул

Өө гэнэт! Хэд хэдэн зүйлийг өөрчлөөд дахин оруулахыг оролдоно уу.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Амжилт

Сайн хийлээ! Та энэхүү чухал сэрэмжлүүлэг мессежийг амжилттай уншсан.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Мэдээлэл

Анхаараарай! Энэ сэрэмжлүүлэгт таны анхаарал хэрэгтэй байгаа ч энэ нь тийм ч чухал биш юм.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Жишээ ба тэмдэглэгээ

Үндсэн

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

  1. <div class = "progress" >
  2. <div анги = "бар"
  3. style = " өргөн : 60 %; " ></div>
  4. </div>

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

Судалчлагдсан эффект үүсгэхийн тулд градиент ашигладаг (IE байхгүй).

  1. <div class = "progress progress-stried" >
  2. <div анги = "бар"
  3. style = " өргөн : 20 %; " ></div>
  4. </div>

Хөдөлгөөнт

Судалчлагдсан жишээг авч, хөдөлгөөнтэй болгодог (IE байхгүй).

  1. <div class = "хөгжил дэвшил-судалтай
  2. идэвхтэй" >
  3. <div анги = "бар"
  4. style = " өргөн : 40 %; " ></div>
  5. </div>

Сонголтууд болон хөтчийн дэмжлэг

Нэмэлт өнгө

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

Судалчлагдсан баар

Хатуу өнгөнүүдтэй адил бид янз бүрийн судалтай дэвшилтэт баартай.

Зан төлөв

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

Хэрэв та .activeангийг ашиглавал .progress-stripedахиц дэвшлийн талбарууд зүүнээс баруун тийш зураасыг хөдөлгөөнтэй болгоно.

Хөтөчийн дэмжлэг

Явцын мөрүүд нь бүх үр дүнд хүрэхийн тулд CSS3 градиент, шилжилт, хөдөлгөөнт дүрсийг ашигладаг. Эдгээр функцуудыг IE7-9 болон Firefox-ын хуучин хувилбаруудад дэмждэггүй.

Opera болон IE нь одоогоор хөдөлгөөнт дүрсийг дэмждэггүй.

Худаг

Худагийг элемент дээр энгийн эффект болгон ашиглан оруулгад оруулаарай.

Хараач, би худагт байна!
  1. <div class = "худаг" >
  2. ...
  3. </div>

Хаах дүрс

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

  1. <button class = "хаах" > ​​× </button>

Хэрэв та зангуу ашиглахыг илүүд үзвэл товшилтын үйл явдлуудын хувьд iOS төхөөрөмжид href="#" шаардлагатай.

  1. <a class = "close" href = "#" > × </a>