როგორ დავაბრუნოთ css scss-დან. SASS-ის სახელმძღვანელო აბსოლუტური დამწყებთათვის. და ახლა თქვენ შეგიძლიათ ამის გაკეთება
ჩამოტვირთვამდე დარწმუნდით, რომ გაქვთ კოდის რედაქტორი (გირჩევთ Sublime Text 3) და გარკვეული ცოდნა HTML და CSS. აქ ჩვენ არ შევეხებით წყარო ფაილები, მაგრამ თქვენ ყოველთვის შეგიძლიათ ჩამოტვირთოთ და შეისწავლოთ ისინი. ჩვენ ყურადღებას გავამახვილებთ შედგენილი Bootstrap ფაილების დაწყებაზე.
კომპილირებული ფაილების ჩატვირთვაყველაზე სწრაფი გზადაიწყეთ: მიიღეთ ჩვენი CSS, JS და სურათების შედგენილი და მინიფიცირებული ვერსიები. არანაირი დოკუმენტი ან წყარო ფაილი.
2. ფაილის სტრუქტურაგადმოწერილ ფაილებში ნახავთ შემდეგი სტრუქტურადა შინაარსი დაჯგუფებულია ლოგიკურად ზოგადი თვისებებიდა შეიცავს ორივე ვერსიას: მინიფიცირებული და შედგენილი.
ჩამოტვირთვის შემდეგ გახსენით შეკუმშული საქაღალდე Bootstrap-ის (შედგენილი) სტრუქტურის სანახავად. ეს უნდა იყოს დაახლოებით ასეთი:
bootstrap / +-- css / ¦ +-- bootstrap. css ¦ +-- bootstrap. წთ. css +-- js / ¦ +-- bootstrap. js ¦ +-- bootstrap. წთ. js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- გლიფიკონები - ნახევარი - თეთრი . png L-- README. მდეს არის Bootstrap-ის ძირითადი ფორმა: შედგენილი ფაილები სწრაფი და მარტივი გამოსაყენებელითითქმის ნებისმიერ ვებ პროექტში. ჩვენ გთავაზობთ შედგენილ CSS-ს და JS-ს (bootstrap.*), ასევე შედგენილ და მინიფიცირებულ CSS-სა და JS-ს (bootstrap.min.*). გამოსახულების ფაილები შეკუმშულია ImageOptim-ის გამოყენებით, Mac აპებისურათების PNG-ში შეკუმშვა.
გთხოვთ გაითვალისწინოთ, რომ JavaScript-ის ყველა დანამატი მოითხოვს jQuery-ს.
3. რა შედისBootstrap აღჭურვილია HTML, CSS და JS ყველა სახის სამუშაოსთვის, ისინი ყველა ჩამოთვლილია კატეგორიებში, რომლებიც შეგიძლიათ იპოვოთ გვერდის ზედა ნაწილში.
დოკუმენტის სექციები მხარდაჭერილი ელემენტებისხეულის ზოგადი სტილები ტიპისა და ფონის გადატვირთვისთვის, ბმულის სტილები, შაბლონის ბადე და ორი მარტივი ელემენტებიმარკირება.
CSS სტილებისტილები ამისთვის საერთო ელემენტები HTML: დიზაინი, კოდი, ცხრილები, ფორმები და ღილაკები. ასევე მოიცავს Glyphicons, შესანიშნავი ხატების ნაკრები.
კომპონენტებიმარტივი ინტერფეისის კომპონენტების ძირითადი სტილები: ჩანართები და ღილაკები, ნავიგაციის ზოლები, შეტყობინებები, გვერდის სათაურები და ა.შ.
Javascript დანამატებიკომპონენტების მსგავსად, ეს Javascript დანამატები არის ინტერაქტიული კომპონენტები ინსტრუმენტების რჩევებისთვის, ინფორმაციის ბლოკებისთვის, მოდალური კომპონენტებისთვის და სხვა.
კომპონენტების სიაყველა ერთად, Javascript კომპონენტები და დანამატები შეიცავს შემდეგი ელემენტებიინტერფეისი:
- ღილაკების ჯგუფები
- ღილაკების ჩამოსაშლელი სიები
- ნავიგაციის ჩანართები, ღილაკები და სიები
- ნავიგაციის ზოლი
- მალსახმობები
- სამკერდე ნიშნები
- გვერდის სათაურები და გმირის ელემენტი
- მინიატურები
- შეტყობინებები
- პროცესის ინდიკატორები
- მოდალური ელემენტები
- ჩამოსაშლელი სიები
- ინსტრუმენტების რჩევები
- საინფორმაციო ბლოკები
- ელემენტი "აკორდეონი"
- კარუსელის ელემენტი
- კლავიატურის შეყვანა წინ
მოკლე შესავლის შემდეგ ყურადღებას გავამახვილებთ Bootstrap-ის გამოყენებით. ამისათვის ჩვენ გამოვიყენებთ ძირითად HTML შაბლონს, რომელიც მოიცავს ყველა ელემენტს, რომელიც ჩამოთვლილია .
ასე გამოიყურება ტიპიური ფაილი HTML:
ამის გაკეთება Bootstrap შაბლონი, უბრალოდ მიამაგრეთ შესაბამისი CSS ფაილებიდა JS:
და ყველაფერი დალაგებულია!
ამ ორი ფაილის დამატებით, შეგიძლიათ განავითაროთ ვებსაიტი ან აპლიკაცია Bootstrap-ის გამოყენებით. სტატიის მეორე ნახევარი უკვე უფრო მარტივად აღიქმება, იქმეტი მაგალითი
ეკრანის ანაბეჭდებით. და გადააკეთე ჩარჩო ისე, რომ მოერგოს საკუთარ თავს, როგორც გსურს. ეს შესანიშნავია.Bootstrap-ის ინსტალაცია თუ თქვენ უბრალოდ გჭირდებათ ჩარჩო ფაილების HTML დოკუმენტთან დაკავშირება (მაგალითად, პრაქტიკისთვის), უბრალოდ ჩამოტვირთეთ ჩარჩო ოფიციალური ვებგვერდიდან getbootstrap.com, დააკოპირეთ მისი ფაილები პროექტში და დააკავშირეთ ის, რაც გჭირდებათ. მე გავაკეთებმოკლე მიმოხილვა
შრიფტების საქაღალდე და მასში არსებული გლიფიკონის ფაილები არის Bootstrap ხატულა შრიფტი. მას აქვს დაახლოებით 200 ხატი. უმეტეს შემთხვევაში საკმარისი გექნებათ ისინი, ზოგჯერ საჭიროა სხვების დაკავშირება. ხატის შრიფტის შესახებ მოგვიანებით ვისაუბრებთ. ესჩარჩო. ფაქტობრივად, თქვენ შეგიძლიათ მარტივად დააკონფიგურიროთ და შეცვალოთ იგი თქვენთვის. მაგალითად, საერთოდ არ გამოიყენოთ სკრიპტები ან დააკავშიროთ მხოლოდ ერთი ბადე. ზოგადად, ამაზეც ვისაუბრებთ.
რუსული Bootstrap დოკუმენტაციაGetbootstrap-ის მონახულებისას ალბათ შენიშნეთ, რომ აქ ყველაფერი ინგლისურადაა. ჩვენ შეგვიძლია გამოვიყენოთ რუსული დახმარება ჩარჩოზე. ადვილი მოსაპოვებელია. ამისათვის გადადით მთავარი გვერდიდაწყების განყოფილებაში. გადაახვიეთ ბოლოში, იქნება თარგმანის ბმული. მოძებნეთ რუსული იქ და დააწკაპუნეთ მასზე. ეს არის ის, ახლა თქვენ ხართ რუსული ვერსიასაიტი. მართალია, აქ ყველაფერი არ არის ნათარგმნი, მაგრამ სადღაც 70-80% ზუსტია, ასე რომ ყველაფერს გაიგებთ.
ჩამტვირთავი ბადერაც არ უნდა ითქვას, Bootstrap-ის მთავარი ელემენტია ადაპტური ბადე. ზოგადად, მის გარეშე, ჩარჩო დაკარგავს თითქმის მთელ მნიშვნელობას, რადგან ქსელის წყალობით შეგიძლიათ სწრაფად შექმნათ ადაპტური შაბლონები. ამავდროულად, თქვენ შეიძლება საერთოდ არ იცნობდეთ მედიის მოთხოვნებს, რადგან ფრეიმორი ზრუნავს ადაპტაციის განხორციელებაზე;
რა არის ეს კლასები? მოდით გადავიდეთ დოკუმენტაციაზე, ეს ძალიან დაგვეხმარება. გადადით CSS - Grid System განყოფილებაში. ზოგადი წესებიქსელთან მუშაობა მარტივია, ახლა ჩამოვთვლი მათ.
როგორ ვიმუშაოთ ქსელთან?იფიქრეთ, როგორც html ცხრილი. თუ ოდესმე დაგიწერიათ HTML კოდი ცხრილებისთვის, იცით, რომ მთელი შინაარსი მოთავსებულია ცხრილის ტეგში, ერთი მწკრივი მოთავსებულია tr ტეგში და შემდეგ მასში მოთავსებულია უჯრედები - td .
ასე რომ, ყველაფერი მსგავსია ქსელში. კონტეინერის კლასი ემსახურება როგორც საერთო კონტეინერს ქსელისთვის. ჩატვირთვის ბადის 2 ვარიანტია - მთლიანად რეზინის და ჯერ კიდევ სასრული მაქსიმალური სიგანე. ასე რომ, როდესაც დავალება მიეცა ზოგადი ბლოკიკლასის კონტეინერი, საიტს ექნება მაქსიმალური სიგანე 1170 პიქსელი. ის აღარ გაფართოვდება. ბუნებრივია, კონტენტი ორიენტირებული იქნება.
თუ დააყენებთ კონტეინერის სითხის კლასს, მაშინ ბადე მთლიანად რეზინის იქნება, ანუ ზომის შეზღუდვები არ იქნება. მაგალითად, თუ ადამიანი ხსნის ვებსაიტს 1920 პიქსელიანი სიგანის მონიტორზე, ის დაინახავს მას მთელ სიგანეზე.
შესაბამისად, ვებსაიტის შემუშავებისას უპირველეს ყოვლისა უნდა გადაწყვიტოთ როგორი იქნება შაბლონი – მთლიანად რეზინის, თუ მისი სიგანე მაინც უნდა იყოს შეზღუდული.
შესანიშნავია, კონტეინერის ბლოკი უნდა შეიცავდეს ბადის რიგს. თქვენ უნდა მოათავსოთ მასში ყველა ბლოკი, რომელიც ერთ ხაზზეა. ანუ, თუ ავიღებთ ყველაზე ტიპურ შაბლონს: სათაური, ძირითადი ნაწილი, მარჯვენა სვეტი და ქვედა კოლონტიტული, მაშინ არის 3 სვეტი. პირველს ექნება მხოლოდ სათაური, მეორეს ექნება შინაარსი და გვერდითი ზოლი, ხოლო ბოლოს ექნება ქვედა კოლონტიტული. ასეთი საიტის მარკირება დაახლოებით ასეთი იქნება:
ქუდი
შინაარსი... და გვერდითი ზოლი
ქვედა კოლონტიტული
მაგრამ ახლა ეს არასწორი მარკირება, რადგან არ არის საკმარისი... რა? მართალია, უჯრედები! Bootstrap-ის შემთხვევაში მათ სვეტებსაც უწოდებენ. ჩატვირთვის ბადე შედგება 12 სვეტისგან. მისი ჩასმა შესაძლებელია ნებისმიერი სიგანის ნებისმიერ ბლოკში, მინიმუმ 1200 პიქსელი, მინიმუმ 100. ეს ყველაფერი იმიტომ ხდება, რომ სვეტების სიგანე მითითებულია არა პიქსელებში, არამედ პროცენტებში.
როგორ მუშაობს ეს 12-სვეტიანი სისტემა?ასე რომ, ჩვენ მივდივართ ძალიან მნიშვნელოვანი საკითხიჩარჩოსთან დაკავშირებული. დამიჯერე, ამას თუ ხვდები, დანარჩენი ყველაფერი სისულელეა. მთავარია იმის გაგება, თუ როგორ მუშაობს ბადე და გზა სწრაფად ადაპტური განლაგებაღია იქნება თქვენთვის.
ამისათვის გადაახვიეთ დოკუმენტაცია ქვემოთ, იქ ნახავთ ცხრილს, რომელიც შეიცავს მნიშვნელოვანი თვისებებიბადეები
სხვათა შორის, თავად სვეტები Bootstrap-ში აღინიშნება col- კლასით, მაგრამ ეს არის კომპოზიტური კლასი, ამიტომ ისინი უბრალოდ არასოდეს წერენ col-. Bootstrap-ს აქვს 4 სპეციალური კლასი, რომლებიც შექმნილია ბლოკების ზომის გასაკონტროლებლად სხვადასხვა სიგანეზე, აქ არის:
ეს არის 4 კლასი, მაგრამ ელემენტების ზომის გასაკონტროლებლად გამოიყენება რიცხვები 1-დან 12-მდე, რადგან, როგორც გახსოვთ, ბადეში არის ზუსტად 12 სვეტი.
ქუდი
შინაარსი
გვერდითი სვეტი
ქვედა კოლონტიტული
საკმაოდ ადვილი გასაგებია. უპირველეს ყოვლისა, ჩვენ ვქმნით სათაურს, ის საერთოდ არ უნდა განთავსდეს ქსელში, რადგან ის ნებისმიერ შემთხვევაში დაიკავებს სიგანის 100%-ს (ჩვეულებრივ). მაგრამ ჩვენ მაინც ჩავდებთ მას. რა არის ეს კლასი col-md-12? როგორც უკვე გითხარით, არავინ წერს უბრალოდ col-, ამ კლასით ჩვენ არსებითად ვეუბნებით ბრაუზერს:
ეს არის უჯრედი | სვეტი
საშუალო მოწყობილობებზე (md კლასი), მისი სიგანე უნდა იყოს 12 სვეტი 12-დან, ანუ მწკრივის სიგანის 100%.
მაგრამ რაც შეეხება სიგანეს სხვა მოწყობილობებზე? დიდ (lg) ეკრანებზე ეს ასევე იქნება 100%, რადგან დიდი ეკრანების მნიშვნელობები მემკვიდრეობითია, მაგრამ უფრო მცირეებისთვის - არა. ეს მარტივია: თუ თქვენ დაწერთ col-xs-4, მაშინ სვეტის სიგანე იქნება 33% ყველა მოწყობილობაზე, ხოლო თუ col-lg-4, მაშინ მხოლოდ დიდ მოწყობილობებზე. ეს არის თვისება, გახსოვდეთ.
კარგად, თუ სიგანის მნიშვნელობა არ არის შენახული პატარა ეკრანებზე, მაშინ რა ხდება? ის აღდგება. აი, როგორ ხდება ეს:
col-sm-4 - პატარა ეკრანებზე ბლოკი დაიკავებს სიგანის 33%-ს, იგივე იქნება md და lg ეკრანებზე, მაგრამ xs-ზე, ანუ უმცირესებზე, სიგანე 100%-მდე აღდგება. ასე რომ, გახსოვდეთ კიდევ ერთი მარტივი წესი: თუ პატარა ეკრანებისთვის არაფერია მითითებული, მაშინ მათზე ბლოკი გამოჩნდება 100% სიგანეზე.
შინაარსი
გვერდითი სვეტი
არსებითად, ჩვენ ვეუბნებით ბრაუზერს:
მოდით, შინაარსის ბლოკი იყოს 12 სვეტიდან 8 სიგანე და ეს სიტუაცია იქნება მცირე, საშუალო და დიდი ეკრანები(საკმარისია მიუთითოთ პატარა ეკრანებისთვის; დიდი ეკრანებისთვის, როგორც გახსოვთ, მნიშვნელობა მემკვიდრეობითია). მაგრამ ყველაზე პატარა ეკრანებზე ბლოკი 100% იქნება დაკავებული. ეს სწორია, ჩვეულებრივ მობილური მოწყობილობებისაიტები მიდის ზუსტად 1 სვეტში.
მოდით, გვერდითი სვეტი იყოს რიგის სიგანის ერთი მესამედი იმავე პატარა, საშუალო და დიდ ეკრანებზე, როგორც უკვე მიხვდით, მისი სიგანე ასევე გადატვირთულია 100%. ეს ასე მარტივია.
ისე, ძირთან არაფერია საქმე. ისე, ძირითადი პრინციპებიჩვენ დავახარისხეთ ქსელის მუშაობა, მაგრამ მაინც უნდა ვნახოთ, როგორ მუშაობს...
Bootstrap Nested Gridფაქტია, რომ ახლა ჩვენ შაბლონი დავყავით მხოლოდ მთავარ ბლოკებად, მაგრამ შიგნით ისინი ასევე შეიძლება დაიყოს სვეტებად. მაგალითად, კონტენტმა შეიძლება აჩვენოს პროდუქტები რამდენიმე სვეტში. რა უნდა გავაკეთო? ეს ძალიან მარტივია - ჩვენ ვქმნით ზუსტად იმავე ბადეს შიგნით. ის იქნება წყობილი, მაგრამ ასევე შეიცავს 12 სვეტს. თუ ამ ყველაფერს შევაჯამებთ, მაშინ მივდივართ დასკვნამდე:
ნებისმიერი ბლოკის შიგნით შეიძლება იყოს შეუზღუდავი რაოდენობის ბადეები. მაგალითად, პროდუქტების მქონე ბლოკში არის ბლოკში პროდუქტების გამოყოფის ბადე ერთი პროდუქტით, შეგიძლიათ შექმნათ სხვა ბადე, მაგალითად, ფასების, ხელმისაწვდომობის ინფორმაციისა და დამატებითი ინფორმაციის გამოყოფისთვის. ინფორმაცია.
ახლა ჩვენ შევეცდებით შევქმნათ კიდევ ერთი ბადე კონტენტის ბლოკის შიგნით, რათა მოვაწყოთ პროდუქტები 3 სვეტად. მაშ ასე, ავიღოთ ბლოკი, რომელშიც გვაქვს შინაარსი:
შინაარსი
და ჩვენ მასში ვწერთ:
პროდუქტის კატალოგი:
პროდუქტის დასახელება
პროდუქტის აღწერა
როგორც ხედავთ, ჩვენ შევქმენით ახალი ბადე შინაარსის შიგნით - ჩავსვით მწკრივი შიგნით და რიგში უკვე იქნება 3 ბლოკი პროდუქტებით. უბრალოდ დააკოპირეთ col-sm-4 ბლოკი პროდუქტის ბარათით და ჩასვით კიდევ 2-ჯერ, აი რას მიიღებთ (შეგიძლიათ გადაიღოთ ნებისმიერი პროდუქტის სურათი, მე გადავიღე დიდი):
გამოტოვა კიდევ ერთი მნიშვნელოვანი წერტილიიმისათვის, რომ გამოსახულებები მოერგოს იმ ბლოკებს, რომლებშიც ისინი მდებარეობს, თითოეულ მათგანს უნდა მიეცეს img-responsive კლასი. თუ თქვენ, როგორც მე, ფიქრობთ, რომ ამის გაკეთება მოუხერხებელია, მაშინ უბრალოდ დაწერეთ თქვენი სტილით.css ასე:
Img (მაქსიმალური სიგანე: 100%; სიმაღლე: ავტომატური; ჩვენება: დაბლოკვა;)
ესე იგი, შეინახეთ ეს კოდი და დააკავშირეთ თქვენი css ფაილი პროექტთან. ახლა სურათები ნაგულისხმევად იქნება ადაპტირებული.
ისე, საკმაოდ შეუფერხებლად გამოვიდა? დიახ, მაგრამ ჩატვირთვის გარეშე უფრო დიდხანს მოგიწევთ ტანჯვა. ერთადერთი ის არის, რომ ნებისმიერი ბლოკის შიგნით ბადის შექმნისას აღარ გჭირდებათ ბლოკის შექმნა კონტეინერის კლასით. რატომ არ არის ეს საჭირო? დიახ, რადგან ბლოკი, რომელშიც ბადე იქმნება, კონტეინერის როლს ასრულებს.
ამრიგად, თქვენ შეგიძლიათ შექმნათ იმდენი სვეტი, რამდენიც გსურთ ნებისმიერ ბლოკში და გააკეთოთ ნებისმიერი სირთულის შაბლონი. და ეს ყველაფერი ბევრად უფრო სწრაფია, ვიდრე Bootstrap-ის გარეშე, რადგან თქვენ უნდა დაწეროთ ყველა css ნულიდან.
საპასუხო კომუნალური საშუალებებიეს არის bootstrap-ის კიდევ ერთი შესანიშნავი თვისება. ის მდგომარეობს იმაში, რომ თქვენ შეგიძლიათ დამალოთ ან გახადოთ ხილული ნებისმიერი ბლოკი თქვენთვის საჭირო სიგანეზე. მაგალითად, მთლიანად დამალეთ გვერდითი სვეტი ვიწრო ეკრანებზე, დაამატეთ რამდენიმე ახალი ელემენტი მობილურ მოწყობილობებზე, დაამატეთ სვეტი ფართო ეკრანებიდა ა.შ.
აპლიკაციის უამრავი ვარიანტია, მაგრამ მე არ გითხარით ყველაზე მნიშვნელოვანი: როგორ გამოვიყენოთ ეს კომუნალური საშუალებები? ამისათვის უბრალოდ დაამატეთ კლასები სასურველი ბლოკი. თუ მისი დამალვა გჭირდებათ, უბრალოდ მიუთითეთ შემდეგი კლასი:
ქვედა კოლონტიტული
რა არის ამ შემთხვევაშიგახდის კლასს დამალული-xs? ის დამალავს ქვედა კოლონტიტულს დამატებით პატარა მოწყობილობებზე. ყველა დანარჩენზე ბლოკი ხილული იქნება.
თუ პირიქით, თქვენ გჭირდებათ მისი ჩვენება მხოლოდ ყველაზე პატარა ეკრანებზე, თქვენ უნდა გამოიყენოთ ვიზუალური-xs-block კლასი. ამ შემთხვევაში, ბლოკი დაიმალება ყველა, გარდა ყველაზე ვიწრო ეკრანზე. ასე რომ, ადაპტური კომუნალური კლასები იწერება ასე:
კარგი, რამდენიმე მაგალითი ამის გასაგებად:
ეს ყველაფერი ასე მუშაობს. ზუსტად ასეა და სხვა გზა არა. იმედია გესმით ეს. პრაქტიკაში გამოვიყენოთ. ჩვენ გვაქვს ტესტის შაბლონი, თუმცა ძალიან პრიმიტიული.
დავალება: გვერდითი სვეტის გაქრობა პატარა ეკრანებზე, ასევე ერთი პროდუქტი ყველაზე პატარა ეკრანებზე. და ისე, რომ xs მოწყობილობებზე პროდუქტები უკვე 2 სვეტშია და არა 3.
სცადეთ ეს თავად გააკეთოთ, მხოლოდ html კოდის რედაქტირებით. რა უნდა გაკეთდეს? პირველ რიგში, მოდით შევხედოთ სვეტს, მისი დამალვისთვის sm ეკრანებზე, თქვენ უბრალოდ უნდა დაამატოთ მას დამალული-sm კლასი.
კარგია, ახლა მესამე პროდუქტს სჭირდება დამალული-xs კლასის დამატება და ის გაქრება ყველაზე პატარა ეკრანებზე. დანარჩენი ორი საქონლის კლასები იქნება შემდეგი:
ანუ საშუალო მოწყობილობებზე ბლოკი დაიკავებს 4 სვეტს 12-დან, რაც შეიძლება ითარგმნოს სიგანის 33,33%-ზე, ხოლო ექსტრა პატარა მოწყობილობებზე - 50%. და რადგან პროდუქტით ერთი ბლოკი გაქრება ამ სიგანეზე, ორივე ბლოკი პროდუქტებთან ერთად ლამაზად განლაგდება 1 რიგში, ასე: 
დიდი! ამის გაგების შემდეგ, თქვენ უკვე შეგიძლიათ ვებგვერდის ბლოკებით მანიპულირება თითქმის ნებისმიერი გზით, როგორც გსურთ. ეცადეთ, თავად მოაგვაროთ ამოცანები და განახორციელოთ ისინი.
შემდეგ მე გაჩვენებ კიდევ 1 ძალიან კარგი მისალმება— ბლოკის მარჯვნივ ან მარცხნივ გადატანის შესაძლებლობა. ვთქვათ, გვაქვს არა 3 პროდუქტი ზედიზედ, არამედ 1. და ის არ იკავებს მთელ სიგანეს. და თქვენი ამოცანაა მისი გასწორება ცენტრში. ამის გაკეთება ადვილია, თუ გავითვალისწინებთ, რომ მუშაობთ 12 სვეტიანი სისტემით.
მოდით დავტოვოთ ერთი ბლოკი პროდუქტთან:
საკმარისია მარტივი გამოთვლების გაკეთება იმის გასაგებად, თუ რამდენად გჭირდებათ ბლოკის გადაადგილება მის ცენტრში დასაჭერად. საშუალო და დიდ ეკრანებზე მარცხნივ უნდა გადაიტანოთ 4 სვეტი და პატარაზე 3 სვეტი. ასე გამოიყურება:
კლასში col-md-offset-4 ნათქვამია: საშუალო და დიდ ეკრანებზე, გადაანაწილეთ ბლოკი მარცხნივ საწყისი კონტეინერის სიგანის 33%-ით (მარცხნივ ოფსეტი 1/3, ბლოკის სიგანე 1/3, ⅓ მარჯვენა ოფსეტი, რის შედეგადაც ხდება ცენტრირება).
კლასი col-xs-offset-6: ზედმეტად პატარა და პატარა ეკრანებზე გადაინაცვლეთ მარცხნივ 25%-ით (¼ ბალიშის მარცხნივ, ½ ბლოკის სიგანე, ¼ ბალიშის მარჯვნივ).
იმედი მაქვს, გესმით არსი და საჭიროების შემთხვევაში გამოიყენებთ ამ კლასებს.
Bootstrap კომპონენტები და მათი გამოყენების მაგალითებიგილოცავ. ჩვენ ახლახან განვიხილეთ ჩარჩოსთან დაკავშირებული ყველაზე მნიშვნელოვანი თემა. მნიშვნელოვანია ბადე და მასთან მუშაობა. კომპონენტებთან მუშაობა უკვე ნიშნავს, რომ თქვენ უბრალოდ გადადით დოკუმენტაციაში და დააკოპირეთ კოდი იქ საჭირო კომპონენტიდა, საჭიროების შემთხვევაში, შეცვალეთ იგი თქვენს შესაფერისად. მაგრამ მე მაინც მოგცემთ ქვემოთ რამდენიმე მაგალითს, თუ როგორ გამოიყენოთ კომპონენტები.
სწრაფი მოძრავი და გადახვევის გაუქმებაpull-left და pull-right კლასები საშუალებას გაძლევთ სწრაფად მოაწყოთ ნებისმიერი ბლოკი მარცხნივ ან მარჯვნივ გაგზავნით. არ დაივიწყოთ ნაკადის გაუქმება. ამისათვის შეგიძლიათ გამოიყენოთ clearfix კლასი.
Bootstrap: ჰორიზონტალური საპასუხო (მობილური) მენიუჩვენ პირდაპირ შაბლონს დავამატებთ შემდეგ კომპონენტებს, ასე რომ, თუ გსურთ იმუშაოთ კოდთან და არა უბრალოდ წაიკითხოთ, მიყევით ჩემს შემდეგ ყველა ნაბიჯს.
სინამდვილეში, Bootstrap-ით ამის გაკეთება ძალიან მარტივია საპასუხო მენიუ, და ეგრეთ წოდებული მობილური, რომელიც მთლიანად მინიმიზირებულია პატარა ეკრანებზე და იმალება ერთი ღილაკის ქვეშ. ეს ტექნიკა ბევრში ჩანს ადაპტური შაბლონებიდა რეალურად ძალიან მარტივია განხორციელება. მაგალითი კოდი მობილური მენიუდოკუმენტაციაში დევს, იქიდან ავიღებ და ცოტას გავიმეორებ.
ასე რომ, პირველი რასაც გავაკეთებ არის ბლოკის ამოღება სათაურით, რადგან ჩვენი მენიუ, ფაქტობრივად, იქნება სათაური ჩემი შაბლონის შემთხვევაში. მენიუს კოდი უნდა განთავსდეს საიტის ყველა კონტენტის წინ, კონტეინერის ბლოკამდეც კი. რატომ? დიახ, ახლა თქვენ თავად ნახავთ, რომ ბადე უკვე ჩაშენებულია ნავიგაციის ზოლში. ასე რომ, აქ არის კოდი:
გადართვის ღილაკი
ლოგო/სახელი
ძიება
არ შეგაშფოთოთ ის ფაქტი, რომ ბევრი კოდია. ასე გამოიყურება საიტი ახლა: 
მაგრამ თუ თქვენი მენიუ არ იკავებს ეკრანის მთელ სიგანეს, აზრი აქვს მის ცენტრში მოქცევას. ამისათვის თქვენ უნდა შექმნათ მენიუსთვის დამატებითი wrapper ბლოკი, რომელიც უნდა განთავსდეს კონტეინერის სითხის კლასის ბლოკის შემდეგ. არ დაგავიწყდეთ ამ ბლოკის დახურვა. მივეცი მას navbar-wrap კლასი. აქ არის სტილები ამისთვის:
ანუ, თქვენ შეგიძლიათ უბრალოდ შეზღუდოთ სიგანე და ცენტრირება. ან თავდაპირველად შეცვალეთ კონტეინერის სითხე კონტეინერით. 
როგორც ხედავთ, მენიუს დავამატეთ ლოგო, ორი მარტივი ელემენტი, ჩამოსაშლელი ელემენტი და საძიებო ფორმა. ანუ ბევრი ელემენტი იყო. თქვენ შეგიძლიათ მარტივად დააკონფიგურიროთ მენიუ, მასში საკუთარი კლასების დამატებით. მაგრამ ახლა ჩემი მიზანია უბრალოდ გაჩვენოთ ეს კომპონენტი.
ასე გამოიყურება მენიუ მოწყობილობებზე, რომელთა ეკრანის სიგანე 768 პიქსელზე ნაკლებია: 
როგორც ხედავთ, მენიუ დაიშალა. ის იხსნება, როდესაც დააჭირეთ მარჯვენა ღილაკს ზედა კუთხე. ეკრანზე მხოლოდ ლოგო დარჩა.
ამავდროულად, ზემოთ მოყვანილი მაგალითიდან შეგიძლიათ გაიგოთ, თუ როგორ იქმნება ჩამოსაშლელი მენიუ Bootstrap-ში, მოდით ამოვიღოთ ეს კოდი უფრო დეტალურად:
სავარჯიშო აღჭურვილობა
ასე რომ, ჩამოსაშლელი ელემენტის კონტეინერი არის ჩვეულებრივი სიის ელემენტი ჩამოსაშლელი კლასით. მის შიგნით არის მთავარი ბმული, რომელზეც დაჭერით იხსნება ჩამოსაშლელი მენიუ. ძალიან მნიშვნელოვანია, მივანიჭოთ მას მონაცემთა ატრიბუტი, რომელსაც ხედავთ კოდში მის გარეშე, არაფერი იმუშავებს. თქვენ ასევე უნდა დარწმუნდეთ, რომ bootstrap.js ფაილი დაკავშირებულია ვებ გვერდებთან.
კარეტის კლასთან დიაპაზონი სხვა არაფერია, თუ არა ისარი, რომლის წყალობითაც შეგიძლიათ გაიგოთ, რომ ელემენტი არის ჩამოსაშლელი ელემენტი, ხოლო მენიუს ქვემოთ ჩამოყალიბებულია სტანდარტის გამოყენებით. პუნქტიანი სია. ეს არის ის, ყველაფერი საკმაოდ მარტივია, შეგიძლიათ გამოიყენოთ ეს კოდი ჩამოსაშლელი ელემენტების განსახორციელებლად.
Breadcrumbs-ის დამატება (Breadcrumbs) Bootstrap-ის გამოყენებითბევრ მაღაზიაში შეგიძლიათ იპოვოთ ბლოკის ე.წ პურის ნამსხვრევები, რომელიც შეიცავს სრული გზამიმდინარე გვერდზე. ამის გაკეთება ასევე მარტივია ჩარჩოს გამოყენებით, იხილეთ კოდი:
ფაქტობრივად, საკმარისია მიუთითოთ breadcrumb კლასი დანომრილი სიისთვის და შეიყვანოთ მასში ჩვეულებრივი სიის ელემენტები. სხვათა შორის, შაბლონში მე მეორე დონის სათაურებს გავამახვილებ ცენტრში (ეს უნდა დაიწეროს css-ში):
H2 (ტექსტის გასწორება: ცენტრში;)
თუ რაიმეს შეცვლა გინდა გარეგნობაპურის ნამსხვრევები, უბრალოდ გამოიყენეთ .breadcrumb სელექტორი CSS-ში. მაგალითად, ამ გზით შეგიძლიათ ამოიღოთ ფონის ფერი:
Breadcrumb (ფონი: გამჭვირვალე;)
ასე გამოიყურება საიტი ახლა: 
ნაგულისხმევად, ცხრილი გადაჭიმულია მთელ ფანჯარაში, ამიტომ შეფუთეთ იგი შეზღუდული სიგანის ყუთში ზომების შესაზღუდად. ნაგულისხმევად, ეს საშინლად გამოიყურება, მაგრამ თუ ცხრილის კლასს დაამატებთ ცხრილის ტეგს, ყველაფერი ბევრად უკეთესი იქნება:
ცხრილის მწკრივზე გადასვლისას სხვა ფერის ხაზგასასმელად, გამოიყენეთ ცხრილის სტრიქონი.