ჩამტვირთავი

ხარაჩოები

Bootstrap აგებულია პასუხისმგებელ 12-სვეტიან ბადეებზე, განლაგებაზე და კომპონენტებზე.

Თავები მაღლა! ეს დოკუმენტები განკუთვნილია v2.3.2-ისთვის, რომელიც ოფიციალურად აღარ არის მხარდაჭერილი. შეამოწმეთ Bootstrap-ის უახლესი ვერსია!

გლობალური პარამეტრები

საჭიროებს HTML5 დოქტიპს

Bootstrap იყენებს გარკვეულ HTML ელემენტებს და CSS თვისებებს, რომლებიც მოითხოვს HTML5 დოქტიპის გამოყენებას. ჩართეთ იგი ყველა თქვენი პროექტის დასაწყისში.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

ტიპოგრაფია და ლინკები

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

  • ამოიღეთ marginსხეულზე
  • დააყენეთ background-color: white;_body
  • გამოიყენეთ @baseFontFamily, @baseFontSize, და @baseLineHeightატრიბუტები ჩვენს ტიპოგრაფიულ ბაზად
  • დააყენეთ გლობალური ბმულის ფერი მეშვეობით @linkColorდა გამოიყენეთ ბმულის ხაზგასმა მხოლოდ:hover

ეს სტილები გვხვდება ხარაჩოებში . ნაკლები.

გადატვირთვა ნორმალიზების საშუალებით

Bootstrap 2-ით, ძველი გადატვირთვის ბლოკი გაუქმდა Normalize.css- ის სასარგებლოდ , ნიკოლას გალაჰერის და ჯონათან ნილის პროექტი , რომელიც ასევე აძლიერებს HTML5 Boilerplate- ს . მიუხედავად იმისა, რომ ჩვენ ვიყენებთ ნორმალიზების დიდ ნაწილს ჩვენს reset.less-ში , ჩვენ წავშალეთ ზოგიერთი ელემენტი სპეციალურად Bootstrap-ისთვის.

ნაგულისხმევი ბადის სისტემა

ცოცხალი ბადის მაგალითი

ნაგულისხმევი Bootstrap ქსელის სისტემა იყენებს 12 სვეტს , რაც ქმნის 940 პიქსელის სიგანის კონტეინერს ჩართული საპასუხო ფუნქციების გარეშე . საპასუხო CSS ფაილის დამატებით, ბადე ადაპტირდება 724 პიქსელზე და 1170 პიქსელზე, თქვენი ხედვის პორტის მიხედვით. 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 class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

ამ მაგალითის გათვალისწინებით, გვაქვს .span4და .span8, ვქმნით სულ 12 სვეტს და სრულ მწკრივს.

ოფსეტური სვეტები

გადაიტანეთ სვეტები მარჯვნივ .offset*კლასების გამოყენებით. თითოეული კლასი ზრდის სვეტის მარცხენა ზღვარს მთელი სვეტით. მაგალითად, .offset4მოძრაობს .span4ოთხ სვეტზე.

4
3 ოფსეტი 2
3 ოფსეტი 1
3 ოფსეტი 2
6 ოფსეტი 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

მობუდული სვეტები

თქვენი შინაარსის ნაგულისხმევ ბადეში ჩასართავად დაამატეთ ახალი .rowდა .span*სვეტების ნაკრები არსებულ .span*სვეტში. ჩადგმული რიგები უნდა შეიცავდეს სვეტების ერთობლიობას, რომელიც ემატება მისი მშობლის სვეტების რაოდენობას.

დონე 1 სვეტი
დონე 2
დონე 2 
  1. <div class = "row" > 
  2.   <div class = "span9" > 
  3.     დონე 1 სვეტი
  4.     <div class = "row" > 
  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 class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

სითხის კომპენსირება

მუშაობს ისევე, როგორც ფიქსირებული ქსელის სისტემის ოფსეტური: დაამატეთ .offset*ნებისმიერ სვეტს ამდენი სვეტით ოფსეტურით.

