พาเนล (Panel) บน Bootstrap เป็นส่วนที่ใช้แสดงผลข้อความหรือรูปภาพในกล่องข้อความ ที่มีลักษณะเป็นสี่เหลี่ยม โดยขั้นตอนการสร้างพาเนลมีขั้นตอนที่ง่ายมากดังต่อไปนี้
สำหรับขั้นตอนการสร้างพาเนลบน Bootstrap นั้นทำได้ง่ายมาก โดยเริ่มจาก copy โฟลเดอร์ และไฟล์ index.html ที่ได้สร้างจาก Chapter1 มาไว้โฟลเดอร์ที่สร้างขึ้นใหม่ (สำหรับในที่นี้ได้สร้างโฟลเดอร์ Chapter_3)
ถัดมาให้ลบแท็ก <h1> ที่อยู่ในส่วนของแท็ก <body> หลังจากนั้นให้เราใส่โค้ดด้านล่างเข้าไปในแทน โดยผลลัพธ์แสดงในรูปที่ 1
<div class="container"> <div class="panel panel-default"> <div class="panel-heading"> ATTENTION </div> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non posuere mauris, malesuada imperdiet ante. Suspendisse a bibendum sapien. Morbi aliquam ipsum sem, non accumsan orci suscipit id. Maecenas volutpat bibendum eleifend. Etiam efficitur purus faucibus, gravida ex sit amet, placerat leo. </div> <div class="panel-footer"> <a href="#" class="btn btn-danger btn-sm">Agree</a> <a href="#" class="btn btn-default btn-sm">Decline</a> </div> </div> </div>
รูปที่ 1
จากโค้ดด้านบนของพาเนล นั้นแบ่งออกเป็น 3 ส่วนหลักดังต่อไปนี้
- panel-heading เป็นส่วนที่ใช้กำหนดชื่อหัวข้อพาเนล
- panel-body เป็นส่วนที่ใช้กำหนดเนื้อหาของพาเนล
- panel-footer เป็นส่วนที่ใชกำหนดส่วนท้ายของพาเนล
นอกจากนี้เรายังกำหนดสีให้กับแต่ละพาเนลได้เอง โดยเราต้องเปลี่ยนชื่อคลาสซึ่งจากเดิม ที่เรากำหนดเป็นคลาส "panel-default" โดยชื่อคลาสที่เราสามารถเปลี่ยนได้มีดังต่อไปนี้
- panel-primary สำหรับพาเนลสีน้ำเงิน ดังแสดงในรูปที่ 2
- panel-success สำหรับพาเนลสีเขียว ดังแสดงในรูปที่ 3
- panel-info สำหรับพาเนลสีน้ำเงิน ดังแสดงในรูปที่ 4
- panel-warning สำหรับพาเนลสีเหลือง ดังแสดงในรูปที่ 5
- panel-danger สำหรับพาเนลสีแดง ดังแสดงในรูปที่ 6
รูปที่ 2
รูปที่ 3
รูปที่ 4
รูปที่ 5
รูปที่ 6
Reference
- Rahman, Syed Fazle. Jump start Bootstrap get up to speed with Bootstrap in a weekend. Collingwood, VIC, Australia: SitePoint, 2014. Print.
มีกำหนดขนาดของpanel ไหมอ่ะ
ตอบลบ