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

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

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

M008
PHP Hero Member
PHP Hero Member
โพสต์: 109
ลงทะเบียนเมื่อ: 03/05/2013 10:44 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย M008 »

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

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

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

<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 3645 times

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

<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 3645 times
4.) tabs ที่เป็นแถวเรียงซ้อนกัน
4.jpg
4.jpg (16.01 KiB) Viewed 3645 times
5.) Stacked pills
5.jpg
5.jpg (19.27 KiB) Viewed 3645 times
6.) nav list
6.jpg
6.jpg (27.39 KiB) Viewed 3645 times
ภาพประจำตัวสมาชิก
boo_kyoshii
PHP Super Member
PHP Super Member
โพสต์: 343
ลงทะเบียนเมื่อ: 02/08/2013 10:08 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย boo_kyoshii »

ทดลองทำตามค่ะ
Navs.jpg
Navs.jpg (15.42 KiB) Viewed 3408 times
testbootstrap.zip
ไฟล์ตัวอย่างที่ทำค่ะ
(87.81 KiB) ดาวน์โหลดแล้ว 326 ครั้ง
ภาพประจำตัวสมาชิก
babynutze
PHP Newbie
PHP Newbie
โพสต์: 1
ลงทะเบียนเมื่อ: 15/10/2015 1:20 pm

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

โพสต์ที่ยังไม่ได้อ่าน โดย babynutze »

ขอบคุณครับ
Rosickyluv
PHP Newbie
PHP Newbie
โพสต์: 2
ลงทะเบียนเมื่อ: 16/10/2015 2:46 pm

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

โพสต์ที่ยังไม่ได้อ่าน โดย Rosickyluv »

กำลังอยากทราบอยู่พอดีเลยครับผม
konseo
PHP Super Member
PHP Super Member
โพสต์: 245
ลงทะเบียนเมื่อ: 12/02/2011 12:34 am
ที่อยู่: https://page.line.me/oer1981h
ติดต่อ:

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

โพสต์ที่ยังไม่ได้อ่าน โดย konseo »

Bootstrap นี่ฮิตไม่เลิกจริงๆ ครับ ใครๆก็เลือกใช้
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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