วิธีการใช้ 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 »

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

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

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

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

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

Post by babynutze »

ขอบคุณครับ

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

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

Post by Rosickyluv »

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

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

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

Post by konseo »

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

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 6 guests