10 ข้อผิดพลาด Bootstrap ที่พบบ่อยที่สุดที่นักพัฒนาสร้างขึ้น

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

เราจะมาดูข้อผิดพลาด ปัญหา และความเข้าใจผิดเกี่ยวกับ Bootstrap ที่พบบ่อยที่สุด 10 ข้อเมื่อนักพัฒนาเริ่มใช้งาน

ข้อผิดพลาด Bootstrap ทั่วไป #1: ความเข้าใจผิดพื้นฐานเกี่ยวกับเฟรมเวิร์ก

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

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

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

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

ข้อผิดพลาด Bootstrap ทั่วไป #2: คิดว่าคุณไม่จำเป็นต้องรู้ CSS เพื่อใช้ Bootstrap และคุณไม่จำเป็นต้องมีนักออกแบบ

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

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

ข้อผิดพลาด Bootstrap ทั่วไป #3: การเปลี่ยนไฟล์ Bootstrap CSS

เพื่อให้เรียบง่าย: ห้าม แก้ไขไฟล์ bootstrap.css

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

ไม่ทราบ LESS หรือ SASS? ไม่มีปัญหา คุณสามารถสร้างไฟล์ CSS ของคุณเองและเขียนทับสิ่งที่คุณต้องการจากสไตล์ชีต bootstrap.css ดั้งเดิมได้ ดังที่เราได้กล่าวไปแล้วในความผิดพลาดครั้งก่อน การรู้ว่า CSS เป็นข้อบังคับ สร้างตัวเลือก CSS ใหม่ ใช้ใน HTML และตราบใดที่คุณประกาศคลาส CSS ตามสไตล์ Bootstrap คำจำกัดความของคุณจะเขียนทับค่าเริ่มต้นของ Bootstrap

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

ข้อผิดพลาด Bootstrap ทั่วไป #4: การใช้ทุกอย่างที่ Bootstrap เสนอ

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

โดยเฉพาะอย่างยิ่งสำหรับปลั๊กอิน เลือกและเลือกเฉพาะปลั๊กอินที่เหมาะสม และอย่าใช้ทุกอย่างเพราะมันดูดีและเท่ เว็บไซต์ของคุณสามารถทำได้ง่ายเกินไป พิจารณาเริ่มต้นว่าคุณไม่ได้รวมไฟล์ bootstrap.js เลย และสร้างเว็บไซต์โดยใช้ HTML และ CSS ธรรมดา จากนั้น เพิ่มส่วนประกอบตามความจำเป็นสำหรับบทบาทเฉพาะ ทีละรายการเท่านั้น

ข้อผิดพลาด Bootstrap ทั่วไป # 5: ใช้พรอมต์กิริยาในทางที่ผิด

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

แสดงพรอมต์โมดอลมากกว่าหนึ่งรายการในขณะนั้น

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

Bootstrap modal ปรากฏขึ้นภายใต้พื้นหลัง

หากคอนเทนเนอร์โมดอลหรือองค์ประกอบพาเรนต์มีตำแหน่งคงที่หรือสัมพันธ์กัน โมดอลจะไม่แสดงอย่างถูกต้อง ตรวจสอบให้แน่ใจเสมอว่าคอนเทนเนอร์โมดอลและองค์ประกอบหลักไม่มีการวางตำแหน่งพิเศษใดๆ แนวทางปฏิบัติที่ดีที่สุดคือการวาง HTML ของโมดอลไว้ข้างหน้าแท็กปิด </body> หรือดีกว่าในตำแหน่งระดับบนสุดในเอกสารหลังแท็กเปิด <body> นี่เป็นวิธีที่ดีที่สุดในการหลีกเลี่ยงส่วนประกอบอื่นๆ ที่ส่งผลต่อรูปลักษณ์และการทำงานของโมดอล

Modal บนอุปกรณ์มือถือ

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

ข้อผิดพลาด Bootstrap ทั่วไป #6: ปัญหาส่วนประกอบปุ่มอินพุตไฟล์

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

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>

 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

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

ข้อผิดพลาด Bootstrap ทั่วไป #7: ใช้งาน JavaScript มากเกินไปและไม่สนใจแอตทริบิวต์ "data-"

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

