בניית אתרים ושפות תכנות

קוד| לעשות קישור לאייקון Bootstrap dropdown with an icon

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

<div class="dropdown">    <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">      <i class="fa fa-cog"></i>    </button>    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">      <a class="dropdown-item" href="#">פעולה 1</a>      <a class="dropdown-item" href="#">פעולה 2</a>      <a class="dropdown-item" href="#">פעולה 3</a>    </div>  </div>

בדוגמא זו, אנו משתמשים בספריית האייקונים Font Awesome (<i class="fa fa-cog"></i>) כדי להוסיף סמל לכפתור הניווט של התפריט הנפתח. ניתן להחליף את זה בכל ספריית אייקונים אחרת או באייקון מותאם אישית.

התגית data-toggle="dropdown" על האלמנט של הכפתור מספרת ל-Bootstrap שזהו תפריט נפתח והתגיות aria-haspopup ו-aria-expanded מספקות מידע נגישות לקוראי מסך.

המחלקה dropdown-menu משמשת להגדרת פריטי התפריט הנפתח והמחלקה dropdown-item משמשת לעיצוב כל פריט.

לתשומת לבך, יהיה עליך לכלול את הקבצים המתאימים של CSS ו-JavaScript עבור Bootstrap וכל ספריית האייקונים הנוספת שאתה משתמש בה.

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *