ตอนที่1 : มารู้จักกับ Bootstrap 4 กันเถอะ
“หลาย ๆ คนคงรู้จัก Bootstrap กันมาบ้างนะครับ ล่าสุดนี้ได้ข่าวว่าเจ้า Bootstrap 4 ถูกพัฒนาออกมาในรูปแบบของ Flat Design ซึ่งนอกจากจะช่วยให้คุณเขียนเว็บได้ไวขึ้นแล้ว ยังช่วยให้ใช้งานง่ายขึ้นอีกด้วย! ใคร ๆ ก็ร้องออกมาเป็นเสียงเดียวกันว่า ชีวิต! ดี๊ดีย์ ~ เขาว่ากันมาขนาดนี้แล้ว พลาดไม่ได้แล้วล่ะ … อยากรู้แล้วล่ะสิ! ผมอาสาเล่าให้ทุกคนเองครับ แต่พออ่านจบแล้วให้เดินระวังด้วยนะครับ … ระวังจะตกหลุมรักเจ้า Bootstrap 4 แบบไม่รู้ตัว ”
✎ Bootstrap 4 คืออะไร ?
Bootstrap 4 คือ Front-end Framework ที่ใช้ในการพัฒนาเว็บไซต์ส่วนการแสดงผลให้กับผู้ใช้ ซึ่งสามารถเข้ามาช่วยกำหนดกรอบการทำงานของกลุ่มผู้พัฒนาเว็บไซต์ให้เป็นไปในแนวทางเดียวกัน ซึ่งสามารถรองรับได้ทุก Smart Device หรือเรียกว่า Responsive Web หรือ Mobile First โดยคำว่าคำว่า Bootstrap ในภาษาอังกฤษมักจะหมายถึง “สิ่งที่ช่วยทำให้ง่ายขึ้น” หรือ “สิ่งที่ทำได้ด้วยตัวของมันเอง” ซึ่งในที่นี้จะหมายความว่า ถ้าเราใช้ Bootstrap แล้ว เราก็ไม่จำเป็นต้องไปหาอะไรมาเพิ่มอีก ซึ่งช่วยให้ง่ายต่อการพัฒนา ก่อนหน้านี้ Bootstrapได้ออกมาแล้ว 3 เวอร์ชั่น ปัจจุบันได้ออกมาเป็นเวอร์ชั่นที่ 4 แล้ว นั่นก็คือ Bootstrap 4 ที่เรากำลังจะพูดถึงอยู่นั่นเอง
✎ ทำไมต้องใช้ Bootstrap ?
พูดถึงขั้นตอนในการพัฒนาเว็บ ๆ นึง หนึ่งในขั้นตอนที่สำคัญนั้นก็คือ การออกแบบ โดยเราจะออกแบบหน้าตาของ web application ให้ดูง่ายต่อการใช้งาน
ย้อนกลับไปในสมัยที่ในโลกนี้ยังไม่มีสิ่งที่เรีกยว่า Bootstrap การออกแบบเว็บ ๆ นึง ต้องร่างแบบในโปรแกรม Photo Edit ซึ่งอาจจะใช้โปรแกรมยอดนิยมอย่าง Photoshop หรือโปรแกรมอื่น ๆ ขึ้นอยู่กับความถนัดของผู้ออกแบบ จากนั้นนำแบบร่างที่ได้มาตัดเป็นภาพต่าง ๆ ก่อนนำไป coding เป็น web application ถือว่าเป็นขั้นตอนที่กินเวลาเป็นอย่างมาก
แล้วยิ่งในปัจจุบันคนส่วนใหญ่นิยมเปิดดูเว็บจาก mobile เป็นหลัก (Mobile First) ดังนั้นผู้พัฒนาจึงต้องออกแบบเว็บให้ตอบสนองกับทุกขนาดหน้าจอด้วย โอ้ ยากเข้าไปอีก
Mark Otto และ Jacob Thornton ทีมพัฒนาของ Twitter Inc. เล็งเห็นปัญหาที่เกิดขึ้น จึงพัฒนา Bootstrap ขึ้นมาเพื่อตอบโจทย์ในเรื่องของออกแบบและ responsive web design ซึ่ง Bootstrap มีระบบ Grid มาช่วยในจัดรูปแบบหน้าตาของเว็บ และการคำนวนค่าหน้าจอให้ด้วย
✎ ส่วนประกอบของ Bootstrap
- Layout จะประกอบไปด้วย containers, grid, media object และ responsive เพื่อใช้การตกแต่งรูปร่างหน้าของเว็บ โดย containers เป็นการกำหนดขอบเขตวัตถุหรือข้อมูล , grid ใช้เพื่อแบ่ง containers เป็นคอลัมน์ย่อย ซึ่งสามารถทำได้ถึง 12 คอลัมน์ , media object เป็นการจัดการ media ต่างๆที่อยู่บนหน้าเว็บ ส่วน responsive จะเป็นฟังชั่นที่ช่วยทำให้หน้าเว็บสามารถเป็นรูปแบบให้มีความเหมาะสมตามจอแสดงผลของผู้ใช้
- Base CSS เป็นการกำหนด style ของ display ซึ่งจะใช้ร่วมกับ HTML elements พื้นฐาน เช่น typography (ลักษณะของตัวอักษร ไม่ว่าจะเป็น ความหนา,ขนาดตัวอักษร และ ลักษณะอื่น) , tables (รูปแบบของตาราง ไม่ว่าจะเป็นสี การแบ่งแถวหรือคอลัมน์) และ images (ขนาดของภาพ, ลักษณะของขอบรูปภาพ)
- Components : เป็นการรวบรวม สำหรับสิ่งที่เราต้องใช้บ่อยๆ ไม่ว่าจะเป็น buttons, dropdowns , input groups , navigation , alerts(การแจ้งเตือน), navbar , form control (รูปแบบการกรอกแบบชุดข้อมูล) และ อื่นๆอีกมากมาย
- JavaScript : jQuery plugins ต่างๆ ไม่ว่าจะเป็น modal , carousel หรือ tooltip เพื่อที่จะทำให้เว็บของเรามีลูกเล่นและมีความน่าใช้งานมากขึ้น
✎ Bootstrap 4 VS Bootstrap 3
หน่วยที่ใช้ในการกำหนดขนาด
- Px เป็นการกำหนดขนาดตัวอักษรซึ่งเมื่อมีการขยายหรือหดจอ ตัวอักษรจะมีขนาดเท่าเดิม
- Rem เพิ่มมาใน bootstrap4 เป็นการกำหนดขนาดตัวอักษรแบบ responsive คือ เมื่อขยายจอตัวอักษรจะขยายตาม และเมื่อหดจอตัวอักษรก็จะเล็กลงตามไปด้วย
Grid
- Grid tiers เป็นการกำหนดขนาด ตามขนาดของจอที่เราจะใช้ให้เหมาะสม โดย bootstrap 4 จะมีการเพิ่มขนาด xl มาเพื่อใช้รองรับจอที่มีขนาดใหญ่ขึ้นโดยขนาดจอที่เหมาะสมคือ 1140 px
- Offsetting Columns ใน bootstrap3 ใช้คำสั่ง “ Col-(ขนาดคอลัมน์)-offset-(จำนวนคอลัมน์ที่ต้องการขยับไป) ” ส่วนใน bootstrap4 ใช้คำสั่ง “ Offset-(ขนาดคอลัมน์)- (จำนวนคอลัมน์ที่ต้องการขยับไป) ” ซึ่งผลลัพธ์ที่ได้จะเหมือนกัน เพียงแต่เปลี่ยนรูปแบบของคำสั่งที่ใช้
Table
- Condensed table รูปแบบเดิมจาก bootstrap3 จะใช้ class table-condensed แต่ใน bootstrap4 จะใช้ class table-sm ซึ่งมีรูปแบบการเขียนที่ง่ายขึ้น แต่ผลลัพธ์ที่ได้จะยังคงเหมือนเดิม
- Responsive table ใน bootstrap3 จะเขียน class table-responsive ใน <div> ส่วนใน bootstrap4 สามารถเขียน class table-responsive ในตารางได้เลย
Navbars
เป็นแถบบาร์เมนู ซึ่งในBootstrap 3จะมีแค่แถบบาร์เมนูสีเทาซีดๆและสีดำให้ใช้ ดูธรรมดา แต่ถ้าเป็นในBootstrap 4ก็จะมีสีอื่นๆให้เลือกใช้เพิ่มขึ้น ดูมีสันมากขึ้น ส่วนคำสั่งที่ใช้ก็จะมีบางส่วนที่แตกต่างกันเช่นคำสั่งจัดตำแหน่งถ้าเป็นในBootstrap 3จะใช้คำสั่ง .navbar-right , .navbar-left ถ้าเป็นBootstrap 4จะใช้คำสั่ง .pull-()-right , .pull-()-left , .pull-()-none นอกจากนั้นยังมีคำสั่งในการสร้างแถบแสดงหมายเลขหน้า(Pagination)ที่ในBootstrap 3จะใช้ .pagination ใน<ul> ส่วนBootstrap 4จะมีการใช้ .page-item ใน <li>และ ใช้ .page-link ใน <a>
Form
จะเป็นในส่วนของฟอร์มการกรอกข้อมูล
- Horizontal Forms (ฟอร์มแบบแนวนอน) ในส่วนของ Bootstrap 3 จะใช้คำสั่ง .form-horizontal.form-control-label และ Bootstrap 4 จะใช้คำสั่ง .row กับ grid .col-form-label
- Check boxes and Radio Buttons ในส่วนของ Bootstrap 3 จะใช้คำสั่ง .radio , .radio-inline , checkbox , checkbox-inline และ Bootstrap 4 จะใช้คำสั่ง .form-check , .form-check-label , .form-check-input , .form-check-inline
- Form Control Size (ปรับขนาดของฟอร์ม) ในส่วนของ Bootstrap 3 จะใช้คำสั่ง .input-(Grid Tier) และ Bootstrap 4 จะใช้คำสั่ง .form-control-(Grid Tier)
- Help text ( แสดงข้อความเพื่อช่วยเหลือ) ในส่วนของ Bootstrap 3 จะใช้คำสั่ง .help-block และ Bootstrap 4 จะใช้คำสั่ง .form-text
- Validation and Feedback Icons (ตรวจสอบความถูกต้อง การตอบกลับของไอคอน) ในส่วนของ Bootstrap 3 จะไม่มีคลาสเฉพาะ แต่ใช้ .form-control-(glyphicons) ทำได้ แต่ Bootstrap 4 จะใช้คำสั่ง .has-feedback
Button
Semantic Styles ของตัว button ใน Bootstrap 3 สามารถระบุลักษณะได้ด้วยคำสั่ง .btn-default , .btn-info และ ใน Bootstrap 4 สามารถใช้คำสั่ง .btn-secondary , .btn-info ซึ่งลักษณะของ button ระหว่าง Bootstrap 3 กับ 4 ก็มีความแตกต่างกันค่อนข้างชัดเจน
Image
- Responsive Images (การปรับขนาดอัตโนมัติตามขนาดหน้าจอ) ในส่วนของ Bootstrap 3 จะใช้คำสั่ง .img-responsive และในส่วนของ Bootstrap 4 จะใช้คำสั่ง .img-fluid
- Image Alignment (ตำแหน่งของรูปภาพ) ในส่วนของ Bootstrap 3 จะใช้คำสั่ง .pull-right (จัดภาพให้อยู่ด้านขวา), .pull-left (จัดภาพให้อยู่ด้านซ้าย), .center-block (จัดภาพให้อยู่ตรงกลาง) และในส่วนของ Bootstrap 4 จะใช้ ใช้ .m-x-auto แทน center-block โดย ทั้ง 2 แบบนี้จะให้ผลที่ไม่แตกต่างกัน
Drop-down
- Structure ใน Bootstrap 3 ใช้ <ul>,<li> ส่วน Bootstrap 4 ใช้ .dropdown-menu รวม .dropdown-item ใน <div>
- Menu Headers ใน Bootstrap 3 ใช้ .dropdown-header ใน<li> ส่วน Bootstrap 4 ใช้ .dropdown-header ใน<h1>,<h2>
- Dividers ใน Bootstrap 3 ใช้ .divider ส่วน Bootstrap 4 ใน<li> ใช้ .dropdown-divider ใน<div>
- Disabled Menu Items ใน Bootstrap 3 ใช้ .disabled ใน<li> ส่วน Bootstrap 4 ใช้ .disabled ใน<a>
Blockquotes
Blockquotesของทั้งBootstrap 4และ3มีลักษณะที่เหมือนกันแต่คำสั่งในการใช้จะไม่เหมือนกัน ถ้าเป็นBootstrap 3จะใช้<blockquote>ได้เลย แต่ถ้าเป็นBootstrap 4จะต้องใช้<blockquote class=”blockquote”>
Breadcrumbs
Breadcrumbsของทั้ง2เวอร์ชั่นจะต่างกันตรงที่คำสั่งในการใช้งานตรงที่เวลาที่เราจะเขียนหัวข้อย่อยๆในBreadcrumbs ซึ่งถ้าเป็นของBootstrap 4 จะต้องใส่class=”breadcrumb-item”ลงไปใน<il>ด้วย แต่ถ้าเป็นในBootstrap3ไม่จำเป็นต้องใส่
Carousels
เป็นการโชว์ภาพแบบที่เลื่อนไปซ้าย-ขวาได้ ซึ่งถ้าเป็นในBootstrap 3ภาพแต่ละอันจะถูกใส่ไว้ในclass item แต่ถ้าเป็นBootstrap 4จะใส่ไว้ในclass carousels-item
Stop!!!! ขอเบรคเรื่อง Bootstrap 4 ไว้เพียงเท่านี้ก่อนนะครับ คิดว่าคุณผู้อ่านคงจะเริ่มรู้จักกับเจ้าBootstrap 4กันมามากพอสมควรละนะครับ เดี๋ยวมาติดตามกันต่อในตอนหน้านะครับ เพราะเราจะมาเริ่มสอนการติดตั้งBootstrap 4กันนะครับ เตรียมตัวเตรียมใจ เตรียมคอมของคุณให้พร้อม แล้วมาเจอกันในตอนหน้านะครับบบบบบบบบ
References
