bootstrap callout - สร้าง callout เหมือนในเว็บ getbootstrap

เห็น callout ในเว็บ getbootstrap มา แล้วเกิดอยากได้เพราะดูเรียบๆสวยงาม เหมาะกับการเขียนคำอธิบายขั้นตอนต่างๆ แล้วพอลองตัดแปะ source code html จาก getbootstrap ดูแล้วมันไม่เวอร์ค

หาไปหามาก็เลยไปเจอมาจากในเว็บนี้ http://sathyalog.wordpress.com เค้าว่าเราสามารถสร้าง callout แบบนั้นได้แต่ต้องเพิ่ม css ข้างล่างนี้ลงไปเองในโปรเจ็คของเรา

<style>

/* Base styles (regardless of theme) */
.bs-callout {
margin: 20px 0;
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
}

.bs-callout h4 {
margin-top: 0;
}

.bs-callout p:last-child {
margin-bottom: 0;
}

.bs-callout code,
.bs-callout .highlight {
background-color: #fff;
}

/* Themes for different contexts */
.bs-callout-danger {
background-color: #fcf2f2;
border-color: #d9534f;
}

.bs-callout-warning {
background-color: #fefbed;
border-color: #f0ad4e;
}

.bs-callout-info {
background-color: #f0f7fd;
border-color: #5bc0de;
}

</style>

ส่วนวิธีใช้ก็แบบนี้ครับ

<div class=”bs-callout bs-callout-info”>Search Results</div>
<div class=”bs-callout bs-callout-warning”>Search Results</div>
<div class=”bs-callout bs-callout-danger”>Search Results</div>

หวังว่าคงเป็นประโยชน์นะครับ ไว้เจอกันใหม่ตอนหน้า
กิตติศักดิ์ บุญราศรี