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

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

ამ მაგალითებში .themed-grid-colკლასი ემატება სვეტებს თემის დასამატებლად. ეს არ არის კლასი, რომელიც ხელმისაწვდომია Bootstrap-ში ნაგულისხმევად.

ხუთი ბადე იარუსი

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

.კოლ-4
.კოლ-4
.კოლ-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

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

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

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

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

კლასების გამოყენებით .row-cols-*, თქვენ შეგიძლიათ მარტივად შექმნათ ბადე თანაბარი სვეტებით.

.colშვილის .row-cols-md-3
.colშვილის .row-cols-md-3
.colშვილის .row-cols-md-3

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

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

.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 v5 ქსელის სისტემას აქვს კლასების ექვსი დონე: xs (ზედმეტად პატარა, ამ კლასის ინფიქსი არ გამოიყენება), sm (პატარა), md (საშუალო), lg (დიდი), xl (x-დიდი) და xxl (xx). - დიდი). თქვენ შეგიძლიათ გამოიყენოთ ამ კლასების თითქმის ნებისმიერი კომბინაცია უფრო დინამიური და მოქნილი განლაგების შესაქმნელად.

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

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.კოლ-6
.კოლ-6

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

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

ღარები

კლასებით .gx-*, ჰორიზონტალური ღარები შეიძლება მორგებული იყოს.

.col.gx-4ღარებითა _
.col.gx-4ღარებითა _
.col.gx-4ღარებითა _
.col.gx-4ღარებითა _
.col.gx-4ღარებითა _
.col.gx-4ღარებითა _

გამოიყენეთ .gy-*კლასები ვერტიკალური ღარების გასაკონტროლებლად.

.col.gy-4ღარებითა _
.col.gy-4ღარებითა _
.col.gy-4ღარებითა _
.col.gy-4ღარებითა _
.col.gy-4ღარებითა _
.col.gy-4ღარებითა _

კლასებით .g-*, ღარები ორივე მიმართულებით შეიძლება მორგებული იყოს.

.col.g-3ღარებითა _
.col.g-3ღარებითა _
.col.g-3ღარებითა _
.col.g-3ღარებითა _
.col.g-3ღარებითა _
.col.g-3ღარებითა _

კონტეინერები

Bootstrap v4.4-ში დამატებული დამატებითი კლასები საშუალებას აძლევს კონტეინერებს, რომლებიც 100% სიგანეა კონკრეტულ წყვეტამდე. v5 ამატებს ახალ xxlწყვეტის წერტილს.

.კონტეინერი
.კონტეინერი-სმ
.კონტეინერი-მდ
.კონტეინერი-ლგ
.კონტეინერი-xl
.კონტეინერი-xxl
.კონტეინერი-სითხე