Bootstrap လမ်းညွှန်ဘား
လမ်းကြောင်းပြဘားများ
လမ်းကြောင်းပြဘားသည် စာမျက်နှာ၏ထိပ်တွင် ချထားသော လမ်းညွှန်ချက်ခေါင်းစီးတစ်ခုဖြစ်သည်-
Bootstrap ဖြင့်၊ မျက်နှာပြင်အရွယ်အစားပေါ် မူတည်၍ လမ်းကြောင်းပြဘားသည် တိုးချဲ့ သို့မဟုတ် ပြိုကျနိုင်သည်။
စံညွှန်းဘားတစ်ခုဖြင့် ဖန်တီးထားသည် <nav class="navbar navbar-default">။
အောက်ဖော်ပြပါ ဥပမာသည် စာမျက်နှာ၏ထိပ်တွင် လမ်းညွှန်ဘားတစ်ခုထည့်နည်းကို ပြသည်-
ဥပမာ
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
မှတ်ချက်- ဤစာမျက်နှာရှိ နမူနာများအားလုံးသည် ဖန်သားပြင်ငယ်များပေါ်တွင် နေရာအလွန်အကျွံယူသော လမ်းညွှန်ဘားကို ပြသလိမ့်မည် (သို့သော်လည်း၊ လမ်းညွှန်ဘားသည် ကြီးမားသောစခရင်များတွင် မျဉ်းတစ်ကြောင်းတည်းရှိလိမ့်မည် - Bootstrap တုံ့ပြန်မှုဖြစ်သောကြောင့်)။ ဤပြဿနာ (သေးငယ်သောစခရင်များနှင့်အတူ) ဤစာမျက်နှာရှိနောက်ဆုံးနမူနာတွင်ဖြေရှင်းနိုင်လိမ့်မည်။
ပြောင်းပြန် လမ်းကြောင်းပြဘား
ပုံသေ လမ်းညွှန်ဘား၏ စတိုင်ကို သင်မကြိုက်ပါက၊ Bootstrap သည် အခြားရွေးချယ်စရာ၊ အနက်ရောင် navbar ကို ပေးသည်-
.navbar-defaultအတန်း ကို .navbar-inverse:
ဥပမာ
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Dropdown ဖြင့် Navigation Bar
လမ်းကြောင်းပြဘားများသည် dropdown menus များကိုလည်း ထိန်းထားနိုင်သည်။
အောက်ပါဥပမာသည် "စာမျက်နှာ 1" ခလုတ်အတွက် dropdown menu ကို ပေါင်းထည့်သည်-
ဥပမာ
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
ညာဖက်ညှိထားသော လမ်းညွှန်ဘား
.navbar-rightအတန်းကို ညာဘက်ချိန်ညှိရန် လမ်းညွှန်ဘားခလုတ်များကို အသုံးပြုသည် ။
အောက်ဖော်ပြပါ ဥပမာတွင် ကျွန်ုပ်တို့သည် လမ်းကြောင်းပြဘားတွင် ညာဘက်တွင် "အကောင့်ဖွင့်ခြင်း" ခလုတ်နှင့် "အကောင့်ဝင်ရန်" ခလုတ်ကို ထည့်သွင်းပါ။ ခလုတ်အသစ်နှစ်ခုမှ တစ်ခုစီတွင် ဂလစ်ဖီကွန်တစ်ခုကိုလည်း ထည့်သည်-
ဥပမာ
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
Navbar ခလုတ်များ
navbar အတွင်းရှိ ခလုတ်များထည့်ရန်၊ .navbar-btnBootstrap ခလုတ်တွင် အတန်းကို ထည့်ပါ။
ဥပမာ
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
Navbar ပုံစံများ
navbar အတွင်းရှိ ဖောင်ဒြပ်စင်များထည့်ရန်၊ .navbar-formအတန်းကို ဖောင်ဒြပ်တစ်ခုသို့ ပေါင်းထည့်ကာ ထည့်သွင်းမှု(များ)ကို ပေါင်းထည့်ပါ။ .form-groupထည့်သွင်းမှုကို ကိုင်ဆောင်ထားသည့် div ကွန်တိန်နာတွင် အတန်း တစ်ခုကို ကျွန်ုပ်တို့ ထည့်ထားကြောင်း သတိပြုပါ ။ သင့်တွင် ထည့်သွင်းမှုများ တစ်ခုထက်ပိုပါက ၎င်းသည် သင့်လျော်သော padding ကို ပေါင်းထည့်သည် (ဤအကြောင်းအား Forms အခန်းတွင် ပိုမိုလေ့လာနိုင်ပါမည်)။
ဥပမာ
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left"
action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
ထည့်သွင်းမှုအကွက်ဘေးရှိ အိုင်ကွန်တစ်ခု သို့မဟုတ် အကူအညီစာသားကို ပူးတွဲရန် .input-groupနှင့် အတန်း များကို သင်အသုံးပြုနိုင်သည် ။ .input-group-addonBootstrap Inputs အခန်းတွင် ဤအတန်းများအကြောင်း ပိုမိုလေ့လာနိုင်ပါသည်။
ဥပမာ
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
Navbar စာသား
.navbar-textလင့်ခ်များမဟုတ်သော navbar အတွင်းရှိ မည်သည့်ဒြပ်စင်များကို ဒေါင်လိုက်ညှိရန် အတန်း ကို အသုံးပြု ပါ (သင့်လျော်သော padding နှင့် စာသားအရောင်ကို သေချာစေသည်)။
ဥပမာ
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
ပုံသေ လမ်းညွှန်ဘား
လမ်းညွှန်ဘားကို အပေါ် သို့မဟုတ် စာမျက်နှာ၏အောက်ခြေတွင်လည်း ပြင်ဆင်နိုင်သည်။
ပုံသေ လမ်းကြောင်းပြဘားကို စာမျက်နှာ scroll နှင့် လွတ်ကင်းသော ပုံသေအနေအထား (အပေါ် သို့မဟုတ် အောက်) တွင် မြင်နိုင်သည်။
အတန်းသည် လမ်းကြောင်း .navbar-fixed-topပြဘားကို အပေါ်ဆုံးတွင် ပြင်ဆင်ပေးသည်-
ဥပမာ
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
.navbar-fixed-bottomအတန်းသည် လမ်းညွှန်ဘားကို အောက်ခြေတွင် ရှိနေစေသည် -
ဥပမာ
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Navigation Bar ကို ပြိုကျခြင်း။
လမ်းကြောင်းပြဘားသည် သေးငယ်သော စခရင်တစ်ခုပေါ်တွင် နေရာများစွာယူလေ့ရှိသည်။
ကျွန်ုပ်တို့သည် လမ်းကြောင်းပြဘားကို ဝှက်ထားသင့်သည်။ လိုအပ်တဲ့အခါမှသာ ပြပါ။
အောက်ပါဥပမာတွင် လမ်းညွှန်ဘားကို ညာဘက်အပေါ်ထောင့်ရှိ ခလုတ်တစ်ခုဖြင့် အစားထိုးသည်။ ခလုတ်ကို နှိပ်လိုက်မှသာ လမ်းညွှန်ဘားကို ပြသပါမည်-
ဥပမာ
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>