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

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

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

ภาพประจำตัวสมาชิก
boo_kyoshii
PHP Super Member
PHP Super Member
โพสต์: 343
ลงทะเบียนเมื่อ: 02/08/2013 10:08 am

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

โพสต์โดย boo_kyoshii » 29/10/2013 4:51 pm

Navs กับ Navbar คืออะไร คือการสร้างแถบเมนูต่างๆ ที่อยู่ทางด้านบน หรือด้านซ้าย-ขาว ของเว็บไซต์นั้นเอง ตัวอย่างเช่นภาพด้านล่าง
1.png
1.png (135.63 KiB) เปิดดู 541 ครั้ง


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

Navs => เป็นการสร้างแถบเมนูแบบตายตัวไม่สามารถแปลสภาพได้ เมื่ออยู่ในหน้าจอขนาดเล็ก ดังภาพด้านล้าง อ่านเพิ่มเติมคลิกที่นี้
2.png
2.png (130.51 KiB) เปิดดู 541 ครั้ง

จะเห็นว่าเมื่อขนาดหน้าจอเล็กลง แถบเมนูก็ยังมีสภาพเหมือนเดิม แค่เพียงลดขนาดลง
3.png
3.png (61.71 KiB) เปิดดู 541 ครั้ง

ตัวอย่าง code navs

โค้ด: เลือกทั้งหมด

 <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) เปิดดู 541 ครั้ง

จะเห็นว่าเมื่อขนาดหน้าจอเล็กลง แถบเมนูก็จะเปลี่ยนเป็นปุ่มกดที่มี 3 ขีด ดังภาพค่ะ
4.png
4.png (9.9 KiB) เปิดดู 541 ครั้ง

พอกดแถบ 3 ขีด ก็จะปรากฎเมนูมาให้ดังภาพค่ะ
5.png
5.png (50.21 KiB) เปิดดู 541 ครั้ง

ตัวอย่าง code navbar

โค้ด: เลือกทั้งหมด

<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>

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน