โดย MBMoo » 06/06/2020 4:52 pm
วิธีการสร้าง nav-tabs โดย
bootstrap ซึ่งเป็นเป็นการออกแบบ โดยใช้
css อย่างหนึ่ง ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร
HTML เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม
โค้ด: เลือกทั้งหมด
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
import 2 ลิ้งนี้มาใส่ไว้ที่ head ก่อนนะคะ ถึงจะใช้ bootstrap ได้
โค้ด: เลือกทั้งหมด
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#des">รายละเอียด</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#img">รูปภาพ</a>
</li>
</ul>
สร้างเมนู ต่มที่เราต้องการ กำหนด href ไปที่ id ของ content นั้นๆ
โค้ด: เลือกทั้งหมด
<div class="tab-content">
<div class="tab-pane container active" id="des"></div>
<div class="tab-pane container fade" id="img"></div>
</div>
</ul>
สร้างหน้า content ตั้ง ไอดี ของแต่ละตัว
ผลลัพธ์ :
- 55.gif (906.88 KiB) Viewed 3371 times
ถ้าต้องการเรียนรู้ วิธีกดภาพ เล็กด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ โดยใช้ javascript หรือ การทำงานอื่นๆ ให้ css สามารถเข้ามาดู เพื่มเติมได้ วิธีกดภาพ เล็กด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ โดยใช้ javascript
viewtopic.php?f=78&t=67935&p=190121#p190121 หรือ วิธีการ ไล่สีพื้นหลัง โดย css
viewtopic.php?f=73&t=67937&p=190127#p190127วิธีการสร้าง nav-tabs โดย [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3963-bootstrap.html]bootstrap[/url] ซึ่งเป็นเป็นการออกแบบ โดยใช้ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2193-css-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]css[/url] อย่างหนึ่ง ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2026-html-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]HTML[/url] เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม
[code]<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>[/code]
import 2 ลิ้งนี้มาใส่ไว้ที่ head ก่อนนะคะ ถึงจะใช้ bootstrap ได้
[code]<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#des">รายละเอียด</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#img">รูปภาพ</a>
</li>
</ul>
[/code]
สร้างเมนู ต่มที่เราต้องการ กำหนด href ไปที่ id ของ content นั้นๆ
[code]
<div class="tab-content">
<div class="tab-pane container active" id="des"></div>
<div class="tab-pane container fade" id="img"></div>
</div>
</ul>
[/code]
สร้างหน้า content ตั้ง ไอดี ของแต่ละตัว
ผลลัพธ์ :
[attachment=0]55.gif[/attachment]
ถ้าต้องการเรียนรู้ วิธีกดภาพ เล็กด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ โดยใช้ javascript หรือ การทำงานอื่นๆ ให้ css สามารถเข้ามาดู เพื่มเติมได้ วิธีกดภาพ เล็กด้านข้าง แล้วโชว์ภาพใหญ่ ในพื้นที่ดำๆ โดยใช้ javascript https://www.mindphp.com/forums/viewtopic.php?f=78&t=67935&p=190121#p190121 หรือ วิธีการ ไล่สีพื้นหลัง โดย css https://www.mindphp.com/forums/viewtopic.php?f=73&t=67937&p=190127#p190127