คุณสมบัติ Bootstrap

ในบทความที่สองนี้ในซีรีส์ มาจัดการกับคุณสมบัติ Bootstrap กัน เป็นไลบรารีทรัพยากรที่สมบูรณ์สำหรับการออกแบบเว็บไซต์และแอปพลิเคชัน รวมถึงเทมเพลตและองค์ประกอบสำหรับแบบฟอร์ม แบบอักษรและเมนู เป็นต้น

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

คุณสมบัติ Bootstrap

เพื่อให้เข้าใจคุณสมบัติของ Bootstrap เราต้องเข้าใจ การปรับเปลี่ยนกระบวนทัศน์ในการออกแบบเว็บไซต์

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

โดยหลักการแล้วมีการนำแนวทางต่อไปนี้มาใช้:

• การออกแบบที่ตอบสนอง: การออกแบบเหมือนกันแต่ปรับให้เข้ากับขนาดของหน้าจอโดยอัตโนมัติ วิธีการนี้มีปัญหาบางอย่าง เช่น ผู้ใช้อาจถูกบังคับให้ซูมเข้าในบางส่วนของหน้าเพื่อดู
• ก้าวหน้าก้าวหน้า: เริ่มต้นด้วยการออกแบบไซต์สำหรับอุปกรณ์ที่มีทรัพยากรน้อยลง (โดยทั่วไปแล้วโทรศัพท์มือถือเพราะมีหน้าจอที่เล็กกว่า เบราว์เซอร์ที่เข้ากันได้น้อยกว่าสำหรับคุณลักษณะขั้นสูง และมักต้องใช้แผนข้อมูลเพื่อเชื่อมต่อ) เมื่อเสร็จแล้ว ตามการออกแบบนี้ คุณลักษณะจะถูกเพิ่มเพื่อรับเวอร์ชันสำหรับแท็บเล็ต โน้ตบุ๊ก และคอมพิวเตอร์เดสก์ท็อป
• การเสื่อมสภาพทีละน้อย: เป็นทางกลับกัน ไซต์เดสก์ท็อปถูกสร้างขึ้นก่อนและคุณลักษณะต่างๆ จะถูกลบออกจนกว่าจะได้เวอร์ชันที่เหมาะกับอุปกรณ์เคลื่อนที่

เนื่องจากการเพิ่มง่ายกว่าการลบเสมอ ความก้าวหน้าแบบก้าวหน้าจึงเป็นแนวโน้มที่สามารถเอาชนะได้ ข.ootstrap เช่น ใช้แนวทาง "มือถือมาก่อน"กล่าวคือ ฐานของการออกแบบมักจะเป็นเวอร์ชันที่จะแสดงในขนาดหน้าจอที่เล็กที่สุด และจากนั้น การปรับเปลี่ยนที่จะเกิดขึ้นเมื่อมีการส่งต่อไปยังขนาดที่ตามมาจะถูกสร้างขึ้น

ข้อดีเพิ่มเติมของการใช้ Bootstrap คือความจริงที่ว่า Google จัดลำดับความสำคัญของไซต์ที่เหมาะกับมือถือในการค้นหา

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

Bootstrap เป็นเฟรมเวิร์กที่รวมองค์ประกอบของสไตล์ CSS และการเขียนโปรแกรม Javascript เพื่อควบคุมการเรนเดอร์และให้การโต้ตอบกับส่วนประกอบทั้งหมดของเพจที่พัฒนาใน HTML5

สิ่งที่เราควบคุมได้ด้วย Bootstrap ได้แก่:

• การเข้าถึง: ส่วนประกอบต่างๆ เช่น เมนูหรือกล่องโต้ตอบเข้ากันได้กับโปรแกรมอ่านหน้าจอ หรือเหมาะสำหรับการใช้งานโดยผู้ที่มีความคล่องตัวลดลง
• ปุ่ม: รวมถึงการวัด รูปแบบ สถานะ และการจัดกลุ่ม
• แบบฟอร์ม:  รวมถึงการเรนเดอร์ ประเภทของการควบคุม และการตรวจสอบอินพุต
• ภาพ: ควบคุมต้นทาง การจัดตำแหน่ง และขนาดหน้าจอของรูปภาพที่แทรก
• องค์ประกอบการนำทาง: ตัวอย่างเช่น แถบด้านข้างที่ซ่อนได้ หรือเมนูแนวตั้งหรือแนวนอน ขึ้นอยู่กับอุปกรณ์
• วิชาการพิมพ์: ควบคุมวิธีแสดงส่วนต่างๆ ของข้อความ
• เค้าโครง: การปรับการแสดงเนื้อหาขึ้นอยู่กับอุปกรณ์

ในบทความหน้าเราจะมาดูตัวอย่างการใช้งานจริงบางส่วน