คำถามและคำตอบสัมภาษณ์ Bootstrap 25 อันดับแรก [สำหรับ Freshers & มีประสบการณ์]

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

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

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

คำถามและคำตอบสัมภาษณ์ Bootstrap 25 อันดับแรก

คำถามที่ 1: Bootstrap คืออะไร?

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

คำถามที่ 2: อะไรคือองค์ประกอบหลักของ Bootstrap?

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

ต่อไปนี้เป็นองค์ประกอบหลักของ Bootstrap:

1. ปลั๊กอิน JS: นี่คือที่ที่ปลั๊กอิน JS และ jQuery อยู่
2. ปรับแต่ง: ใช้เพื่อปรับแต่งเฟรมเวิร์ก
3. CSS: รวมไฟล์ CSS
4. นั่งร้าน: มีระบบกริด รูปแบบพื้นหลัง ฯลฯ

คำถามที่ 3: อะไรทำให้ Bootstrap เป็นตัวเลือกที่มีประสิทธิภาพสำหรับการพัฒนามือถือและเว็บ

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

คำถามที่ 4: อะไรคือคุณสมบัติต่างๆ ของ Bootstrap?

ต่อไปนี้เป็นคุณสมบัติบางอย่างของ Bootstrap:

– เป็นแพลตฟอร์มโอเพ่นซอร์สฟรี ช่วยให้นักพัฒนามีส่วนร่วมในการปรับปรุง

– Bootstrap นั้นรวดเร็ว ตอบสนองและใช้งานง่ายมาก

– ใช้ได้กับทุกบราวเซอร์

– Bootstrap มีไลบรารีการออกแบบและเทมเพลตมากมายให้เลือก

คำถามที่ 5: Glyphicons คืออะไร?

Glyphicons ใน Bootstrap เป็นไอคอนรูปแบบฟอนต์ที่ใช้เพื่อแสดงการกระทำเช่นคำเตือน ลบ ซูม แก้ไข ฯลฯ มีไอคอนดังกล่าวประมาณ 200 ไอคอนในแต่ละคลาส

ไวยากรณ์ที่จะใช้ glyphicons เหล่านี้คือ:

<p><span class = “glyphicons glyphicon-pencil”></span></p>

คำถามที่ 6: อธิบายรายการแบบหล่นลงและกลุ่มปุ่มใน Bootstrap

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

ไวยากรณ์ในการใช้ดรอปดาวน์เหล่านี้คือ:

<div class= “dropdown”><!– มีรายการของคุณในนี้ด้วย class .dropdown-menu –></div>

กลุ่มปุ่มคือชุดของปุ่มที่วางในลักษณะที่อยู่ติดกัน คอมโพเนนต์ Bootstrap นี้ต้องการให้กำหนดองค์ประกอบการแบ่งที่มีคลาส .btn-group ก่อน หลังจากนั้นองค์ประกอบปุ่มจะซ้อนกันโดยใช้คลาส btn

ไวยากรณ์มีดังนี้:

<div class=“btn-group”><button class= “btn”>ถูกต้อง</button></div>

<div class=“btn-group”><button class= “btn”>ผิด</button></div>

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

ไวยากรณ์:

<button class = “btn-default dropdown-toggle”><!— องค์ประกอบดรอปดาวน์อยู่ที่นี่ –></button>

คำถามที่ 7: กลุ่มอินพุตคืออะไร?

กลุ่มอินพุตเป็นส่วนเสริมของคลาสตัวควบคุมฟอร์มที่ช่วยให้คุณสามารถเพิ่มสตริงข้อความหรือรวมปุ่มที่ด้านใดด้านหนึ่งของฟิลด์อินพุต

ใช้คลาส .input-group และ .input-group-addon ร่วมกันเพื่อใช้งาน Input Group

ไวยากรณ์:

<div class="input-group">

<span class=”input-group-addon” id=”basic-addon1″>@</span>

<ประเภทอินพุต=”ข้อความ”คลาส=”รูปแบบการควบคุม”ตัวยึด=”ชื่อผู้ใช้” aria-describedby=”basic-addon1″>

</div>

คำถามที่ 8: คลาสตามบริบทสี่คลาสที่จะใช้กับ Progressive Bar ของ Bootstrap คืออะไร

