Bootstrap ชื่อนี้หลายๆ คนคงเคยได้ยินมาบ่อยๆ เวลาจะทำเว็บมักจะบอกว่าใช้ Bootstrap เลยง่ายดี จบงานไว ใช้ทำงานได้ง่ายๆ ติดตั้งแล้วเริ่มทำเว็บเลย ดีกว่าไปนั่งเขียนเอง แล้วมันคืออะไร หล่ะ

 

Front-End Frameworks คือ

Front End คือส่วนของ รูปร่าง หน้าตาที่คนทั่วไปเห็นจนชินตา รูปร่างหน้าตา ทุกอย่างตั้งแต่ ตัวหนังสือ สีพิ้นหลัง เมนู ปุ่มต่างๆ ฟอร์มที่เอาไว้ใช้กรอกข้อมูล การแบ่งสัดส่วน สำหรับหน้าจอ พีซี หรือ หน้าจอมือถือ ทุกอย่างๆ ที่เรามองเห็นหน้าเว็บคือ Front-End ส่วนการทำให้เป็นรูปร่าง หน้าตาหน้าใช้งาน มี Component ชัดเจน Element ต่างๆ สมส่วน และสวยงาม  ส่วน Frameworks คือ รูปแบบการเขียนโค้ดให้เป็นกฏมาตรฐานเดียวกัน เพราะปกติต่างคนต่างเขียน มันย่อมไม่เหมือนกันอยู่แล้ว แล้วเราจะทำยังไงให้ทุกๆ คนมาใช้เหมือนๆ กันแล้วได้ผลลัพท์ เราเรียกมันว่า Frameworks รวมกับ Front-End เมื่อครู่ จึงหมายถึง รูปแบบการเขียนส่วนแสดงผลในส่วนของ หน้าตา ที่เหมือนๆ กัน

 

 Bootstrap คือ

ชุดโค้ด Component Element ต่างๆ ที่ออกแบบมาให้ดูสวยงามใช้งานง่ายๆ โดยเอา HTML, CSS, Javascript มาผูกเข้าไว้ด้วยกันตั้งแต่เริ่ม ถูกพัฒนาจากทีมงานของ Twitter และปัจจุบันถูกเรียกว่าเป็น Front-End Frameworks ตัวหนึ่ง และที่สำคัญเป็นตัวที่ได้รับความนิยมมาหลาย ปีติดต่อกันหล่ะ ตัวนี้ เพราะฉะนั้นจึงไม่แปลกเลยที่เวลาถามใครว่าจะใช้อะไรมาเป็น Front-End Frameworks ตัวนี้ก็จะถูกพูดอยู่บ่อยๆ

 

แล้วก็ตอนนี้ Bootstrap ก็ถูกพัฒนามาเรื่อยๆ จนถึงตอนนี้ เวอร์ชั่นที่ 4.1.x แล้ว หลังจากรออยู่นาน ก่อนหน้าจะมาถึงเวอร์ชั่นนี้ ก็มีตั้งแต่ V2.3.2, V3.3.7, V4Alpha, V4.1.x แล้วก็ปัจจุบัน ตัวผมเองก็มาเริ่มใช้ตอน 3.3.7 แรกๆ อะ ตอนนั้นทำเว็บนี่หน้าเหมือนกันหมดเลย เพราะใช้แต่ ของเดิมๆ ไม่ปรับแต่งอะไร จนมาเวอร์ชั่น 4 ของเล่นเยอะมาก

 

การใช้งาน

เราสามารถเรียกใช้งานได้หลายทาง ช่องทางที่ทาง Official บอกมาสามารถเข้าไปดูได้ ที่นี่ 

  • Source File Download หลังจาก Download มาสามารถเอาไปวางในโปรเจ็คงานแล้วใช้ได้เลย
  • CDN เราสามารถ ใช้ได้จาก Link นี้เลยทั้ง CSS, Javascript
    <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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  • NPM ใช้คำสั่ง ตามนี้เพื่อดาวน์โหลดมาลง node_modules ได้เลย
    npm install bootstrap
  • RubyGems
    gem 'bootstrap', '~> 4.1.3'
  • Composer
    composer require twbs/bootstrap:4.1.3

     

