Bootstrap 4- navigasiebalk
Navigasiebalke
'n Navigasiebalk is 'n navigasie-opskrif wat bo-aan die bladsy geplaas word:
Basiese Navbar
Met Bootstrap kan 'n navigasiebalk uitbrei of ineenvou, afhangende van die skermgrootte.
'n Standaard navigasiebalk word saam met die .navbar
klas geskep, gevolg deur 'n responsiewe ineenstortende klas: .navbar-expand-xl|lg|md|sm
(stapel die navigasiebalk vertikaal op ekstra groot, groot, medium of klein skerms).
Om skakels binne die navigasiebalk by te voeg, gebruik 'n <ul>element met class="navbar-nav". Voeg dan <li>elemente by 'n .nav-itemklas by, gevolg deur 'n <a>element met 'n .nav-linkklas:
Voorbeeld
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Vertikale navigasiebalk
Verwyder die .navbar-expand-xl|lg|md|smklas om 'n vertikale navigasiebalk te skep:
Voorbeeld
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Gesentreerde navigasiebalk
Voeg die .justify-content-centerklas by om die navigasiebalk te sentreer.
Die volgende voorbeeld sal die navigasiebalk op medium, groot en ekstra groot skerms sentreer. Op klein skerms sal dit vertikaal en linksbelyn vertoon word (as gevolg van die .navbar-expand-sm-klas):
Voorbeeld
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
Gekleurde navigasiebalk
Gebruik enige van die .bg-colorklasse om die agtergrondkleur van die navigasiebalk ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darken .bg-light) te verander
Wenk: Voeg 'n wit tekskleur by alle skakels in die navigasiebalk met die .navbar-darkklas, of gebruik die .navbar-lightklas om 'n
swart tekskleur by te voeg.
Voorbeeld
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link
disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
Aktiewe/gedeaktiveerde toestand : Voeg die .activeklas by 'n
<a>element om die huidige skakel uit te lig, of die .disabledklas om aan te dui dat die skakel ongeklikbaar is.
Handelsmerk / Logo
Die .navbar-brandklas word gebruik om die handelsmerk/logo/projeknaam van jou bladsy uit te lig:
Voorbeeld
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
Wanneer die .navbar-brandklas op prente gebruik word, sal Bootstrap 4 die prent outomaties styl om die navigasiebalk vertikaal te pas.
Voorbeeld
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
Vou die navigasiebalk in
Baie dikwels, veral op klein skerms, wil jy die navigasieskakels versteek en vervang met 'n knoppie wat dit moet openbaar wanneer daarop geklik word.
Om 'n opvoubare navigasiebalk te skep, gebruik 'n knoppie met . Draai dan die navigasiebalk-inhoud (skakels, ens.) binne 'n div-element met , gevolg deur 'n id wat ooreenstem met die van die knoppie: " thetarget ".class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
Voorbeeld
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
</ul>
</div>
</nav>
Wenk: Jy kan ook die .navbar-expand-md-klas verwyder om ALTYD navbar-skakels te versteek en die wisselknoppie te vertoon.
Navbalk met aftreklys
Navbars kan ook aftrekkieslys hou:
Voorbeeld
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
Navbar-vorms en -knoppies
Voeg 'n <form>element by class="form-inline"om insette en knoppies langs mekaar te groepeer:
Voorbeeld
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
Jy kan ook ander invoerklasse gebruik, soos .input-group-prependof .input-group-appendom 'n ikoon of hulpteks langs die invoerveld aan te heg. Jy sal meer oor hierdie klasse leer in die Bootstrap-insette hoofstuk.
Voorbeeld
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
Navbar teks
Gebruik die .navbar-textklas om enige elemente binne die navigasiebalk wat nie skakels is nie, vertikaal in lyn te bring (verseker behoorlike opvulling en tekskleur).
Voorbeeld
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--
Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
Vaste navigasiebalk
Die navigasiebalk kan ook bo- of onderaan die bladsy vasgemaak word.
'n Vaste navigasiebalk bly sigbaar in 'n vaste posisie (bo of onder) onafhanklik van die bladsyrol.
Die .fixed-topklas maak die navigasiebalk aan die bokant vas :
Voorbeeld
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Gebruik die .fixed-bottomklas om die navigasiebalk onderaan die bladsy te laat bly:
Voorbeeld
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>