Page 1 of 1

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

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

1.) เป็น tabs พื้นฐานทั่วไป
1.jpg
1.jpg (10.11 KiB) Viewed 2805 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 2805 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 2805 times
4.) tabs ที่เป็นแถวเรียงซ้อนกัน
4.jpg
4.jpg (16.01 KiB) Viewed 2805 times
5.) Stacked pills
5.jpg
5.jpg (19.27 KiB) Viewed 2805 times
6.) nav list
6.jpg
6.jpg (27.39 KiB) Viewed 2805 times

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

Posted: 21/08/2013 11:00 am
by boo_kyoshii
ทดลองทำตามค่ะ
Navs.jpg
Navs.jpg (15.42 KiB) Viewed 2568 times
testbootstrap.zip
ไฟล์ตัวอย่างที่ทำค่ะ
(87.81 KiB) Downloaded 226 times

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

Posted: 15/10/2015 1:22 pm
by babynutze
ขอบคุณครับ

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

Posted: 16/10/2015 2:49 pm
by Rosickyluv
กำลังอยากทราบอยู่พอดีเลยครับผม

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

Posted: 16/10/2015 11:00 pm
by konseo
Bootstrap นี่ฮิตไม่เลิกจริงๆ ครับ ใครๆก็เลือกใช้