มีหลายทางมากๆ เลย แต่เราจะมาใช้แบบง่ายๆ กันนะครับ ผมเลือกวิธี CDN นะครับ มาใช้งานกันเลย และแน่นอนครับ การจะใช้ Bootstrap CDN เราจำเป็นต้องมี jQuery และ Popper ด้วยเป็นตัวที่ Require นะครับ สามารถใช้ CDN ได้เหมือนกันเลย

 
<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>

หลังจากเรียกใช้ ทั้ง CSS, Javascript ทั้งหมดแล้วหน้าตาที่ได้จะประมาณนี้นะครับ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 4 Develop</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>

<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>
<script>
$( document ).ready(function() {
console.log('dev');
});
</script>
</body>
</html>

ตัวอย่างที่ผมทำมาให้ดูแบบคร่าวๆ เพียงเท่านี้เราก็สามารถใช้งานได้แล้ว ครับ  เดี๋ยวผมมาลองใช้ แบ่งหน้า และใช้ Component บางตัวให้ดูนะครับ

 

สิ่งที่ถูกรวมมาใน Bootstrap ผมจะแบ่งตามหน้าเว็บ Document นะครับจะได้ไม่สับสนเวลาไปหาข้อมูลต่อ

  • Content จะเป็นพวกส่วนของ Typography การ Reset CSS, การแสดงผลของ ตาราง ภาพ พื้นฐาน
  • Components เป็นพวก Component ชิ้นๆ เช่น ปุ่ม อินพุทต่างๆ ลิสกรุ๊ป เมนู เป็นต้น เยอะพอสมควรครับ
  • Utilities พวกองค์ประกอบ เช่นการจัดหน้าชิดซ้ายขวา แบ่งหน้าจอ เส้นขอบ ตำแหน่งการวาง ครับ

 

การใช้งาน Layouts 

จากที่ให้มา จะมีการจัดทำให้หน้าเว็บเป็นทั้งแบบ Fluid (เต็มจอ) หรือ Fixed ( กำหนดความกว้าง ) โดยเราจะเรียกมันว่า Grid ให้มองหน้าเว็บ ครับ เว็บทั่วไปสมัยนี้มันจะมีทั้งหมด 12 Grid เราจะแบ่งตาม Grid เท่ากันอย่างมีสัดส่วน

grid
grid

ผมจะลองมาแบ่งหน้าจอเป็น 3 3 3 3 และ 4 4 4 นะครับ

<div class="text-center">
<div class="row">
<div class="col-3">col</div>
<div class="col-3">col</div>
<div class="col-3">col</div>
<div class="col-3">col</div>
</div>
<hr>
<div class="row">
<div class="col-4">col</div>
<div class="col-4">col</div>
<div class="col-4">col</div>
</div>
</div>

จากตัวอย่างจะเป็นการแบ่งหน้าแบบ 3 3 3 3 และแถวล่าง 4 4 4 ซึ่งทั้งสองแถวบวกกันได้ 12 ใช่ครับ แถวหนึ่งเรากำหนดให้เป็น 12 Grid ตามที่ผมบอกด้านบนไป แต่ตัว Bootstrap 4 มันมีของใหม่มา และ 1 ในของใหม่มันคือ การที่ใส่ แค่ col มันจะไปคำนวณให้เองเลยครับ โดยที่เราไม่ต้องใส่ เลขเลย

 

<div class="text-center">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>

ทั้งสองชุดนี้ได้ผลลัพท์เหมือนกันเลยครับ แต่ด้านล่างดู สบายตากว่าเพราะไม่ต้องใส่ตัวเลข นี่หล่ะคือหนึ่งใน ของใหม่ของ Bootstrap4 แล้วโอกาศหน้าผมจะมาพูดถึง Component ต่างๆ ต่อไปนะครับ