Navbar
תיעוד ודוגמאות לכותרת הניווט העוצמתית והמגיבה של Bootstrap, ה-navbar. כולל תמיכה במיתוג, ניווט ועוד, כולל תמיכה בתוסף הכיווץ שלנו.
איך זה עובד
הנה מה שאתה צריך לדעת לפני שמתחילים עם סרגל הניווט:
- סרגלי Navbar דורשים עטיפה
.navbar
עם.navbar-expand{-sm|-md|-lg|-xl|-xxl}
עבור כיווץ רספונסיבי ושיעורי ערכת צבעים . - סרגלי הניווט והתוכן שלהם זורמים כברירת מחדל. שנה את המיכל כדי להגביל את הרוחב האופקי שלהם בדרכים שונות.
- השתמש במחלקות השירות של ריווח וגמישות שלנו לשליטה במרווחים ויישור בתוך סרגלי ניווט.
- סרגלי הניווט מגיבים כברירת מחדל, אך אתה יכול לשנות אותם בקלות כדי לשנות זאת. התנהגות תגובה תלויה בתוסף ה-Clapse JavaScript שלנו.
- הבטח נגישות על ידי שימוש
<nav>
ברכיב או, אם אתה משתמש ברכיב גנרי יותר כגון<div>
, הוסף arole="navigation"
לכל סרגל ניווט כדי לזהות אותו באופן מפורש כאזור ציון דרך עבור משתמשים בטכנולוגיות מסייעות. - ציין את הפריט הנוכחי באמצעות
aria-current="page"
עבור הדף הנוכחי אוaria-current="true"
עבור הפריט הנוכחי בסט.
prefers-reduced-motion
בשאילתת המדיה. עיין
בסעיף תנועה מופחתת בתיעוד הנגישות שלנו .
תוכן נתמך
סרגלי Navbar מגיעים עם תמיכה מובנית עבור קומץ רכיבי משנה. בחר מבין האפשרויות הבאות לפי הצורך:
.navbar-brand
עבור שם החברה, המוצר או הפרויקט שלך..navbar-nav
לניווט בגובה מלא וקל משקל (כולל תמיכה בתפריטים נפתחים)..navbar-toggler
לשימוש עם הפלאגין הכיווץ שלנו והתנהגויות חילופי ניווט אחרות.- כלי עזר להגמיש ומרווח עבור כל בקרות ופעולות של טופס.
.navbar-text
להוספת מחרוזות טקסט ממורכזות אנכית..collapse.navbar-collapse
לקיבוץ והסתרת תוכן סרגל הניווט לפי נקודת עצירה של אב.- הוסף אופציונלי
.navbar-scroll
להגדירmax-height
ולגלול תוכן סרגל ניווט מורחב .
הנה דוגמה לכל רכיבי המשנה הכלולים בסרגל ניווט מגיב לנושא אור שמתמוטט אוטומטית בנקודת הפריצה lg
(הגדולה).
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
דוגמה זו משתמשת במחלקות עזר ברקע ( bg-light
) וברווח ( my-2
, my-lg-0
, me-sm-0
, ).my-sm-0
מותג
ניתן .navbar-brand
להחיל את זה על רוב האלמנטים, אבל עוגן עובד הכי טוב, מכיוון שאלמנטים מסוימים עשויים לדרוש מחלקות שירות או סגנונות מותאמים אישית.
טֶקסט
הוסף את הטקסט שלך בתוך אלמנט עם .navbar-brand
הכיתה.
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>
תמונה
אתה יכול להחליף את הטקסט בתוך .navbar-brand
ב- <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
</a>
</div>
</nav>
תמונה וטקסט
אתה יכול גם לעשות שימוש בכמה כלי עזר נוספים כדי להוסיף תמונה וטקסט בו-זמנית. שים לב לתוספת של .d-inline-block
ועל .align-text-top
ה- <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>
Nav
קישורי ניווט של Navbar מתבססים על .nav
האפשרויות שלנו עם מחלקה משלהם ודורשים שימוש בשיעורי חילופין לעיצוב רספונסיבי נכון. הניווט בסרגלי הניווט גם יגדל ותתפוס מקום אופקי רב ככל האפשר כדי לשמור על תוכן סרגל הניווט שלך מיושר בצורה מאובטחת.
הוסף את .active
הכיתה .nav-link
כדי לציין את העמוד הנוכחי.
שים לב שאתה צריך גם להוסיף את aria-current
התכונה ב-active .nav-link
.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
ומכיוון שאנו משתמשים בשיעורים עבור הניווטים שלנו, אתה יכול להימנע לחלוטין מהגישה מבוססת הרשימות אם תרצה.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
</div>
</div>
</div>
</nav>
אתה יכול גם להשתמש בתפריטים נפתחים בסרגל הניווט שלך. תפריטים נפתחים דורשים רכיב גלישה למיקום, אז הקפידו להשתמש באלמנטים נפרדים ומקוננים עבור .nav-item
וכפי .nav-link
שמוצג להלן.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
טפסים
מקם פקדי טפסים ורכיבים שונים בתוך סרגל ניווט:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
אלמנטים צאצאים מיידיים של .navbar
שימוש מתגמשים בפריסה ויתנו כברירת מחדל justify-content: space-between
. השתמש בכלי שירות גמישים נוספים לפי הצורך כדי להתאים התנהגות זו.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
גם קבוצות קלט עובדות. אם סרגל הניווט שלך הוא טופס שלם, או בעיקר טופס, אתה יכול להשתמש <form>
באלמנט כמכיל ולשמור קצת HTML.
<nav class="navbar navbar-light bg-light">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
כפתורים שונים נתמכים גם כחלק מטפסי הניווט הללו. זו גם תזכורת נהדרת לכך שניתן להשתמש בכלי עזר ליישור אנכי כדי ליישר אלמנטים בגדלים שונים.
<nav class="navbar navbar-light bg-light">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
טֶקסט
סרגלי הניווט עשויים להכיל פיסות טקסט בעזרת .navbar-text
. מחלקה זו מתאימה את היישור האנכי והמרווח האופקי עבור מחרוזות טקסט.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
ערבבו והתאימו עם רכיבים וכלי עזר אחרים לפי הצורך.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</div>
</nav>
ערכות צבעים
עיצוב ה-navbar מעולם לא היה קל יותר הודות לשילוב של כיתות נושא וכלי background-color
עזר. בחר מתוך .navbar-light
לשימוש עם צבעי רקע בהירים, או .navbar-dark
עבור צבעי רקע כהים. לאחר מכן, התאם אישית עם .bg-*
כלי עזר.
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav>
מיכלים
למרות שזה לא חובה, אתה יכול לעטוף סרגל ניווט ב- .container
כדי למרכז אותו על דף - אם כי שים לב שעדיין נדרש מכולה פנימית. לחלופין, אתה יכול להוסיף מיכל בתוך .navbar
כדי למרכז רק את התוכן של סרגל ניווט עליון קבוע או סטטי .
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</div>
השתמש בכל אחד מהמכולות הרספונסיביות כדי לשנות את גודל התוכן בסרגל הניווט שלך.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
מיקום
השתמש בכלי השירות שלנו למיקום כדי למקם סרגלי ניווט במיקומים לא סטטיים. בחר בין קבוע לחלק העליון, קבוע לחלק התחתון, או דבוק לחלק העליון (גולל עם הדף עד שהוא מגיע לחלק העליון, ואז נשאר שם). סרגלי ניווט קבועים משתמשים ב- position: fixed
, כלומר הם נשלפים מהזרימה הרגילה של ה-DOM ועשויים לדרוש CSS מותאם אישית (למשל, padding-top
ב- <body>
) כדי למנוע חפיפה עם אלמנטים אחרים.
שים לב גם .sticky-top
שמשתמשים position: sticky
, שאינם נתמכים במלואם בכל דפדפן .
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav>
גְלִילָה
הוסף .navbar-nav-scroll
ל- .navbar-nav
(או רכיב משנה אחר של סרגל ניווט) כדי לאפשר גלילה אנכית בתוך התוכן הניתן להחלפה של סרגל ניווט מכווץ. כברירת מחדל, הגלילה מתחילה ב- 75vh
(או 75% מגובה נקודת התצוגה), אבל אתה יכול לעקוף זאת עם מאפיין ה-CSS המותאם אישית המקומי --bs-navbar-height
או סגנונות מותאמים אישית. ביציאות תצוגה גדולות יותר כאשר סרגל הניווט מורחב, תוכן יופיע כפי שהוא מופיע בסרגל ניווט ברירת מחדל.
שים לב שהתנהגות זו מגיעה עם חיסרון פוטנציאלי של overflow
-כאשר ההגדרה overflow-y: auto
(נדרש לגלול את התוכן כאן), overflow-x
היא המקבילה ל- auto
, אשר תחתוך חלק מהתוכן האופקי.
הנה דוגמה של סרגל ניווט המשתמש .navbar-nav-scroll
עם style="--bs-scroll-height: 100px;"
, עם כמה כלי עזר לשוליים נוספים עבור מרווח אופטימלי.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
התנהגויות רספונסיביות
סרגלי הניווט יכולים להשתמש ב- .navbar-toggler
, .navbar-collapse
, .navbar-expand{-sm|-md|-lg|-xl|-xxl}
ובשיעורים כדי לקבוע מתי התוכן שלהם מתמוטט מאחורי כפתור. בשילוב עם כלי עזר אחרים, אתה יכול בקלות לבחור מתי להציג או להסתיר אלמנטים מסוימים.
עבור סרגלי ניווט שלעולם אינם מתכווצים, הוסף את .navbar-expand
הכיתה בסרגל הניווט. עבור סרגלי ניווט שמתכווצים תמיד, אל תוסיף אף .navbar-expand
מחלקה.
מתחלף
החלפת מצבי Navbar מיושרים לשמאל כברירת מחדל, אבל אם הם עוקבים אחר אלמנט אח כמו .navbar-brand
, הם יתיישרו אוטומטית לקצה הימני. היפוך הסימון שלך יהפוך את המיקום של הבורר. להלן דוגמאות לסגנונות החלפה שונים.
ללא .navbar-brand
תצוגה בנקודת השבירה הקטנה ביותר:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
עם שם מותג שמוצג בצד שמאל וחילופין בצד ימין:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
עם מתג משמאל ושם מותג מימין:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
תוכן חיצוני
לפעמים אתה רוצה להשתמש בתוסף הכיווץ כדי להפעיל רכיב מכיל עבור תוכן שנמצא מבנית מחוץ ל- .navbar
. מכיוון שהתוסף שלנו עובד על התואם, זה נעשה בקלות id
!data-bs-target
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
כאשר אתה עושה זאת, אנו ממליצים לכלול JavaScript נוסף כדי להעביר את הפוקוס באופן תכנותי אל המכולה כאשר הוא נפתח. אחרת, סביר להניח שמשתמשי מקלדת ומשתמשים בטכנולוגיות מסייעות יתקשו למצוא את התוכן החדש שנחשף - במיוחד אם המכולה שנפתחה מגיעה לפני המתג במבנה המסמך. כמו כן, אנו ממליצים לוודא שלמחליף יש את aria-controls
התכונה, המצביע על id
של מיכל התוכן. בתיאוריה, זה מאפשר למשתמשי טכנולוגיה מסייעת לקפוץ ישירות מהמתג אל המיכל שעליו הוא שולט - אך התמיכה בכך היא כרגע די חלקית.
Offcanvas
הפוך את סרגל הניווט המתרחב והמתכווץ שלך למגירת offcanvas עם הפלאגין offcanvas. אנו מרחיבים את שני סגנונות ברירת המחדל offcanvas ומשתמשים .navbar-expand-*
בשיעורים שלנו כדי ליצור סרגל צד דינמי וגמיש לניווט.
בדוגמה שלמטה, כדי ליצור סרגל ניווט מחוץ לקנבס שמכווץ תמיד על פני כל נקודות השבירה, השמיט את .navbar-expand-*
המחלקה לחלוטין.
<nav class="navbar navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>
כדי ליצור סרגל ניווט מחוץ לקנבס שמתרחב לסרגל ניווט רגיל בנקודת עצירה מסוימת כמו lg
, השתמש ב .navbar-expand-lg
.
<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
...
</div>
</nav>
סאס
משתנים
$navbar-padding-y: $spacer * .5;
$navbar-padding-x: null;
$navbar-nav-link-padding-x: .5rem;
$navbar-brand-font-size: $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end: 1rem;
$navbar-toggler-padding-y: .25rem;
$navbar-toggler-padding-x: .75rem;
$navbar-toggler-font-size: $font-size-lg;
$navbar-toggler-border-radius: $btn-border-radius;
$navbar-toggler-focus-width: $btn-focus-width;
$navbar-toggler-transition: box-shadow .15s ease-in-out;
$navbar-dark-color: rgba($white, .55);
$navbar-dark-hover-color: rgba($white, .75);
$navbar-dark-active-color: $white;
$navbar-dark-disabled-color: rgba($white, .25);
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color: rgba($white, .1);
$navbar-light-color: rgba($black, .55);
$navbar-light-hover-color: rgba($black, .7);
$navbar-light-active-color: rgba($black, .9);
$navbar-light-disabled-color: rgba($black, .3);
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color: $navbar-light-active-color;
$navbar-light-brand-hover-color: $navbar-light-active-color;
$navbar-dark-brand-color: $navbar-dark-active-color;
$navbar-dark-brand-hover-color: $navbar-dark-active-color;
לוּלָאָה
מחלקות הרחבה/כיווץ של סרגל ניווט רספונסיבי (למשל, .navbar-expand-lg
) משולבות עם $breakpoints
המפה ומיוצרות באמצעות לולאה ב- scss/_navbar.scss
.
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} {
@include media-breakpoint-up($next) {
flex-wrap: nowrap;
justify-content: flex-start;
.navbar-nav {
flex-direction: row;
.dropdown-menu {
position: absolute;
}
.nav-link {
padding-right: $navbar-nav-link-padding-x;
padding-left: $navbar-nav-link-padding-x;
}
}
.navbar-nav-scroll {
overflow: visible;
}
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
flex-basis: auto;
}
.navbar-toggler {
display: none;
}
.offcanvas-header {
display: none;
}
.offcanvas {
position: inherit;
bottom: 0;
z-index: 1000;
flex-grow: 1;
visibility: visible !important; // stylelint-disable-line declaration-no-important
background-color: transparent;
border-right: 0;
border-left: 0;
@include transition(none);
transform: none;
}
.offcanvas-top,
.offcanvas-bottom {
height: auto;
border-top: 0;
border-bottom: 0;
}
.offcanvas-body {
display: flex;
flex-grow: 0;
padding: 0;
overflow-y: visible;
}
}
}
}
}