หลายๆ คนที่เพิ่งเริ่มเขียนเว็บกันน่าจะได้พบกับความยากลำบากในการทำให้เว็บสวยงามและทำให้แบบคงที่ในทุกๆ หน้าจอของผู้ใช้ เนื่องจากเว็บทุกวันนี้ไม่ได้ถูกเข้าโดยคอมพิวเตอร์อย่างเดียว ผู้ใช้สามารถเข้าเว็บได้จากอุปกรณ์หลายแบบ ไม่ว่าจะเป็น โน๊ตบุ๊ค แท็บเล็ต มือถือ หรือแม้กระทั่งทีวี การที่ชาวโค้ดนั้นจะทำให้เว็บที่ตนเองสร้างขึ้นนั้นสนับสนุนทุกขนาดความกว้างของหน้าจอได้ไม่ใช่เรื่องยากอีกต่อไป ถ้าเราใช้ framework (โครงร่าง) ที่เรียกว่า Bootstrap

ภาพรวมการใช้งาน Bootstrap

จากบทนำ เราพอจะรู้คร่าวๆ แล้วว่า Bootstrap ช่วยในเรื่องการทำเว็บให้ responsive (รองรับทุกขนาดหน้าจอของผู้ใช้) แต่จริงๆ Bootstrap ยังทำให้ชีวิตเราง่ายขึ้นในหลายๆ ด้านมาก ไม่ว่าจะเป็นการดีไซน์เว็บให้สวยงามทันสมัยโดยที่เราเขียนโค้ดนิดเดียว หรือการจัด layout (แบบ) หน้าเว็บเราง่ายๆ โดยไม่ต้องเขียนโค้ด CSS เยอะ

ตัวอย่างการใช้ Bootstrap

https://getbootstrap.com/docs/4.1/examples/album/
https://getbootstrap.com/docs/4.1/examples/pricing/
https://getbootstrap.com/docs/4.1/examples/checkout/

สามารถไปดูตัวอย่างทั้งหมดได้ที่ https://getbootstrap.com/docs/4.1/examples/

โครงร่าง Bootstrap จะถูกแบ่งออกเป็น 4 ส่วนหลักๆ ได้ดังนี้

1. Layout (แบบ)
2. Content (เนื้อหา)
3. Components (ส่วนประกอบต่างๆ ในเว็บ)
4. Utilities (เครื่องมืออำนวยความสะดวกเรื่องการตกแต่ง โดยไม่ต้องเขียน CSS)

Layout (แบบ)

องค์ประกอบแรกที่เป็นจุดชูโรงของการใช้ Bootstrap ก็คือเรื่องของ layout ซึ่งมันพิเศษมากๆ เพราะ layout ของ Bootstrap สามารถรองรับขนาดหน้าจอของทุกอุปกรณ์ ไม่ว่าจะเป็น มือถือ แท็บเล็ต โน๊ตบุ๊ค หรือคอมพิวเตอร์ตั้งโต๊ะ แล้ว layout มันทำงานอย่างไรล่ะ?

