in English

Სვეტები

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

ამ გვერდზე

Თავები მაღლა! დარწმუნდით, რომ ჯერ წაიკითხეთ Grid-ის გვერდი , სანამ დაიწყებთ იმის გარკვევას, თუ როგორ შეცვალოთ და დააკონფიგურიროთ თქვენი ბადის სვეტები.

როგორ მუშაობენ

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

გასწორება

გამოიყენეთ flexbox alignment utilities სვეტების ვერტიკალურად და ჰორიზონტალურად გასწორებისთვის.

ვერტიკალური განლაგება

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

html

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

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

html

<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

ჰორიზონტალური განლაგება

ორი სვეტიდან ერთი

html

<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

სვეტის შეფუთვა

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

.კოლ-9

.col-4
მას შემდეგ, რაც 9 + 4 = 13 > 12, ეს 4-სვეტიანი დივი ხვდება ახალ ხაზზე, როგორც ერთი მომიჯნავე ერთეული.

.col-6 შემდეგი
სვეტები გრძელდება ახალი ხაზის გასწვრივ.

html

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

სვეტი იშლება

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

.col-6 .col-sm-3

html

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

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

.col-6 .col-sm-4

html

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

ხელახლა შეკვეთა

შეუკვეთეთ კლასები

გამოიყენეთ .order-კლასები თქვენი შინაარსის ვიზუალური წესრიგის გასაკონტროლებლად. ეს კლასები რეაგირებს, ასე რომ თქვენ შეგიძლიათ დააყენოთ orderწყვეტის წერტილი (მაგ., .order-1.order-md-2). მოიცავს მხარდაჭერას 1ექვსივე 5ბადის დონიდან.

ჯერ DOM-ში, შეკვეთა არ გამოქვეყნებულა

მეორე DOM-ში, უფრო დიდი შეკვეთით

მესამე DOM-ში, 1-ის შეკვეთით

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

ასევე არის საპასუხო .order-firstდა .order-lastკლასები, რომლებიც ცვლის orderელემენტის მახასიათებლებს order: -1და order: 6შესაბამისად. ეს კლასები ასევე შეიძლება შერეული იყოს დანომრილ .order-*კლასებთან საჭიროებისამებრ.

პირველი DOM-ში, შეკვეთილი ბოლოს

მეორე DOM-ში, შეუკვეთავი

მესამე DOM-ში, შეკვეთილი პირველი

html

<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

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

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

ოფსეტური კლასები

გადაიტანეთ სვეტები მარჯვნივ .offset-md-*კლასების გამოყენებით. ეს კლასები ზრდის სვეტის მარცხენა ზღვარს *სვეტების მიხედვით. მაგალითად, .offset-md-4მოძრაობს .col-md-4ოთხ სვეტზე.

.col-md-4

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

.col-md-3 .offset-md-3

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

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

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

.col-sm-5 .col-md-6

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

.col-sm-6 .col-md-5 .col-lg-6

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

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

მარჟის კომუნალური საშუალებები

v4-ში flexbox-ზე გადასვლისას შეგიძლიათ გამოიყენოთ ზღვრული უტილიტები, როგორიცაა ძმების .me-autoსვეტების დაშორება ერთმანეთისგან.

.col-md-4

.col-md-4 .ms-ავტო

.col-md-3 .ms-md-auto

.კოლ-ავტო .მე-ავტო

.კოლ-ავტო

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

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

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

.col-3: სიგანე 25%

.col-sm-9: სიგანე 75% სმ წყვეტის წერტილის ზემოთ

html

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

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

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

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

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

html

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>