웹 앱을 위한 20개의 부트스트랩 다중 선택 상자

Bootstrap 다중 선택 위젯은 사용자가 모바일 및 데스크탑에서 편리하게 여러 항목을 선택할 수 있도록 도와줍니다. (한도를 설정할 수도 있습니다!)

우리는 무엇이든 적용할 수 있는 다양한 예제 번들을 만들었습니다.

코드는 간단하고 초보자에게 친숙하며 모든 기술 수준의 사용자에게 적합합니다 .

Bootstrap 다중 선택 위젯을 사용하려면 먼저 jQuery Javascript 라이브러리를 통합해야 합니다.

Bootstrap의 기본 JavaScript 파일을 선보이기 직전에 완료하십시오. 플러그인 JS 및 CSS 파일도 <head.h>에 설정해야 합니다. 웹 개발자의 GitHub 웹 페이지에서 바로 설치할 수 있습니다.

<select> 요소를 개발하는 간단한 아이디어 는 고유하고 지정된 속성을 가지고 있다는 것을 확실하게 합니다. multiple=”multiple” value=”somevalue”의 속성을 식별할 필요가 있습니다.

<option> 요소 수의 구성 요소 내부에 래핑해야 하는 옵션의 선택입니다. 이것은 그들에게 필요한 value="some-value" 속성을 제공할 것입니다.

또한 스타일을 제어할 수 있습니다. 원하는 대로 다중 선택을 풍부하게 하십시오.

빨리. 그리고. 용이하게.

최고의 부트스트랩 다중 선택 위젯

다중 선택 V01

프로그래밍 언어 선택을 위한 간단한 Bootstrap 다중 선택 위젯으로 시작하겠습니다. 더 진행하기 전에 이 무료 스니펫을 다른 용도로 사용하려면 원하는 대로 수정할 수 있습니다.

그러나 실제로 디자인은 매우 기본적이고 단순하여 기본적으로 다른 프로젝트 및 응용 프로그램에서 작동하는지 확인합니다.

사용자는 다른 항목을 수동으로 선택할 수 있지만 모든 것이 관심이 있는 경우 모두 선택 상자를 누를 수도 있습니다. 또한, 메인 바는 사용자의 선택을 표시합니다.

추가 정보 / 데모 다운로드

다중 선택 V02

Multiselect V02로 사용자가 다양한 주제를 쉽고 편리하게 선택할 수 있습니다. 모바일 및 데스크탑 장치에서 우아하게 나타나는 부트스트랩 위젯입니다.

위젯은 매우 미니멀한 모양을 따르므로 변경하지 않고 그대로 사용하도록 합니다.

주제를 선택하면 X 기호를 클릭하여 제거할 수 있는 옵션과 함께 표시 필드에 나타납니다. 하나의 주제를 선택하든 모든 주제를 선택하든 이 다중 선택은 두 가지를 모두 지원합니다.

추가 정보 / 데모 다운로드

다중 선택 V03

위의 부트스트랩 다중 선택 스니펫이 선택 시 주제의 이름을 표시한다면, 이것은 숫자 선택으로 매우 간단하게 유지합니다.

그러나 Multiselect V03의 주요 특징은 언어 글꼴 색상의 변경입니다. 마우스를 올리면 파란색으로 바뀌지만 클릭하면 파란색으로 굵게 바뀝니다.

유연한 구조는 또한 모바일, 태블릿 및 데스크톱 장치에 원활하게 적용 됩니다.

추가 정보 / 데모 다운로드

다중 선택 V04

Multiselect V04는 "선택된 항목이 없음"과 갈매기 모양이 있는 막대입니다. 클릭하면 선택할 수 있는 여러 옵션이 있는 드롭다운이 열립니다.

항목을 선택하면 빨간색 체크 표시와 함께 파란색 클릭 효과 가 나타나고 기본 표시줄에 항목이 표시됩니다.

사용하는 장치에 관계없이 누구나 원하는 만큼 항목, 주제 또는 기타 항목을 선택하거나 선택 해제할 수 있습니다.

추가 정보 / 데모 다운로드

다중 선택 V05

Multiselect V05는 애플리케이션이나 웹사이트에서 다중 선택을 실현하는 데 도움이 되는 환상적인 무료 부트스트랩 스니펫입니다.

다중 선택의 주요 목적이 무엇이든 상관없이 모든 것에 이 항목을 편안 하고 효과적으로 사용할 수 있습니다.

위젯은 다른 대안보다 약간 더 넓은 레이아웃을 가지고 있어 다양한 선택 항목을 더 편리하게 표시할 수 있습니다.

드롭다운에는 기본적으로 확인란과 5가지 옵션도 있습니다. 그것을 당신의 것으로 만들고 미세 조정하고 거기에서 가십시오.

추가 정보 / 데모 다운로드

다중 선택 V06

다중 선택 V06은 다른 일반적인 부트스트랩 다중 선택 위젯처럼 보일 수 있지만, 그와는 거리가 멉니다. 현대적인 디자인과 멋진 애니메이션으로,이 무료 조각은 어떻게 향신료 것들까지 알고있다.

즉, 너무 전통적이지 않은 것을 찾고 있다면 Multiselect V06을 선택하는 것이 좋습니다.

그러나 먼저 라이브 데모 미리 보기를 방문하여(모바일 장치에서도) 테스트할 수 있습니다.

추가 정보 / 데모 다운로드

다중 선택 V07

이 컬렉션의 일부 다중 선택은 미니멀리스트 측면에 더 가깝고 일부는 매우 창의적입니다. 후자가 더 마음에 든다면 지금 Multiselect V07의 성능을 살펴봐야 합니다.

마우스를 올리면 응답하는 필드가 있어 텍스트와 윤곽선의 색상을 변경합니다. 클릭하면 드롭다운에서 사라지고 클릭 시 기본 표시줄에 나타나는 다양한 주제와 함께 굵은 드롭다운이 나타납니다.

직접 시도하고 테스트하십시오.

추가 정보 / 데모 다운로드

다중 선택 V08

부트스트랩 다중 선택은 선택할 수 있는 주제나 항목으로 구성될 수 있지만 다른 범주 로 나눌 수도 있습니다.

관심 있는 항목을 찾을 때 사용자 경험을 향상시키므로 항목이 많은 경우 특히 유용합니다.

Multiselect V08은 이를 잘 보여줍니다. 이제 이를 실행에 옮기고 신속하게 작업을 수행할 수 있습니다.

또한 모든 사람이 최대한 활용할 수 있도록 호버 효과와 초보자 친화적인 코드 구조를 제공합니다.

추가 정보 / 데모 다운로드

다중 선택 V09

이 컬렉션에 온 모든 사람들이 어두운 다중 선택 스니펫을 검색하려면 스스로에게 호의를 베풀고 다중 선택 V09를 선택하십시오. 그것은 당신이 바로 앞으로 나아가는 데 필요한 모든 것을 갖춘 현대적인 대안입니다.

이 도구는 뛰어난 모바일 및 데스크톱 성능에 최적화되어 있으며 이해하기 쉬운 코드가 포함되어 있습니다.

전체 프레젠테이션을 보다 역동적이고 눈에 매력적으로 만들기 위해 Multiselect V09는 눈에 띄는 노란색 톤으로 사물을 풍부하게 합니다.

추가 정보 / 데모 다운로드

다중 선택 V10

수많은 조각이 포함된 다중 선택의 경우 스크롤하여 찾는 것이 매우 불편할 수 있습니다. 사용자의 삶을 훨씬 더 단순하게 만들기 위해 Multiselect V10이 있습니다.

이 무료 스니펫에는 입력을 시작하는 즉시 조회수를 표시하는 실용적인 실시간 검색 기능 이 함께 제공됩니다.

그런 다음 X 기호를 클릭하여 검색 표시줄을 지우고 새 검색으로 시작할 수 있습니다.

추가 정보 / 데모 다운로드

다중 선택 V11

이 부트스트랩 다중 선택에는 드롭다운에서 항목을 선택하는 두 가지 방법이 있습니다.

첫째, 당신은 그들을 탐색하고 그들을 클릭하여 마음에 드는 것을 선택할 수 있습니다.

둘째, 이 다중 선택은 입력 하고 쉼표로 다른 선택을 구분 하여 선택을 제공합니다.

Multiselect V11의 또 다른 멋진 점은 메인 바에서 직접 빠른 조사를 제공하는 라이브 검색 기능입니다. 또한 더 나은 가시성을 위해 선택한 항목이 회색으로 바뀝니다.

추가 정보 / 데모 다운로드

다중 선택 V12

Multiselect V12는 훌륭한 사용자 경험을 위해 단순함과 실용성을 혼합하는 방법을 잘 알고 있습니다.

무료 도구는 기본적으로 상태에 중점을 두지만 라이브 검색 기능(쉼표로 구분)이 있는 이 다중 선택 드롭다운은 다른 모든 작업에 적합합니다.

주제, 항목, 언어를 선택하는 데 사용할 수 있습니다. 모든 것이 작동합니다 .

추가 정보 / 데모 다운로드

다중 선택 V13

예, Multiselect V13의 경우와 마찬가지로 이름에 Bootstrap multiselect를 사용할 수도 있습니다. 이 무료 스니펫은 위의 것과 매우 유사하지만 주요 차이점은 선택 항목에 대한 색상 선택입니다.

이것은 아름다운 청록색 색조가 특징입니다. 실시간 검색, 쉼표 항목 분리 또는 드롭다운 에서 수동 선택은 Multiselect V13의 장점입니다.

