BLOG

Reading

วิธีเขียน Layout ด้วย Bootstrap

HTML / CSS - 02 Mar 2021
Author:



Step 1

ทำการ CDN เอา Bootstrap เข้ามาก่อน โดยการเพิ่ม Code นี้ ไว้ที่ส่วนของ <head></head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

หลังจากนั้น ทำการสร้าง container ขึ้นมาเพื่อทำให้ตัว Layout ทั้งหมด อยู่ตรงกลางของหน้าจอ

<div class=”container”>
</div>

นำ <div class=”row”></div> เข้าไปไว้ใน container ดังนี้

<div class=”container”>
  <div class=”row”></div>
</div>

ในส่วนของ row จะต้องทำการ สร้าง Column เป็นจำนวน 4 อัน สืบเนื่องมาจากต้องการสร้าง Header Aside Section Footer โดยจะต้องระบุ col ตามด้วยจำนวน block span (เต็มสุดคือ 12) ดังนี้

<div class=”container”>
  <div class=”row”>
    <div class=”col-12”></div>
    <div class=”col-4”></div>
    <div class=”col-8”></div>
    <div class=”col-12”></div>
  </div>
</div>

ในขั้นตอนนี้ Layout จะถูกสร้างขึ้นมาแล้ว เพียงแต่จะมองด้วยตาเปล่าไม่เห็น เพราะไม่ได้ใส่ Content หรือ Background อะไรไว้เลย ฉะนั้น จึงต้อง สร้าง header , aside , section , footer เข้ามา ให้อยู่ภายในกรอบของ col ดังนี้

<div class=”container”>
  <div class=”row”>
    <div class=”col-12”><header>Header</header></div>
    <div class=”col-4”><aside>Aside</aside></div>
    <div class=”col-8”><section>Section</section></div>
    <div class=”col-12”><footer>Footer</footer></div>
  </div>
</div>

ใช้ Header เป็น col-12 เลยไม่ได้หรือ?

คำตอบคือ ได้ แต่ว่าจะไม่สามารถใช้ Utilities g ได้  (ไม่สามารถเพิ่มช่องว่างระหว่างคอลัมน์) 
จึงไม่แนะนำให้ทำแบบนั้น เพราะจะไม่ยืดหยุ่นต่อการเขียน เมื่อได้ ตามนี้แล้ว ต่อไปจะเป็นการใส่สี Background และทำการเพิ่ม Padding  ด้วยการใช้ Bootstrap ซึ่งสามารถทำได้ง่ายๆโดยการเพิ่มไปที่ class ของตัว Element ที่ต้องการ

  <header class="bg-secondary p-5">Header</header>
  <aside class="bg-secondary h-100">Aside</aside>
   <section class="bg-secondary">Section</section>
   <footer class="bg-secondary p-5">Footer</footer>

bg-secondary คือ พื้นหลังสีเทา
p-5 คือ Padding ความห่างระดับ 5

แน่นอนว่ามีสีอื่นๆและคำสั่งอื่นๆอีก สามารถศึกษาเพิ่มเติมได้ที่เรื่องของ Bootstrap Utilities

ขั้นตอนต่อไปคือการเพิ่ม Gap หรือ Gutter เพื่อทำให้แต่ละคอลัมน์ เกิดช่องว่าง 

สามารถทำได้ง่ายๆโดยการใส่ g-2 ไว้ที่ class row 
<div class="row g-2">

ในส่วนของ aside และ section หากต้องการให้มีความยาวเพิ่มขึ้นมา แนะนำว่าให้ใช้วิธีการขยาย padding ดีกว่าการกำหนด height ตรงๆ  โดยการเขียน CSS ที่ head ดังนี้

<style>
   aside,section {padding: 250px 0px;}
 </style>

ตกแต่งเพิ่มเติมให้ตัวอักษรใหญ่ขึ้น และอยู่ตรงกลางได้ด้วยการใช้ text-center text-white ก็จะถือว่าเป็นอันเสร็จสมบูรณ์

<div class="row g-2 text-center text-white h2">

สรุป Code ทั้งหมด 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>01-Bootstrap</title>
  <!---Bootstrapset-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <style>
   aside,section {padding: 250px 0px;}
  </style>
</head>
<body>

<div class="container">
  <h1>Bootstrap</h1>
  <div class="row g-2 text-center text-white h2">
    <div class="col-12">
      <header class="bg-secondary p-5">Header</header>
    </div>

      <div class="col-md-4 col-sm-12 ">
        <aside class="bg-secondary h-100">Aside</aside>
      </div>
      <div class="col-md-8 col-sm-12" >
        <section class="bg-secondary">Section</section>
      </div>

    <div class="col-12">
      <footer class="bg-secondary p-5">Footer</footer>
    </div>
  </div>
</div>
</body>
</html>

Series 4 Layout Techniques

  1. Overview
  2. วิธีเขียน Layout ด้วย Bootstrap