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

ตอบกระทู้


คำถามนี้ เพื่อป้องกันการส่งแบบอัตโนมัติจากสแปมบอท
รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[flash] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: การสร้าง Panel ของ Bootstrap

การสร้าง 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) เปิดดู 508 ครั้ง


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


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

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

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

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

<div class="panel panel-default">

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

โดยมี 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) เปิดดู 508 ครั้ง


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


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


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


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


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

ข้างบน