คู่มือสำหรับผู้เริ่มต้นในการสร้างเว็บไซต์ที่ตอบสนองด้วย Bootstrap – ตอนที่ 1

อัพเดทล่าสุดเมื่อ 5 มิถุนายน 2019

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

Bootstrap คืออะไร?

ตามเว็บไซต์ Bootstrap อย่างเป็นทางการ (getbootstrap.com) “Bootstrap เป็นเฟรมเวิร์ก HTML, CSS และ JavaScript ที่ได้รับความนิยมมากที่สุดสำหรับการพัฒนาที่ตอบสนองและโครงการแรกบนมือถือบนเว็บ” ในแง่ที่ง่ายกว่า Bootstrap เป็นเฟรมเวิร์กที่เรียบง่ายเป็นพิเศษเพื่อช่วยให้การพัฒนาเว็บส่วนหน้าเร็วขึ้นและดึงดูดนักพัฒนาระดับทักษะที่แตกต่างกัน

ทำไมต้องใช้ Bootstrap?

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

วิธีการเริ่มต้น

ในการเริ่มต้นใช้งาน Bootstrap คุณต้องไปที่เว็บไซต์ Bootstrap อย่างเป็นทางการ (http://getbootstrap.com/) Bootstrap เป็นโครงการโอเพ่นซอร์สและโฮสต์ พัฒนา และบำรุงรักษาบน GitHub; สิ่งนี้ทำให้ผู้ใช้สามารถเข้าถึงซอร์สโค้ดและเข้าใจขอบเขตทั้งหมดของเฟรมเวิร์กเป็นเครื่องมือสำหรับการสร้างเว็บไซต์

มีสามวิธีในการดาวน์โหลด Bootstrap เวอร์ชันปัจจุบัน (v3.3.6): คุณสามารถดาวน์โหลด Bootstrap เวอร์ชันที่คอมไพล์ได้ คุณสามารถดาวน์โหลดซอร์สโค้ด Bootstrap และพอร์ตเฟรมเวิร์ก Bootstrap จาก Less to Sass ได้ ในกรณีนี้ หากคุณเป็นมือใหม่ ฉันแนะนำให้ดาวน์โหลด Bootstrap เวอร์ชันที่คอมไพล์แล้ว หากคุณต้องการรวมเฟรมเวิร์ก Bootstrap ในโปรเจ็กต์ Rails, Compass หรือ Sass เท่านั้น ซึ่งเป็นเวลาที่คุณควรพอร์ตการดาวน์โหลดจาก Less to Sass

เมื่อคุณดาวน์โหลดไฟล์ Boostrap คุณควรเปิดเครื่องรูดโฟลเดอร์ที่บีบอัดเพื่อดูโครงสร้างของเฟรมเวิร์ก Bootstrap ที่ปฏิบัติตาม ดูด้านล่างเพื่อดูโครงสร้างไฟล์:

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

การออกแบบที่ตอบสนอง

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

• อุปกรณ์ขนาดเล็กพิเศษ (สมาร์ทโฟน <768px)
• อุปกรณ์ขนาดเล็ก (แท็บเล็ต >= 768px)
• อุปกรณ์ขนาดกลาง (เดสก์ท็อป >= 992px)
• อุปกรณ์ขนาดใหญ่ (เดสก์ท็อป >= 1200px)

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

ระบบกริด

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

นี่คือตัวอย่างสัญกรณ์สำหรับระบบกริด:

• คลาสแถวที่กำหนดไว้ล่วงหน้าจะสร้าง row
• ภายในแถวนั้น ชั้นที่สองระบุ “col-md-6”
• ซึ่งหมายความว่าคลาสกำลังสร้างคอลัมน์ที่ครอบคลุม 6 คอลัมน์ทั่วทั้งหน้าเว็บ
• “md” ระบุว่าสิ่งนี้จะเกิดขึ้นบนอุปกรณ์ขนาดกลางหรือเดสก์ท็อปที่น้อยกว่าหรือเท่ากับ 768 px
• คลาส "offset" หมายความว่าคอลัมน์เหล่านั้นจะเว้นว่างไว้ ในกรณีนี้ ออฟเซ็ตคือ 3 ดังนั้น คอลัมน์สามคอลัมน์จะเหลือพื้นที่ว่างเพื่อรองเนื้อหาบางส่วน
  ระบบกริดนี้ช่วยให้นักพัฒนาสามารถกำหนดส่วนของเนื้อหาได้อย่างรวดเร็วและมีระยะห่างที่เหมาะสมระหว่างเนื้อหาเพื่อให้มีการออกแบบที่สะอาดและตอบสนองได้ดี

ความท้าทายกับ Bootstrap

ขนาดของไฟล์ JavaScript และ CSS มีขนาดใหญ่เมื่อดาวน์โหลดไฟล์ Bootstrap ทั้งหมดโดยตรง ซึ่งอาจนำไปสู่ความท้าทายบางอย่างเมื่อสร้างเพจที่รวดเร็ว เนื่องจากไฟล์ทั้งหมดภายในไฟล์ Bootstrap ไม่ได้ถูกใช้อย่างสมบูรณ์ และอาจหมายความว่าการดาวน์โหลดข้อมูลที่ไม่จำเป็นอาจเป็นปัญหาได้ การดำเนินการนี้อาจส่งผลต่อประสบการณ์ของผู้ใช้ ดังนั้นโปรดตรวจสอบในเชิงลึกมากขึ้นโดยไปที่โพสต์ วิธีใช้ Bootstrap Basics เพื่อยกระดับประสบการณ์ผู้ใช้ (https://moz.com/ugc/how-to-use-bootstrap- พื้นฐานเพื่อเพิ่มประสบการณ์ผู้ใช้)

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

ผู้แต่ง: Esme Vazquez นักพัฒนาเว็บรุ่นเยาว์

ผู้ผลิต ศิลปิน นักเล่นเกม นักเขียนโค้ด นักพัฒนาเว็บ และบล็อกเกอร์ Esme เป็นผู้สร้างบล็อก Indielect ล่าสุดบนเว็บไซต์บล็อกการจัดการเนื้อหา Medium ประสบการณ์ในปัจจุบันของเธออยู่ที่การพัฒนาเว็บและการพัฒนาเกม ปัจจุบันเธอทำงานและได้รับการฝึกอบรมด้าน SEO ที่ That! บริษัทในลีสเบิร์ก รัฐฟลอริดา ในฐานะนักพัฒนาเว็บรุ่นเยาว์ เธอปรารถนาที่จะสร้างวิดีโอเกมในอนาคตที่แสดงถึงความงดงามของมนุษยชาติ หากมีคำถามใดๆ โปรดทวีตหาเธอที่ @EsmeVazquez18 และ/หรือเพิ่มเธอใน LinkedIn