ตอนที่2 : เริ่มต้นใช้ Bootstrap 4
บอกได้เลยครับว่า Bootstrap เป็น framework ที่ฮอตเป็นอันดับต้น ๆ ของโลกกันเลยทีเดียว เพราะว่ามันเป็น Framework ที่สามารถสร้าง responsive, mobile-first site และ application ได้อย่างน่าประทับใจกันเลยทีเดียว และวันนี้ผมจะเป็นคนพาทุกคนมาพบกับรูปแบบของ HTML, CSS และ JavaScript ที่ทำให้ชีวิตของเราดีขึ้น! และง่ายขึ้น!
ถ้าพร้อมแล้วมาเริ่มกันเลยครับ
อย่างแรกที่เราต้องมี คือ Text editor ที่เอาไว้ใช้สำหรับพัฒนาและออกแบบหน้าตาเว็บครับ
ซึ่งผมเลือกใช้ Sublime text 3 ครับ เนื่องจากมันถูกออกแบบมาให้ทำงานกับการเขียนเว็บโดยเฉพาะ จึงใช้ง่าย และติดตั้งก็ไม่ยากครับ
ดาวโหลดได้ตามลิงค์นี้เลย : https://www.sublimetext.com/3
มะ! มาเริ่มต้นกันง่าย ๆ แบบรวดเร็วทันใจ ด้วยการ copy-paste stylesheet ตามด้านล่าง ใส่ลงไปในใน <link> ที่อยู่ในส่วน <head> เลยครับ
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">และตามมาด้วย copy-paste ปลั๊กอินของ JavaScript plugins, jQuery และ Tether ใส่ลงไปด้วยซึ่งเราจะใส่ตรงไหนก็ได้ครับ แต่ขอให้อยู่ก่อนจบที่ </body> ครับ (แต่ผมแนะนำว่าใส่ใน <head> ถัดจาก stylesheet จะดีกว่า จะได้ไม่สับสน)
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
อ๋อ! อีกอย่างที่สำคัญ อย่าลืมดูให้ดีนะครับ ว่าเราได้ใช้ HTML5 doctype และ ใช้ viewport ใน <meta> หรือยัง? ไม่อย่างนั้นหน้าเว็บของเราอาจจะพังเวลาเจอกับ browser เวอร์ชั่น ใหม่ ๆ ได้ครับ และพอเราเอาทุกอย่างมารวมกันจะได้ชุดคำสั่งแบบนี้ครับ
<!DOCTYPE html><html lang="en"><head><!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"></head><body><h1>Hello, world!</h1><!-- jQuery first, then Tether, then Bootstrap JS. --><script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script></body></html>
นอกจาก Bootstrap ถูกพัฒนาให้รองรับกับการทำงานในแบบ mobile first แล้วยังมีการปรับขนาดส่วนประกอบสำคัญต่าง ๆ ที่ใช้ใน CSS เพื่อให้ตอบสนองได้กับทุกหน้าจอตามอุปกรณ์ต่าง ๆ ได้อย่างมีประสิทธิภาพอีกด้วย เพียงแค่เพิ่มคำสั่ง Responsive meta tag ลงใน <head> เท่านั้น
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">ก็จบไปแล้วนะครับกับการติดตั้งBootstrap 4 ส่วนในตอนหน้านั้นเราจะมาสอนการใช้Bootstrap 4ในการสร้างเว็บเบื้องต้นกันนะครับ จะเป็นยังไงนั้นต้องรอติดตามนะครับบบบ
References : https://v4-alpha.getbootstrap.com/
