מאמר זה ינחה אותך:
- איך ליצור כפתורים ב-Bootstrap?
- כיצד ליצור כפתורי Outline ב-Bootstrap?
- כיצד להתאים את גדלי כפתורי Bootstrap?
- כיצד ליצור כפתור ברמת בלוק ב-Bootstrap?
- כיצד ליצור כפתורי מצב פעיל ב-Bootstrap?
- כיצד ליצור כפתורי מצב מושבתים ב-Bootstrap?
איך ליצור כפתורים ב-Bootstrap?
The Bootstrap' btn 'מחלקה משמשת ליצירת כפתורים. כדי להוסיף כפתורים מעוצבים, אתה יכול להשתמש ב-' btn ' מחלקה עם מחלקת הצבע, כגון ' btn-הצלחה ' כדי ליצור כפתור ירוק.
ב-HTML, ה' <כפתור> ', ' ', ו' <קלט> ' תגים עם הסוג ' לַחְצָן 'משמשים ליצירת כפתורים. ה ' btn לכיתה יש עיצוב מוגדר מראש שמוסיף עיצוב בסיסי לרכיבי הכפתור.
לקבלת מושג ברור, עיין בדוגמה למטה.
דוגמא
בקובץ ה-HTML, בצע את השלבים ליצירת לחצנים באמצעות תגים שונים:
- הוסף ' <כפתור> 'ו' ' אלמנטים ולהקצות אותם ' btn 'ו' btn-primary 'שיעורים.
- לאחר מכן, הוסף ' <קלט> ' תג עם הסוג ' לַחְצָן '. הקצה לו את ' btn 'ו' btn-הצלחה ' לעיצוב כשני הכפתורים הראשונים כחולים, והשלישי כירוק:
< א מעמד = 'btn btn-primary' href = '#' > לִפְתוֹחַ < / א >
< קֶלֶט סוּג = 'לַחְצָן' מעמד = 'btn btn-הצלחה' ערך = 'לחפש' >
תְפוּקָה
כיצד ליצור כפתורי Outline ב-Bootstrap?
כדי להוסיף קווי מתאר לחצנים, ה- Bootstrap ' btn-outline-* 'מחלקה משמשת. בתחביר שלו,' * ' כאן מייצג את צבע המתאר. לדוגמה, ' btn-outline-danger ' מציב את הקו האדום, ' btn-outline-primary ' קובע את המתאר הכחול, ועוד.
נתח את הקוד המופיע להלן:
< לַחְצָן סוּג = 'לַחְצָן' מעמד = 'btn btn-outline-primary' >הבא< / לַחְצָן >< לַחְצָן סוּג = 'לַחְצָן' מעמד = 'btn btn-outline-danger' >בטל< / לַחְצָן >
< לַחְצָן סוּג = 'לַחְצָן' מעמד = 'btn btn-outline-success' >הצלחה< / לַחְצָן >
ניתן להבחין כי ' הַבָּא לחצן ' יש קו מתאר כחול, ' לְבַטֵל לחצן ' עם קו מתאר אדום, וה' הַצלָחָה כפתור ' עוצב עם קו מתאר ירוק:
כיצד להתאים את גדלי כפתורי Bootstrap?
חלק משיעורי Bootstrap מיושמים כדי להתאים את גדלי הכפתורים, כגון:
- ' btn-lg מחלקה מוחלת כדי ליצור כפתור גדול. מחלקה זו יכולה להגדיל את גודל הגופן והריפוד.
- ' btn-md 'יוצר כפתור בגודל בינוני.
- ' btn-sm 'יוצר כפתור קטן.
דוגמא
כעת, ניצור שלושה כפתורים עם גדלים שונים ושמות מובנים מאליהם:
< לַחְצָן סוּג = 'לַחְצָן' מעמד = 'btn btn-secondary btn-lg' >גדול< / לַחְצָן >< לַחְצָן סוּג = 'לַחְצָן' מעמד = 'btn btn-אזהרה btn-md' >בינוני< / לַחְצָן >
< לַחְצָן סוּג = 'לַחְצָן' מעמד = 'btn btn-danger btn-sm' >קטן< / לַחְצָן >
תְפוּקָה
כיצד ליצור כפתור ברמת בלוק ב-Bootstrap?
הכפתורים ברמת הבלוק הם אלה שמחזיקים את הגודל ברוחב המלא. כדי ליצור את הכפתורים ברמת הבלוק, ' btn-block 'מחלקה מנוצלת באופן הבא
< לַחְצָן סוּג = 'לַחְצָן' מעמד = 'btn btn-warning btn-block' > כפתור< / לַחְצָן >< לַחְצָן סוּג = 'לַחְצָן' מעמד = 'btn btn-בלוק משני btn' >כפתור< / לַחְצָן >
תְפוּקָה
כיצד ליצור כפתורי מצב פעיל ב-Bootstrap?
לחצני המצב הפעיל מתייחסים ללחצנים הפעילים כעת. הכפתורים האלה מעט כהים מהרגיל. כדי ליצור כפתורים כאלה, ה- Bootstrap ' פָּעִיל 'מחלקה מנוצלת.
דוגמא
הקוד שלהלן יוצר שני כפתורים. הראשון נמצא במצב רגיל ואילו השני מוחל עם ' פָּעִיל ' מעמד:
< לַחְצָן סוּג = 'לַחְצָן' מעמד = 'btn btn-הצלחה' >הצלחה< / לַחְצָן >< לַחְצָן סוּג = 'לַחְצָן' מעמד = 'btn btn-success פעיל' >הצלחה< / לַחְצָן >
תְפוּקָה
כיצד ליצור כפתורי מצב מושבתים ב-Bootstrap?
לחצני המצב המושבת מתייחסים ללחצנים שאינם ניתנים ללחוץ ואינם ניתנים לשימוש. ב-Bootstrap, ה' נָכֶה 'מחלקה משמשת ליצירת כפתור מצב מושבת. ה ' נָכֶה ניתן להשתמש בתכונה ' גם למטרה זו.
דוגמא
בדוק את הדוגמה המופיעה להלן:
- הכפתור הראשון אינו במצב מושבת.
- השני משתמש ב' נָכֶה ' מחלקה כדי ליצור כפתור מצב מושבת.
- השלישי משתמש ב-' נָכֶה ' תכונה:
< לַחְצָן סוּג = 'לַחְצָן' מעמד = 'btn btn-success מושבת' >הצלחה< / לַחְצָן >
< לַחְצָן סוּג = 'לַחְצָן' מעמד = 'btn btn-הצלחה' disabled>הצלחה< / לַחְצָן >
תְפוּקָה
כיסינו היבטים שונים הקשורים לכפתורי Bootstrap והסגנון שלהם ב-CSS.
סיכום
ה ' btn מחלקה משמשת ליצירת כפתורי Bootstrap בעיצוב פשוט. כדי ליצור כפתורים צבעוניים וקווי מתאר, ' btn-* 'ו' btn-outline-* 'מחלקות משמשות כאשר ' * ' מסמל כל מעמד צבע. לדוגמה, ' אזהרת btn 'יוצר כפתור צהוב, ' btn-outline-warning 'יוצר כפתור צהוב עם קווי מתאר ועוד רבים נוספים. כדי להפוך את הלחצנים לפעילים או מושבתים, מחלקים 'פעיל' ו'מושבת' מיושמים, בהתאמה. פוסט זה סיפק מדריך מקיף על כפתורי Bootstrap.