Шатны тавцан · Twitter Bootstrap монгол хэлээр

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

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

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

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

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

Бие marginдээр арилгана
дээр тохируулна background-color: white;ууbody
@baseFontFamily, @baseFontSize, болон @baseLineHeightшинж чанаруудыг манай хэвлэх суурь болгон ашигла
Глобал холбоосын өнгийг тохируулж @linkColor, холбоосын доогуур зураасыг зөвхөн дээр хэрэглэнэ:hover

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

Normalize дамжуулан дахин тохируулна уу

Bootstrap 2-ын тусламжтайгаар хуучин дахин тохируулах блок нь HTML5 Boilerplate-г идэвхжүүлдэг Николас Галлахерын төсөл болох Normalize.css - ийн давуу тал болсон . Бид reset.less дотор Normalize-ын ихэнх хэсгийг ашигладаг ч Bootstrap-д зориулж зарим элементүүдийг хассан.

Шууд сүлжээний жишээ

Өгөгдмөл Bootstrap сүлжээ систем нь 12 баганыг ашигладаг бөгөөд хариу үйлдэл үзүүлэх функцийг идэвхжүүлээгүй 940px өргөнтэй савыг бий болгодог. Хариуцлагатай CSS файлыг нэмснээр таны харах цонхноос хамааран сүлжээ нь 724px, 1170px өргөнтэй байхаар тохируулагдана. 767 пикселийн харагдацаас доош баганууд нь шингэн болж, босоо байрлалтай байна.

Үндсэн сүлжээ HTML

Энгийн хоёр баганын байршлын хувьд a үүсгэж .row, тохирох тооны .span*багана нэмнэ үү. Энэ нь 12 баганатай сүлжээ тул тус бүр .span*нь тэдгээр 12 баганын хэд хэдэн хэсгийг хамардаг бөгөөд мөр бүрт 12 хүртэл (эсвэл эцэг эх дэх баганын тоог) нэмэх шаардлагатай.

<div анги = "мөр" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Энэ жишээг авч үзвэл, бид 12 багана, бүтэн мөр гаргахад болон байна .span4..span8

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

Ангиудыг ашиглан багануудыг зүүн тийш зөөнө үү .offset*. Анги бүр баганын зүүн захыг бүхэл баганаар нэмэгдүүлнэ. Жишээлбэл, дөрвөн багана дээр .offset4шилжинэ ..span4

3 офсет 2

3 офсет 1

3 офсет 2

6 офсет 3

<div анги = "мөр" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

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

Өөрийн агуулгыг өгөгдмөл сүлжээнд оруулахын тулд одоо байгаа баганад шинэ .rowболон багц багана нэмнэ үү. Оруулсан мөрүүд нь эцэг эхийн баганын тоотой тэнцэх хэмжээний багана агуулсан байх ёстой..span*.span*

Жишээ

Энд хоёр үүрлэсэн .span4баганыг дотор байрлуулсан байна .span8.

Баганын 1-р түвшин

2-р түвшин

<div анги = "мөр" > 
  <div class = "span9" > 
    1-р түвшний багана
    <div анги = "мөр" > 
      <div class = "span6" > 2-р түвшин </div> 
      <div class = "span3" > Түвшин 2 </div> 
    </div>
  </div>
</div>

Амьд шингэний сүлжээний жишээ

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

Үндсэн шингэн сүлжээ HTML

- гэж өөрчилснөөр дурын мөрийг "шингэн" .rowболгоно .row-fluid. Баганын ангиуд яг ижил хэвээр байгаа тул тогтмол болон шингэн сүлжээнүүдийн хооронд шилжихэд хялбар болгодог.

<div анги = "мөр-шингэн" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Шингэнийг нөхөх

Тогтмол сүлжээний системийг нөхөхтэй ижил аргаар ажиллана: .offset*олон баганаар нөхөхийн тулд дурын баганад нэмнэ үү.

4 офсет 4

3 офсет 3

6 офсет 6

<div анги = "мөр-шингэн" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Шингэний үүрлэх

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

Шингэн 12

Шингэн 6

<div анги = "мөр-шингэн" > 
  <div class = "span12" > 
    Баганын 1-р түвшин
    <div анги = "мөр-шингэн" > 
      <div class = "span6" > 2-р түвшин </div> 
      <div class = "span6" > 2-р түвшин </div> 
    </div>
  </div>
</div>

Тогтмол зохион байгуулалт