Bootstrap แบ่งหน้าจอเป็นห้าขนาด ตามด้านล่างนี้ (Bootstrap's Grid System)

1. หน้าจอขนาดเล็กมาก (หน้าจอเล็กกว่า 576 พิกเซล) ซึ่งก็คือมือถือเวลาใช้แบบแนวตั้ง
2. หน้าจอขนาดเล็ก (หน้าจอขนาด 576 พิกเซล หรือมากกว่า) ซึ่งก็คือมือถือเวลาใช้แบบแนวนอน
3. หน้าจอขนาดกลาง (หน้าจอขนาด 768 พิกเซล หรือมากกว่า) ซึ่งก็คือแท็บเล็ต
4. หน้าจอขนาดใหญ่ (หน้าจอขนาด 992 พิกเซล หรือมากกว่า) ซึ่งก็ส่วนใหญ่คือโน๊ตบุ๊ค
5. หน้าจอขนาดใหญ่มาก (หน้าจอขนาด 1200 พิกเซล หรือมากกว่า)  ซึ่งก็คือโน๊ตบุ๊ครุ่นใหม่ๆ และคอมตั้งโต๊ะ

Bootstrap จะทำการขยายหรือบีบ element นั้นๆ ให้ใหญ่ขึ้นหรือเล็กลงโดยอัตโนมัติตามขนาดหน้าจอของผู้ใช้ การจะให้ element เรานั้นรองรับตามขนาดหน้าจอของผู้ใช้ก็สามารถทำได้ไม่ยากโดยการใส่ div เป็นภาชนะให้ elements ของเราและใช้ class container หรือ container-fluid

ตัวอย่างการใช้ container

<div class="container">
  <h1>เนื้อหาปรับตามขนาดหน้าจอ</h1>
  <p>ใช้ Bootstrap แล้วปัญหาขนาดหน้าจอของผู้ใช้จะหมดไป!</p>
</div>

ผลลัพธ์จากโค้ดข้างบน

จะเห็นได้ว่าพื้นหลังที่เป็นสีม่วงคือความกว้างของ container ที่เราใช้

ตัวอย่างการใช้ container-fluid

<div class="container-fluid">
  <h1>เนื้อหาเต็มหน้าจอตลอด</h1>
  <p>ใช้ Bootstrap แล้วปัญหาขนาดหน้าจอของผู้ใช้จะหมดไป!</p>
</div>

ผลลัพธ์จากโค้ดข้างบน

จากผลลัพธ์ข้างบนหลายๆ คนอาจจะงงว่ามันก็ได้ผลลัพธ์หน้าตาเหมือนกันนิ ทำไมต้องมีสองอัน คืออย่างงี้ container จะแตกต่างจาก container-fluid ตรงที่ว่ามันจะไม่กินพื้นที่หน้าจอ 100% ตลอด มันจะใช้คุณสมบัติ max-width ในการกำหนดว่าแต่ละขนาดหน้าจอจะมีความกว้างเท่าไหร่ ถ้าดูรูปภาพด้านล่างนี้น่าจะเข้าใจได้มากขึ้น

หน้าจอมือถือ

หน้าจอแท็บเล็ต

หน้าจอโน๊ตบุ๊คขนาดใหญ่

จากรูปภาพข้างบนจะเห็นได้ชัดว่าพื้นที่สีม่วงไม่ได้ครอบคลุมทั้งหมดของหน้าจอ เพราะยังมีพื้นที่สีขาวเหลืออยู่ ซึ่งนี้คือความพิเศษของ container มันจะปรับความกว้างของ element เราตามขนาดหน้าจอของผู้ใช้ ไม่เหมือน container-fluid ที่จะกินพื้นที่หน้าจอ 100% ตลอด

ในส่วน layout ของ Bootstrap ก็จะประมาณนี้ครับ คงจะพอเข้าใจคร่าวๆ แล้วว่ามันช่วยให้เราประหยัดเวลาเรื่องการสนับสนุนหน้าจอหลายๆ ขนาดได้อย่างไร แต่เดี๋ยววันหลังจะมาลงลึกในเรื่องของการทำ responsive โดยใช้ Bootstrap Grid System(ระบบกริด)

Content (เนื้อหา)

ในด้านเนื้อหาที่ Bootstrap จะช่วยก็คือพวก typography (การแสดงตัวอักษร) image (รูปภาพ) และอื่นๆ

ยกตัวอย่างถ้าเราอยากให้รูปภาพเราปรับขนาดตามภาชนะที่เราใส่รูปเข้าไปไม่ว่าขนาดรูปภาพที่เราเลือกมาใช้นั้นจะมีขนาดเท่าใดก็ตาม เราสามารถใช้ class img-fluid เพื่อบอก Bootstrap ให้ขยายรูปภาพให้เต็มภาชนะได้ง่ายๆ

<div class="container">
  <img class="img-fluid" src="https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg">
</div>

ผลลัพธ์จากโค้ดข้างบน

หน้าจอมือถือ

หน้าจอแท็บเล็ต

หน้าจอโน๊ตบุ๊คขนาดใหญ่

จากตัวอย่างการใช้ layout และ content ของ Bootstrap แล้วเราคงจะเห็นได้ว่ามันง่ายแค่ไหนในการเขียนโค้ดให้รองรับทุกขนาดหน้าจอ ถ้าเราใช้ Bootstrap แทบไม่ต้องเขียน CSS กันเลยทีเดียว ใช้ class ที่ Bootstrap กำหนดมาให้ก็พอ!

Components (ส่วนประกอบต่างๆ ในเว็บ)

มาถึงส่วนที่สามของ Bootstrap ซึ่งส่วนตัวมองว่าเป็นอะไรที่ว้าวมากๆ ไม่แพ้ layout เลย เพราะ Bootstrap components จะทำให้เว็บเราสวยงามและดูทันสมัยขึ้นมาทันใด

ยกตัวอย่างเว็บไซต์แทบทุกเว็บจะมี Navigation bar (แถบนำทางหรือเมนู) ไว้ให้ผู้ใช้คลิกเพื่อไปเยี่ยมหน้าต่างๆ ในเว็บได้ง่าย หากเราไม่ใช้ Bootstrap เราต้องมานั่งเขียน HTML และ CSS เพื่อตกแต่งให้สวยงาม ซึ่งแค่โค้ดในส่วนนี้ก็กินเวลาได้พอสมควร แต่ถ้าเราใช้ Bootstrap component ซึ่งมีแถบนำทางมาให้ด้วย จะทำให้ชีวิตเราง่ายขึ้นมากกกกกกก

ตัวอย่าง Navbar Component ของ Bootstrap

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Bootstrap</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">หน้าแรก</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">เกี่ยวกับเรา</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ติดต่อเรา</a>
      </li>
    </ul>
  </div>
</nav>

ผลลัพธ์จากโค้ดข้างบน

ซึ่งเราแทบไม่ต้องเขียน CSS เองเลย แต่ถ้าเราอยากเปลี่ยนสีหรือตกแต่งเพิ่มเติมก็ย่อมทำได้ แค่ต้อง override class ของ Bootstrap และใส่คุณสมบัติ CSS ที่เราต้องการ ซึ่งในเรื่องนี้จะมาอธิบายให้ฟังในวันหลัง นอกจากมันจะสวยแล้วพวก components พวกนี้ยังรองรับทุกขนาดหน้าจอตามแนวคิดหลักของ Bootstrap อีกด้วย ทำให้เราประหยัดเวลาในการเขียนโค้ดตกแต่งและรองรับทุกหน้าจอไปได้มากเลยทีเดียว

ติดตั้ง Bootstrap ให้เว็บของเรา

วิธีที่ง่ายและที่ผมแนะนำที่สุดในตอนนี้ก็คือการใช้ CDN ของ Bootstrap โดยแค่แปะโค้ดด้านล่างนี้ไว้ที่ head ของเว็บไซต์เรา

<html>
  <head>  
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"    crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </head>
</html>