การทำ Responsive device ด้วย Bootstrap Grid System

การทำ Responsive device ด้วย Bootstrap Grid System

      การทำ Responsive device  ด้วย ฺBootstrap grid system เพื่อให้ตอบสนองต่อการแสดงผลผ่านอุปกรณ์ต่างๆไม่ว่าจะเป็น การแสดงผลผ่านคอมพิวเตอร์, แท็บเล็ต, สมาร์ทโฟน เป็นต้น ซึ่งเป็นการจัดเลย์เอาต์ให้กับหน้าเว็บไซต์ของเราให้เป็นระเบียบและแบ่งสัดส่วนได้ตามต้องการ

 

Bootstrap Grid System

      ระบบ Bootstrap grid system ในหนึ่งแถวนั้น (row) จะแบ่งออกเป็น 12 คอลัมน์ (colum) โดยที่เราสามารถแบ่งคอลัมน์ หรือ จัดกลุ่ม เพื่อนำข้อมูลที่ต้องการวางลงในคอลัมน์ต่างๆได้

 

Grid Classes

      สามารถแบ่งออกได้เป็น 4 คลาส ดังนี้

  • xs : สำหรับโทรศัพท์ (ขนาดน้อยกว่า 768px)
  • sm : สำหรับแท็บเล็ต (ขนาดมากกว่าเท่ากับ 768px)
  • md : สำหรับเดสท็อปทั่วไป (ขนาดมากกว่าเท่ากับ 992px)
  • lg : สำหรับเดสท็อปขนาดใหญ่ (ขนาดมากกว่าเท่ากับ 1200px)

      px = pixel

 

Basic Structure

<div class="container">

    <div class="row">

       <div class="col-class-number">

       </div>

    </div>

</div>

  • class :  ให้เราเลือกใช้คลาสตามการใช้งานของเรา โดยมีคลาสให้เลือกคือ คลาส xs, sm, md และ lg 
  • number : ให้เราใส่ตัวเลข 1-12 ซึ่งการแบ่งคอลัมน์ในหนึ่งแถวนั้น (row) จะไม่เกิน 12

 

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

<div class="container">

    <div class="row">

       <div class="col-md-8">

        class = md, number = 8

       </div>

       <div class="col-md-4">

        class = md, number = 4  

       </div>

    </div>

</div>

 

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

 

          ผู้พัฒนาสามารถนำไปประยุกต์ใช้ เพื่อให้การแสดงผลในอุปกรณ์มีประสิทธิภาพมากยิ่งขึ้น

 

โดย :
 9285
ผู้เข้าชม

บทความที่เกี่ยวข้อง

การเลือกสีให้เหมาะสมกับงานสำหรับใครหลายคน คงเป็นเรื่องยุ่งยาก วุ่นวาย เพราะกว่าจะหาสีให้สวยงามหรือถูกใจใครๆ คงเสียเวลาเป็นส่วนใหญ่ หรืออาจจะไม่สามารถเลือกสีให้เหมาะสมเลยก็เป็นได้ ดังนั้นจึงขอนำเสนอเคล็ดลับการ "เลือกสี" สำหรับการออกแบบให้สวยงามโดดเด่น สุดชิค
เมื่อเทคโนโลยีเป็นส่วนหนึ่งของการใช้ชีวิตในปัจจุบัน และมีการเปลี่ยนแปลงอยู่เสมอ จึงหลีกเลี่ยงไม่ได้ที่เทคโนโลยีจะเป็นปัจจัยสำคัญต่อการสร้างความเปลี่ยนแปลงในการศึกษาเช่นกัน โดยจะเห็นได้ว่าปีที่ผ่าน ๆ มา สถาบันการศึกษาทั่วโลกต่างพากันลงทุนจำนวนมากกับเทคโนโลยี เพื่อส่งเสริมการเรียนรู้ และสร้างช่องทางให้ผู้เรียนเข้าถึงหลักสูตรต่าง ๆ มากขึ้น ดังนั้น แน่นอนว่าแนวโน้มการศึกษาในปี 2017 จะเกี่ยวข้องกับเทคโนโลยี "ประชาชาติธุรกิจ" จึงรวบรวมแนวโน้มการศึกษาจากแหล่งข้อมูลต่าง ๆ ไว้ดังนี้ เยสคอร์ส (YesCourse) ผู้สร้างแพลตฟอร์มการกระจายการศึกษาออนไลน์ ซึ่งเป็นพื้นที่ให้สถาบันการศึกษาทั่วโลกได้ขายหลักสูตรการศึกษาออนไลน์ของตน โดยปัจจุบันมีสมาชิกมากกว่า 3,500 สถาบันการศึกษาระบุว่า ในปีที่ผ่านมาการศึกษาออนไลน์ได้เปลี่ยนโฉมหน้าของการศึกษาอย่างมาก และเป็นตัวเสริมให้การศึกษาแบบดั้งเดิมมีประสิทธิภาพมากยิ่งขึ้น เพราะเปิดโอกาสให้ผู้เรียนได้เรียนจากทุกที่ แต่ในปี 2017 ระบบการเรียนออนไลน์แบบเสมือนจริง Virtual Reality (VR) จะกลายเป็นกระแสหลักมากขึ้น ซึ่งเราอาจได้เห็นและได้ยิน VR ในอุตสาหกรรมอื่น ๆ มาแล้ว เช่น การบิน การทหาร และเกม แต่ในอนาคต VR จะเข้ามาเป็นส่วนหนึ่งของการศึกษา เพราะเป็นเครื่องมือที่จะสร้างสภาพแวดล้อมเสมือนจริง ซึ่งทำให้ผู้ใช้เกิดการรับรู้และตื่นตัวในการเรียนรู้มากขึ้น แนวโน้มต่อมา คือ Cloud Migration หรือการเคลื่อนย้ายฐานข้อมูลต่าง ๆ สู่คลาวด์ ซึ่งสถาบันการศึกษานำข้อมูลต่าง ๆ รวมถึงระบบไอทีของตนเองสู่ระบบคลาวด์มากขึ้นทุกวัน เพราะเป็นหน่วยจัดเก็บข้อมูลที่ลดความยุ่งยากในการติดตั้ง การดูแลระบบ ช่วยประหยัดเวลาและลดต้นทุนในการสร้างระบบคอมพิวเตอร์ และเครือข่ายเอง ซึ่งผู้ใช้ทุกคนสามารถเข้าถึงระบบข้อมูลต่าง ๆ ผ่านอินเทอร์เน็ต จัดการบริหารทรัพยากรของระบบ และสามารถแบ่งทรัพยากรร่วมกันได้ง่าย อีกหนึ่งแนวโน้มที่ YesCourse พูดไว้ คือ การวิเคราะห์เชิงทำนาย (Predictive Analytics) และการเรียนเชิงทำนาย (Predictive Learning) ซึ่งในทุก ๆ ครั้งที่ผู้เรียนมีการโต้ตอบกับโปรแกรมการศึกษาออนไลน์ พวกเขาทิ้งรอยดิจิทัลไว้ (Digital Footprint) สิ่งนี้ทำให้สถานศึกษา และครูผู้สอนสามารถใช้ทำนายเพื่อเข้าใจเกี่ยวกับพฤติกรรมของผู้เรียน และสามารถปรับเปลี่ยนหลักสูตรได้ตรงตามความต้องการของผู้เรียนและเหมาะสม นอกจากนั้นยังเป็นข้อดีต่อการเตรียมความพร้อมของสถาบันการศึกษาในการพัฒนาบุคลากร เตรียมพร้อมต่อการเปลี่ยนแปลง และแก้ปัญหาต่าง ๆ ได้ทันท่วงที ส่วนเว็บไซต์ Pathway to Financial Success บอกว่า แนวโน้มการศึกษาจะเข้าสู่ยุค The Internet of Things (IoT) เพราะอินเทอร์เน็ตเกี่ยวข้องกับทุกอุปกรณ์ ไม่ว่าจะเป็นสมาร์โฟน โน้ตบุ๊ก คอมพิวเตอร์ แท็บเลต สิ่งเหล่านี้เกี่ยวข้องกับการศึกษาเรียนรู้มากขึ้นทุกวัน โดยบริษัทการ์ตเนอร์ (Gartner Inc.) ทำนายว่า ในปี 2020 จะมีอุปกรณ์สิ่งของต่าง ๆ เชื่อมต่อกันไม่ต่ำกว่า 20.8 ล้านล้านชิ้นทั่วโลก ดังนั้น รัฐบาลแห่งประเทศอังกฤษจึงทุ่มงบฯลงทุนด้านการวิจัยและศึกษาด้าน IoT ไม่ต่ำกว่า 40 ล้านปอนด์ในปีที่ผ่านมา สิ่งที่ผู้เรียนได้รับประโยชน์จาก IoT ได้แก่ ส่งเสริมการเรียนรู้ร่วมกัน (Collaborative Learning), รู้จักการแก้ไขปัญหาโดยใช้ปัญหาเป็นหลัก (Problem-based Learning), กระตุ้นการเรียนรู้ด้วยตนเองและยั่งยืน (Self-directed Learning), ส่งเสริมเรียนรู้ผ่านพหุประสาทสัมผัส (Multisensory Learning), สร้างความเท่าเทียมกันระหว่างเพศ (Gender Equality) และสร้างห้องเรียนอัจฉริยะ (Creating Smart Classroom) นอกจากนั้น Real-World Case Studies หรือกรณีศึกษาจากโลกแห่งความจริงจะเข้มข้นมากขึ้นในทุกวิชา เพราะเป็นสิ่งที่ใกล้ตัวผู้เรียน และเห็นภาพได้ชัดเจนกว่าข้อมูลในตำรา กรณีศึกษาในโลกแห่งความจริงยังเป็นตัวกระตุ้นให้ผู้เรียนต้องการแสดงความคิดเห็นมากขึ้น และทำให้เกิดการแลกเปลี่ยนเรียนรู้ระหว่างผู้เรียน ในขณะที่ "บิล เกตส์" นักธุรกิจชาวอเมริกัน ซึ่งเป็นหนึ่งในผู้ก่อตั้งบริษัทไมโครซอฟท์ และเป็นผู้บุกเบิกด้านคอมพิวเตอร์ส่วนบุคคลวิเคราะห์ไว้ว่า ค่าใช้จ่ายการศึกษาจะน้อยลงและทุนการวิจัยจะมากขึ้น "เป็นที่รู้กันว่างานวิจัยเป็นสิ่งที่จำเป็นต่อการพัฒนา และการต่อยอดการศึกษา แต่ที่ผ่านมานักวิจัยหลายคนต่างต้องวิ่งเต้นหาทุนวิจัย และหาการสนับสนุนจากรัฐบาล แต่เมื่อเทคโนโลยีเข้ามาเปลี่ยนแปลงระบบการศึกษา โดยผู้เรียนสามารถเรียนได้ฟรีจากระบบการศึกษาที่เรียกว่า MOOCs (Massive Online Open Courses) จึงส่งผลให้ต้นทุนค่าใช้จ่ายในการเรียนน้อยลง ผู้เรียนสามารถมีทุนวิจัยของตนเอง" "ขณะเดียวกันสถาบันการศึกษาก็ไม่จำเป็นต้องจ้างผู้สอนจำนวนมากเหมือนแต่ก่อน ไม่ต้องสร้างห้องเรียนหรืออาคารเรียน เพราะสามารถใช้เทคโนโลยีมาเป็
ไม่มีใครปฏิเสธว่าการซื้อของออนไลน์ให้ความสะดวกสบายและรวดเร็วกับชีวิต เพราะว่าเราไม่ต้องไปต่อคิว ไม่ต้องเบียดเสียดกับผู้ชน ไม่ต้องเสียค่าเดินทางและไม่ต้องวนหาที่จอดรถ