ตัวอย่างเช่น เราสามารถเปิดใช้งานโมดอลไดอะล็อกโดยไม่ต้องเขียน JavaScript เพียงแค่ตั้งค่า data-toggle="modal" บนองค์ประกอบตัวควบคุม เช่น ปุ่มหรือจุดยึด และส่งผ่านพารามิเตอร์เพิ่มเติมโดยใช้แอตทริบิวต์ data- ในโค้ดด้านล่าง เรากำลังกำหนดเป้าหมายโค้ด HTML ด้วย ID #myModal เราได้ระบุว่า modal จะไม่ปิดเมื่อผู้ใช้คลิกนอก modal โดยใช้ตัวเลือก data-backdrop และเราได้ปิดการใช้งานเหตุการณ์ Escape Key ที่ปิด modal ด้วยตัวเลือก data-keyboard ทั้งหมดในโค้ด HTML หนึ่งบรรทัด:

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

ข้อผิดพลาด Bootstrap ทั่วไป #8: การละเว้นเครื่องมือที่ช่วยให้การพัฒนา Bootstrap ง่ายขึ้น

ความผิดพลาดเกิดขึ้นได้ และนักพัฒนาทุกคนก็มักสร้างความผิดพลาดขึ้นเป็นครั้งคราว สิ่งนี้หลีกเลี่ยงไม่ได้ แต่วิธีจัดการกับความผิดพลาดนั้นสำคัญไฉน ทีม Bootstrap สังเกตจากการดูตัวติดตามปัญหาว่าผู้คนทำผิดพลาดบ่อยขึ้น นั่นเป็นเหตุผลที่พวกเขาพยายามทำให้กระบวนการพัฒนาเป็นไปโดยอัตโนมัติ ผลลัพธ์ที่ได้คือ Bootlint ซึ่งเป็นเครื่องมือ HTML linting สำหรับโปรเจ็กต์ Bootstrap Bootlint สามารถใช้ได้ทั้งในเบราว์เซอร์หรือจากบรรทัดคำสั่งผ่าน Node.js และจะตรวจสอบหน้าเว็บที่บู๊ตด้วย Bootstrap โดยอัตโนมัติเพื่อหาข้อผิดพลาดในการใช้งาน Bootstrap ทั่วไป การเพิ่ม Bootlint ให้กับ toolchain การพัฒนาเว็บของคุณสามารถขจัดข้อผิดพลาดทั่วไปมากมายที่มักจะทำให้การพัฒนาโครงการช้าลง

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

ข้อผิดพลาด Bootstrap ทั่วไป #9: IE8 และปัญหาความไม่เข้ากันของเบราว์เซอร์รุ่นเก่า

Bootstrap สร้างขึ้นเพื่อให้ทำงานได้ดีที่สุดในเบราว์เซอร์เดสก์ท็อปและมือถือรุ่นล่าสุด เบราว์เซอร์รุ่นเก่าอาจแสดงส่วนประกอบและองค์ประกอบที่มีสไตล์แตกต่างกัน แต่ทุกอย่างควรจะทำงานได้อย่างสมบูรณ์ การสนับสนุนรวมถึง Internet Explorer 8 และ 9 โดยมีข้อสังเกตสำคัญว่าคุณสมบัติ CSS3 และองค์ประกอบ HTML5 บางอย่างไม่ได้รับการสนับสนุนอย่างเต็มที่จากเบราว์เซอร์เหล่านี้

ในการรับการสนับสนุนอย่างเต็มที่สำหรับ Internet Explorer 8 และเบราว์เซอร์รุ่นเก่าอื่นๆ คุณต้องใช้ polyfill สำหรับ CSS3 Media Queries Respond.js, HTML 5 shim ซึ่งเปิดใช้งานการใช้องค์ประกอบ HTML5 และแท็ก IE <meta> ที่เหมาะสมในส่วนหัวของ HTML ตรวจสอบให้แน่ใจว่า IE ไม่ทำงานในโหมดความเข้ากันได้ ส่วนหัว HTML ของคุณควรมีลักษณะดังนี้:

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

ในกรณีของ Respond.js ให้ระวังคำเตือนต่อไปนี้ในสภาพแวดล้อมการพัฒนาและการใช้งานจริง

ข้อผิดพลาด Bootstrap ทั่วไป #10: ละเว้นแนวปฏิบัติที่ดีที่สุด

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

Bootstrap ข้อผิดพลาด

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

อ่านเอกสารประกอบ เล่นและทดลองกับตัวอย่าง รับข้อมูลพื้นฐานที่ถูกต้อง และสนุกกับการสร้างสรรค์งานออกแบบใหม่ที่สวยงาม