หากคุณไม่เคยได้ยินเกี่ยวกับ Bootstrap ซึ่งเป็นเฟรมเวิร์กที่พัฒนาโดย Twitter เพื่อสร้างเว็บไซต์ที่สวยงามคุณก็พลาดไม่ได้! Bootstrap ทำให้การออกแบบเว็บไซต์ค่อนข้างรวดเร็วและง่ายดายโดยไม่มีความรู้ใน CSS (Cascading Style Sheets) หากคุณยังใหม่กับการเขียนโปรแกรมสำหรับเว็บคุณไม่จำเป็นต้องรู้อะไรเกี่ยวกับ CSS เพื่อเริ่มเรียนรู้ว่า Bootstrap ทำงานอย่างไร; สิ่งที่คุณต้องมีก็คือเอกสาร HTML เดียว เรากำลังจะไปดู Bootstrap แสดงให้คุณเห็นว่ามันคืออะไรเกี่ยวกับมันทำงานอย่างไรและถ้ามันเป็นตัวเลือกที่ดีสำหรับทุกเว็บไซต์ที่คุณสร้าง
การใส่ Bootstrap API ลงในไฟล์ HTML ของคุณ
คุณมีสองสามตัวเลือกในการแทรก Bootstrap ลงในไฟล์โครงการหลักของคุณ ตัวเลือกแรกคือการแทรกไฟล์ Bootstrap ที่จำเป็นทั้งหมดลงในโครงการของคุณ คุณสามารถทำได้โดยการดาวน์โหลดแพ็คเกจและอัพโหลดไปยังโฟลเดอร์โครงการของคุณ แน่นอนคุณจะต้องเชื่อมโยงไฟล์ Bootstrap CSS หลักกับเอกสารของคุณ เว็บไซต์ทางการของ Bootstrap มีคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการทำเช่นนี้
ตัวเลือกอื่นคือข้ามการดาวน์โหลดแพ็คเกจและใช้เครือข่ายการจัดส่งเนื้อหา (CDN) CDN ช่วยให้คุณสามารถเชื่อมโยงไฟล์ Bootstrap หลักไปยังเอกสาร HTML ของคุณได้โดยไม่ต้องดาวน์โหลด แน่นอนว่านี่ไม่ใช่สิ่งที่ดีสำหรับเว็บไซต์มืออาชีพเสมอไปเพราะฉันคงไม่เร็วเกินกว่าที่จะออกจากหน้าธุรกิจหรือพอร์ตโฟลิโอของฉันไปสู่โชคชะตาถ้าเซิร์ฟเวอร์นั้นล้มเหลว เป็นการดีที่สุดที่จะมีไฟล์ในโครงการของคุณ แต่เพื่อจุดประสงค์ในการเรียนรู้ CDN จะทำได้ดี
ในการแทรก Bootstrap ลงในเอกสาร HTML ของคุณคุณเพียงแค่ใส่รหัสต่อไปนี้ลงใน
แท็กในเอกสาร HTML ของคุณ:เมื่อลิงค์เหล่านั้นถูกแทรกลงในแท็กส่วนหัวนั้นคุณควรพร้อมที่จะเริ่มใช้คลาส Bootstrap เอกสารของคุณควรมีลักษณะดังนี้:
Bootstrap และคลาส
องค์ประกอบ Bootstrap แบ่งออกเป็นคลาสซึ่งเป็นเพียง CSS ที่เขียนไว้ล่วงหน้าซึ่งคุณสามารถแทรกลงในมาร์กอัปของคุณ การแทรกคลาสลงในมาร์กอัพของคุณนั้นง่ายคุณแค่ต้องรู้ชื่อของคลาสที่คุณต้องการใช้แล้วนำไปใช้กับองค์ประกอบ HTML ของคุณโดยใช้ค่า class =” classname” ตามที่กล่าวไว้ในบทความก่อนหน้า
ส่วนที่ยากคือการหาว่าสิ่งเหล่านี้ทำงานร่วมกันเพื่อสร้างบางสิ่งที่สวยงามได้อย่างไร คุณสามารถตรวจสอบคลาสที่แตกต่างทั้งหมดที่มีอยู่ใน Bootstrap ได้โดยตรงจากเอกสารอย่างเป็นทางการ ตอนนี้การเรียนรู้ Bootstrap เป็นอีกเรื่องหนึ่ง นั่นไม่ใช่สิ่งที่เราหรือคนอื่นสามารถสอนคุณได้ คุณสามารถดูบทช่วยสอนหลังการสอน แต่เพื่อให้สามารถใช้งานเฟรมเวิร์กได้ดีมีการลองผิดลองถูกมากมาย และนั่นทำให้คุณต้องลงมือทำในโครงการของคุณเอง
โดยที่ในใจฉันขอให้คุณเริ่มโครงการ HTML ของคุณเองบนคอมพิวเตอร์ของคุณโดยใช้ Atom หรือโปรแกรมแก้ไขข้อความอื่น ๆ ตรวจสอบคลาส HTML และ CSS ทั้งหมดแล้วเริ่มเล่นด้วย Bootstrap และหากคุณรู้จักมาร์กอัปมากพอคุณอาจสร้างเว็บไซต์พอร์ตโฟลิโอของคุณเองเป็นแบบทดสอบ
Bootstrap เป็นตัวเลือกที่ทำงานได้สำหรับทุกเว็บไซต์หรือไม่
Bootstrap เป็นเฟรมเวิร์กที่ยอดเยี่ยม แต่เป็นตัวเลือกที่ใช้ได้กับทุกเว็บไซต์ที่คุณสร้างหรือไม่? มันขึ้นอยู่กับนักพัฒนาเช่นเดียวกับข้อกำหนดของโครงการ ในสภาพแวดล้อมแบบมืออาชีพคุณจะไม่มีทางเลือกเทคโนโลยีที่คุณใช้จริง ๆ เพราะมันจะขึ้นอยู่กับผู้จัดการโครงการเป็นอย่างมาก หากผู้จัดการโครงการกล่าวว่าเลือกที่จะใช้ Bootstrap คุณจะต้องรวมมันกับ CSS ที่กำหนดเองมากมายเช่นกัน นี่คือสิ่งที่ทำให้เว็บไซต์ของคุณแตกต่างและแตกต่างจากเว็บไซต์อื่นโดยใช้ Bootstrap
โดยส่วนตัวแล้วฉันไม่เห็น Bootstrap เป็นตัวเลือกที่ยอดเยี่ยมสำหรับ ทุก เว็บไซต์ แน่นอนว่ามันสามารถช่วยและให้ทางลัดบางอย่าง แต่ในที่สุดฉันก็พบว่าการออกแบบจากพื้นดินด้วย CSS เป็นเส้นทางที่ดีที่สุดเพราะการควบคุมที่คุณมีอยู่ แต่อีกครั้งถ้าคุณเพิ่งเริ่มต้นกับการเขียนโปรแกรมเว็บมันไม่ใช่เรื่องเลวร้ายที่จะใช้ Bootstrap เลย แต่ไม่ต้องพึ่งพามันสำหรับอาชีพของคุณ
เป็นที่น่าสังเกตว่าหากคุณเป็นนักพัฒนามือใหม่คุณไม่ควรใช้ Bootstrap สำหรับโครงการทั้งหมดในพอร์ตโฟลิโอของคุณ อาจเจอได้ว่าคุณอาจมีความเชี่ยวชาญใน API แต่คุณไม่รู้วิธีที่จะใช้กับ CSS ที่กล่าวว่าเป็นการดีที่จะมีการผสมผสานที่ดีของทั้งสองอย่างในพอร์ทโฟลิโอของคุณ (หรือแม้แต่ CSS พิเศษเพราะมันง่ายต่อการหยิบ Bootstrap)
ปิด
นั่นคือทั้งหมดที่ Bootstrap อยู่ในสรุป ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้ฉันขอแนะนำให้คุณเริ่มโครงการ HTML ของคุณเองและเพิ่มคลาสที่แตกต่างกันในองค์ประกอบต่างๆเพื่อเริ่มเล่นกับเฟรมเวิร์ก คุณสามารถค้นหาข้อเสนอ Bootstrap ของส่วนประกอบต่าง ๆ ทั้งหมดพร้อมคำอธิบายและตัวอย่างโค้ดที่นี่
Bootstrap เป็นเครื่องมือที่มีความประณีต แต่อย่าลืมใช้มันอย่างเดียว! เป็นการดีที่จะคุ้นเคยกับมันและรู้วิธีการของคุณรอบ ๆ กรอบ แต่ยังให้แน่ใจว่าคุณดำน้ำใน CSS เพื่อทำความเข้าใจสิ่งที่เกิดขึ้นเบื้องหลังอย่างแท้จริง ไม่เพียงแค่นั้น แต่ความรู้อย่างแน่นหนาใน CSS นั้นช่วยเสริม Bootstrap ได้มากทำให้คุณสามารถสร้างเว็บไซต์ที่มีเอกลักษณ์และสวยงามด้วยการปรับแต่งของคุณเอง
