Шатны тавцан · Ачаалагч монгол хэлээр

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 багана ашигладаг бөгөөд хариу үйлдэл үзүүлэх функцийг идэвхжүүлээгүй 940 пикселийн өргөнтэй савыг бий болгодог. Хариуцлагатай 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*

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>

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

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

Шингэн 12

Шингэн 6

<div анги = "мөр-шингэн" > 
  <div class = "span12" > 
    Шингэн 12
    <div анги = "мөр-шингэн" > 
      <div class = "span6" > 
        Шингэн 6
        <div анги = "мөр-шингэн" > 
          <div class = "span6" > Шингэн 6 </div> 
          <div class = "span6" > Шингэн 6 </div> 
        </div>
      </div>
      <div class = "span6" > Шингэн 6 </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 нь таны төслүүдийг өөр төхөөрөмж болон дэлгэцийн нягтралд илүү тохиромжтой болгоход туслахын тулд нэг файл дахь цөөн хэдэн медиа асуулга дэмждэг. Үүнд юу багтсан байна:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шатны шат

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