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

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

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

m038
PHP Sr. Member
PHP Sr. Member
Posts: 59
Joined: 29/07/2016 10:40 am

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

Post by m038 » 02/08/2016 12:06 pm

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

Code: Select all

<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) Viewed 967 times


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

Code: Select all

<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) Viewed 967 times


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

Code: Select all

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

Code: Select all

<div class="panel panel-default">

a3.png
a3.png (8.11 KiB) Viewed 967 times

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

Code: Select all

 <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) Viewed 967 times


:arrow: panel-primary

Code: Select all

<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) Viewed 967 times


:arrow: panel-success

Code: Select all

<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) Viewed 967 times


:arrow: panel-info

Code: Select all

<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) Viewed 967 times


:arrow: panel-warning

Code: Select all

<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) Viewed 967 times


:arrow: panel-danger

Code: Select all

<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) Viewed 967 times

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 14 guests