עמודות
למד כיצד לשנות עמודות עם קומץ אפשרויות ליישור, הזמנה וקיזוז הודות למערכת ה-flexbox שלנו. בנוסף, ראה כיצד להשתמש במחלקות עמודות כדי לנהל רוחב של אלמנטים שאינם רשת.
איך הם עובדים
-
עמודות מבוססות על ארכיטקטורת ה-flexbox של הרשת. Flexbox אומר שיש לנו אפשרויות לשנות עמודות בודדות ולשנות קבוצות של עמודות ברמת השורה . אתה בוחר כיצד עמודות גדלות, מתכווצות או משתנות בדרך אחרת.
-
בעת בניית פריסות רשת, כל התוכן עובר בעמודות. ההיררכיה של הרשת של Bootstrap עוברת ממיכל לשורה לעמודה לתוכן שלך. במקרים נדירים, אתה עשוי לשלב תוכן וטור, אך שים לב שיכולות להיות השלכות לא מכוונות.
-
Bootstrap כולל מחלקות מוגדרות מראש ליצירת פריסות מהירות ומגיבות. עם שש נקודות שבירה ותריסר עמודות בכל שכבת רשת, יש לנו עשרות מחלקות שכבר נבנו עבורך כדי ליצור את הפריסות הרצויות לך. ניתן להשבית זאת באמצעות Sass אם תרצה.
יישור
השתמש בכלי עזר ליישור flexbox ליישור עמודות אנכית ואופקית.
יישור אנכי
<div class="container">
<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>
<div class="container">
<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>
יישור אופקי
<div class="container">
<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 + 4 = 13 > 12, div זה ברוחב 4 עמודות נכרך על שורה חדשה כיחידה אחת רציפה.
העמודות הבאות ממשיכות לאורך הקו החדש.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 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%
היכן שתרצה לעטוף את העמודות שלך לשורה חדשה. בדרך כלל זה מושג עם מספר .row
s, אבל לא כל שיטת יישום יכולה להסביר זאת.
<div class="container">
<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>
אתה יכול גם להחיל הפסקה זו בנקודות שבירה ספציפיות עם כלי העזר לתצוגה הרספונסיבית שלנו .
<div class="container">
<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
כל ששת שכבות הרשת.
<div class="container">
<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-*
הכיתות הממוספרות לפי הצורך.
<div class="container">
<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
על פני ארבע עמודות.
<div class="container">
<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>
בנוסף לניקוי העמודות בנקודות שבירה מגיבות, ייתכן שיהיה עליך לאפס קיזוז. ראה זאת בפעולה בדוגמה של הרשת .
<div class="container">
<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
להרחיק עמודות אחים אחת מהשנייה.
<div class="container">
<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
כדי לתת לאלמנט רוחב ספציפי. בכל פעם שמחלקות עמודות משמשות בתור ילדים לא ישירים של שורה, הריפודים מושמטים.
<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. אנו מוסיפים כאן לא מעט ביטויים חסרי משמעות כדי להדגים כיצד העמודות מתקשרות כאן עם התמונה המרחפת.
כפי שניתן לראות, הפסקאות עוטפות בחן את התמונה המרחפת. עכשיו תארו לעצמכם איך זה ייראה עם תוכן ממשי כאן, ולא רק הטקסט המשעמם הזה של מציין מיקום שנמשך ונמשך, אבל למעשה לא מעביר מידע מוחשי. זה פשוט תופס מקום ולא באמת צריך לקרוא אותו.
ובכל זאת, הנה, אתה עדיין מתמיד בקריאת טקסט מציין המקום הזה, מקווה לעוד תובנות, או לאיזו ביצת פסחא נסתרת של תוכן. בדיחה, אולי. למרבה הצער, אין שום דבר מזה כאן.
<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>