20 Bootstrap Multiselect Boxes สำหรับเว็บแอปของคุณ
เผยแพร่แล้ว: 2021-07-15วิดเจ็ต Bootstrap เลือกหลายรายการของเราช่วยให้ผู้ใช้ของคุณเลือกรายการหลายรายการได้อย่างสะดวกบนมือถือและเดสก์ท็อป (คุณยังสามารถกำหนดขีดจำกัดได้!)
เราแน่ใจว่าได้สร้างกลุ่มตัวอย่างที่หลากหลายซึ่งคุณสามารถนำไปใช้กับอะไรก็ได้
รหัสนี้เรียบง่ายและเป็นมิตรกับผู้เริ่มต้น เหมาะสำหรับ ผู้ใช้ทุกระดับทักษะ
ในการใช้วิดเจ็ต Bootstrap multiselect คุณจำเป็นต้องรวมไลบรารี jQuery Javascript ก่อน
ดำเนินการให้สำเร็จก่อนที่คุณจะนำเสนอไฟล์ JavaScript หลักของ Bootstrap ไฟล์ปลั๊กอิน JS และ CSS ยังต้องถูกตั้งค่าไว้ใน <head. คุณสามารถติดตั้งได้จากหน้าเว็บ GitHub ของนักพัฒนาเว็บ
แนวคิดง่ายๆ ในการพัฒนาองค์ประกอบ <select> ทำให้แน่ใจได้ว่าคุณมีแอตทริบิวต์ที่มีเอกลักษณ์เฉพาะและได้รับการแต่งตั้ง จำเป็นต้องระบุแอตทริบิวต์ของค่า multiple=”multiple” =”somevalue”
เป็นการเลือกตัวเลือกที่คุณต้องการรวมไว้ในองค์ประกอบของจำนวนองค์ประกอบ <option> สิ่งนี้จะให้แอตทริบิวต์ value=”some-value” ที่จำเป็นแก่พวกเขา
คุณยังมีการควบคุมเหนือสไตล์อีกด้วย เต็มอิ่มกับการเลือกหลายรายการ ตามที่คุณต้องการ
ด่วน. และ. อย่างง่ายดาย.
สุดยอดวิดเจ็ต Bootstrap Multiselect
เลือกหลายรายการ V01
มาเริ่มกันเลยด้วยวิดเจ็ต Bootstrap multiselect แบบง่ายสำหรับการเลือกภาษาการเขียนโปรแกรม ก่อนที่เราจะไปไกลกว่านี้ หากคุณต้องการใช้ตัวอย่างข้อมูลฟรีนี้เพื่ออย่างอื่น คุณสามารถ ปรับเปลี่ยน ให้เหมาะกับเนื้อหาในหัวใจของคุณ
แต่จริงๆ แล้ว การออกแบบนั้นเรียบง่ายและธรรมดามาก ตรวจสอบให้แน่ใจว่าใช้งานได้กับโปรเจ็กต์และแอปพลิเคชันต่างๆ ตามค่าเริ่มต้น
ในขณะที่ผู้ใช้สามารถเลือกรายการต่างๆ ได้ด้วยตนเอง พวกเขายังสามารถกดเลือกช่องทั้งหมดได้หากทุกอย่างสนใจ นอกจากนี้ แถบหลักจะแสดงการเลือกของผู้ใช้
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V02
ทำให้ผู้ใช้ของคุณเลือกหัวข้อต่างๆ ได้ง่ายและสะดวกด้วย Multiselect V02 เป็นวิดเจ็ต Bootstrap ที่ ปรากฏอย่างหรูหรา บนอุปกรณ์พกพาและเดสก์ท็อป
วิดเจ็ตมีรูปลักษณ์ที่เรียบง่าย โดยทำให้แน่ใจว่าคุณไม่ต้องทำการเปลี่ยนแปลงใดๆ กับมันแทนที่จะใช้ตามที่เป็นอยู่
เมื่อคุณเลือกหัวข้อ หัวข้อนั้นจะปรากฏในช่องแสดงผลพร้อมตัวเลือกให้คลิกที่เครื่องหมาย X เพื่อลบออก ไม่ว่าจะเป็นการเลือกหัวข้อเดียวหรือทั้งหมด การเลือกหลายรายการนี้รองรับทั้งสองหัวข้อ
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V03
หากตัวอย่างข้อมูลการเลือกหลายรายการของ Bootstrap ด้านบนแสดงชื่อหัวข้อตามการเลือก วิธีนี้จะทำให้ตัวเลือกตัวเลขเป็นเรื่องง่าย
อย่างไรก็ตาม คุณสมบัติหลักของ Multiselect V03 คือการเปลี่ยนสีของแบบอักษรของภาษา เมื่อโฮเวอร์จะเปลี่ยนเป็นสีน้ำเงิน แต่เมื่อคลิกจะเปลี่ยนเป็นสีน้ำเงินและตัวหนา
โครงสร้างที่ยืดหยุ่นยังช่วยให้ ปรับ ให้เข้ากับอุปกรณ์พกพา แท็บเล็ต และเดสก์ท็อปได้ อย่างราบรื่น
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V04
Multiselect V04 เป็นแถบที่มี "ไม่มีการเลือก" และเครื่องหมายบั้ง เมื่อคุณคลิกแล้ว เมนูแบบเลื่อนลงจะเปิดขึ้นพร้อมตัวเลือกมากมายให้เลือก
เมื่อคุณเลือกรายการแล้ว เอ ฟเฟกต์คลิก สีน้ำเงินจะปรากฏขึ้นพร้อมเครื่องหมายถูกสีแดงและแสดงรายการในแถบหลัก
ทุกคนสามารถเลือกหรือยกเลิกการเลือกรายการ หัวข้อ หรืออื่นๆ ที่ไม่ต้องการได้มากเท่าที่ต้องการ โดยไม่คำนึงถึงอุปกรณ์ที่ใช้
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V05
Multiselect V05 เป็น Bootstrap snippet ฟรีที่ยอดเยี่ยมที่ช่วยให้คุณตระหนักถึงการเลือกหลายรายการในแอปพลิเคชันหรือเว็บไซต์ของคุณ
ไม่สำคัญว่าวัตถุประสงค์หลักของการเลือกหลายรายการคืออะไร คุณสามารถใช้สิ่งนี้ได้อย่าง สะดวกสบาย และ มีประสิทธิภาพ สำหรับทุกสิ่ง
วิดเจ็ตมีเลย์เอาต์ที่กว้างกว่าทางเลือกอื่นๆ เล็กน้อย ซึ่งทำให้การแสดงการเลือกต่างๆ สะดวกยิ่งขึ้น
รายการแบบเลื่อนลงยังมีช่องทำเครื่องหมายและห้าตัวเลือกตามค่าเริ่มต้น ทำให้เป็นของคุณ ปรับแต่ง และไปจากที่นั่น
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V06
Multiselect V06 อาจดูเหมือนวิดเจ็ต Bootstrap multiselect ทั่วไปอื่น ๆ แต่ก็ห่างไกลจากนั้น ด้วยการออกแบบที่ทันสมัยและแอนิเมชั่นสุดเจ๋ง ข้อมูลโค้ดฟรีนี้รู้วิธีเพิ่ม สีสัน ให้กับ สิ่งต่างๆ
กล่าวอีกนัยหนึ่ง หากคุณกำลังมองหาสิ่งที่ไม่ธรรมดาเกินไป คุณจะทำสิ่งที่ถูกต้องโดยการเลือก Multiselect V06
แต่ก่อนอื่น คุณสามารถทดสอบได้โดยไปที่ตัวอย่างการสาธิตสด (แม้บนอุปกรณ์มือถือ)
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V07
การเลือกหลายรายการจากคอลเล็กชันนี้มีมากกว่าด้านมินิมัลลิสต์ ในขณะที่บางรายการค่อนข้างสร้างสรรค์ หากคุณสนใจรุ่นหลังมากกว่านี้ คุณควรดู ประสิทธิภาพ ของ Multiselect V07 ทันที
มันมีฟิลด์ที่ตอบสนองเมื่อโฮเวอร์ เปลี่ยนสีของข้อความและเค้าร่าง เมื่อคุณคลิกแล้ว เมนูแบบเลื่อนลงที่เป็นตัวหนาจะปรากฏขึ้นพร้อมกับหัวข้อต่างๆ ที่หายไปจากเมนูแบบเลื่อนลงและปรากฏในแถบหลักเมื่อคลิก
ไปข้างหน้าลองและทดสอบด้วยตัวคุณเอง
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V08
การเลือกหลายรายการของ Bootstrap สามารถประกอบด้วยเฉพาะหัวข้อหรือรายการให้เลือก แต่คุณยังสามารถแบ่งออกเป็น หมวดหมู่ต่างๆ ได้
ซึ่งจะเป็นประโยชน์อย่างยิ่งหากมีรายการจำนวนมาก เนื่องจากจะช่วยเพิ่มประสบการณ์ของผู้ใช้เมื่อพบสิ่งที่สนใจ
Multiselect V08 เป็นตัวอย่างที่ดีของสิ่งนั้น ซึ่งตอนนี้คุณสามารถนำไปใช้และทำให้สิ่งต่างๆ เกิดขึ้นได้อย่างรวดเร็ว
นอกจากนี้ยังมีเอฟเฟกต์โฮเวอร์และโครงสร้างโค้ดที่เป็นมิตรกับมือใหม่เพื่อให้ทุกคนได้รับประโยชน์สูงสุด
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V09
สำหรับทุกคนที่มาที่คอลเล็กชันนี้เพื่อค้นหาตัวอย่างข้อมูลแบบหลายตัวเลือกที่ มืด ทำสิ่งที่ชอบแล้วเลือก Multiselect V09 เป็นทางเลือกที่ทันสมัยพร้อมทุกสิ่งที่จำเป็นเพื่อให้คุณก้าวไปข้างหน้าได้ทันที
เครื่องมือนี้ได้รับการปรับให้เหมาะสมสำหรับประสิทธิภาพการทำงานบนมือถือและเดสก์ท็อปที่ยอดเยี่ยม และมีโค้ดที่ย่อยง่าย
เพื่อให้การนำเสนอโดยรวมมีไดนามิกและดึงดูดสายตามากขึ้น Multiselect V09 เสริมแต่งสิ่งต่างๆ ด้วยโทนสีเหลืองที่ดึงดูดสายตา
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V10
เมื่อพูดถึงการเลือกหลายรายการที่มีชิ้นส่วนมากมาย การค้นหาด้วยการเลื่อนอาจไม่สะดวกนัก เพื่อให้ชีวิตของผู้ใช้ง่ายขึ้นมาก นี่คือ Multiselect V10
ตัวอย่างข้อมูลฟรีนี้มาพร้อมกับ ฟังก์ชันการค้นหาสดที่ ใช้งานได้จริง ซึ่งจะแสดงเพลงฮิตทันทีที่คุณเริ่มพิมพ์
จากนั้นคุณสามารถคลิกที่เครื่องหมาย X เพื่อล้างแถบค้นหาและเริ่มต้นการค้นหาใหม่
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V11
Bootstrap multiselect นี้มีสองวิธีในการเลือกรายการจากเมนูแบบเลื่อนลง
ขั้นแรก คุณสามารถเรียกดูและเลือกรายการที่คุณชอบโดย คลิกที่ รายการเหล่านั้น
และอย่างที่สอง การเลือกหลายรายการนี้ยังเสนอการเลือกโดยการ พิมพ์ ลงไปแล้วคั่นรายการเลือกต่างๆ ด้วยเครื่องหมายจุลภาค
สิ่งที่ยอดเยี่ยมอีกประการหนึ่งเกี่ยวกับ Multiselect V11 คือฟังก์ชันการค้นหาแบบสดที่ให้การวิจัยอย่างรวดเร็วโดยตรงจากแถบหลัก นอกจากนี้ รายการที่คุณเลือกจะเปลี่ยนเป็นสีเทาเพื่อให้มองเห็นได้ชัดเจนยิ่งขึ้น
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V12
Multiselect V12 รู้ดีถึงวิธีการผสมผสานความเรียบง่ายเข้ากับการใช้งานจริงเพื่อประสบการณ์ผู้ใช้ที่ยอดเยี่ยม
แม้ว่าเครื่องมือฟรีจะเน้นที่สถานะโดยค่าเริ่มต้น เมนูแบบเลื่อนลงแบบเลือกได้หลายรายการพร้อมฟังก์ชันการค้นหาแบบสด (คั่นด้วยเครื่องหมายจุลภาค) ก็เหมาะสำหรับอย่างอื่น
คุณสามารถใช้มันเพื่อเลือกหัวข้อ รายการ ภาษา ดี คุณได้รับส่วนสำคัญของมัน ทุกอย่างใช้งาน ได้
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V13
ได้ คุณสามารถใช้ Bootstrap multiselect สำหรับชื่อได้ เช่นเดียวกับในเคส Multiselect V13 แม้ว่าตัวอย่างข้อมูลฟรีนี้จะค่อนข้างคล้ายกับตัวอย่างด้านบน แต่ความแตกต่างหลักคือการเลือกสีสำหรับการเลือก
หนึ่งนี้มีโทนสีเทอร์ควอยซ์ที่สวยงาม การค้นหาแบบสด การแยกรายการด้วยเครื่องหมายจุลภาค หรือการเลือกด้วยตนเองจาก เมนูดรอปดาวน์ ล้วนแล้วแต่เป็นสิ่งที่ Multiselect V13 เลือกใช้
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V14
Multiselect V14 เป็นตัวอย่างข้อมูลฟรีที่น่าทึ่งสำหรับการเลือกประเทศ เมื่อคุณคลิกที่แถบ เมนูแบบเลื่อนลงจะเปิดขึ้นโดยมีสถานะให้เลือกห้าสิบสถานะ
แม้ว่าคุณสามารถเลือกได้มากหรือน้อยตามที่คุณต้องการ แต่ก็มีปุ่ม QUICK " เลือกทั้งหมด " เพื่อเลือกรายการทั้งหมด
ยิ่งกว่านั้น ชื่อที่มีมากถึงสี่ชื่อจะปรากฏในแถบ แต่อย่างอื่นที่มากกว่านั้น วิดเจ็ตจะแสดงตัวเลข เลย์เอาต์ยังเปลี่ยนรูปร่างในทันทีไปยัง อุปกรณ์เคลื่อนที่
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V15
หากคุณสนใจสไตล์ Bootstrap multiselects ที่คล้ายคลึงกันมากกว่ารูปแบบก่อนหน้า Multiselect V15 เป็นทางเลือกที่ดี จะแสดงห้าสิบสถานะใน สามคอลัมน์ที่ มีฟังก์ชันการทำงานที่คล้ายคลึงกัน
รูปแบบเดียวกันยังคงไม่เปลี่ยนแปลงไม่ว่าจะดูบนมือถือ แท็บเล็ต หรือเดสก์ท็อป ยิ่งไปกว่านั้น Multiselect V15 ยังมีเอฟเฟกต์โฮเวอร์และเปลี่ยนสถานะที่เลือกเป็นสีน้ำเงิน โดยระบุด้วยเครื่องหมายถูก
คุณยังสามารถเลือกทั้งหมดได้ด้วยการคลิกเพียงครั้งเดียว
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V16
Multiselect V16 เป็นวิดเจ็ต Bootstrap multiselect อันดับต้น ๆ สำหรับการเลือกประเทศโดยค่าเริ่มต้น มันทำให้การออกแบบ ทันสมัยและเรียบง่าย ด้วยคุณสมบัติเจ๋ง ๆ บางอย่าง
เอฟเฟกต์โฮเวอร์สีเทา แอนิเมชั่นการคลิก เครื่องหมายถูก และแป้นพิมพ์ลัดด่วนสำหรับการเลือกรายการตามตัวอักษรเป็นไฮไลท์หลักของ Multiselect V16
ไม่มีตัวเลือก "เลือกทั้งหมด" ที่นี่ ดังนั้นผู้ใช้จำเป็นต้องเลือกทั้งหมดด้วยตนเอง
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V17
บางครั้ง คุณต้องการจำกัด จำนวนการเลือก ที่ผู้ใช้สามารถทำได้ หากเป็นกรณีนี้ แสดงว่า Multiselect V17 เข้ามามีบทบาท ตัวอย่างข้อมูลฟรีนี้จำกัดการเลือกไว้ที่เจ็ดรายการ แต่คุณสามารถแก้ไขได้หากจำเป็น
นอกจากนี้ สถานะจะปรากฏในแถบด้านบน และตัวเลือกในรายการแบบเลื่อนลงจะเปลี่ยนเป็นสีเขียวและมีเครื่องหมายถูก เมื่อถึงขีดจำกัดแล้ว เอฟเฟกต์การคลิกจะยังคงอยู่ แต่การเลือกจะไม่เกิดขึ้น
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V18
Multiselect V18 เป็น Bootstrap multiselect ขั้นสูงที่สวยงามพร้อมคุณสมบัติพิเศษที่แตกต่างกันซึ่งทำให้โดดเด่น
อย่างแรกเลย มันมีกลุ่มต่างๆ ในเมนูแบบเลื่อนลง ซึ่ง แบ่งย่อยสิ่งต่างๆ อย่าง สวยงามเพื่อเพิ่มประสบการณ์ผู้ใช้ นอกจากนี้ แต่ละกลุ่มยังมาพร้อมกับตัวเลือกที่จำกัด เช่นเดียวกับวิดเจ็ตก่อนหน้า
แม้ว่าการเลือกหลายรายการนี้มีไว้สำหรับรัฐนอกกรอบ คุณไม่จำเป็นต้องจำกัดตัวเองในลักษณะ รูปร่าง หรือรูปแบบใดๆ ใช้ประโยชน์จาก TOTAL ของคุณและประหยัดเวลา
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V19
เมนูดรอปดาวน์ที่ง่ายและรอบด้านพร้อมคุณสมบัติการเลือกหลายรายการซึ่งตอนนี้คุณสามารถสร้างของคุณเองได้โดยไม่ต้องเสียเงินแม้แต่น้อย
Multiselect V19 เหมาะสำหรับการเลือก ทุกประเภท เนื่องจากคุณจะทำการปรับเปลี่ยนและปรับปรุงได้ง่ายเพื่อให้เหมาะกับความต้องการของคุณ
เมื่อเลือกรายการต่างๆ คุณสามารถทำได้จากเมนูแบบเลื่อนลงด้วยเคอร์เซอร์ของเมาส์ หรือแม้แต่พิมพ์ลงในแถบแล้วกด Enter นอกจากนี้ การเลือกแต่ละรายการจะเปลี่ยนเป็นสีเทาด้วย แต่คุณสามารถ ยกเลิกการเลือกได้ โดยกดปุ่ม X
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมเลือกหลายรายการ V20
หากต้องการนำสิ่งต่าง ๆ ไปสู่ระดับถัดไป ให้เลือกข้อมูลโค้ด Bootstrap multiselect แบบสามในหนึ่งเดียวและสร้างความแตกต่างในทันที
คุณสามารถแบ่งสิ่งต่าง ๆ ออกเป็น หมวดหมู่ ต่าง ๆ ได้อย่างสะดวก และจำกัดจำนวนรายการที่ผู้ใช้สามารถเลือกได้ด้วยการเลือกหลายรายการ การเลือกเกิดขึ้นโดยการรวบรวมรายการจากเมนูแบบเลื่อนลงหรือพิมพ์ลงไปแล้วกดปุ่ม Enter (รวมคุณลักษณะการค้นหาแบบสด)
วิดเจ็ตยังใช้สีต่างๆ สำหรับหมวดหมู่/การเลือกหลายรายการ ซึ่งคุณสามารถปรับปรุงได้เช่นกัน
ข้อมูลเพิ่มเติม / ดาวน์โหลดเดโมตอนนี้ คุณได้เรียนรู้เพิ่มเติมเกี่ยวกับปลั๊กอิน Bootstrap Multiselect ต่างๆ มากมาย และทุกสิ่งที่มันสามารถทำได้สำหรับฟังก์ชันการทำงานของเว็บไซต์ของคุณ