รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การใช้งาน Panel ใน Bootstrap

    พาเนล เป็นส่วนที่ใช้แสดงผลข้อความหรือรูปภาพในกล่องข้อความ ที่มีลักษณะเป็นสี่เหลี่ยม เหมาะนำไปใช้ได้ในหลายๆ แบบเช่น ทำหน้าแสดงรายการสินค้า ที่สินค้าวางอยู่ในกล่องเรียงต่อๆ กัน

     

    พาเนล นั้นแบ่งออกเป็น 3 ส่วนหลักดังต่อไปนี้ 

          - panel-heading เป็นส่วนที่ใช้กำหนดชื่อหัวข้อพาเนล

          - panel-body เป็นส่วนที่ใช้กำหนดเนื้อหาของพาเนล

          - panel-footer เป็นส่วนที่ใชกำหนดส่วนท้ายของพาเนล

     

    ตัวอย่างการเขียนดังนี้ครับ

    <div class="container">

     <div class="panel panel-default">

      <div class="panel-heading">

       Heading

      </div>

      <div class="panel-body">

       Body

      </div>

      <div class="panel-footer">

       Footer

      </div>

     </div>

    </div>

     

    นอกจากนี้เรายังกำหนดสีให้กับแต่ละพาเนลได้เอง โดยเปลี่ยนชื่อคลาส "panel-default" เป็นดังต่อไปนี้

         - panel-primary สำหรับพาเนลสีน้ำเงิน

         - panel-success สำหรับพาเนลสีเขียว 

         - panel-info สำหรับพาเนลสีน้ำเงิน 

         - panel-warning สำหรับพาเนลสีเหลือง 

         - panel-danger สำหรับพาเนลสีแดง 

     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com