ნაგულისხმევი ბადის სისტემა, რომელიც მოწოდებულია Bootstrap-ის ნაწილად, არის 940 პიქსელი სიგანის, 12 სვეტიანი ბადე .

მას ასევე აქვს ოთხი საპასუხო ვარიაცია სხვადასხვა მოწყობილობებისა და რეზოლუციებისთვის: ტელეფონი, ტაბლეტის პორტრეტი, მაგიდის ლანდშაფტი და პატარა სამუშაო მაგიდა და დიდი ფართოეკრანიანი სამუშაო მაგიდა.

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

როგორც აქ ნაჩვენებია, ძირითადი განლაგება შეიძლება შეიქმნას ორი "სვეტით", თითოეული მოიცავს 12 ძირითადი სვეტის რაოდენობას, რომელიც ჩვენ განვსაზღვრეთ, როგორც ჩვენი ბადის სისტემის ნაწილი.

Bootstrap-ში სტატიკური (არა-თხევადი) ბადის სისტემით, ბუდე მარტივია. თქვენი შინაარსის დასაბუთებლად, უბრალოდ დაამატეთ ახალი .rowდა .span*სვეტების ნაკრები არსებულ .span*სვეტში.

მაგალითი

<div class = "row" > 
  <div class = "span12" > 
    სვეტის 1 დონე
    <div class = "row" > 
      <div class = "span6" > დონე 2 </div> 
      <div class = "span6" > დონე 2 </div> 
    </div>
  </div>
</div>

ცვლადები LESS-ში

Bootstrap-ში ჩაშენებული რამდენიმე ცვლადია ნაგულისხმევი 940px ბადის სისტემის მორგებისთვის, ზემოთ დოკუმენტირებული. ბადის ყველა ცვლადი ინახება ცვლადებში.less.

როგორ მორგება

ბადის შეცვლა ნიშნავს სამი @grid*ცვლადის შეცვლას და Bootstrap-ის ხელახლა კომპილაციას. შეცვალეთ ბადის ცვლადები variables.less-ში და გამოიყენეთ ხელახალი კომპილაციისთვის დოკუმენტირებული ოთხი ხერხიდან ერთ-ერთი . თუ თქვენ ამატებთ მეტ სვეტს, დარწმუნდით, რომ დაამატეთ CSS მათთვის grid.less-ში.

პასუხისმგებლობის შენარჩუნება

ბადის პერსონალიზაცია მუშაობს მხოლოდ ნაგულისხმევ დონეზე, 940px ბადეზე. Bootstrap-ის საპასუხო ასპექტების შესანარჩუნებლად, თქვენ ასევე მოგიწევთ ბადეების მორგება responsive.less-ში.

ფიქსირებული განლაგება

ნაგულისხმევი და მარტივი 940 პიქსელი სიგანის, ორიენტირებული განლაგება თითქმის ნებისმიერი ვებსაიტის ან გვერდისთვის, რომელიც მოწოდებულია ერთი <div class="container">.

<სხეული>
  <div class = "კონტეინერი" > 
    ...
  </div>
</body>

სითხის განლაგება

<div class="container-fluid">იძლევა გვერდის მოქნილ სტრუქტურას, მინ- და მაქსიმალურ სიგანეებს და მარცხენა მხარეს. ეს შესანიშნავია აპებისთვის და დოკუმენტებისთვის.

<div class = "კონტეინერის სითხე" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--გვერდითი ზოლის შინაარსი-->
    </div>
    <div class = "span10" > 
      <!--სხეულის შინაარსი-->
    </div>
  </div>
</div>

მხარდაჭერილი მოწყობილობები

Bootstrap მხარს უჭერს რამდენიმე მედია მოთხოვნას, რათა დაეხმაროს თქვენი პროექტების უფრო შესაბამისობას სხვადასხვა მოწყობილობებზე და ეკრანის რეზოლუციებზე. აი რა შედის:

რასაც აკეთებენ

მედიის მოთხოვნები საშუალებას იძლევა მორგებული CSS-ის შექმნა, რომელიც დაფუძნებულია უამრავ პირობებზე - თანაფარდობა, სიგანე, დისპლეის ტიპი და ა.შ. - მაგრამ ჩვეულებრივ ფოკუსირებულია გარშემო min-widthდა max-width.

• შეცვალეთ სვეტის სიგანე ჩვენს ბადეში
• დაწყობა ელემენტების ნაცვლად float სადაც საჭიროა
• შეცვალეთ სათაურები და ტექსტი, რათა უფრო შესაფერისი იყოს მოწყობილობებისთვის

Bootstrap ავტომატურად არ მოიცავს ამ მედია მოთხოვნებს, მაგრამ მათი გაგება და დამატება ძალიან მარტივია და მოითხოვს მინიმალურ დაყენებას. თქვენ გაქვთ რამდენიმე ვარიანტი Bootstrap-ის საპასუხო ფუნქციების ჩასართავად:

1. გამოიყენეთ შედგენილი საპასუხო ვერსია, bootstrap-responsive.css
2. დაამატეთ @import "responsive.less" და ხელახლა შეადგინეთ Bootstrap
3. შეცვალეთ და ხელახლა შეადგინეთ responsive.less როგორც ცალკე

რატომ არ უნდა ჩართოთ იგი? სიმართლე გითხრათ, ყველაფერი არ უნდა იყოს პასუხისმგებელი. იმის ნაცვლად, რომ წაახალისოთ დეველოპერები, ამოიღონ ეს ფუნქცია, ჩვენ ვთვლით, რომ უმჯობესია ჩართოთ იგი.

  // ლანდშაფტის ტელეფონები და ქვემოთ
  @media ( მაქს . სიგანე : 480 პიქსელი ) { ... }     
 
  // ლანდშაფტის ტელეფონი პორტრეტის ტაბლეტისთვის
  @media ( მაქს . სიგანე : 768 პიქსელი ) { ... }     
 
  // ტაბლეტის პორტრეტი ლანდშაფტზე და დესკტოპზე
  @media ( მინ . სიგანე : 768 პიქსელი ) და ( მაქს . სიგანე : 940 პიქსელი ) { ... }        
 
  // დიდი სამუშაო მაგიდა
  @media ( მინ . სიგანე : 1200 პიქსელი ) { .. }