ჩამტვირთავი

ხარაჩოები

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

გლობალური სტილები CSS გადატვირთვის, ტიპოგრაფიისა და ბმულებისთვის

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

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

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

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

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

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

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

Bootstrap 2-ის მდგომარეობით, ტრადიციული CSS გადატვირთვა განვითარდა, რათა გამოიყენოს ელემენტები Normalize.css- დან , ნიკოლას გალაჰერის პროექტი, რომელიც ასევე უზრუნველყოფს HTML5 Boilerplate- ს .

ახალი გადატვირთვა კვლავ შეიძლება მოიძებნოს reset.less-ში , მაგრამ ბევრი ელემენტი ამოღებულია მოკლედ და სიზუსტისთვის.

ნაგულისხმევი ბადის სისტემა 12 სვეტი საპასუხო გადახვევით

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

ნაგულისხმევი ბადის სისტემა, რომელიც მოწოდებულია Bootstrap-ში, იყენებს 12 სვეტს , რომლებიც გამოისახება 724 პიქსელი, 940 პიქსელი (ნაგულისხმევი, საპასუხო CSS-ის გარეშე) და 1170 პიქსელის სიგანეზე. 767 პიქსელიანი ხედების ქვემოთ, სვეტები ხდება თხევადი და ვერტიკალურად დაწყობილია.

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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


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

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

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

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

მაგალითი

ჩადგმული რიგები უნდა შეიცავდეს სვეტების ერთობლიობას, რომელიც ემატება მისი მშობლის სვეტების რაოდენობას. მაგალითად, ორი ჩადგმული .span3სვეტი უნდა განთავსდეს .span6.

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

სითხის ბუდე

თხევადი ბადეებით ბუდობა ცოტა განსხვავებულია: ჩადგმული სვეტების რაოდენობა არ უნდა შეესაბამებოდეს მშობელს. ამის ნაცვლად, თქვენი სვეტები გადატვირთულია თითოეულ დონეზე, რადგან თითოეული მწკრივი იკავებს მშობელი სვეტის 100%-ს.

სითხე 12
სითხე 6
სითხე 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     სვეტის 1 დონე
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > დონე 2 </div> 
  6.       <div class = "span6" > დონე 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

ბადის პერსონალიზაცია

ცვლადი ნაგულისხმევი მნიშვნელობა აღწერა
@gridColumns 12 სვეტების რაოდენობა
@gridColumnWidth 60 პიქსელი თითოეული სვეტის სიგანე
@gridGutterWidth 20 პიქსელი უარყოფითი სივრცე სვეტებს შორის

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

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

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

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

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

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

განლაგება ძირითადი შაბლონები ვებგვერდების შესაქმნელად

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

ნაგულისხმევი და მარტივი 940 პიქსელი სიგანის, ორიენტირებული განლაგება თითქმის ნებისმიერი ვებსაიტის ან გვერდისთვის, რომელიც მოწოდებულია ერთი <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-ის შექმნა, რომელიც დაფუძნებულია უამრავ პირობებზე - თანაფარდობა, სიგანე, დისპლეის ტიპი და ა.შ. - მაგრამ ჩვეულებრივ ფოკუსირებულია გარშემო min-widthდა max-width.

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

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

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

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

ლეიბლი განლაგების სიგანე სვეტის სიგანე ღუმელის სიგანე
სმარტფონები 480px და ქვემოთ თხევადი სვეტები, ფიქსირებული სიგანეების გარეშე
სმარტფონები ტაბლეტებში 767px და ქვემოთ თხევადი სვეტები, ფიქსირებული სიგანეების გარეშე
პორტრეტის ტაბლეტები 768 პიქსელი და მეტი 42 პიქსელი 20 პიქსელი
ნაგულისხმევი 980 პიქსელი და მეტი 60 პიქსელი 20 პიქსელი
დიდი ჩვენება 1200px და მეტი 70 პიქსელი 30 პიქსელი

მოითხოვს მეტა ტეგს

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

  1. <meta name = "viewport" content = "width=device-width, fillestar-scale=1.0" >

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

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

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

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

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

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

Რა არიან ისინი

მობილურისთვის მოსახერხებელი უფრო სწრაფი განვითარებისთვის, გამოიყენეთ ეს ძირითადი სასარგებლო კლასები მოწყობილობის მიხედვით კონტენტის საჩვენებლად და დასამალად.

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

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

მაგალითად, შეგიძლიათ აჩვენოთ <select>ელემენტი ნავიგაციისთვის მობილურის განლაგებაში, მაგრამ არა ტაბლეტებზე ან დესკტოპზე.

დამხმარე კლასები

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

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

სატესტო შემთხვევა

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

ხილულია...

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

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

დამალული...

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

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