Feature SoGoodWeb

SoGoodWeb มีระบบรับชำระเงินแบบใหม่ผ่าน Pay Solution รองรับทุกธนาคารชั้นนำ ทำให้การจ่ายเงินผ่านช่องทางออนไลน์เป็นเรื่องง่าย ช่วยให้ลูกค้าจ่ายเงินออนไลน์ได้อย่างสะดวก
LINE Notify คือ บริการที่คุณสามารถได้รับข้อความแจ้งเตือนจากเว็บเซอร์วิสต่างๆ ที่คุณสนใจได้ทาง LINE โดยหลังเสร็จสิ้นการเชื่อมต่อกับทางเว็บเซอร์วิสแล้ว คุณจะได้รับการแจ้งเตือนจากบัญชีทางการของ “LINE Notify” ซึ่งให้บริการโดย LINE นั่นเอง
เหมาะสำหรับลูกค้าที่เปิดธุรกิจทัวร์ - ทัวร์ท่องเที่ยว ทั้งที่เป็นเจ้าของเอง หรือเป็นรายย่อย เป็นระบบจองทัวร์ ที่ช่วยทำให้การจัดการธุรกิจทัวร์ - ทัวร์ท่องเที่ยว ให้เป็นเรื่องง่าย
สร้างเว็บไซต์สำเร็จรูปฟรี ร้านค้าออนไลน์