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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: ความแตกต่างของ Navs กับ Navbar

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

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

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

Top