Ачаалагч

Шатны шат

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

Өгөгдмөл сүлжээний систем нь мэдрэмжтэй мушгиа бүхий 12 багана

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

Bootstrap-ийн нэг хэсэг болгон өгсөн өгөгдмөл сүлжээний систем нь 940px өргөн, 12 баганатай сүлжээ юм.

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

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

Энд үзүүлсэнчлэн үндсэн бүдүүвчийг хоёр "багана"-аар үүсгэж болох бөгөөд тэдгээр нь тус бүр нь бидний сүлжээний системийн нэг хэсэг гэж тодорхойлсон 12 суурийн баганын тоог хамардаг.


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

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

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

Bootstrap дахь статик (шингэн бус) сүлжээний системийн тусламжтайгаар үүрлэх нь хялбар байдаг. Агуулгаа үүрлэхийн тулд одоо байгаа баганад шинээр .rowболон багц багана нэмнэ үү..span*.span*

Жишээ

Оруулсан мөрүүд нь түүний эцэг эхийн баганын тоотой тэнцэх хэмжээний багана агуулсан байх ёстой. Жишээлбэл, хоёр үүрлэсэн .span3баганыг дотор нь байрлуулах ёстой .span6.

Баганын 1-р түвшин
2-р түвшин
2-р түвшин 
  1. <div анги = "мөр" > 
  2.   <div class = "span12" > 
  3.     Баганын 1-р түвшин
  4.     <div анги = "мөр" > 
  5.       <div class = "span6" > 2-р түвшин </div> 
  6.       <div class = "span6" > 2-р түвшин </div> 
  7.     </div>
  8.   </div>
  9. </div>

Шингэн сүлжээний систем 12 хариу үйлдэл үзүүлэх, хувь дээр суурилсан багана

Шингэн багана

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

Пиксел биш хувь

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

Шингэний эгнээ

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

Тэмдэглэгээ

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

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

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

Шингэн 12
Шингэн 6
Шингэн 6 
  1. <div анги = "мөр-шингэн" > 
  2.   <div class = "span12" > 
  3.     Баганын 1-р түвшин
  4.     <div анги = "мөр-шингэн" > 
  5.       <div class = "span6" > 2-р түвшин </div> 
  6.       <div class = "span6" > 2-р түвшин </div> 
  7.     </div>
  8.   </div>
  9. </div>

Сүлжээний тохиргоо

Хувьсагч Өгөгдмөл утга Тодорхойлолт
@gridColumns 12 Баганын тоо
@gridColumnWidth 60px Багана бүрийн өргөн
@gridGutterWidth 20px Баганын хоорондох сөрөг зай
@siteWidth Бүх багана ба сувгийн тооцоолсон нийлбэр .container-fixed()Холигчны өргөнийг тохируулахын тулд багана болон сувгийн тоог тоолно

LESS дэх хувьсагчид

Bootstrap-д суурилуулсан нь дээр бичигдсэн өгөгдмөл 940px сүлжээний системийг тохируулах цөөн тооны хувьсагч юм. Сүлжээний бүх хувьсагч хувьсагчдад хадгалагдана. бага.

Хэрхэн тохируулах вэ

Сүлжээг өөрчлөх нь гурван @grid*хувьсагчийг өөрчилж, Bootstrap-ийг дахин хөрвүүлнэ гэсэн үг. variables.less доторх сүлжээний хувьсагчдыг сольж, дахин хөрвүүлэхийн тулд баримтжуулсан дөрвөн аргын аль нэгийг ашиглана уу . Хэрэв та илүү олон багана нэмж байгаа бол grid.less доторх CSS-г нэмэхээ мартуузай.

Хариуцлагатай байх

Сүлжээний тохиргоо нь зөвхөн өгөгдмөл түвшинд буюу 940px сүлжээнд ажилладаг. Bootstrap-ийн хариу үйлдэл үзүүлэхийн тулд та мөн responsive.less дээр сүлжээг тохируулах хэрэгтэй болно.

Layouts Вэб хуудас үүсгэх үндсэн загварууд

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

Нэг <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>

Хариуцлагатай дизайн Төрөл бүрийн төхөөрөмж, нягтралд зориулсан медиа асуулга

Хариуцлагатай төхөөрөмжүүд

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

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

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

Мета шошго шаардлагатай

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

  1. <meta name = "viewport" content = "өргөн=төхөөрөмжийн өргөн, анхны масштаб=1.0" >

Тэд юу хийх

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

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

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

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

  1. Эмхэтгэсэн responsive хувилбар болох bootstrap-responsive.css-г ашиглана уу
  2. @import "responsive.less"-г нэмээд Bootstrap-г дахин эмхэтгэнэ
  3. Responsive.less-г тусдаа файл болгон өөрчилж, дахин эмхэтгэ

Яагаад зүгээр оруулж болохгүй гэж? Үнэнийг хэлэхэд бүх зүйл хариу үйлдэл үзүүлэх шаардлагагүй. Хөгжүүлэгчдийг энэ функцийг устгахыг уриалахын оронд бид үүнийг идэвхжүүлэх нь дээр гэж бодож байна.

  1.   // Ландшафтын утаснууд ба доош
  2.   @media ( хамгийн их өргөн : 480px ) { ... }     
  3.  
  4.   // Хөрөг таблет руу ландшафтын утас
  5.   @media ( хамгийн их өргөн : 768px ) { ... }     
  6.  
  7.   // Хөрөг таблетыг ландшафт болон ширээний компьютерт буулгана
  8.   @media ( мин - өргөн : 768px ) ба ( хамгийн их өргөн : 980px ) { ... }        
  9.  
  10.   // Том ширээний компьютер
  11.   @media ( мин - өргөн : 1200px ) { .. }