August 2, 2019 Comments(0) Uncategorized

    부트스트랩 드롭다운 예제

    드롭 다운 () 부트 스트랩 메서드에 전달 할 수있는 특정 옵션이 있습니다 드롭 다운의 기능을 사용자 정의 할 수 있습니다. 옵션은 데이터 속성 또는 자바 스크립트를 통해 전달 될 수 있습니다. 자바스크립트를 사용하여 수동으로 드롭다운을 추가할 수도 있습니다 – 자바스크립트 코드에서 링크 또는 버튼 요소의 ID 또는 클래스 선택기와 함께 드롭다운() 부트스트랩 메서드를 호출하면 됩니다. 다음 예제에서는 탐색 모음에 드롭다운을 추가하는 방법을 보여 줄 것입니다. 팁: .btn-lg 및 .btn-sm과 같은 부트스트랩의 단추 상대 크기 조정 클래스를 .btn 요소에서 사용하여 단추 드롭다운의 크기를 더 조정할 수 있습니다. 부트스트랩 드롭다운 플러그인을 사용하여 링크 목록 등을 표시하기 위한 컨텍스트 오버레이를 전환합니다. 드롭다운은 동적 포지셔닝 및 뷰포트 감지를 제공하는 타사 라이브러리인 Popper.js에 구축됩니다. 부트 스트랩의 자바 스크립트 전에 popper.min.js를 포함하거나 Popper.js를 포함하는 부트 트랩.min.js / bootstrap.bundle.js를 사용하십시오. Popper.js는 동적 위치 지정이 필요하지 않지만 탐색 막대에 드롭다운을 배치하는 데 사용되지 않습니다. 태그가 더 이상 변경되지 않고 클래스 .nav-pills을 .nav-알약으로 대체하여 위의 예제를 탭 드롭다운으로 변환하기만 하면 됩니다.

    부트 스트랩 드롭 다운 플러그인을 사용 하 여 연결 가능한 드롭다운 메뉴를 추가할 수 있습니다 (즉. 열기 와 클릭에 닫기) 링크 등 거의 모든 것, 버튼 또는 버튼 그룹, 탐색 모음, 탭 및 알 약 탐색 등. 자바 스크립트 코드의 한 줄을 작성 하지 않고도. 다음 예제는 사용자가 드롭다운 링크를 클릭할 때 드롭다운 링크의 텍스트 내용을 표시합니다. 이 장에서는 부트스트랩 드롭다운 메뉴에 대해 강조표시합니다. 드롭다운 메뉴는 목록 형식으로 링크를 표시하기 위한 전환 가능, 상황에 맞는 메뉴입니다. 이것은 드롭 다운 자바 스크립트 플러그인과 대화 형으로 만들 수 있습니다. .pull-right 클래스를 .dropdown-menu에 추가하여 드롭다운 메뉴를 오른쪽으로 정렬합니다. 다음 예는 이것을 보여줍니다 – 부트 스트랩의 드롭 다운, 다른 한편으로는, 일반적 상황과 마크 업 구조의 다양한에 적용 할 수 있도록 설계되었습니다. 예를 들어 검색 필드 나 로그인 양식과 같은 추가 입력 및 양식 컨트롤이 포함된 드롭다운을 만들 수 있습니다. 이러한 이유로 부트스트랩은 진정한 ARIA 메뉴에 필요한 역할 및 aria-속성을 기대하지 않습니다.

    작성자는 이러한 보다 구체적인 특성을 자체적으로 포함해야 합니다. 위의 예제에서는 부트스트랩 드롭다운의 가장 기본적인 형태를 보여 줍니다. 부트스트랩 드롭다운 구성 요소의 각 부분을 하나씩 이해해 보겠습니다. 부트스트랩 드롭다운에는 기본적으로 하이퍼링크 또는 버튼이 될 수 있는 드롭다운 트리거 요소와 드롭다운 메뉴 자체의 두 가지 구성 요소가 있습니다. 드롭다운은 링크 목록 등을 표시하기 위한 전환 가능, 컨텍스트 오버레이입니다.