ความแตกต่างของ 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 คืออะไร คือการสร้างแถบเมนูต่างๆ ที่อยู่ทางด้านบน หรือด้านซ้าย-ขาว ของเว็บไซต์นั้นเอง ตัวอย่างเช่นภาพด้านล่าง
ความแตกต่างของ Navs กับ Navbar 1.png
1.png (135.63 KiB) Viewed 1574 times
ความแตกต่างของ Navs กับ Navbar [/b] [/color]
Navs => เป็นการสร้างแถบเมนูแบบตายตัวไม่สามารถแปลสภาพได้ เมื่ออยู่ในหน้าจอขนาดเล็ก ดังภาพด้านล้าง อ่านเพิ่มเติมคลิกที่นี้
ความแตกต่างของ Navs กับ Navbar 2.png
2.png (130.51 KiB) Viewed 1574 times
จะเห็นว่าเมื่อขนาดหน้าจอเล็กลง แถบเมนูก็ยังมีสภาพเหมือนเดิม แค่เพียงลดขนาดลง
ความแตกต่างของ Navs กับ Navbar 3.png
3.png (61.71 KiB) Viewed 1574 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 => เป็นการสร้างแถบเมนูแบบไม่ตายตัวสามารถแปลสภาพได้ เมื่ออยู่ในหน้าจอขนาดเล็ก ดังภาพด้านล้าง
ความแตกต่างของ Navs กับ Navbar 6.png
6.png (207.85 KiB) Viewed 1574 times
จะเห็นว่าเมื่อขนาดหน้าจอเล็กลง แถบเมนูก็จะเปลี่ยนเป็นปุ่มกดที่มี 3 ขีด ดังภาพค่ะ
ความแตกต่างของ Navs กับ Navbar 4.png
4.png (9.9 KiB) Viewed 1574 times
พอกดแถบ 3 ขีด ก็จะปรากฎเมนูมาให้ดังภาพค่ะ
ความแตกต่างของ Navs กับ Navbar 5.png
5.png (50.21 KiB) Viewed 1574 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>

Return to “Booststap Knowledge”

Users browsing this forum: No registered users and 19 guests