Bootstrap 4 Navigation Bar
လမ်းကြောင်းပြဘားများ
လမ်းကြောင်းပြဘားသည် စာမျက်နှာ၏ထိပ်တွင် ချထားသော လမ်းညွှန်ချက်ခေါင်းစီးတစ်ခုဖြစ်သည်-
အခြေခံ Navbar
Bootstrap ဖြင့်၊ မျက်နှာပြင်အရွယ်အစားပေါ် မူတည်၍ လမ်းကြောင်းပြဘားသည် တိုးချဲ့ သို့မဟုတ် ပြိုကျနိုင်သည်။
စံညွှန်းဘားကို .navbar
အတန်းနှင့်အတူ ဖန်တီးထားပြီး၊ နောက်တွင် တုံ့ပြန်မှုပြိုကျသည့် အတန်းအစား .navbar-expand-xl|lg|md|sm
(navbar ကို ပိုကြီး၊ ကြီး၊ အလတ် သို့မဟုတ် အသေးစခရင်များတွင် ဒေါင်လိုက်တန်းစီသည်)။
navbar အတွင်းရှိ လင့်ခ်များထည့်ရန်၊ ပါသည့် <ul>အစိတ်အပိုင်းတစ်ခုကို အသုံးပြုပါ class="navbar-nav"။ ထို့နောက် class တစ်ခုနှင့် element တစ်ခု နောက်တွင် class တစ်ခုနှင့် element <li>တစ်ခု ထည့်ပါ -.nav-item<a>.nav-link
ဥပမာ
<!-- 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>
ဒေါင်လိုက် Navbar
.navbar-expand-xl|lg|md|smဒေါင်လိုက်လမ်းညွှန်ဘားတစ်ခု ဖန်တီးရန် အတန်းကို ဖယ်ရှားပါ -
ဥပမာ
<!-- 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>
Navbar ကို ဗဟိုပြုသည်။
.justify-content-centerလမ်းညွှန်ဘားကို ဗဟိုပြုရန် အတန်းကို ထည့်ပါ ။
အောက်ဖော်ပြပါ ဥပမာသည် အလတ်စား၊ အကြီးနှင့် ပိုကြီးသော စခရင်များတွင် လမ်းညွှန်ဘားကို ဗဟိုပြုပါမည်။ သေးငယ်သော ဖန်သားပြင်များတွင် ၎င်းကို ဒေါင်လိုက်နှင့် ဘယ်သို့ ညှိထားသည်ကို ပြသလိမ့်မည် ( .navbar-expand-sm အတန်းဖြစ်သောကြောင့်)
ဥပမာ
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
ရောင်စုံ Navbar
navbar ( , , , , , , နှင့် ) .bg-color၏ နောက်ခံအရောင်ကို ပြောင်းလဲရန် အတန်း များထဲမှ တစ်ခုခုကို သုံးပါ ။.bg-primary
.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark.bg-light
အကြံပြုချက်- အတန်း နှင့် navbar ရှိ လင့်များအားလုံးတွင် အဖြူရောင် စာသားအရောင်ကို ထည့် ပါ .navbar-darkသို့မဟုတ် အနက်ရောင် စာသားအရောင် .navbar-lightထည့်ရန် အတန်းကို
အသုံးပြုပါ။
ဥပမာ
<!-- 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>
Active/disabled state : လက်ရှိလင့်ခ်ကို မီးမောင်းထိုးပြရန် .activeအတန်းကို
ဒြပ်စင်တစ်ခုသို့ ပေါင်းထည့်ပါ သို့မဟုတ် လင့်ခ်သည် ကလစ်မရနိုင်ကြောင်း ညွှန်ပြရန် အတန်းအစား။<a>.disabled
အမှတ်တံဆိပ်/လိုဂို
သင့်စာမျက်နှာ ၏ .navbar-brandအမှတ်တံဆိပ်/လိုဂို/ပရောဂျက်အမည်ကို မီးမောင်းထိုးပြရန် အတန်းကို အသုံးပြုသည်-
ဥပမာ
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
ပုံများပေါ်ရှိ class ကိုအသုံးပြုသောအခါ .navbar-brand၊ Bootstrap 4 သည် navbar ကို ဒေါင်လိုက်လိုက်ဖက်စေရန် ပုံအား အလိုအလျောက် ပုံစံသတ်မှတ်ပေးလိမ့်မည်။
ဥပမာ
<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>
Navigation Bar ကို ပြိုကျခြင်း။
အထူးသဖြင့် သေးငယ်သော ဖန်သားပြင်များတွင် မကြာခဏဆိုသလို၊ သင်သည် လမ်းကြောင်းပြလင့်ခ်များကို ဝှက်ထားကာ ၎င်းတို့ကို နှိပ်သည့်အခါ ၎င်းတို့ကို ဖော်ပြသင့်သည့် ခလုတ်တစ်ခုဖြင့် အစားထိုးလိုပါသည်။
တွဲ၍ရနိုင်သော လမ်းညွှန်ဘားတစ်ခု ဖန်တီးရန်၊ ခလုတ်တစ်ခုကို အသုံးပြုပါ ။ ထို့နောက် div ဒြပ်စင်တစ်ခုအတွင်း navbar အကြောင်းအရာ (လင့်ခ်များ၊ စသည်) ကို ထုပ်ပိုးပြီး ခလုတ်၏ သင်္ကေတနှင့် ကိုက်ညီသော ID တစ်ခုဖြင့် နောက်တွင် ထုပ်ပါ - " thetarget "။class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
ဥပမာ
<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>
အကြံပြုချက်- သင်သည် .navbar-expand-md အတန်းကို ဖယ်ရှားပြီး navbar လင့်ခ်များကို အမြဲတမ်း ဝှက်ထားကာ toggler ခလုတ်ကို ပြသနိုင်သည်။
Dropdown ဖြင့် Navbar
Navbar များသည် dropdown menus များကိုလည်း ထိန်းထားနိုင်သည်-
ဥပမာ
<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 ပုံစံများနှင့် ခလုတ်များ
အုပ်စုလိုက်ထည့်သွင်းမှုများနှင့် ဘေးချင်းကပ်ခလုတ်များ <form>နှင့်အတူ ဒြပ်စင် တစ်ခုကို ထည့်ပါ -class="form-inline"
ဥပမာ
<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>
သင် ထည့်သွင်းသည့်အကွက်ဘေးရှိ အိုင်ကွန်တစ်ခု သို့မဟုတ် အကူအညီစာသားကို ပူးတွဲရန် .input-group-prependကဲ့သို့သော အခြားထည့်သွင်းမှုအတန်းအစားများကိုလည်း သင်အသုံးပြုနိုင်ပါသည် ။ .input-group-appendBootstrap Inputs အခန်းတွင် ဤအတန်းများအကြောင်း ပိုမိုလေ့လာနိုင်ပါသည်။
ဥပမာ
<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 စာသား
.navbar-textလင့်ခ်များမဟုတ်သော navbar အတွင်းရှိ မည်သည့်ဒြပ်စင်များကို ဒေါင်လိုက်ညှိရန် အတန်း ကို အသုံးပြု ပါ (သင့်လျော်သော padding နှင့် စာသားအရောင်ကို သေချာစေသည်)။
ဥပမာ
<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>
ပုံသေ လမ်းညွှန်ဘား
လမ်းညွှန်ဘားကို အပေါ် သို့မဟုတ် စာမျက်နှာ၏အောက်ခြေတွင်လည်း ပြင်ဆင်နိုင်သည်။
ပုံသေ လမ်းကြောင်းပြဘားကို စာမျက်နှာ scroll နှင့် လွတ်ကင်းသော ပုံသေအနေအထား (အပေါ် သို့မဟုတ် အောက်) တွင် မြင်နိုင်သည်။
အတန်းသည် လမ်းကြောင်း .fixed-topပြဘားကို အပေါ်ဆုံး တွင် ပြင်ဆင်ပေးသည် -
ဥပမာ
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
navbar ကို စာမျက်နှာ ၏ အောက်ခြေတွင်.fixed-bottom ရှိနေစေရန် အတန်း ကို အသုံးပြု ပါ-
ဥပမာ
<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>