ต่อไปนี้เป็นคลาสตามบริบทสี่คลาสที่ใช้กับแถบโปรเกรสซีฟของ Bootstrap:

1. ความก้าวหน้า-ความสำเร็จ
2. ความคืบหน้า-info
3. คำเตือนความคืบหน้า
4. ความก้าวหน้า-อันตราย

คำถามที่ 9: Bootstrap มีลักษณะปุ่มที่แตกต่างกันกี่แบบ? พวกเขาคืออะไร?

มี 7 สไตล์ที่แตกต่างกันซึ่งสามารถใช้ปุ่ม Bootstrap ได้ มีดังนี้

1. .btn-info
2. .btn-คำเตือน
3. .btn-อันตราย
4. .btn-ความสำเร็จ
5. .btn-ลิงค์
6. .btn-ประถม
7. .btn-default

คำถามที่ 10: อธิบายการแจ้งเตือน Bootstrap

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

ต่อไปนี้เป็นสี่คลาสในการแจ้งเตือน:

1. .alert-สำเร็จ
2. .alert-info
3. .alert-warning
4. .alert-อันตราย

คำถามที่ 11: คุณจะสร้างรูปแบบแนวตั้งหรือพื้นฐานใน Bootstrap ได้อย่างไร

ต่อไปนี้เป็นขั้นตอนในการสร้างรูปแบบพื้นฐานแนวตั้งใน Bootstrap:

ขั้นตอนที่ 1: ในองค์ประกอบหลัก <form> เพิ่มแบบฟอร์มบทบาท

ขั้นตอนที่ 2: เพิ่มป้ายกำกับและตัวควบคุมภายใน <div> ด้วย class.form-group

ขั้นตอนที่ 3: เพิ่มคลาส .form-control ให้กับทุก URL ข้อความ <input>, <textarea> ทั้งหมดและ <select> องค์ประกอบ

คำถามที่ 12: การแบ่งหน้าใน Bootstrap คืออะไร?

ตามที่ป้ายกำกับแนะนำ การแบ่งหน้าช่วยให้คุณสามารถแบ่งเนื้อหาของเว็บไซต์ของคุณออกเป็นหน้าต่างๆ เพื่อความสะดวกในการนำทาง

ไวยากรณ์:

<ul class = “การแบ่งหน้า”><!—แสดงรายการองค์ประกอบที่นี่ –></ul>

คำถามที่ 13: Bootstrap Container คืออะไร?

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

อ่าน Bootstrap เทียบกับ Material UI . ด้วย

คำถามที่ 14: ระบุส่วนประกอบสามส่วนของ Bootstrap

1. Navbar: ทำหน้าที่เหมือนส่วนหัวสำหรับการนำทางบนเว็บไซต์ของคุณ

ไวยากรณ์: <nav class = “navbar”><!—Code your navigation DOM elements –></nav>

2. Jumbotron: ทำตัวเหมือนวิวพอร์ต สมมติให้เต็มหน้าจอเพื่อเน้นเนื้อหาหลัก

ไวยากรณ์: <div class = “jumbotron”><!—เขียนเนื้อหาของคุณภายในองค์ประกอบ DOM ที่นี่ –></div>

3. แถบความคืบหน้า: แสดงความคิดเห็นที่เน้นความคืบหน้าของการดำเนินการ

ไวยากรณ์: <div class=”progress-bar” role=”progressbar” aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 60%;”>

คำถามที่ 15: เลย์เอาต์สองประเภทใน Bootstrap คืออะไร

1. เค้าโครงของไหล
2. เค้าโครงคงที่

คำถามที่ 16: เค้าโครงของไหลคืออะไร

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

คำถามที่ 17: เค้าโครงคงที่คืออะไร

เลย์เอาต์คงที่แตกต่างจากเลย์เอาต์ของไหล โดยที่มันไม่ปรับตัวเองตามขนาดของเบราว์เซอร์ อย่างไรก็ตาม มันยังคงเร็วและตอบสนองที่ 940px

คำถามที่ 18: Modal Plugin ใน Bootstrap คืออะไร?

หน้าต่างที่สืบทอดมาที่วางเป็นเลเยอร์เหนือหน้าต่างหลักเรียกว่าหน้าต่างโมดอล หน้าต่างนี้เพิ่มคุณค่าให้กับประสบการณ์ของผู้ใช้ด้วยการทำให้ใช้งานได้ ปลั๊กอินที่ใช้สร้างหน้าต่าง Modal เรียกว่า Modal plugin

