Bootstrap აგებულია საპასუხო 12-სვეტიან ბადეზე. ჩვენ ასევე ჩავრთეთ ფიქსირებული და სითხის სიგანის განლაგება ამ სისტემის საფუძველზე.
ნაგულისხმევი ბადის სისტემა, რომელიც მოწოდებულია Bootstrap-ის ნაწილად, არის 940 პიქსელი სიგანის, 12 სვეტიანი ბადე .
მას ასევე აქვს ოთხი საპასუხო ვარიაცია სხვადასხვა მოწყობილობებისა და რეზოლუციებისთვის: ტელეფონი, ტაბლეტის პორტრეტი, მაგიდის ლანდშაფტი და პატარა სამუშაო მაგიდა და დიდი ფართოეკრანიანი სამუშაო მაგიდა.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
როგორც აქ ნაჩვენებია, ძირითადი განლაგება შეიძლება შეიქმნას ორი "სვეტით", თითოეული მოიცავს 12 ძირითადი სვეტის რაოდენობას, რომელიც ჩვენ განვსაზღვრეთ, როგორც ჩვენი ბადის სისტემის ნაწილი.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Bootstrap-ში სტატიკური (არა-თხევადი) ბადის სისტემით, ბუდე მარტივია. თქვენი შინაარსის დასაბუთებლად, უბრალოდ დაამატეთ ახალი .row
და .span*
სვეტების ნაკრები არსებულ .span*
სვეტში.
ჩადგმული რიგები უნდა შეიცავდეს სვეტების ერთობლიობას, რომელიც ემატება მისი მშობლის სვეტების რაოდენობას. მაგალითად, ორი ჩადგმული .span3
სვეტი უნდა განთავსდეს .span6
.
- <div class = "row" >
- <div class = "span12" >
- სვეტის 1 დონე
- <div class = "row" >
- <div class = "span6" > დონე 2 </div>
- <div class = "span6" > დონე 2 </div>
- </div>
- </div>
- </div>
სითხის ბადის სისტემა იყენებს პროცენტებს სვეტების სიგანეზე ფიქსირებული პიქსელების ნაცვლად. მას ასევე აქვს იგივე რეაგირებადი ვარიაციები, როგორც ჩვენი ფიქსირებული ქსელის სისტემა, რაც უზრუნველყოფს ეკრანის ძირითადი გარჩევადობისა და მოწყობილობების სათანადო პროპორციებს.
გააკეთეთ ნებისმიერი მწკრივის სითხე უბრალოდ შეცვლით .row
. .row-fluid
სვეტები ზუსტად იგივე რჩება, რაც ძალიან მარტივს ხდის ფიქსირებულ და თხევად განლაგებას შორის გადატრიალებას.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
თხევადი ბადეებით ბუდობა ცოტა განსხვავებულია: ჩადგმული სვეტების რაოდენობა არ უნდა შეესაბამებოდეს მშობელს. ამის ნაცვლად, თქვენი სვეტები გადატვირთულია თითოეულ დონეზე, რადგან თითოეული მწკრივი იკავებს მშობელი სვეტის 100%-ს.
- <div class = "row-fluid" >
- <div class = "span12" >
- სვეტის 1 დონე
- <div class = "row-fluid" >
- <div class = "span6" > დონე 2 </div>
- <div class = "span6" > დონე 2 </div>
- </div>
- </div>
- </div>
ცვლადი | ნაგულისხმევი მნიშვნელობა | აღწერა |
---|---|---|
@gridColumns |
12 | სვეტების რაოდენობა |
@gridColumnWidth |
60 პიქსელი | თითოეული სვეტის სიგანე |
@gridGutterWidth |
20 პიქსელი | უარყოფითი სივრცე სვეტებს შორის |
@siteWidth |
ყველა სვეტისა და ღარების გამოთვლილი ჯამი | ითვლის სვეტების და ღარების რაოდენობას .container-fixed() მიქსინის სიგანის დასაყენებლად |
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 მხარს უჭერს რამდენიმე მედიის მოთხოვნას ერთ ფაილში, რათა დაგეხმაროთ თქვენი პროექტების უფრო შესაბამისობაში მოყვანა სხვადასხვა მოწყობილობებზე და ეკრანის რეზოლუციებზე. აი რა შედის:
ლეიბლი | განლაგების სიგანე | სვეტის სიგანე | ღუმელის სიგანე |
---|---|---|---|
სმარტფონები | 480px და ქვემოთ | თხევადი სვეტები, ფიქსირებული სიგანეების გარეშე | |
პორტრეტის ტაბლეტები | 480px-დან 768px-მდე | თხევადი სვეტები, ფიქსირებული სიგანეების გარეშე | |
ლანდშაფტის ტაბლეტები | 768px-დან 979px-მდე | 42 პიქსელი | 20 პიქსელი |
ნაგულისხმევი | 980 პიქსელი და მეტი | 60 პიქსელი | 20 პიქსელი |
დიდი ჩვენება | 1210 პიქსელი და მეტი | 70 პიქსელი | 30 პიქსელი |
იმის უზრუნველსაყოფად, რომ მოწყობილობები სწორად აჩვენებენ საპასუხო გვერდებს, ჩართეთ ხედვის პორტის მეტა ტეგი.
- <meta name = "viewport" content = "width=device-width, fillestar-scale=1.0" >
მედიის მოთხოვნები საშუალებას იძლევა მორგებული CSS-ის შექმნა, რომელიც დაფუძნებულია უამრავ პირობებზე - თანაფარდობა, სიგანე, დისპლეის ტიპი და ა.შ. - მაგრამ ჩვეულებრივ ფოკუსირებულია გარშემო min-width
და max-width
.
Bootstrap ავტომატურად არ მოიცავს ამ მედია მოთხოვნებს, მაგრამ მათი გაგება და დამატება ძალიან მარტივია და მოითხოვს მინიმალურ დაყენებას. თქვენ გაქვთ რამდენიმე ვარიანტი Bootstrap-ის საპასუხო ფუნქციების ჩასართავად:
რატომ არ უნდა ჩართოთ იგი? სიმართლე გითხრათ, ყველაფერი არ უნდა იყოს პასუხისმგებელი. იმის ნაცვლად, რომ წაახალისოთ დეველოპერები, ამოიღონ ეს ფუნქცია, ჩვენ ვთვლით, რომ უმჯობესია ჩართოთ იგი.
- // ლანდშაფტის ტელეფონები და ქვემოთ
- @media ( მაქს . სიგანე : 480 პიქსელი ) { ... }
- // ლანდშაფტის ტელეფონი პორტრეტის ტაბლეტისთვის
- @media ( მაქს . სიგანე : 768 პიქსელი ) { ... }
- // ტაბლეტის პორტრეტი ლანდშაფტზე და დესკტოპზე
- @media ( მინ . სიგანე : 768 პიქსელი ) და ( მაქს . სიგანე : 980 პიქსელი ) { ... }
- // დიდი სამუშაო მაგიდა
- @media ( მინ . სიგანე : 1200 პიქსელი ) { .. }