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

ბადის ძირითადი განლაგება, რათა გაეცნოთ მშენებლობას Bootstrap ქსელის სისტემაში.

სამი თანაბარი სვეტი

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

.col-md-4
.col-md-4
.col-md-4

სამი არათანაბარი სვეტი

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

.col-md-3
.col-md-6
.col-md-3

ორი სვეტი

მიიღეთ ორი სვეტი დაწყებული დესკტოპიდან და სკალირება დიდ სამუშაო მაგიდამდე .

.col-md-8
.col-md-4

სრული სიგანე, ერთი სვეტი

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

ორი სვეტი ორი ჩადგმული სვეტით

დოკუმენტაციის მიხედვით, ბუდე მარტივია - უბრალოდ განათავსეთ სვეტების მწკრივი არსებულ სვეტში. ეს გაძლევთ ორ სვეტს , დაწყებული სამუშაო მაგიდადან და მასშტაბირება დიდ სამუშაო მაგიდამდე , კიდევ ორი ​​(ტოლი სიგანე) უფრო დიდი სვეტის ფარგლებში.

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

.col-md-8
.col-md-6
.col-md-6
.col-md-4

შერეული: მობილური და დესკტოპ

Bootstrap 3 ქსელის სისტემას აქვს კლასების ოთხი დონე: xs (ტელეფონები), sm (ტაბლეტები), md (დესკტოპები) და lg (უფრო დიდი დესკტოპები). თქვენ შეგიძლიათ გამოიყენოთ ამ კლასების თითქმის ნებისმიერი კომბინაცია უფრო დინამიური და მოქნილი განლაგების შესაქმნელად.

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

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

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

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

სვეტის გასუფთავება

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

.col-xs-6 .col-sm-3 შეცვალეთ
თქვენი ხედის ზომა ან შეამოწმეთ იგი თქვენს ტელეფონზე, მაგალითად.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

ოფსეტური, დაძაბვა და გაყვანის გადატვირთვა

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

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0