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

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

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

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

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

โพสต์โดย 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) เปิดดู 1656 ครั้ง

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

<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) เปิดดู 1656 ครั้ง

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

<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) เปิดดู 1656 ครั้ง

4.) tabs ที่เป็นแถวเรียงซ้อนกัน
4.jpg
4.jpg (16.01 KiB) เปิดดู 1656 ครั้ง

5.) Stacked pills
5.jpg
5.jpg (19.27 KiB) เปิดดู 1656 ครั้ง

6.) nav list
6.jpg
6.jpg (27.39 KiB) เปิดดู 1656 ครั้ง

ภาพประจำตัวสมาชิก
boo_kyoshii
PHP Super Member
PHP Super Member
โพสต์: 343
ลงทะเบียนเมื่อ: 02/08/2013 10:08 am

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

โพสต์โดย boo_kyoshii » 21/08/2013 11:00 am

ทดลองทำตามค่ะ
Navs.jpg
Navs.jpg (15.42 KiB) เปิดดู 1419 ครั้ง

testbootstrap.zip
ไฟล์ตัวอย่างที่ทำค่ะ
(87.81 KiB) ดาวน์โหลด 149 ครั้ง

ภาพประจำตัวสมาชิก
babynutze
PHP Newbie
PHP Newbie
โพสต์: 1
ลงทะเบียนเมื่อ: 15/10/2015 1:20 pm

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

โพสต์โดย babynutze » 15/10/2015 1:22 pm

ขอบคุณครับ

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

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

โพสต์โดย Rosickyluv » 16/10/2015 2:49 pm

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

konseo
PHP Super Member
PHP Super Member
โพสต์: 245
ลงทะเบียนเมื่อ: 12/02/2011 12:34 am
ที่อยู่: https://www.rodrubjang.co.th/
ติดต่อ:

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

โพสต์โดย konseo » 16/10/2015 11:00 pm

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


  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน