เข้าใกล้

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

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

เห็นสิ่งที่ไม่ถูกต้องหรืออาจจะทำได้ดีกว่านี้? เปิดประเด็น — เราชอบที่จะพูดคุยกับคุณ

สรุป

เราจะเจาะลึกลงไปในแต่ละส่วนนี้ให้มากขึ้น แต่ในระดับสูง นี่คือสิ่งที่ชี้นำแนวทางของเรา

• ส่วนประกอบควรตอบสนองและเน้นมือถือเป็นหลัก
• ส่วนประกอบควรสร้างด้วยคลาสฐานและขยายผ่านคลาสตัวดัดแปลง
• สถานะของส่วนประกอบควรเป็นไปตามมาตราส่วนดัชนี z ทั่วไป
• เมื่อใดก็ตามที่เป็นไปได้ ควรเลือกใช้ HTML และ CSS มากกว่า JavaScript
• เมื่อใดก็ตามที่เป็นไปได้ ใช้ยูทิลิตี้แทนสไตล์ที่กำหนดเอง
• หลีกเลี่ยงการบังคับใช้ข้อกำหนด HTML ที่เข้มงวด (ตัวเลือกย่อย) เมื่อใดก็ตามที่เป็นไปได้

ตอบสนอง

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

ใน Bootstrap คุณจะเห็นสิ่งนี้ได้ชัดเจนที่สุดในข้อความค้นหาสื่อของเรา ในกรณีส่วนใหญ่ เราใช้การmin-widthสืบค้นที่เริ่มนำไปใช้กับเบรกพอยต์เฉพาะและดำเนินการผ่านเบรกพอยต์ที่สูงขึ้น ตัวอย่างเช่น a .d-noneใช้จากmin-width: 0ถึงอินฟินิตี้ ในทางกลับกัน a .d-md-noneใช้ตั้งแต่เบรกพอยต์ขนาดกลางขึ้นไป

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

ชั้นเรียน

นอกเหนือจาก Reboot ซึ่งเป็นสไตล์ชีตการทำให้เป็นมาตรฐานแบบข้ามเบราว์เซอร์แล้ว สไตล์ทั้งหมดของเรามีเป้าหมายที่จะใช้คลาสเป็นตัวเลือก ซึ่งหมายความว่าไม่มีตัวเลือกประเภท (เช่นinput[type="text"]) และคลาสพาเรนต์ที่ไม่เกี่ยวข้อง (เช่น.parent .child) ที่ทำให้รูปแบบเฉพาะเจาะจงเกินกว่าจะแทนที่ได้ง่าย

ดังนั้น คอมโพเนนต์ควรสร้างด้วยคลาสฐานที่มีคู่ค่าคุณสมบัติ-ค่าทั่วไปที่ไม่ถูกแทนที่ ตัวอย่างเช่น.btnและ.btn-primary. เราใช้.btnสำหรับสไตล์ทั่วไปทั้งหมด เช่น, display, paddingและ border-widthจากนั้นเราใช้ตัวปรับแต่ง เช่น.btn-primaryเพิ่มสี สีพื้นหลัง สีขอบ ฯลฯ

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

เครื่องชั่งดัชนี z

Bootstrap มีสเกลสองz-indexส่วน—องค์ประกอบภายในส่วนประกอบและส่วนประกอบซ้อนทับ

องค์ประกอบส่วนประกอบ

• ส่วนประกอบบางตัวใน Bootstrap ถูกสร้างขึ้นด้วยองค์ประกอบที่ทับซ้อนกันเพื่อป้องกันเส้นขอบคู่โดยไม่ต้องแก้ไขborderคุณสมบัติ ตัวอย่างเช่น กลุ่มปุ่ม กลุ่มอินพุต และการแบ่งหน้า
• ส่วนประกอบเหล่านี้ใช้z-indexมาตราส่วน มาตรฐาน ถึง0ผ่าน3
• 0เป็นค่าเริ่ม ต้น(เริ่มต้น) 1คือเป็น/ และเป็น:hover2:active.active3:focus
• แนวทางนี้ตรงกับความคาดหวังของเราในลำดับความสำคัญสูงสุดของผู้ใช้ หากองค์ประกอบถูกเน้น สิ่งนั้นอยู่ในมุมมองและอยู่ที่ความสนใจของผู้ใช้ องค์ประกอบที่ใช้งานจะสูงเป็นอันดับสองเนื่องจากบ่งบอกถึงสถานะ โฮเวอร์จะสูงเป็นอันดับสามเนื่องจากแสดงถึงความตั้งใจของผู้ใช้ แต่สามารถ โฮเวอร์ได้เกือบ ทุก อย่าง