4
4 ოფსეტი 4
3 ოფსეტი 3
3 ოფსეტი 3
6 ოფსეტი 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

სითხის ბუდე

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

სითხე 12
სითხე 6
სითხე 6
სითხე 6
სითხე 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     სითხე 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         სითხე 6
  7.         <div class = "row-fluid" > 
  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 class = "row-fluid" > 
  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 = "width=device-width, fillestar-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Თავები მაღლა!Bootstrap ნაგულისხმევად არ შეიცავს საპასუხო ფუნქციებს, რადგან ყველაფერი არ უნდა იყოს საპასუხო. იმის ნაცვლად, რომ წაახალისოთ დეველოპერები, ამოიღონ ეს ფუნქცია, ჩვენ ვთვლით, რომ უმჯობესია ჩართოთ იგი საჭიროებისამებრ.

საპასუხო Bootstrap-ის შესახებ

საპასუხო მოწყობილობები

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

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

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

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

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

ლეიბლი განლაგების სიგანე სვეტის სიგანე ღუმელის სიგანე
დიდი ჩვენება 1200px და მეტი 70 პიქსელი 30 პიქსელი
ნაგულისხმევი 980 პიქსელი და მეტი 60 პიქსელი 20 პიქსელი
პორტრეტის ტაბლეტები 768 პიქსელი და მეტი 42 პიქსელი 20 პიქსელი
ტელეფონები ტაბლეტებზე 767px და ქვემოთ თხევადი სვეტები, ფიქსირებული სიგანეების გარეშე
ტელეფონები 480px და ქვემოთ თხევადი სვეტები, ფიქსირებული სიგანეების გარეშე 
  1. /* დიდი სამუშაო მაგიდა */
  2. @media ( მინ . სიგანე : 1200 პიქსელი ) { ... }     
  3.  
  4. /* ტაბლეტის პორტრეტი ლანდშაფტზე და დესკტოპზე */
  5. @media ( მინ . სიგანე : 768 პიქსელი ) და ( მაქს . სიგანე : 979 პიქსელი ) { ... }        
  6.  
  7. /* ლანდშაფტური ტელეფონი ტაბლეტის პორტრეტამდე */
  8. @media ( მაქს . სიგანე : 767 პიქსელი ) { ... }     
  9.  
  10. /* ლანდშაფტური ტელეფონები და ქვემოთ */
  11. @media ( მაქს . სიგანე : 480 პიქსელი ) { ... }

საპასუხო კომუნალური კლასები

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

Კლასი ტელეფონები767px და ქვემოთ ტაბლეტები979px-დან 768px-მდე დესკტოპებინაგულისხმევი
.visible-phone ხილული
.visible-tablet ხილული
.visible-desktop ხილული
.hidden-phone ხილული ხილული
.hidden-tablet ხილული ხილული
.hidden-desktop ხილული ხილული

როდის გამოვიყენოთ

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

საპასუხო კომუნალური სატესტო შემთხვევა

შეცვალეთ თქვენი ბრაუზერის ზომა ან ჩატვირთეთ სხვადასხვა მოწყობილობებზე ზემოაღნიშნული კლასების შესამოწმებლად.

ხილულია...

მწვანე გამშვები ნიშნები მიუთითებს, რომ კლასი ჩანს თქვენს ამჟამინდელ ხედში.

  • ტელეფონი✔ ტელეფონი
  • ტაბლეტი✔ ტაბლეტი
  • სამუშაო მაგიდა✔ სამუშაო მაგიდა

დამალული...

აქ მწვანე პუნქტები მიუთითებს, რომ კლასი დამალულია თქვენს ამჟამინდელ ხედში.

  • ტელეფონი✔ ტელეფონი
  • ტაბლეტი✔ ტაბლეტი
  • სამუშაო მაგიდა✔ სამუშაო მაგიდა