สอนการใช้ bootstrap สร้างไตเติ้ลโพสต์บล็อกเกอร์(blogspot.com) ที่สวยงาม

ตัวอย่าง Button: ออกแบบง่ายๆ ด้วย Bootstrap

@ktcadmin เกี่ยวกับสินค้านี้ #หนังสือ #คู่มือ #สอนสร้างเว็บ #สอนสร้างแอพ #bootstraps ♬ Future - Official Sound Studio

Bootstrap เป็นไลบรารี CSS และ JavaScript ที่ช่วยให้เราสามารถสร้างเว็บไซต์ได้อย่างรวดเร็วและง่ายดาย เราสามารถใช้งาน Bootstrap เพื่อสร้างไตเติ้ลโพสต์บล็อกเกอร์ที่สวยงามได้ด้วยขั้นตอนดังต่อไปนี้

  1. ดาวน์โหลดไฟล์ Bootstrap จากเว็บไซต์ทางการของ Bootstrap
  2. แตกไฟล์ Bootstrap ออกมา
  3. คัดลอกไฟล์ bootstrap.min.css และ bootstrap.min.js ไปยังโฟลเดอร์ css และ js ของธีมบล็อกเกอร์
  4. เพิ่มโค้ดต่อไปนี้ลงในไฟล์ index.php ของธีมบล็อกเกอร์
HTML
<link rel="stylesheet" href="css/bootstrap.min.css">  <script src="js/bootstrap.min.js"></script>
  1. เพิ่มโค้ดต่อไปนี้ลงในไฟล์ header.php ของธีมบล็อกเกอร์
HTML
<div class="container">    <div class="row">      <div class="col-12">        <h1 class="display-4 text-center">ไตเติ้ลโพสต์</h1>      </div>    </div>  </div>

โค้ดด้านบนจะสร้างไตเติ้ลโพสต์แบบธรรมดาโดยใช้คลาส display-4 ของ Bootstrap ซึ่งจะทำให้ไตเติ้ลมีขนาดใหญ่และโดดเด่น

หากต้องการปรับแต่งไตเติ้ลโพสต์เพิ่มเติม เราสามารถเพิ่มคลาสอื่น ๆ ให้กับคลาส display-4 ได้ เช่น

  • text-primary จะทำให้ไตเติ้ลมีสีหลัก
  • text-secondary จะทำให้ไตเติ้ลมีสีรอง
  • text-success จะทำให้ไตเติ้ลมีสีสำเร็จ
  • text-info จะทำให้ไตเติ้ลมีสีข้อมูล
  • text-warning จะทำให้ไตเติ้ลมีสีเตือน
  • text-danger จะทำให้ไตเติ้ลมีสีอันตราย

นอกจากนี้ เราสามารถเพิ่มคลาสอื่น ๆ ให้กับตัวไตเติ้ลได้ เช่น

  • font-weight-bold จะทำให้ตัวอักษรไตเติ้ลมีน้ำหนักหนา
  • font-italic จะทำให้ตัวอักษรไตเติ้ลเอียง
  • text-shadow จะทำให้ตัวอักษรไตเติ้ลมีเงา

ตัวอย่างการปรับแต่งไตเติ้ลโพสต์โดยใช้คลาส Bootstrap

HTML
<div class="container">    <div class="row">      <div class="col-12">        <h1 class="display-4 text-primary font-weight-bold text-shadow">ไตเติ้ลโพสต์</h1>      </div>    </div>  </div>

โค้ดด้านบนจะสร้างไตเติ้ลโพสต์ที่มีสีหลัก ตัวอักษรหนา และตัวอักษรมีเงา

นอกจากการใช้คลาส Bootstrap ในการปรับแต่งไตเติ้ลโพสต์แล้ว เรายังสามารถใช้ CSS ในการปรับแต่งเพิ่มเติมได้ เช่น

CSS
.title {    color: #ffffff;    background-color: #000000;    padding: 20px;    margin-top: 0;  }

โค้ดด้านบนจะเปลี่ยนสีและพื้นหลังของไตเติ้ลโพสต์

ตัวอย่างการปรับแต่งไตเติ้ลโพสต์โดยใช้ CSS

HTML
<div class="container">    <div class="row">      <div class="col-12">        <h1 class="display-4 text-primary font-weight-bold text-shadow" style="color: #ffffff; background-color: #000000; padding: 20px; margin-top: 0;">ไตเติ้ลโพสต์</h1>      </div>    </div>  </div>

โค้ดด้านบนจะสร้างไตเติ้ลโพสต์ที่มีสีหลัก ตัวอักษรหนา และตัวอักษรมีเงา พร้อมเปลี่ยนสีและพื้นหลังของไตเติ้ลโพสต์เป็นสีดำและสีขาว

หวังว่าบทความนี้จะเป็นประโยชน์สำหรับผู้ที่ต้องการสร้างไตเติ้ลโพสต์บล็อกเกอร์ที่สวยงามโดยใช้ Bootstrap

#bootstrap #ไตเติ้ลโพสต์ #บล็อกเกอร์ #สอนทำเว็บ #สร้างบล็อก #ปรับแต่งบล็อก