คำถามที่ 19: Bootstrap Collapsing Elements คืออะไร?

คุณสามารถยุบองค์ประกอบ Bootstrap ได้โดยไม่ต้องใช้โค้ด JavaScript ซึ่งสามารถทำได้โดยการเพิ่ม data-toggle= ”collapse” ไปยังองค์ประกอบคอนโทรลเลอร์ รวม data-target เพื่อควบคุมการยุบองค์ประกอบ

หากต้องการใช้คุณลักษณะ Bootstrap ให้ใช้ .collapse (ตัวเลือก)

คำถามที่ 20: กำหนด Bootstrap ดีหรือไม่?

Bootstrap well นั้นคล้ายกับ Bootstrap container และช่วยให้เนื้อหาดูถูกระงับและทำความสะอาดในหน้ามากขึ้น นอกจากนี้ยังสามารถใช้เพื่อห่อเนื้อหาโดยเพิ่มคลาส .well

คำถามที่ 21: ปลั๊กอิน Carousel ใน Bootstrap คืออะไร

ปลั๊กอิน Carousel ช่วยให้คุณสร้างแถบเลื่อนบนหน้าเว็บของคุณได้ แถบเลื่อนอนุญาตให้ใส่เนื้อหาจำนวนมากลงในพื้นที่ขนาดเล็กบนหน้า

ปลั๊กอินภาพหมุนบางส่วนที่คุณสามารถใช้ได้คือ:

.carousel (ตัวเลือก)

.carousel('หยุดชั่วคราว')

.carousel(วงจร')

.carousel('ก่อนหน้า')

.carousel('ถัดไป')

คำถามที่ 22: อธิบายผลลัพธ์ของรหัสต่อไปนี้

<div class="ความคืบหน้า">

<div class=”progress-bar Progress-bar-success” style=”width: 65%”>

<span class=”sr-only”>สำเร็จแล้ว 75%</span>

</div>

<div class=”progress-bar Progress-bar-warning” style=”width: 20%”>

<span class=”sr-only”>30% พร้อมคำเตือน</span>

</div>

<div class=”progress-bar Progress-bar-danger” style=”width: 15%”>

<span class=”sr-only”>ไม่ครบ 15%</span>

</div>

</div>

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

คำถามที่ 23: ระบุรหัสที่ใช้สำหรับการแสดงรหัสใน Bootstrap หรือไม่

คำตอบ: มีสองรหัสที่ใช้สำหรับแสดงรหัส พวกเขาเป็น:

1. <code> แท็ก
2. <pre> แท็ก

คำถามที่ 24: อธิบาย Normalize ใน Bootstrap

Bootstrap normalize เป็นคุณลักษณะบน Bootstrap โดยใช้ไฟล์ CSS ขนาดเล็กเพื่อเพิ่มความสอดคล้องข้ามเบราว์เซอร์

คำถามที่ 25: วิธีปรับแต่งลิงก์ของการแบ่งหน้าใน Bootstrap คืออะไร

ใช้ .disabled สำหรับลิงก์ที่ไม่สามารถคลิกได้ และใช้ .active เพื่ออ้างอิงถึงหน้าปัจจุบัน

ชำระเงิน: Bootstrap เทียบกับ Material UI

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

บทสรุป

เราหวังว่าคำถามและคำตอบเหล่านี้จะช่วยให้คุณทบทวนความรู้เกี่ยวกับ Bootstrap ขอให้โชคดีกับการสัมภาษณ์ครั้งนั้น!

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาซอฟต์แวร์ฟูลสแตก โปรดดูโปรแกรม Executive PG ของ upGrad & IIIT-B ในการพัฒนาซอฟต์แวร์ฟูลสแตก ซึ่งออกแบบมาสำหรับมืออาชีพที่ทำงานและมีการฝึกอบรมที่เข้มงวดมากกว่า 500 ชั่วโมง โครงการมากกว่า 9 โครงการ และ การมอบหมายงาน สถานะศิษย์เก่า IIIT-B โครงการหลักที่นำไปปฏิบัติจริง และความช่วยเหลือด้านงานกับบริษัทชั้นนำ