Bootstrap 5) Forms

➥ 그 전에 알아둘 것은, Bootstrap 5)에서는 <label>과 <input>의 관계가 완전히 재정의되었다는 점이다 - 구조적으로, <label> 안의 <input>와는 달리, 부트스트랩에서의 <input>와 <label>은 서로 분리된 형제요소이다!

☞ 폼 텍스트는 명시적으로 aria-describedby 속성을 써서 폼 컨트롤과 연결되어야 한다 - 이렇게 하면, 사용자가 컨트롤에 포커스를 주거나 입력할 때 스크린 리더기 등의 보조 기술이 이 폼 텍스트를 확실히 알려줄 것이다!

➥ 부트스트랩의 그리스시스템으로 작업할 때는 폼 요소를 .col 안에 넣어주어야 한다 ← 부트스트랩은 내부적으로 고정된 높이를 설정하고, 브라우저간 약간의 불일치는 무시한다!

☞ 플로팅 레이블(.form-floating)을 쓸 때는, <input> 요소가 <label> 앞으로 와야한다!

☞ Default checkbox 를 제외한 나머지 컨트롤들은 스스로 작성해서 추가해주십시오.. ← 그저 위 <input> 요소에다 각각 checked, disabled, checked disabled 속성 키워드를 추가해주기만 하면 됩니다 ^^

☞ .form-check form-check-inline은 체크 폼을 인라인으로 배치한다 ← 참고로, 라디오 버튼의 이름(name= "exampleRadios")은 모두 같아야 한다!

➥ <label>에서 .form-check-label 대신, .btn 스타일을 사용하여 버튼 비슷한 체크박스나 라디오 버튼을 만들 수도 있다 ← 이러한 토글 버튼은 필요 시, 버튼 그룹으로 추가로 그룹화할 수 있다!

Single toggle

☞ 여기서는 뒤쪽으로 배치되면서, 동시에 레이블과 체크 버튼의 순서 또한 바뀌게 된다!

☞ 컨트롤의 특성을 보조기술에 더 정확하게 전달하고자 한다면; role= "switch" 속성을 넣어주는 것이 좋다!

➥ 처음에 펼쳐질 <option> 항목의 개수를 지정하려면; <select> 요소에서 size= "개수" 속성을 추가해주면 되는데, 옵션 항목 모두를 펼친 채 시작하려면; 대신에 multiple 속성을 추가해주면 된다:

☞ 참고로, multiple 속성을 주면; Ctrl 및 Shift 키와의 조합으로 복수 선택을 가능하게 한다!

☞ <input>에서 value= 속성값이 이미 정의되어 있는 경우, <label>은 그에 맞춰 자동으로 위치를 조정하며, 양식 유효성 검사(.form-control is-invalid) 또한 예상대로 작동한다!

(* 이 로그인 폼 샘플은 Bootstrap 5) 샘플 예제 에서 가져온 것입니다.. )

                                    
                                        const modal= new bootstrap.Modal('#myModal')
                                        const dropdown= new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
                                    
                                

* cf) Bootstrap 5) 버전에서부터 모든 자바스크립트 플러그인의 data- 속성은 기존의 data-*에서 data-bs-*로 이름이 변경되었는데, 옵션 이름은 camalCase 방식에서 kebab-case 방식으로 변경해주어야 한다! 한편, 부트스트랩에서 드롭다운, 팝오버 및 툴팁 등은 Popper 플러그인을 사용한다!

                                    
                                        const myModal= document.querySelector('#myModal')
    
                                        myModal.addEventListener('show.bs.modal', event => {
                                            if (!data) {
                                                return event.preventDefault() // stops modal from being shown
                                            }
                                        })
                                    
                                

☞ 모든 동사 형태 이벤트는 preventDefault() 메서드를 제공하는데, 이는 작업이 시작되기 전에 실행을 중지하는 기능을 제공한다 ← 이벤트 핸들러에서 false를 반환하면 자동으로 호출된다!

                                    
                                        const modal= new bootstrap.Modal('#myModal')
                                        const dropdown= new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
                                        const offcanvas= bootstrap.Offcanvas.getInstance('#myOffcanvas')
                                        const alert= bootstrap.Alert.getOrCreateInstance('#myAlert')
                                    
                                

☞ 모든 플러그인 생성자는 DOM 요소 또는 적절한 css 선택자를 첫번째 인수로 받을 수 있는데, 부트스트랩은 단일 요소만 지원하므로 플러그인 요소들은 querySelector() 메서드로 찾을 수 있다!

                                    
                                        const myCollapseEl= document.querySelector('#myCollapse')

                                        myCollapseEl.addEventListener('shown.bs.collapse', event => {
                                            // Action to execute once the collapsible area is expanded
                                        })
                                    
                                

                                    
                                        const myCarouselEl= document.querySelector('#myCarousel')
                                        const carousel= bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

                                        myCarouselEl.addEventListener('slid.bs.carousel', event => {
                                            carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
                                        })

                                        carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
                                        carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!
                                    
                                

                                    
                                        const bsButton= new bootstrap.Button('#myButton');
                                
                                        // 모든 버튼을 토글한다
                                        document.querySelectorAll('.btn').forEach(buttonElement => {
                                            const button= bootstrap.Button.getOrCreateInstance(buttonElement)
                                            button.toggle()
                                        });
                                    
                                

* cf) 스크립트 API는 Javascript를 모르는 상태에서는 이해하기에 어렵고, 또 당장 쓸 일도 없을 터이니.. 대충, 대충,, 보시고 나중에 Javascript를 배우게 된다면; 그때 한번 다시 살펴보십시오 ㅡㅡ;