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


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

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

M008
PHP Hero Member
PHP Hero Member
Posts: 109
Joined: 03/05/2013 10:44 am

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

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

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

1.) เป็น tabs พื้นฐานทั่วไป
วิธีการใช้ Navs ใน Bootstrap 1.jpg
1.jpg (10.11 KiB) Viewed 2621 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
วิธีการใช้ Navs ใน Bootstrap 2.jpg
2.jpg (10.61 KiB) Viewed 2621 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 เหมาะสำหรับอกค์กรต่าง ๆ
วิธีการใช้ Navs ใน Bootstrap 3.jpg
3.jpg (12.23 KiB) Viewed 2621 times
4.) tabs ที่เป็นแถวเรียงซ้อนกัน
วิธีการใช้ Navs ใน Bootstrap 4.jpg
4.jpg (16.01 KiB) Viewed 2621 times
5.) Stacked pills
วิธีการใช้ Navs ใน Bootstrap 5.jpg
5.jpg (19.27 KiB) Viewed 2621 times
6.) nav list
วิธีการใช้ Navs ใน Bootstrap 6.jpg
6.jpg (27.39 KiB) Viewed 2621 times

User avatar
boo_kyoshii
PHP Super Member
PHP Super Member
Posts: 343
Joined: 02/08/2013 10:08 am

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

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

ทดลองทำตามค่ะ
วิธีการใช้ Navs ใน Bootstrap Navs.jpg
Navs.jpg (15.42 KiB) Viewed 2384 times
testbootstrap.zip
ไฟล์ตัวอย่างที่ทำค่ะ
(87.81 KiB) Downloaded 202 times

User avatar
babynutze
PHP Newbie
PHP Newbie
Posts: 1
Joined: 15/10/2015 1:20 pm

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

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

ขอบคุณครับ

Rosickyluv
PHP Newbie
PHP Newbie
Posts: 2
Joined: 16/10/2015 2:46 pm

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

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

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

konseo
PHP Super Member
PHP Super Member
Posts: 245
Joined: 12/02/2011 12:34 am
Contact:

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

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

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

Post Reply

Return to “Booststap Knowledge”

Users browsing this forum: No registered users and 1 guest