ความแตกต่างของ Navs กับ Navbar

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
boo_kyoshii
PHP Super Member
PHP Super Member
Posts: 343
Joined: 02/08/2013 10:08 am

ความแตกต่างของ Navs กับ Navbar

Post by boo_kyoshii » 29/10/2013 4:51 pm

Navs กับ Navbar คืออะไร คือการสร้างแถบเมนูต่างๆ ที่อยู่ทางด้านบน หรือด้านซ้าย-ขาว ของเว็บไซต์นั้นเอง ตัวอย่างเช่นภาพด้านล่าง
1.png
1.png (135.63 KiB) Viewed 1505 times
ความแตกต่างของ Navs กับ Navbar [/b] [/color]
Navs => เป็นการสร้างแถบเมนูแบบตายตัวไม่สามารถแปลสภาพได้ เมื่ออยู่ในหน้าจอขนาดเล็ก ดังภาพด้านล้าง อ่านเพิ่มเติมคลิกที่นี้
2.png
2.png (130.51 KiB) Viewed 1505 times
จะเห็นว่าเมื่อขนาดหน้าจอเล็กลง แถบเมนูก็ยังมีสภาพเหมือนเดิม แค่เพียงลดขนาดลง
3.png
3.png (61.71 KiB) Viewed 1505 times
ตัวอย่าง code navs[/color][/b]

Code: Select all

 <div class="container-fluid">
  <ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  <li><a href="#"><i class="icon-book"></i> Dictionary</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Translation</a></li>
  </ul> 
 </div> 

Navbar => เป็นการสร้างแถบเมนูแบบไม่ตายตัวสามารถแปลสภาพได้ เมื่ออยู่ในหน้าจอขนาดเล็ก ดังภาพด้านล้าง
6.png
6.png (207.85 KiB) Viewed 1505 times
จะเห็นว่าเมื่อขนาดหน้าจอเล็กลง แถบเมนูก็จะเปลี่ยนเป็นปุ่มกดที่มี 3 ขีด ดังภาพค่ะ
4.png
4.png (9.9 KiB) Viewed 1505 times
พอกดแถบ 3 ขีด ก็จะปรากฎเมนูมาให้ดังภาพค่ะ
5.png
5.png (50.21 KiB) Viewed 1505 times
ตัวอย่าง code navbar[/color][/b]

Code: Select all

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="Test.php">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div>

  • Similar Topics
    Replies
    Views
    Last post

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 6 guests