ความแตกต่างของ 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 »

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

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

 <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 4384 times
จะเห็นว่าเมื่อขนาดหน้าจอเล็กลง แถบเมนูก็จะเปลี่ยนเป็นปุ่มกดที่มี 3 ขีด ดังภาพค่ะ
4.png
4.png (9.9 KiB) Viewed 4384 times
พอกดแถบ 3 ขีด ก็จะปรากฎเมนูมาให้ดังภาพค่ะ
5.png
5.png (50.21 KiB) Viewed 4384 times
ตัวอย่าง code navbar[/color][/b]

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

<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
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 68