Bootstrap გაკვეთილები A-დან Z-მდე. ჩატვირთვის წყობილი ბადე. Bootstrap Learning Toolkit

01.04.2019

სტატიის მეორე ნახევარი უკვე უფრო მარტივად აღიქმება, იქ მეტი მაგალითიეკრანის ანაბეჭდებით.

Bootstrap - რა არის ეს?

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

Bootstrap-ის ინსტალაცია

თუ თქვენ უბრალოდ გჭირდებათ ჩარჩო ფაილების HTML დოკუმენტთან დაკავშირება (მაგალითად, პრაქტიკისთვის), უბრალოდ ჩამოტვირთეთ ჩარჩო ოფიციალური ვებგვერდიდან getbootstrap.com, დააკოპირეთ მისი ფაილები პროექტში და დააკავშირეთ ის, რაც გჭირდებათ. ნება მომეცით ამ ფაილების მოკლე მიმოხილვა:

bootstrap.css და bootstrap.min.css - Framework-ის CSS კოდის არაკომპრესირებული და შეკუმშული ვერსიები. რეკომენდებულია სამუშაო პროექტთან დაკავშირება შეკუმშული ფაილი, ამ გზით თქვენ ოდნავ გააუმჯობესებთ ჩამოტვირთვის სიჩქარეს. მაგრამ თუ გეგმავთ კოდის ფაილში ნახვას, დააკავშირეთ შეუკუმშული ვერსია.

bootstrap.js და bootstrap.min.js - ფაილი სკრიპტებით

შრიფტების საქაღალდე და მასში არსებული გლიფიკონის ფაილები არის 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 სპეციალური კლასი, რომლებიც შექმნილია სხვადასხვა სიგანეზე ბლოკების ზომის გასაკონტროლებლად, აქ არის:

ld - დიდი ეკრანებისთვის, 1200 პიქსელზე მეტი სიგანით (დესკტოპ კომპიუტერები);

md - საშუალო ეკრანებისთვის, სიგანე 992-დან 1199-მდე (კომპიუტერები, ნეტბუქები);

სმ - პატარა ეკრანებისთვის, სიგანე 768-დან 991 პიქსელამდე (ტაბლეტები);

xs - ზედმეტად პატარა ეკრანები, სიგანე 768 პიქსელზე ნაკლები.

ეს არის 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, sm, md ან lg, რომელიც მიუთითებს, რომელ ეკრანებზე უნდა დამალოთ ან აჩვენოთ ბლოკი.

თვალსაჩინოებისთვის ასევე უნდა დაამატოთ სამი მნიშვნელობიდან ერთი: ბლოკი - ელემენტის ჩვენება ბლოკის ელემენტად, inline-block - როგორც inline-block ელემენტი, inline - inline.

კარგი, რამდენიმე მაგალითი ამის გასაგებად:

hidden-xs hidden-lg - დამალავს ელემენტს ყველაზე პატარა და დიდ ეკრანებზე. როგორც ხედავთ, შეგიძლიათ მიუთითოთ რამდენიმე კლასი, რომელიც გამოყოფილია სივრცეში.

visual-xs-inline visual-md-block - პატარა და დიდ ეკრანებზე ელემენტი საერთოდ არ იქნება ნაჩვენები. ზედმეტად წვრილებზე ეს იქნება პატარა, ხოლო საშუალოზე - ბლოკი.

visual-lg-block - ელემენტი ხილული იქნება მხოლოდ უდიდეს ეკრანებზე, ყველა დანარჩენზე იქნება დამალული

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

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

სცადეთ ეს თავად გააკეთოთ, მხოლოდ html კოდის რედაქტირებით. რა უნდა გაკეთდეს? პირველ რიგში, მოდით შევხედოთ სვეტს, მისი დამალვისთვის sm ეკრანებზე, თქვენ უბრალოდ უნდა დაამატოთ მას დამალული-sm კლასი.

კარგია, ახლა მესამე პროდუქტს სჭირდება დამალული-xs კლასის დამატება და ის გაქრება ყველაზე პატარა ეკრანებზე. დანარჩენი ორი საქონლის კლასები იქნება შემდეგი:

ანუ საშუალო მოწყობილობებზე ბლოკი დაიკავებს 4 სვეტს 12-დან, რაც შეიძლება ითარგმნოს სიგანის 33,33%-ზე, ხოლო ექსტრა პატარა მოწყობილობებზე - 50%. და რადგან პროდუქტით ერთი ბლოკი გაქრება ამ სიგანეზე, ორივე ბლოკი პროდუქტებთან ერთად ლამაზად განლაგდება 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 (ფონი: გამჭვირვალე;)

ასე გამოიყურება საიტი ახლა:

ჩატვირთვის მაგიდები

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

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

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

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

ბუნებრივია, თქვენ შეგიძლიათ მარტივად დაწეროთ საკუთარი კლასები style.css-ში და გამოიყენოთ ისინი. სწორედ აქ ვამთავრებთ ცხრილებს.

P.S. სტატია დაემატება და დაემატება...

ქვედა ხაზი

ვიმედოვნებ, რომ სტატია სასარგებლო იყო და თქვენ შეძელით ყველაზე მნიშვნელოვანი რამის გაგება. თქვენ შეგიძლიათ დასვათ ნებისმიერი შეკითხვა კომენტარების გამოყენებით.

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

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

Bootstrap–ის გამოყენების შესახებ ამჟამად, არსებობს Bootstrap–ის სტილებთან მუშაობის რამდენიმე გზა დამწყებთათვის, თავად Bootstrap გირჩევთ შემდეგ მიდგომას: თქვენ უნდა ჩამოტვირთოთ შედგენილი Bootstrap საიტიდან და განათავსოთ იგი თქვენს პროექტში არაფრის შეცვლის გარეშე. შემდეგ თქვენ უნდა შექმნათ თქვენი საკუთარი ცარიელი CSS ფაილი და ჩართოთ იგი bootstrap.css-ის შემდეგ.

ამის შემდეგ, Bootstrap სტილის შესაცვლელად, თქვენ უნდა შეცვალოთ ისინი თქვენს styles.css-ში:

A (ფერი: #beceda;)
აშკარა მინუსი ამ მიდგომასარის ის, რომ თქვენ მოგიწევთ ხელით მოძებნოთ საჭირო სტილები, რომელთა შეწყვეტაც გსურთ და ეს ყოველთვის არ იქნება ტრივიალური, რადგან Bootstrap-ის ზოგიერთი ვარიანტი ვრცელდება ბევრ სელექტორზე შეცვლილი ფორმით, მაგალითად, ფორმულების საშუალებით. Customize ინსტრუმენტი შეიძლება დაგეხმაროთ აქ, ის დაგეხმარებათ თქვენი ცვლილებების სწორად შედგენაში, მაგრამ მხოლოდ ერთხელ. თუ მომავალში გსურთ რაიმე პარამეტრის შეცვლა, თქვენ მოგიწევთ ხელახლა შეიყვანოთ შეცვლილი მნიშვნელობები ყველა ველისთვის თქვენი სტილის შედგენის მიზნით.

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

არსებობს დიდი რაოდენობაშედგენის გზები LESS ფაილი s და Bootstrap ამას დეველოპერის შეხედულებისამებრ უტოვებს. თავად Bootstrap იყენებს Grunt-ს კომპილაციისთვის, შეგიძლიათ უპირატესობა მიანიჭოთ JetBrains-ის პროდუქტებს და ჩვენ, რადგან სტატია განკუთვნილია დამწყებთათვის, უფრო მარტივ გადაწყვეტილებებს მივხედავთ. ასეთი გადაწყვეტილებებია WinLess Windows-ისთვის, SimpLESS Mac-ისთვის ან Koala Linux-ისთვის. ყველა ეს პროგრამა დაახლოებით ერთსა და იმავეს აკეთებს: ისინი იღებენ საქაღალდეს LESS ფაილებით, როგორც შეყვანის სახით და უსმენენ მათში ცვლილებებს. როგორც კი რაიმე ფაილში ცვლილებებს შეიტანთ, ის მაშინვე შედგენილია მითითებულ CSS ფაილში. ამ გზით თქვენ არ გჭირდებათ ხელით შედგენის გაშვება ყოველი ცვლილების შემდეგ. თქვენ ცვლით LESS ფაილს, ინახავთ და დაუყოვნებლივ ხედავთ ცვლილებებს საიტზე უკვე შედგენილი, შეკუმშული ფორმით.

პროექტის შექმნა პირველი ნაბიჯი არის ჩვენი პროექტისთვის მარტივი ფაილის სტრუქტურის შექმნა.

წინასწარი შემოწმება ფაილის სტრუქტურის შექმნის შემდეგ გახსენით psd ფაილი Photoshop-ში. მნიშვნელოვანია ყურადღებით შეისწავლოს შაბლონი და შეაფასოს იგი. ჩვენ უნდა გვესმოდეს შემდეგი რამ:

როგორ დაიჭრება სურათები?
რა კომპონენტები იქნება გამოყენებული?
რა იქნება ძირითადი სტილები?
რა გვერდის განლაგება მივიღებთ?

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

შეინახეთ რუკის სურათი:

მოდით შევინახოთ ლოგოები შემდეგნაირად:

Images/logo.png
images/footer-logo.png

განმეორებადი ფონის სურათებიუნდა დაიჭრას მინიმალურ ნაჭრად, რომელიც საკმარისია ფორმირებისთვის სრული სურათიგამეორება ვერტიკალურად და ჰორიზონტალურად.

/images/bg.png
/images/h1-bg.png

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

/images/social.png
/images/social-small.png

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

თუ გადახედავთ ჩვენს შაბლონს, ხედავთ, რომ დაგვჭირდება შემდეგი კომპონენტები:

სვეტებით განლაგებისთვის - ბადის სისტემა (სტრიქონი, კოლ)

საძიებლად – inline ფორმა (form-inline), დაჯგუფებული კონტროლი (input-group), ღილაკი (btn)

ნავიგაციისთვის - ნავიგაციის ზოლი (navbar) და თავად ნავიგაცია (nav)

ქვემენიუების ჩვენება – დაჯგუფებული სია (სიის ჯგუფი)

რუქის ბლოკისთვის - ვიზუალური პანელი(პანელი)

დიდი ცენტრალური ბლოკის ჩვენება - ჯუმბოტრონი

ფოტო ჩარჩოების ჩვენება - ესკიზები (მინიატურა)

ჩვენ უფრო დეტალურად განვიხილავთ თითოეულ კომპონენტს, როდესაც მას შევხვდებით განლაგებაში Basic styles-ში Bootstrap-ში, ყველა ნაგულისხმევი სტილი უკვე დაყენებულია, ჩვენ მხოლოდ მათი მორგება გვჭირდება, თუ ისინი განსხვავდებიან ჩვენი დიზაინისგან. მოდით გავაკეთოთ ეს ფაილში src/less/variables.css.

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

@brand-font: "Oswald",sans-serif;
თუ გსურთ გამოიყენოთ შაბლონი რუსული საიტებისთვის, მაშინ შეგიძლიათ სცადოთ Oswald შრიფტის შეცვლა უახლოეს Cuprum-ით, რომელიც მხარს უჭერს კირილიცას.

ახლა მოდით შევცვალოთ Bootstrap პარამეტრები ჩვენით:

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

@import "bootstrap/bootstrap.less"; @import "variables.less";
Bootstrap-ის ყველა ნაგულისხმევი სტილის შეცვლა არ შეიძლება ცვლადების გამოყენებით, ასე რომ, მოდით გავაკეთოთ ეს ხელით:

P ( ზღვარი: 20 პიქსელი 0; ) .form-control ( box-shadow: none; ) .btn ( font-family: @brand-font; )
აქ ჩვენ მოვაცილეთ ჩრდილი ფორმის ელემენტებს და მივეცით ღილაკების ტექსტს კონკრეტული გვერდის შრიფტი.

შემდეგ ჩვენ აღვწერთ გვერდის ფონს და ზედა ზოლს:

ტექსტი ( საზღვრის ზედა: 5px მყარი #7e7e7e; ფონის სურათი: url(../images/bg.png); )
შემდგომ ტექსტში არ იქნება მითითებული, რომელ ფაილშია დაწერილი სტილები. უბრალოდ გახსოვდეთ, რომ ჩვენ ვინახავთ ყველა ცვლადს ფაილში variables.less და CSS სტილები შეინახება styles.less-ში.

HTML ჩარჩო ჩვენ ვიწყებთ ვებგვერდის განლაგებას ტრადიციულად HTML ჩარჩო. ჩვენ ვსვამთ უმარტივესი შაბლონის კოდს Getting Start გვერდიდან index.html ფაილში, მანამდე რომ წავშალეთ ყველა არასაჭირო რამ:

თეთრი მოედანი
ეს ბლოკი ქმნის HTML5 დოკუმენტის სტრუქტურას. სათაურში ვანიშნებთ ჩვენი გვერდის სახელს – Whitesquare. ხედვის პორტის მეტა ტეგით მივუთითებთ, რომ მობილურ მოწყობილობებზე გვერდის სიგანე ტოლი იქნება ეკრანის სიგანეზე და საწყისი მასშტაბი იქნება 100%. შემდეგ სტილის ფაილი შედის. და ამისთვის ინტერნეტ ვერსიები Explorer ცხრაზე ნაკლები, ჩვენ ვუკავშირდებით სკრიპტებს, რომლებიც საშუალებას გვაძლევს სწორად გამოვაჩინოთ ჩვენი განლაგება.

განლაგება ამ შემთხვევაში, ჩვენ ვხედავთ, რომ საიტი შედგება ორი ნაწილისგან: მთავარი კონტეინერი შინაარსით, რომელიც არის ორიენტირებული ეკრანზე და გაჭიმვის ქვედა კოლონტიტული. ძირითადი კონტეინერი შედგება ორი სვეტისგან: ძირითადი შინაარსი და გვერდითი ზოლი. მათ ზემოთ არის სათაური, ნავიგაცია (nav) და გვერდის სათაური (.heading).

მოდით დავამატოთ შემდეგი კოდი სხეულს:

აქ ვხვდებით პირველ Bootstrap კომპონენტს - სვეტებს. სვეტების მშობელ ელემენტს ენიჭება კლასი "row", ხოლო სვეტის კლასები იწყება პრეფიქსით "col-", შემდეგ ეკრანის ზომა (xs, sm, md, lg) და მთავრდება სვეტის ფარდობითი სიგანით. .

სვეტს შეიძლება მიენიჭოს ერთდროულად სხვადასხვა კლასები ეკრანებისთვის მნიშვნელობებით, მაგალითად class="col-xs-12 col-md-8". ეს კლასები უბრალოდ ადგენენ სვეტის სიგანეს, როგორც პროცენტს კონკრეტული ეკრანის ზომისთვის. თუ სვეტს არ მიენიჭება ეკრანის კონკრეტული კლასი, მაშინ გამოყენებული იქნება კლასი მინიმალური სპეციფიკური ეკრანისთვის, ხოლო თუ ის არ არის მითითებული, მაშინ სიგანე არ იქნება გამოყენებული და ბლოკი მიიღებს მაქსიმალურ შესაძლო სიგანეს.

ჩვენი კლასები „col-md-7“ და „col-md-17“ მიუთითებს იმაზე, რომ ბლოკები არის სვეტები, რომელთა სიგანე 7 და 17 არის მშობელ კონტეინერთან შედარებით. ნაგულისხმევად, Bootstrap-ში სვეტების სიგანეების ჯამი არის 12, მაგრამ ჩვენ გავაორმაგეთ ეს რიცხვი საჭირო მოქნილობის მისაღწევად.

ტექსტი (… .შეფუთვა (შეფუთვა: 0 0 50px 0; ) სათაური (შეფუთვა: 20px 0;) )
ჩვენ მოვათავსეთ ეს სტრუქტურა სხეულის შიგნით. LESS სინტაქსი საშუალებას გაძლევთ მოათავსოთ წესები ერთმანეთში, რომლებიც შემდეგ შედგენილია შემდეგ კონსტრუქტებად:

Body .wrapper (…) body header (…)
ეს მიდგომა საშუალებას გაძლევთ ნახოთ HTML სტრუქტურა უშუალოდ CSS-ის შიგნით და გარკვეულ „ფარგლებს“ აძლევს წესებს.

ლოგო

ჩადეთ ლოგო სათაურის ტეგში:

დამატებითი სტილებიარ არის საჭირო.

ძიება

ძიების შესაქმნელად, ჩვენ გვჭირდება შემდეგი Bootstrap კომპონენტები: inline ფორმა, დაჯგუფებული კონტროლი და ღილაკი.
სათაურის ტეგში ჩვენ ვქმნით ხაზოვან ფორმას, რომელიც გასწორებულია მარჯვნივ. ასეთი ფორმის ველებს უნდა ჰქონდეს "form-control" კლასი და ლეიბლი.

ჩვენ ვათავსებთ "ჯგუფური კონტროლის" კომპონენტს ფორმაში. დაჯგუფების კონტროლი საშუალებას გაძლევთ ამოიღოთ სივრცე ტექსტის შეყვანასა და ღილაკს შორის და, როგორც ეს იყო, გააერთიანოთ ისინი ერთ ელემენტად.
ეს არის div "input-group" კლასით და ველებით და ასეთი კომპონენტის ღილაკი მოთავსებულია ბლოკში "input-group-btn" კლასით.

ვინაიდან არ გვჭირდება საძიებო ველის ლეიბლის ჩვენება, მას დავმალავთ „მხოლოდ sr“ კლასით. ეს საჭიროა სპეციალური ეკრანის მკითხველებისთვის.

ღილაკს ემატება კლასი „btn-primary“, რაც ნიშნავს, რომ ეს არის ამ ფორმის პირველადი ღილაკი.

… ძიება GO
დაგვრჩენია მხოლოდ სტილებში დავაყენოთ საძიებო ფორმის სიგანე.

ტექსტი ( … .wrapper ( … header ( … .form-search ( სიგანე: 200px; ) ) )

მენიუ

მენიუს სანახავად აიღეთ „ნავიგაციის პანელი“ კომპონენტი და მოათავსეთ მასში „ნავიგაციის“ კომპონენტი, რომელიც არის სია ბმულებით. ნავიგაციისთვის ემატება კლასი "navbar-nav", რომელიც იყენებს ნავიგაციის სპეციალურ სტილებს navbar-ში.

იმისათვის, რომ ეს მენიუ ჩვენს დიზაინში მივიყვანოთ, ჩვენ დავაყენებთ შემდეგ მნიშვნელობებს ცვლადებისთვის:

/*navbar სიმაღლე*/ @navbar-height: 37px; /*დააყენეთ მეტი ჰორიზონტალური padding*/ @nav-link-padding: 10px 30px; /*მენიუ ელემენტების ფონი*/ @navbar-default-bg: @panel-bg; /*ტექსტის ფერი მენიუს ელემენტებში*/ @navbar-default-link-color: #b2b2b2; /*და მაუსის დაჭერისას - იგივე*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*აქტიური მენიუს ელემენტის ფონი არის ჩვენი სპეციფიკური ლურჯი ფერი*/ @navbar-default-link-active-bg: @brand-primary; /*აქტიური მენიუს ელემენტის ტექსტის ფერი*/ @navbar-default-link-active-color: #fff;
კონფიგურირებადი პარამეტრების გარდა, ჩვენ აღვწერთ დამატებით პარამეტრებს სტილში - ეს არის დიდი ტექსტი და ჩვენი კონკრეტული შრიფტი:

ტექსტი (… .wrapper (… .navbar a (ტექსტის ტრანსფორმაცია: დიდი; შრიფტი: 14px @brand-font; ) )

გვერდის სათაური

გვერდის სათაური მოთავსებულია div-ში "heading" კლასით.

ჩვენს შესახებ
და აქვს შემდეგი სტილები:

ტექსტი ( … .wrapper ( … .heading ( სიმაღლე: 40px; ფონი: გამჭვირვალე url(../images/h1-bg.png); ზღვარი: 30px 0; padding-left: 20px; h1 (ჩვენება: inline-block; ფერი: #7e7e font: normal 40px/40px "Oswald", sans-serif: url(../images/bg.png ) ;
აქ ჩვენ ვხატავთ ნაცრისფერ ზოლს, როგორც ფონს div-ზე და ჩავსვამთ მასში h1-ს. საჭირო შრიფტითდა გვერდის ფონის ფერი შთაბეჭდილების შესაქმნელად გამჭვირვალე ფონი h1-ისთვის.

ქვემენიუ

ქვემენიუს შექმნისას ჩვენ არ გამოვიყენებთ "ნავიგაციის" კომპონენტს, რადგან ის ჩვენთვის არ არის ძალიან შესაფერისი სტილით "ჯგუფური სიის" კომპონენტი ჩვენთვის ბევრად უფრო შესაფერისია. ასეთი კომპონენტის თითოეულ ელემენტს აქვს კლასი "list-group-item".

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

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

@list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
და გამოიყენეთ შემდეგი სტილები ქვემენიუში:

ტექსტი ( … .wrapper ( … .ქვემენიუ ( margin-bottom: 30px; li ( ჩვენება: list-item; font: 300 14px @brand-font; list-style-position: inside; list-style-type: square; padding : 10 პიქსელი: დიდი ასოებით; &.active (ფერი: @brand-primary;) ))
პირველ რიგში, ჩვენ ვაბრუნებთ სტანდარტულ სტილებს სიის ელემენტებს, რადგან Bootstrap-მა ჩაანაცვლა ისინი თავისით. დაამატეთ საფენი ბოლოში. ქვემენიუში გამოიყენება უფრო თხელი შრიფტები და კვადრატული მარკერები. და ბმულებისთვის ჩვენ ვაყენებთ ფერებს, დიდიდა ამოიღეთ ხაზი. ამპერსანდი "&.active" კოდში შეიცვლება მშობელი ამომრჩეველით კომპილაციის დროს LESS სინტაქსის გამოყენებით: ".submenu li.active".

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

მის საჩვენებლად სათაურის გასაფერადებლად გამოვიყენებთ „პანელის“ კომპონენტს, უფრო სწორად მის ვარიაციას „პანელი-პირველადი“. ეს კომპონენტი შეიცავს სათაურის ბლოკს (პანელის სათაური) და პანელის შინაარსის ბლოკს (პანელის სხეული). რუკის სურათს ვამატებთ „img-responsive“ კლასს, რომელიც საშუალებას მისცემს გამოსახულება შემცირდეს, როდესაც ეკრანის სიგანე მცირეა.

… ჩვენი ოფისები
Bootstrap ცვლადებში ჩვენ უკვე დავაყენეთ პანელის ფონის ფერი (პანელი-bg) და ახლა დავაზუსტებთ, რომ „ძირითად“ პანელს ექნება ნაგულისხმევი პანელის ნაცრისფერი საზღვარი, ვიდრე ნაგულისხმევი ლურჯი:

@panel-primary-border: @panel-inner-border;
ახლა საიტის სტილებში თქვენ უნდა შეცვალოთ სტანდარტული პანელის პარამეტრები, რომლებიც არ იცვლება ცვლადების საშუალებით:

პანელი ( box-shadow: none; .panel-heading ( font: 14px @brand-font; text-transform: uppercase; padding: 10px; ) .panel-body ( padding: 10px; ) )
აქ ჩვენ ამოვიღეთ ჩრდილი პანელებიდან, დავამატეთ ჩვენი საკუთარი შეწევა და დავაყენეთ ჩვენი სათაურის შრიფტი.

ციტატა დავიწყოთ შინაარსის განლაგება ციტატის დამატებით.

გვერდის ეს ელემენტი ყველაზე მეტად ჰგავს Jumbotron კომპონენტს. მოდით დავამატოთ ის შინაარსის სვეტში:

"Quisque in enim velit, at dignissim est." nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.”

ჯონ დო, ლორემ იფსუმი
ცვლადების გამოყენებით jumbotron კომპონენტისთვის, ჩვენ დავაყენებთ ტექსტის ფერს თეთრზე და ბრენდირებულ ლურჯ ფონზე:

@jumbotron-bg: @brand-primary; @jumbotron-color: #fff;
და მოდით აღვწეროთ ჩვენი სტილები:

ტექსტი ( … .wrapper ( … .jumbotron ( საზღვარი-რადიუსი: 0; padding: 0; ზღვარი: 0; blockquote (საზღვარი-მარცხნივ: არცერთი; p ( შრიფტი: 300 დახრილი 33px @brand-font; ტექსტის ტრანსფორმაცია: დიდი; margin-bottom: 0) პატარა (ტექსტის გასწორება: მარჯვნივ; ფერი: #1D8EA6; შრიფტი: 300 20px @brand-font; &: ადრე (შინაარსი: ""; ) ) ) )
მათში ჩვენ ვხსნით კუთხის დამრგვალებას, კომპონენტის ბალიშს და ციტირებს დეკორაციებს, რომლებიც მითითებულია Bootstrap-ის მიერ ნაგულისხმევად. ჩვენ ასევე დავამატებთ სტილებს ჩვენი შრიფტებისთვის.

შინაარსი

Lorem ipsum dolor sit amet…

Donec vel nisl nibh…

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

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

@thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;

ბლოკი "ჩვენი გუნდი"

ამ ბლოკის განლაგებისას, ჯერ დავამატოთ სათაური:

ჩვენი გუნდი
სტილით:

ტექსტი (… .wrapper (… h2 (ფონი: არ განმეორდება გადახვევა 0 0 #29C5E6; ფერი: #fff; შრიფტი: 300 30px @brand-font; padding: 0 10px; ტექსტის ტრანსფორმაცია: დიდი; )) )
შემდეგ ჩვენ დავამატებთ ბლოკს "გუნდის" კლასთან, რომელიც შედგება ორი ხაზისგან, რომელიც შეიცავს თანამშრომლის ბარათებს. თითოეული ბარათი არის სვეტი. ბარათს აქვს ჩვენი ბადის ოთხი სვეტის ტოლი სიგანე. ყველა ბარათს ხაზის პირველის გარდა აქვს მარცხენა შეწევა, რომელიც იქმნება "col-md-offset-1" კლასის მიერ. ბარათის შინაარსი შედგება სურათისა და აღწერილობისგან (.caption)

ჯონ დო საუნდრა პიტსლი

გუნდის ლიდერი

…

ერიკა ნობრიგა

სამხატვრო ხელმძღვანელი

კოდი რუსელი

უფროსი UI დიზაინერი

…
მარკირების შექმნის შემდეგ, მოდით მივცეთ ამ ელემენტებს შემდეგი სტილები:

ტექსტი ( … .wrapper (… .team ( .row ( margin-top: 20px; .col (თეთრი სივრცე: nowrap; .მინიატურა (ზღვარი-ქვედა: 5px;)) .col-md-offset-1 ( margin- მარცხნივ: 3.7%; ))
გარდა შეწევისა და შრიფტის სტილისა, რომლებიც აქ არის დაყენებული, ჩვენ შევცვალეთ „col-md-offset-1“ კლასი. მას შეწევა 3,7%-მდე უნდა დაეყენებინა, რადგან... სტანდარტული ჩაღრმავებაძალიან დიდი იყო.

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

პირველი, მოდით შევქმნათ ქვედა კოლონტიტული ამ ბლოკებით:

და გამოიყენეთ დიზაინი მასზე:

ქვედა კოლონტიტული (ფონი: #7e7e7e; ფერი: #dbdbdb; შრიფტის ზომა: 11px; .კონტეინერი (სიმაღლე: 110px; padding: 10px 0; ) )
ქვედა კოლონტიტულის ტეგი განსაზღვრავს ნაცრისფერ არეალს ეკრანის მთელ სიგანეზე, ხოლო მის შიგნით კონტეინერი აჩვენებს ცენტრალურ არეალს უფრო დიდ ეკრანებზე და განსაზღვრავს ქვედა კოლონტიტულის სიმაღლეს და ბალიშს. ჩვენ ვიყენებთ სვეტებს ქვედა კოლონტიტულის შიგნით ბლოკების გასასწორებლად.

Twitter-ის არხი Twitter-ის შიგთავსის განლაგება:

Twitter feed 23 ოქტომბერი

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. ეგეთ მი დუიში, დაჯექი ამეტ სცელერისკე ნუნც. ენეანი აგვ

სტილები:

ტექსტი ( ... ქვედა კოლონტიტული ( ... .კონტეინერი ( ... h3 ( სასაზღვრო ქვედა: 1px მყარი #919191; ფერი: #ffffff; შრიფტის ზომა: 14px; ხაზის სიმაღლე: 21px; font-family: @brand -შრიფტი: 0 0 10px; ტექსტის ტრანსფორმაცია: დიდი ასოებით; ))))
ქვედა კოლონტიტულის ყველა სათაურისთვის, ჩვენ ვაყენებთ შრიფტებს და შეწევას, ასევე ვქმნით ხაზს ქვედა ჩარჩოში. აბზაცებისთვის მიუთითეთ შეწევა. თარიღის ჩვენების ბმულისთვის დააყენეთ ფერი და ხაზი გაუსვით.

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

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

ძირითადი ტექსტი ( ... ქვედა კოლონტიტული ( ... .კონტეინერი ( ... a (ფერი: #dbdbdb; ) . საიტის რუკა a ( ჩვენება: ბლოკი; შრიფტის ზომა: 12 პიქსელი; ზღვარი ქვედა: 5 პიქსელი; ) ) )

სოციალური ბმულები

ჩვენ ჩავსვით ბმულების ნაკრები ბლოკში „სოციალური“ კლასით.

სოციალური ქსელები
და სტილი მათ:

ტექსტი ( … ქვედა კოლონტიტული ( … .კონტეინერი ( … .social ( .social-icon ( სიგანე: 30px; სიმაღლე: 30px; ფონი: url(../images/social.png) გამეორების გარეშე; ჩვენება: inline-block; ზღვარი -right: 10px; .social-icon-small ( სიგანე: 16px; სიმაღლე: 16px; ფონი: url(../images/social-small.png) no-repeat; ჩვენება: inline-block; ზღვარი: 5px 6px 0 0. ) .youtube ( ფონის პოზიცია: -16 პიქსელი 0; ) .flickr ( ფონის პოზიცია: -32 პიქსელი 0; ) .ინსტაგრამი ( ფონის პოზიცია: -48 პიქსელი 0; ) .rss ( ფონის პოზიცია: -64 პიქსელი 0; ) ) ))))
აქ გამოვიყენეთ sprite ტექნიკა - სადაც გამოიყენება ერთი სურათის ფაილი სხვადასხვა სურათები. ყველა ბმული იყოფა დიდ ხატებად (.social-icon) და პატარა (.social-icon-small). ჩვენ დავაყენეთ ეს კლასები, რომ გამოჩნდნენ როგორც შიდა ბლოკი ფიქსირებული ზომებიდა იგივე ფონი. და შემდეგ ერთად CSS-ის გამოყენებითჩვენ გადავიტანეთ ეს ფონი ისე, რომ შესაბამისი სურათი გამოჩნდეს თითოეულ ბმულზე.

საავტორო უფლება ბლოკი საავტორო უფლებებით და ლოგოთი არის სურათი ბმულით და აბზაცით მის ქვეშ ტექსტით.

სტილები შესრულებულია წინა ბლოკების მსგავსად, ერთადერთი განსხვავებით, რომ ბლოკი მიმაგრებულია მარჯვენა კიდეზე და მის შიგნით გასწორება ასევე მარჯვნივ:

ტექსტი ( … .ფეხი ( … .კონტეინერი ( … .footer-logo (float: მარჯვნივ; margin-top: 20px; შრიფტის ზომა: 10px; ტექსტის გასწორება: მარჯვნივ; a (ტექსტის დეკორაცია: ხაზგასმული; ) ) ) )

ეს ასრულებს განლაგებას. მზა პროექტიჩამოტვირთვა შესაძლებელია

ამ გაკვეთილში ჩვენ ჩამოტვირთავთ Bootstrap 3.0-ს ოფიციალური ვებსაიტიდან და დავაკავშირებთ ფაილებს მთავარ გვერდზე.
მოდით დავიწყოთ.

ნაბიჯი 1. Bootstrap 3.0 ჩარჩოსთან მუშაობის დასაწყებად, უნდა გადმოვწეროთ. ეს შეიძლება გაკეთდეს ოფიციალურ ვებსაიტზე.

ნაბიჯი 2. შექმენით საქაღალდე, მაგალითად, „ჩემი საიტი Bootstrap 3.0-ზე“ და გადაიტანეთ ყველა ფაილი არქივიდან მასში. თქვენ უნდა გქონდეთ სამი საქაღალდე "css", "js", "fonts":

ნაბიჯი 3: წაშალეთ არასაჭირო ფაილები Bootstrap 3-დან.
მოდით გავიაროთ ნაგულისხმევი Bootstrap ფაილის სტრუქტურა და წავშალოთ ყველა არასაჭირო ფაილი იქიდან:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── შრიფტები/

CSS საქაღალდე

CSS საქაღალდეში არის 6 ფაილი, მაგრამ ჩვენ არსებითად გვჭირდება მხოლოდ ერთი J.

bootstrap.css - ეს css ფაილი შეიცავს ყველა მზა სტილს მოსახერხებელი და წასაკითხი ფორმით. ეს არის ფაილი, რომელიც გვჭირდება. ჩვენ მას დავუკავშირებთ ჩვენს html ფაილს.

bootstrap.css.map , bootstrap-theme.css.map - მე არ ვიყენებ ამ ფაილებს, რადგან არ ვიცი რისთვის არიან ისინი. შეგიძლიათ წაშალოთ ისინი.

bootstrap-theme.css არის css ფაილი მზა თემაჩამტვირთავი. თქვენ ასევე შეგიძლიათ უსაფრთხოდ ამოიღოთ იგი.

bootstrap.min.css და bootstrap-theme.min.css ზუსტად იგივე ფაილებია, რაც bootstrap.css (პუნქტი No1) და bootstrap-theme.css (პუნქტი No2), მხოლოდ უფრო მოუხერხებელი და ძნელად წასაკითხი ფაილები. ფორმა. იწონის დაახლოებით 30%-ით ნაკლებს, ვიდრე bootstrap.css ან bootstrap-theme.css. პირადად მე მათ არ ვაკავშირებ. ასე რომ, მე მათაც ვშლი.

შედეგად, თქვენ ტოვებთ მხოლოდ bootstrap.css ფაილს CSS საქაღალდეში და წაშლით ყველა დანარჩენს.

შრიფტების საქაღალდე

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

js საქაღალდე

js საქაღალდეში ინახება 2 ფაილი, bootstrap.js და bootstrap.min.js.
როგორც უკვე მიხვდით, ეს ორია იდენტური ფაილები, მხოლოდ bootstrap.js – სრული ვერსიადა bootstrap.min.js არის შეკუმშული. წაშალეთ bootstrap.min.js ფაილი.

ასე რომ, bootstrap.js ფაილი არის მზა JS სკრიპტების ნაკრები.

○ მოდით შევაჯამოთ ყველა საქაღალდე.
CSS საქაღალდეში არის ერთი ფაილი - bootstrap.css
შრიფტების საქაღალდეში ოთხი ფაილია - glyphicons-halflings-regular.eot, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.svg და glyphicons-halflings-regular.woff.
js საქაღალდეში არის ერთი ფაილი - bootstrap.js.

bootstrap/
├── css/
│ └── bootstrap.css
├── js/
│ └── bootstrap.js
└── შრიფტები/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-რეგულარული.woff

ნაბიჯი 4. ახლა "My Bootstrap 3.0 Site" საქაღალდეში შექმენით ფაილი "index.html" .

ნაბიჯი 5. გახსენით "index.html" ტექსტური ფაილი და ჩასვით შემდეგი სტანდარტული კოდი, რომელიც შემოთავაზებულია თავად Bootstrap საიტზე:

Bootstrap 101 შაბლონი გამარჯობა, მსოფლიო!

ამ კოდში თქვენ უნდა გააკეთოთ გარკვეული კორექტირება ჩატვირთვის დასაკავშირებლად. ჩვენ უნდა ჩავწეროთ კოდში სწორი გზა bootstrap.js და bootstrap.css ფაილებზე.

ეს ასე გამოიყურება:

Bootstrap შაბლონი Hello, World!

სტრიქონზე #10 ჩვენ შევიტანეთ "bootstrap.css" სტილის ფურცელი:

25-ე სტრიქონში ჩვენ დავამატეთ ფაილი „bootstrap.js“ სკრიპტებით:

სტრიქონში No23 ჩვენ ჩავრთეთ jquery ბიბლიოთეკა:

შეინახეთ ფაილი.

შედეგად, თქვენ ნახავთ ამ შედეგს ბრაუზერში:

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

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

რა არის Bootstrap?

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

იგი მოიცავს სტანდარტული შაბლონებიშედგება ტიპოგრაფიისგან, ღილაკებისგან, ფორმებისგან, სხვადასხვა მენიუებიჩამოსაშლელი მენიუების, ცხრილების ჩათვლით, მოდალური ფანჯრები, ნავიგაცია, სლაიდერები (ჩვეულებრივი და კარუსელის სახით) და სხვა ხელსაწყოები, ასევე ყველა სახის დანამატი on .

მათ შორის ყველაზე პოპულარულია Tooltip, რომელიც პასუხისმგებელია pop-up ფანჯრებზე, Dropdown, რომელიც პასუხისმგებელია ჩამოსაშლელ სიებზე, Carousel, რომელიც აწყობს გადახვევის სლაიდერს და სხვა.

თან სრული სია არსებული დანამატები, შაბლონები და კომპონენტები შეგიძლიათ იხილოთ ოფიციალურ ვებსაიტზე http://getbootstrap.com/getting-started/. ასევე, მისი დახმარებით, მეორე ვერსიიდან დაწყებული, შეგიძლიათ შექმნათ საპასუხო განლაგება.

ორიოდე სიტყვა ისტორიაზე

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

Bootstrap შეიქმნა მარკ ოტოს და ჯეიკობ თორნტონის მიერ სპეციალურად სოციალურისთვის Twitter ქსელები. იგი მოქმედებდა როგორც შიდა ბიბლიოთეკა. ამიტომ ზოგჯერ ხედავთ სახელს Twitter Bootstrap.

ბიბლიოთეკას თავდაპირველად Twitter Blueprint ერქვა. თუმცა, იმ დროისთვის, როდესაც პროდუქტი გამოვიდა ფართო საზოგადოებისთვის (და ეს მოხდა 2011 წლის 19 აგვისტოს), მისი სახელი შეიცვალა Bootstrap-ით. დღეს ჩარჩოს ოთხი ვერსია არსებობს.

ყველაზე შესამჩნევი და მოთხოვნადი ამჟამად არის Bootstrap 3. ეს იყო პირველი, ვინც გამოიყენა კონცეფცია მობილურიპირველი. გარდა ამისა, შეტანილია მრავალი ცვლილება და გაუმჯობესება.

რა სარგებლობა მოაქვს Bootstrap-ის გამოყენებას?

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

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

ასე რომ, აღწერილი ჩარჩოს დაკავშირებისას თქვენ გეძლევათ შესაძლებლობა გამოიყენოთ ისეთი მზა ელემენტები, როგორიცაა:

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

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

ამ ხელსაწყოს წყალობით, Bootstrap ძალიან ხშირად გამოიყენება ვებსაიტების დასაწერად. რადგან ეს მართლაც კომპეტენტური და ძლიერი მექანიზმია ბლოკის განლაგება. ჩარჩოს შემქმნელებმა უზრუნველყო მაქსიმალური რაოდენობასვეტები - 12. ეს საკმარისზე მეტია „ჩარჩოს“ დასაყენებლად.

გარდა ამისა, ზოგიერთ სიტუაციაში, Bootstrap-ის გამოყენება არა მხოლოდ ამარტივებს კოდს, არამედ მნიშვნელოვნად დაზოგავს თქვენს დროს. ამავდროულად, თქვენ არ უნდა ინერვიულოთ, რომ ზოგიერთი ელემენტი არ იმუშავებს პრობლემურ ბრაუზერებში (დიახ, მე მინიშნება მაქვს IE-ზე), რადგან Bootstrap სრულად თავსებადია.

როგორ დავაკავშიროთ ჩარჩო?

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

ასე რომ, ოფიციალურ ვებსაიტზე, ბმულის გამოყენებით, შეგიძლიათ ჩამოტვირთოთ მიმდინარე ვერსიებიჩამტვირთავი. ძალიან მარტივია. უბრალოდ აირჩიეთ ის, რაც თქვენთვის შესაფერისია სამონტაჟო პაკეტიდა დააჭირეთ ღილაკს "ჩამოტვირთვა". ამავე საიტზე შეგიძლიათ ჩამოტვირთოთ Bootstrap 4-ის ალფა ვერსია.

მეორე გზა რა თქმა უნდა CDN-ის გამოყენებით. ასე რომ, ჩარჩოს უახლესი ვერსიების დასაკავშირებლად, თქვენ უნდა ჩასვათ შემდეგი ბმული:

თუ გჭირდებათ JavaScript-ის უფრო მცირე ვერსიის ჩართვა, დააკოპირეთ ეს ხაზი:

ისე, თემები დაკავშირებულია შემდეგნაირად:

რუსიფიცირებულ ვებსაიტზე შეგიძლიათ უყუროთ სასწავლო ვიდეოს ამ ჩარჩოს დაკავშირების შესახებ (http://mybootstrap.ru/video-obuchenie-twitter-bootstrap/).

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

პატივისცემით, რომან ჩუეშოვი

წაკითხულია: 213 ჯერ

რაიმე შეკითხვა?

სახელი

ელფოსტა *

შეტყობინება *

შეატყობინეთ შეცდომას

ტექსტი, რომელიც გაეგზავნება ჩვენს რედაქტორებს:

თქვენი კომენტარი (სურვილისამებრ):

გაგზავნა