추가 정보 / 데모 다운로드

다중 선택 V14

Multiselect V14는 국가 선택을 위한 놀라운 무료 스니펫입니다. 막대를 클릭하면 선택할 수 있는 50개 상태가 있는 드롭다운이 열립니다.

원하는 만큼 많이 또는 적게 선택할 수 있지만 전체 목록을 선택하기 위한 QUICK " 모두 선택 " 버튼도 있습니다.

또한 최대 4개의 이름이 막대에 표시되지만 그 이상인 경우 위젯에는 숫자가 표시됩니다. 또한 레이아웃은 모바일 장치에 맞게 즉시 변경됩니다.

추가 정보 / 데모 다운로드

다중 선택 V15

이전 스타일보다 더 유사한 부트스트랩 다중 선택 스타일에 관심이 있다면 Multiselect V15가 훌륭한 대안입니다. 유사한 기능을 가진 3개의 열에 50개의 상태를 표시합니다.

모바일, 태블릿 또는 데스크탑에서 볼 때 동일한 스타일이 그대로 유지됩니다. 또한 Multiselect V15는 호버 효과를 제공하고 선택된 상태를 파란색으로 바꾸어 확인 표시로 나타냅니다.

한 번의 클릭으로 모두 선택할 수도 있습니다.

추가 정보 / 데모 다운로드

다중 선택 V16

Multiselect V16은 기본적으로 국가 선택을 위한 또 다른 최고 수준의 Bootstrap 다중 선택 위젯입니다. 몇 가지 멋진 기능으로 디자인을 현대적이고 미니멀 하게 유지합니다.

회색 호버 효과, 클릭 애니메이션, 체크 표시 및 알파벳 문자로 항목을 선택하기 위한 빠른 키보드 단축키는 Multiselect V16의 핵심 하이라이트입니다.

여기에는 "모두 선택" 옵션이 없으므로 사용자가 수동으로 모든 항목을 선택해야 합니다.

추가 정보 / 데모 다운로드

다중 선택 V17

사용자 가 선택할 수 있는 항목 의 수 를 제한하려는 경우가 있습니다. 이 경우 Multiselect V17이 작동합니다. 이 무료 스니펫은 선택 항목을 7개로 제한하지만 필요한 경우 변경할 수 있습니다.

또한 상태가 위의 막대에 나타나고 드롭다운의 선택 항목이 녹색으로 바뀌고 확인 표시가 나타납니다. 제한이 충족되면 클릭 효과는 여전히 있지만 선택이 발생하지 않습니다.

추가 정보 / 데모 다운로드

다중 선택 V18

Multiselect V18은 눈에 띄게 만드는 다양한 전문 분야가 있는 상당히 발전된 Bootstrap multiselect입니다.

가장 먼저, 드롭다운에 그룹을 제공하여 사용자 경험을 향상시키기 위해 항목을 아름답게 분류합니다. 또한 각 그룹에는 이전 위젯과 같이 개별적인 선택 제한이 있습니다.

이 다중 선택은 즉시 사용 가능한 상태를 위한 것이지만 모양이나 형태에 제한을 둘 필요는 없습니다. TOTAL 이점을 활용하고 시간을 절약하십시오.

추가 정보 / 데모 다운로드

다중 선택 V19

이제 한 푼도 지출하지 않고 만들 수 있는 다중 선택 기능이 포함된 간편한 만능 드롭다운입니다.

Multiselect V19는 필요에 맞게 조정 및 개선하기 쉽기 때문에 모든 종류 의 선택에 적합합니다.

다른 항목을 선택할 때 마우스 커서를 사용하여 드롭다운에서 항목을 선택하거나 막대에 항목을 입력하고 Enter 키를 누를 수도 있습니다. 또한 각 선택 항목도 회색으로 바뀌지만 X 버튼을 눌러 선택을 취소 할 수 있습니다.

추가 정보 / 데모 다운로드

다중 선택 V20

다음 단계로 넘어가려면 이 3가지 기능이 통합된 부트스트랩 다중 선택 스니펫을 선택하고 즉각적인 차이를 만드십시오.

물건을 여러 범주 로 편리하게 분류 하고 다중 선택으로 한 사람이 선택할 수 있는 항목 수를 제한할 수 있습니다. 선택은 드롭다운에서 항목을 수집하거나 입력하고 Enter 키를 눌러 발생합니다(라이브 검색 기능 통합).

위젯은 또한 다양한 카테고리/다중 선택에 대해 다른 색상을 사용하므로 개선할 수도 있습니다.

추가 정보 / 데모 다운로드

이제 다양한 Bootstrap Multiselect 플러그인과 웹사이트 기능을 위해 할 수 있는 모든 작업에 대해 배웠습니다.