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

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

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

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

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

Жишээ

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

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

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

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

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

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

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

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

Нэг <div class="container">.

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

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

<div class="container-fluid">хуудасны уян хатан бүтэц, хамгийн бага ба хамгийн их өргөн, зүүн талын хажуугийн самбарыг өгдөг. Энэ нь програмууд болон баримт бичигт тохиромжтой.

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

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

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

Тэд юу хийх

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

• Манай сүлжээн дэх баганын өргөнийг өөрчил
• Stack elements instead of float wherever necessary
• Resize headings and text to be more appropriate for devices

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

1. Use the compiled responsive version, bootstrap-responsive.css
2. Add @import "responsive.less" and recompile Bootstrap
3. Modify and recompile responsive.less as a separate

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

  // Landscape phones and down
  @media (max-width: 480px) { ... }
 
  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }
 
  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 940px) { ... }
 
  // Large desktop
  @media (min-width: 1200px) { .. }