<div class="container">Зөвхөн шаардлагатай нийтлэг тогтмол өргөнтэй (мөн сонголтоор хариу үйлдэл үзүүлэх) бүдүүвчийг хангана.

<бие>
  <div class = "контейнер" > 
    ...
  </div>
</body>

Шингэний зохион байгуулалт

<div class="container-fluid">Аппликешн болон баримт бичигт тохиромжтой , хоёр багана бүхий шингэн хуудас үүсгэ .

<div class = "контейнер-шингэн" > 
  <div анги = "мөр-шингэн" > 
    <div class = "span2" > 
      <!--Хажуугийн контент-->
    </div>
    <div class = "span10" > 
      <!--Биеийн агуулга-->
    </div>
  </div>
</div>

Хариуцлагатай функцуудыг идэвхжүүлж байна

Баримт бичигт тохирох мета шошго болон нэмэлт загварын хүснэгтийг оруулан төсөлдөө хариу үйлдэл үзүүлэх CSS-г асаана уу <head>. Хэрэв та Bootstrap-ийг Customize хуудаснаас эмхэтгэсэн бол зөвхөн мета шошгыг оруулах хэрэгтэй.

<meta name = "viewport" content = "өргөн=төхөөрөмжийн өргөн, анхны масштаб=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "загварын хуудас" >

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

Хариуцлагатай Bootstrap-ийн тухай

Медиа асуулга нь харьцаа, өргөн, дэлгэцийн төрөл гэх мэт хэд хэдэн нөхцлөөс хамааран өөрчлөн CSS-г ашиглах боломжийг олгодог боловч ихэвчлэн min-widthболон эргэн тойронд анхаарлаа хандуулдаг max-width.

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

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

Дэмжигдсэн төхөөрөмжүүд

Bootstrap нь таны төслүүдийг өөр төхөөрөмж болон дэлгэцийн нягтралд илүү тохиромжтой болгоход туслахын тулд нэг файл дахь цөөн хэдэн медиа асуулга дэмждэг. Үүнд юу багтсан байна:

Шошго	Байршлын өргөн	Баганын өргөн	Сувагны өргөн
Утаснууд	480px ба түүнээс доош	Шингэн багана, тогтмол өргөнгүй
Утаснаас таблет хүртэл	767px ба түүнээс доош	Шингэн багана, тогтмол өргөнгүй
Хөрөг зургийн таблетууд	768px ба түүнээс дээш	42px	20px
Өгөгдмөл	980px ба түүнээс дээш	60px	20px
Том дэлгэц	1200px ба түүнээс дээш	70px	30px

/* Ландшафтын утас болон доош */
@media ( хамгийн их өргөн : 480px ) { ... }     
 
/* ландшафтын утаснаас хөрөг таблет хүртэл */
@media ( хамгийн их өргөн : 767px ) { ... }     
 
/* Хөрөг таблетыг ландшафтын болон ширээний компьютерт */
@media ( мин - өргөн : 768px ) ба ( хамгийн их өргөн : 979px ) { ... }        
 
/* Том ширээний компьютер */
@media ( мин - өргөн : 1200px ) { ... }

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

Гар утсанд илүү хурдан ашиглахын тулд контентыг төхөөрөмжөөр харуулах, нуух зорилгоор эдгээр хэрэглээний ангиудыг ашиглаарай. Доорх нь боломжтой ангиудын хүснэгт ба тэдгээрийн өгөгдсөн медиа асуулгын байршилд үзүүлэх нөлөөг (төхөөрөмжөөр тэмдэглэсэн) харуулав. Тэдгээрээс олж болно responsive.less.

Анги	Утаснууд767px ба түүнээс доош	Таблетууд979 пикселээс 768 пиксел хүртэл	Ширээний компьютеруудӨгөгдмөл
`.visible-phone`	Харагдах	Нуугдсан	Нуугдсан
`.visible-tablet`	Нуугдсан	Харагдах	Нуугдсан
`.visible-desktop`	Нуугдсан	Нуугдсан	Харагдах
`.hidden-phone`	Нуугдсан	Харагдах	Харагдах
`.hidden-tablet`	Харагдах	Нуугдсан	Харагдах
`.hidden-desktop`	Харагдах	Харагдах	Нуугдсан

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

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

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

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

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

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

Утас✔ Утас
Таблет✔ Таблет
Ширээний компьютер✔ Ширээний компьютер

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

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

Утас✔ Утас
Таблет✔ Таблет
Ширээний компьютер✔ Ширээний компьютер

Шатны шат

Глобал тохиргоо