עמודות

למד כיצד לשנות עמודות עם קומץ אפשרויות ליישור, הזמנה וקיזוז הודות למערכת ה-flexbox שלנו. בנוסף, ראה כיצד להשתמש במחלקות עמודות כדי לנהל רוחב של אלמנטים שאינם רשת.

בעמוד זה

שימו לב! הקפד לקרוא תחילה את דף הרשת לפני שאתה צולל כיצד לשנות ולהתאים אישית את עמודות הרשת שלך.

איך הם עובדים

עמודות מבוססות על ארכיטקטורת ה-flexbox של הרשת. Flexbox אומר שיש לנו אפשרויות לשנות עמודות בודדות ולשנות קבוצות של עמודות ברמת השורה . אתה בוחר כיצד עמודות גדלות, מתכווצות או משתנות בדרך אחרת.
בעת בניית פריסות רשת, כל התוכן עובר בעמודות. ההיררכיה של הרשת של Bootstrap עוברת ממיכל לשורה לעמודה לתוכן שלך. במקרים נדירים, אתה עשוי לשלב תוכן וטור, אך שים לב שיכולות להיות השלכות לא מכוונות.
Bootstrap כולל מחלקות מוגדרות מראש ליצירת פריסות מהירות ומגיבות. עם שש נקודות שבירה ותריסר עמודות בכל שכבת רשת, יש לנו עשרות מחלקות שכבר נבנו עבורך כדי ליצור את הפריסות הרצויות שלך. ניתן להשבית זאת באמצעות Sass אם תרצה.

יישור

השתמש בכלי עזר ליישור flexbox ליישור עמודות אנכית ואופקית.

יישור אנכי

אחד משלושת העמודות

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 עמודות ממוקמות בשורה בודדת, כל קבוצה של עמודות נוספות תתגלגל, כיחידה אחת, על שורה חדשה.

.col-9

.col-4
מאז 9 + 4 = 13 > 12, div זה ברוחב 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>

כלי עזר לשוליים

עם המעבר ל-flexbox ב-v4, אתה יכול להשתמש בכלי עזר לשוליים כמו .me-autoלהרחיק עמודות אחים אחת מהשנייה.

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-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% מעל נקודת השבירה של sm

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>