ตอนที่3 : สร้างเว็บง่ายๆด้วย Bootstrap 4 → การเรียกใช้ระบบGrid
สวัสดีครับ และขอบคุณที่กลับมาพบกันอีกครั้งนะครับ ^^
ก่อนหน้านี้เราได้รู้จักกันไปแล้วว่า bootstrap 4 คืออะไร มีความเหมือนและความแตกต่างกับเวอร์ชั่นก่อนอย่างไร
มาถึงวันนี้ ผมก็จะนำ bootstrap 4 มาใช้สร้างหน้าตาเว็บแบบง่าย ๆ ให้ดูกันนะครับ
หน้าเว็บที่ผมเลือกมาในวันนี้ก็คือหน้าเว็บของระบบ sing in นั่นเองครับ
ซึ่งหน้าตาของระบบ sign ที่ผมออกแบบก็ตามรูปด้านล่างเลยครับ
(ออกแบบโดยใช้ https://www.draw.io/)
เราจะมาเริ่มจากการจัดการวางโครงสร้างของ <div> ก่อนนะครับ
ภายในแบบ จะเห็นว่าผมได้ออกแบบให้มี <div> ขนาดใหญ่(สีน้ำเงิน) หนึ่งอัน ครอบ <div> ขนาดเล็กกว่า (สีแดง)
หน้าตาแบบนี้ โครงสร้างแบบนี้ ต้องนึกถึงระบบ grid เท่านั้น !!!!
ถ้าไม่ใช่ระบบ grid นะ หน้าตา โครงสร้าง ทุกสิ่งทุกอย่างที่เราเขียนขึ้นมาจะถูกยุบ แล้วกองไปทางซ้ายหมดเลย สภาพก็จะเป็นตามรูปข้างล่าง
นอกจากนั้นแล้วถ้าเราเปลี่ยนขนาดหน้าจอ ก็จะพบว่ามันไม่มีความ responsive เลย เราจึงจำเป็นต้องไปเขียนเพิ่มเติมเอง ถ้าเป็นหน้าตาแบบง่าย ๆ คงไม่เท่าไร แต่ … ถ้าเป็นหน้าเว็บที่มีความซับซ้อน ขอบอกเลยว่า อย่างเยอะ! แค่คิดก็เหนื่อยแล้วล่ะครับ
ดังนั้นถ้าไม่อยากให้เกิดเหตุการณ์แบบนี้ขึ้น เราลองมาใช้ grid กันดูครับ และการเรียกใช้ก็ไม่ยาก เพียงแค่เขียนคลาส “col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12” ใส่ลงไปใน <div> เท่านั้นเอง
ตัวอย่าง
<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 "> <div class=" col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 "></div></div>
แล้วหน้าตาของเว็บเราก็จะดูดีขึ้นมาทันทีเลย
ไม่ยากเลยใช่ม๊า เขียนเพิ่มแค่นี้ก็ได้ทั้งหน้าตาที่ต้องการ และได้ทั้ง responsive ไปพร้อมๆกัน สุดยอดไปเลยล่ะ!!!
ตอนนี้ ถือว่าประสบความสำเร็จไปอีกหนึ่งระดับแล้ว ~ แต่งานยังไม่เสร็จนะครับ มาลุยกันต่อ…
ย้อนกลับไปที่แบบของเรา จะเห็นว่า <div>ขนาดเล็ก(สีแดง) จะอยู่ตรงกลาง
ซึ่งถ้าเราไม่ใช้ระบบ grid เราก็ต้อง margin ซ้าย ขวา ไป ๆ มา ๆ ใช่มั๊ยล่ะ ยิ่งนึกถึงความ responsive แล้วก็ใช้เวลาทำนานพอสมควร
ระบบ grid ของ bootstrap 4 มีคลาส offset ให้ใช้ครับ เป็นคลาสที่ใช้ขยับตำแหน่งของ col ซึ่งก็ขึ้นอยู่กับว่าเรากำหนดให้ col ถูกขยับออกไปกี่ตำแหน่ง และ offset ก็มาพร้อมกับความ responsive อีกด้วย
ลองเอา offset ใส่ใน <div>ขนาดเล็ก(สีแดง) ดูเลยครับ
ตัวอย่าง
<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 "> <div class=" col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 offset-md-3 offset-lg-3"></div></div>
และนี้ก็เป็นภาพผลงานจากการใช้ระบบ grid ของ bootstrap 4 ครับผม
และผมก็ได้ทิ้งโค้ดหน้า sign in เอาไว้ให้ ลองเอาไปเล่นดูได้นะครับ
<div class="container-fluid background-gradient-blue"><div class="row"><div class="col-sm-12 col-md-12 col-lg-12"><div style="margin-top: 6rem; margin-bottom:6rem;" class="col-sm-6 col-md-6 col-lg-6 offset-md-3 offset-lg-3 signin-border " ><!-- text head --><h1 style="margin-top: 2rem;" class="text-center quicksand-bold">SIGN IN</h1><div style="height: 360px;" class="col-10 offset-1 quicksand"><!-- form email password --><form style="margin-top: 3rem;margin-bottom: 1rem;"><div class="form-group" style="margin-top: 2rem;margin-bottom: 0.5rem;"><input type="email" class="form-control" id="formGroupExampleInput" placeholder="email..."></div><div class="form-group"><input type="password" class="form-control" id="formGroupExampleInput2" placeholder="password..."></div><!-- check box --><div class="form-check text-center"><label class="form-check-label"><input type="checkbox" class="form-check-input">remerber me</label></div><div class="text-center"><a href="#" style="color: black">forget password?</a></div><button style="margin-top: 2rem;margin-bottom: 1rem;" type="button" class="btn btn-primary btn-lg btn-block">SIGN IN</button></form></div></div></div></div></div>
และนี่ก็เป็นการสร้างเว็บโดยใช้ระบบ grid แบบเบสิคๆนะครับ ถ้าสนใจอย่าลืมติดตามผมต่อในตอนหน้านะครับ เพราะตอนหน้านั้นผมจะพาทุกท่านไปเรียนรู้กับระบบ grid ที่เจาะลึกลงไปมากขึ้นครับ
References : https://v4-alpha.getbootstrap.com/
