Bootstrap 5.3.0: ביטול נעילת התכונות החדשות המרגשות שלו

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

החלפת מצב כהה

אחד הראויים לציון תוספות Bootstrap 5.3.0 הוא מתג עבור מצב כהה. החלפת מצב זה מאפשרת למשתמשי האתר שלך לעבור ללא מאמץ בין מצבי אור לחושך, ומאפשרת שימוש חלק באתר או באפליקציה שלך בתנאי תאורה שונים.

כדי להשתמש בתכונה זו, פשוט הוסף את data-bs-toggle="dark-mode" תכונה לכל כפתור או רכיב קישור.

הנה דוגמה:

<לַחְצָןסוּג="לַחְצָן"מעמד="btn btn-primary"data-bs-toggle="מצב כהה">
 החלף מצב כהה
לַחְצָן>

כלי עזר לקנה מידה של גופנים

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

אתה יכול להשתמש בכלי עזר אלה בשילוב עם שיעורי טיפוגרפיה אחרים של Bootstrap כדי להשיג טיפוגרפיה ניתנת להרחבה ועקבית ברחבי האתר או היישום שלך.

להלן מספר דוגמאות כיצד ניתן להשתמש בכלי השירות לקנה מידה של גופנים:

<עמעמד="fs-1">זהו גודל הגופן הגדול ביותרע>
<עמעמד="fs-2">זהו גודל גופן מעט קטן יותרע>
<עמעמד="fs-3">זהו גודל גופן בינוניע>
<עמעמד="fs-4">זהו גודל גופן קטןע>
<עמעמד="fs-5">זהו גודל הגופן הקטן ביותרע>

מרזב כלי עזר

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

להלן דוגמה לאופן שבו אתה יכול להשתמש בכלי השירות למרזב:

<divמעמד="שורה gx-3">
<divמעמד="קול">עמודה 1div>
<divמעמד="קול">עמודה 2div>
div>

דוגמה זו משתמשת ב- gx-3 מחלקה להוסיף מרזב של 3 יחידות (או 1.5 רם) בין שני העמודות.

בקרות טופס מעודכנות

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

תיבות סימון ולחצני רדיו

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

הנה דוגמה לאופן שבו אתה יכול להשתמש בסגנונות החדשים של תיבת הסימון:

<divמעמד="בדיקת טופס">
<קֶלֶטמעמד="טופס-בדיקת קלט"סוּג="תיבת סימון"ערך=""תְעוּדַת זֶהוּת="צ'ק1">
<תוויתמעמד="טופס-בדוק-תווית"ל="צ'ק1">תיבת סימון ברירת מחדלתווית>
div>

והנה דוגמה לאופן שבו אתה יכול להשתמש בסגנונות לחצני הבחירה החדשים:

<divמעמד="בדיקת טופס">
<קֶלֶטמעמד="טופס-בדיקת קלט"סוּג="רָדִיוֹ"שֵׁם="רדיו לדוגמה"תְעוּדַת זֶהוּת="רדיו1"ערך="אופציה 1">
<תוויתמעמד="טופס-בדוק-תווית"ל="רדיו1"> אופציה 1 תווית>
div>

שימו לב כיצד סימון זה משתמש ב- .form-check-input class כדי לעצב את רכיב הקלט עצמו, ואת .form-check-label כיתה כדי לעצב את התווית.

בחר תיבות

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

הנה דוגמה לאופן שבו אתה יכול להשתמש בסגנונות הבחירה החדשים:

<בחרמעמד="בחר טופס"aria-label="דוגמה לבחירת ברירת מחדל">
<אוֹפְּצִיָהנבחר>פתח את תפריט הבחירה הזהאוֹפְּצִיָה>
<אוֹפְּצִיָהערך="1">אחדאוֹפְּצִיָה>
<אוֹפְּצִיָהערך="2">שתייםאוֹפְּצִיָה>
<אוֹפְּצִיָהערך="3">שְׁלוֹשָׁהאוֹפְּצִיָה>
בחר>

שימו לב כיצד תוכלו להשתמש ב- .form-select class לסגנון תיבת הבחירה עצמה.

משוב אימות

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

הנה דוגמה לאופן שבו אתה יכול להשתמש בסגנונות האימות החדשים:

<divמעמד="טופס-קבוצה">
<תוויתל="exampleInputPassword1">סיסמהתווית>
<קֶלֶטסוּג="סיסמה"מעמד="פקד-טופס אינו חוקי"תְעוּדַת זֶהוּת="exampleInputPassword1"מציין מיקום="סיסמה"נדרש>
<divמעמד="משוב לא חוקי"> אנא ספק סיסמה חוקית. div>
div>

שימו לב איך ה .לא תקף class מציין ששדה הקלט אינו חוקי, וה- .invalid-feedback הכיתה מציגה הודעה למשתמש.

עם הסגנונות החדשים האלה, קל יותר מאי פעם ליצור טפסים נגישים ועקביים עבור האתר או האפליקציה שלך.

שיפורים מרגשים ב-Bootstrap 5.3.0

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