ส่วนประกอบซ้อนทับ

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

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

เรียนรู้เพิ่มเติมเกี่ยวกับสิ่งนี้ในz-indexหน้าเค้าโครงของ เรา

HTML และ CSS บน JS

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

หลักการนี้คือ JavaScript API ระดับเฟิร์สคลาสของเราโดยใช้dataแอตทริบิวต์ คุณไม่จำเป็นต้องเขียน JavaScript เกือบใดๆ เพื่อใช้ปลั๊กอิน JavaScript ของเรา ให้เขียน HTML แทน อ่านเพิ่มเติมเกี่ยวกับสิ่งนี้ในหน้าภาพรวม JavaScript ของเรา

สุดท้าย สไตล์ของเราสร้างขึ้นจากพฤติกรรมพื้นฐานขององค์ประกอบเว็บทั่วไป เมื่อใดก็ตามที่เป็นไปได้ เราต้องการใช้สิ่งที่เบราว์เซอร์มีให้ ตัวอย่างเช่น คุณสามารถใส่.btnคลาสลงในองค์ประกอบเกือบทุกชนิด แต่องค์ประกอบส่วนใหญ่ไม่ได้ให้ค่าความหมายหรือฟังก์ชันของเบราว์เซอร์ ดังนั้นเราจึงใช้<button>s และ<a>s แทน

เช่นเดียวกับส่วนประกอบที่ซับซ้อนมากขึ้น ในขณะที่เราสามารถเขียนปลั๊กอินตรวจสอบแบบฟอร์มของเราเองเพื่อเพิ่มคลาสให้กับองค์ประกอบหลักตามสถานะของอินพุต ซึ่งช่วยให้เราสามารถจัดรูปแบบข้อความเป็นสีแดง เราชอบใช้ องค์ประกอบ :valid/ :invalidองค์ประกอบหลอกที่เบราว์เซอร์มอบให้เรา

สาธารณูปโภค

คลาสยูทิลิตี้—ก่อนหน้านี้เป็นผู้ช่วยใน Bootstrap 3— เป็นพันธมิตรที่ทรงพลังในการต่อสู้กับ CSS bloat และประสิทธิภาพของเพจที่ไม่ดี คลาสยูทิลิตี้เป็นการจับคู่ค่าคุณสมบัติ-ค่าคุณสมบัติเดียวที่ไม่เปลี่ยนรูปแบบซึ่งแสดงเป็นคลาส (เช่น.d-blockแทนdisplay: block;) อุทธรณ์หลักของพวกเขาคือความเร็วในการใช้งานในขณะที่เขียน HTML และจำกัดจำนวน CSS ที่กำหนดเองที่คุณต้องเขียน

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

HTML ที่ยืดหยุ่น

แม้ว่าจะไม่สามารถทำได้เสมอไป แต่เราพยายามหลีกเลี่ยงการใช้ข้อกำหนด HTML สำหรับส่วนประกอบมากเกินไป ดังนั้นเราจึงมุ่งเน้นไปที่คลาสเดียวในตัวเลือก CSS ของเรา และพยายามหลีกเลี่ยงตัวเลือกย่อยในทันที ( >) สิ่งนี้ช่วยให้คุณมีความยืดหยุ่นมากขึ้นในการปรับใช้ของคุณและช่วยให้ CSS ของเราเรียบง่ายและเฉพาะเจาะจงน้อยลง

อนุสัญญาเกี่ยวกับรหัส

คู่มือโค้ด (จาก Bootstrap co-creator, @mdo) จัดทำเอกสารว่าเราเขียน HTML และ CSS ใน Bootstrap อย่างไร โดยระบุแนวทางเฉพาะสำหรับการจัดรูปแบบทั่วไป ค่าเริ่มต้นของสามัญสำนึก คำสั่งคุณสมบัติและแอตทริบิวต์ และอื่นๆ

เราใช้Stylelintเพื่อบังคับใช้มาตรฐานเหล่านี้และอื่นๆ ใน Sass/CSS ของเรา การกำหนดค่า Stylelint แบบกำหนดเองของเราเป็นโอเพ่นซอร์สและพร้อมให้ผู้อื่นใช้และขยายได้

เราใช้vnu-jarเพื่อบังคับใช้ HTML แบบมาตรฐานและเชิงความหมาย เช่นเดียวกับการตรวจจับข้อผิดพลาดทั่วไป