Ачаалагч

Шатны шат

Bootstrap нь хариу үйлдэл үзүүлэх чадвартай 12 баганатай сүлжээ, байршил, бүрэлдэхүүн хэсгүүд дээр бүтээгдсэн.

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

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

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

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </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 пикселийн харагдацаас доош баганууд нь шингэн болж, босоо байрлалтай байна.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

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

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

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

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

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

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

4
3 офсет 2
3 офсет 1
3 офсет 2
6 офсет 3 
  1. <div анги = "мөр" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

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

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

1-р түвшний багана
2-р түвшин
2-р түвшин 
  1. <div анги = "мөр" > 
  2.   <div class = "span9" > 
  3.     1-р түвшний багана
  4.     <div анги = "мөр" > 
  5.       <div class = "span6" > 2-р түвшин </div> 
  6.       <div class = "span3" > Түвшин 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Шингэний сүлжээний систем

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

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

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

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

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

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

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

4
4 офсет 4
3 офсет 3
3 офсет 3
6 офсет 6 
  1. <div анги = "мөр-шингэн" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

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

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

Шингэн 12
Шингэн 6
Шингэн 6
Шингэн 6
Шингэн 6 
  1. <div анги = "мөр-шингэн" > 
  2.   <div class = "span12" > 
  3.     Шингэн 12
  4.     <div анги = "мөр-шингэн" > 
  5.       <div class = "span6" > 
  6.         Шингэн 6
  7.         <div анги = "мөр-шингэн" > 
  8.           <div class = "span6" > Шингэн 6 </div> 
  9.           <div class = "span6" > Шингэн 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Шингэн 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Байршил

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

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

  1. <бие>
  2.   <div class = "контейнер" > 
  3.     ...
  4.   </div>
  5. </body>

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

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

  1. <div class = "контейнер-шингэн" > 
  2.   <div анги = "мөр-шингэн" > 
  3.     <div class = "span2" > 
  4.       <!--Хажуугийн контент-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Биеийн агуулга-->
  8.     </div>
  9.   </div>
  10. </div>

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

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

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

  1. <meta name = "viewport" content = "өргөн=төхөөрөмжийн өргөн, анхны масштаб=1.0" >  
  2. <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 ба түүнээс доош Шингэн багана, тогтмол өргөнгүй 
  1. /* Том ширээний компьютер */
  2. @media ( мин - өргөн : 1200px ) { ... }     
  3.  
  4. /* Хөрөг таблетыг ландшафтын болон ширээний компьютерт */
  5. @media ( мин - өргөн : 768px ) ба ( хамгийн их өргөн : 979px ) { ... }        
  6.  
  7. /* ландшафтын утаснаас хөрөг таблет хүртэл */
  8. @media ( хамгийн их өргөн : 767px ) { ... }     
  9.  
  10. /* Ландшафтын утас болон доош */
  11. @media ( хамгийн их өргөн : 480px ) { ... }

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

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

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

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

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

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

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

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

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

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

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

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

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