การสร้าง Panel ของ Bootstrap

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

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

m038
PHP Sr. Member
PHP Sr. Member
โพสต์: 59
ลงทะเบียนเมื่อ: 29/07/2016 10:40 am

การสร้าง Panel ของ Bootstrap

โพสต์โดย m038 » 02/08/2016 12:06 pm

การสร้าง Panel ของ Bootstrap
1. การสร้าง Panel แบบง่ายๆ

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

<div class="container">
  <h2>Basic Panel</h2>
  <div class="panel panel-default">
    <div class="panel-body">Panel</div>
  </div>
</div>

- แสดงผลดังภาพ
a1.png
a1.png (24.69 KiB) เปิดดู 232 ครั้ง


2. Panel มีอยู่ 3 ส่วนคือ
- Heading ส่วนของการกำหนดชื่อหัวข้อ
- Content ส่วนของการแสดงผลด้านใน หรือส่วนของเนื้อหาของพาเนล
- Footer ส่วนท้ายของพาเนล

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

<div class="container">
  <h2>Panel</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Content</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>

- แสดงผลดังภาพ
a2.png
a2.png (31.07 KiB) เปิดดู 232 ครั้ง


3. ในแต่ล่ะพาเนลเราสามารถกำหนดสีของพาเนลได้ โดยการใส่คลาสต่างๆ เขาไปแทน ซึ่งจะใส่ไปใน code ดังนี้

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

<div class="panel (ตามด้วยพาเนลที่เราต้องการใส่)">
เช่น

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

<div class="panel panel-default">

a3.png
a3.png (8.11 KiB) เปิดดู 232 ครั้ง

โดยมี class ดังนี้
:arrow: panel-default

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

 <div class="panel panel-default">
    <div class="panel-heading"> Class panel-default</div>
    <div class="panel-body">Panel Content</div>
  </div>

ตัวอย่างที่ได้
a4.png
a4.png (23.2 KiB) เปิดดู 232 ครั้ง


:arrow: panel-primary

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

<div class="panel panel-primary">
    <div class="panel-heading"> Class panel-primary</div>
    <div class="panel-body">Panel Content</div>
  </div>

ตัวอย่างที่ได้
a5.png
a5.png (25.91 KiB) เปิดดู 232 ครั้ง


:arrow: panel-success

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

<div class="panel panel-success">
    <div class="panel-heading"> Class panel-success</div>
    <div class="panel-body">Panel Content</div>
  </div>

ตัวอย่างที่ได้
a6.png
a6.png (26.81 KiB) เปิดดู 232 ครั้ง


:arrow: panel-info

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

<div class="panel panel-info">
    <div class="panel-heading"> Class panel-info</div>
    <div class="panel-body">Panel Content</div>
  </div>

ตัวอย่างที่ได้
a8.png
a8.png (27.57 KiB) เปิดดู 232 ครั้ง


:arrow: panel-warning

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

<div class="panel panel-warning">
    <div class="panel-heading"> Class panel-warning</div>
    <div class="panel-body">Panel Content</div>
  </div>

ตัวอย่างที่ได้
a9.png
a9.png (25.07 KiB) เปิดดู 232 ครั้ง


:arrow: panel-danger

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

<div class="panel panel-danger">
    <div class="panel-heading"> Class panel-danger</div>
    <div class="panel-body">Panel Content</div>
  </div>

ตัวอย่างที่ได้
a10.png
a10.png (24 KiB) เปิดดู 232 ครั้ง

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

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

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