วิธีการใช้ Navs ใน Bootstrap

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 ใน Bootstrap

Re: วิธีการใช้ Navs ใน Bootstrap

by konseo » 16/10/2015 11:00 pm

Bootstrap นี่ฮิตไม่เลิกจริงๆ ครับ ใครๆก็เลือกใช้

Re: วิธีการใช้ Navs ใน Bootstrap

by Rosickyluv » 16/10/2015 2:49 pm

กำลังอยากทราบอยู่พอดีเลยครับผม

Re: วิธีการใช้ Navs ใน Bootstrap

by babynutze » 15/10/2015 1:22 pm

ขอบคุณครับ

Re: วิธีการใช้ Navs ใน Bootstrap

by boo_kyoshii » 21/08/2013 11:00 am

ทดลองทำตามค่ะ
Navs.jpg
Navs.jpg (15.42 KiB) Viewed 2537 times
testbootstrap.zip
ไฟล์ตัวอย่างที่ทำค่ะ
(87.81 KiB) Downloaded 221 times

วิธีการใช้ Navs ใน Bootstrap

by M008 » 29/05/2013 5:58 pm

Nav ย่อมาจาก Navigation คือ ส่วนที่ใช้ลิงค์ไปยังหน้าต่างๆของเว็บไซต์ เว็บไซต์ที่ดีควรมี
เนวิเกชันในทุกหน้า เพราะในปัจจุบันผู้ใช้งานรู้จักเว็บไซต์ของเราจาก search engine ซึ่งแน่นอนว่าเราไม่สามารถกำหนดได้ว่าให้ search engine แสดงหน้าใดให้ผู้ใช้งานดู ถ้า search engine แสดงผลในหน้าที่ไม่มีเนวิเกชัน อาจทำให้ผู้ใช้งานเข้าใจผิดได้ว่าเว็บไซต์ของคุณมีแค่หน้าที่แสดงผลเพียงหน้าเดียว
ใน Bootstrap ก็มี Nav ให้เลือกใช้มากมายหลายรูปแบบ ดังนี้

1.) เป็น tabs พื้นฐานทั่วไป
1.jpg
1.jpg (10.11 KiB) Viewed 2774 times

Code: Select all

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>
2.) Basic pills
2.jpg
2.jpg (10.61 KiB) Viewed 2774 times

Code: Select all

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>
3.) Disabled state เหมาะสำหรับอกค์กรต่าง ๆ
3.jpg
3.jpg (12.23 KiB) Viewed 2774 times
4.) tabs ที่เป็นแถวเรียงซ้อนกัน
4.jpg
4.jpg (16.01 KiB) Viewed 2774 times
5.) Stacked pills
5.jpg
5.jpg (19.27 KiB) Viewed 2774 times
6.) nav list
6.jpg
6.jpg (27.39 KiB) Viewed 2774 times

Top