Bootstrap 5) Study 2

버튼 작성하기

░ 아래 버튼들은 부트스트랩의 기본 규격과는 좀 다릅니다 - Css 사용자정의를 통해 색상과 모양 및 크기 등에 약간의 변형을 준 것이니 참고 바랍니다..

버튼 작성의 기본: <button> 태그와 .btn 클래스: 1. 우선, html의 <button> 태그를 사용하는 경우에는 화면낭독기에 이 곳에 버튼이 있다는 것이 명확히 전달되고, 또한 이 버튼에는 컨텐츠를 포함할 수도 있기에 아이콘을 추가하거나 Css를 이용해 원하는 형태로 꾸미는 것도 가능해진다; 2. 부트스트랩 5)의 .btn 클래스는 기본적으로 <button> 태그에서 사용되도록 디자인되었지만, <a>나 <input> 태그에서도 사용할 수 있다

비활성 버튼: 1. <button>(및 <a>, <input>) 태그에서 사용하는 .disabled 클래스는 Css의 pointer-events: none;과 user-select: none; 속성이 적용되어 마우스 오버 및 활성 상태가 트리거되는 것을 막는다:; 2. <Button> 태그에서와는 달리, <a> 태그를 쓰는 버튼에서는 위 트리거 속성들이 지원되지 않으므로 추가적으로 role= "button" 속성이 필요하며, 또한 href 속성을 포함하지 말아야 한다: <a>

토글 버튼: 부트스트랩의 data-bs-toggle= "button" 속성은 버튼의 on/off 상태를 나타내는데, 미리 On 상태를 만들기 위해서는; .active 클래스와 함께 aria-pressed= "true" 속성도 추가해주어야 한다

닫기 버튼: 부트스트랩의 .btn-close 클래스는 닫기(x) 버튼을 만든다

버튼 그룹과 버튼 툴바

░ 버튼 작성에 관한 기본기를 다 익힌 뒤, 버튼 작성의 모범에 관해 잘 설명해주고 있는 문서도 한번 읽어보시길 권합니다..

버튼 그룹과 버튼 툴바: 부트스트랩의 .btn-group 및 .btn-group-vertical 클래스는 일련의 버튼을 한 줄로 그룹화하거나 세로로 쌓는다. 나아가, .btn-toolbar 클래스는 .btn-group 및 .input-group 등의 여타 부트스트랩 클래스들을 조합하여 작은 툴바를 만든다

뱃지 달아주기

░ 뱃지는 버튼이나 링크의 일부분으로 사용되어 카운터를 제공할 수도 있고(예컨대, 게시글 개수 등..), 나아가 모든 컨텐츠에 추가 정보를 덧붙이는데(예컨대, 모자에 폼나게 별 4개 박은 장군, 가슴에 출렁이는 훈장들 ^^) 사용할 수도 있다!

뱃지 작성의 기본: 1. 기본적으로 뱃지의 배경색은 버튼의 배경색과 같은데, Bootstrap 5) 버전에서는 뱃지의 배경색만 설정하면(예컨대, .badge text-bg-secondary); 텍스트는 그에 대비되는 색상으로 자동으로 맞추어진다. 한편, 뱃지는 em 단위를 사용하므로 그 크기는 기본적으로 부모 요소의 글꼴 크기에 맞추어진다:; 2. 뱃지는 기본적으로 정원으로 그려지지만 .badge rounded-pill로 주면 내부 컨텐츠에 맞추어 최대한 둥글게 표시된다:

뱃지 기울이기 .badge-rotate: 아래, 사용자정의 클래스 .badge-rotate는 Css transform 등을 써서 이미지에 기울어진 뱃지를 달아준다:

수평/수직선 긋기

░ 여기서는 부트스트랩의 수평선 및 수직선 관련 클래스들을 간략히 살펴봅니다..

가로선: <hr> 태그: 부트스트랩에서 <hr> 태그는 ( 브라우저 기본값과 유사하게)border-top 으로 스타일링되고, 불투명도는 opacity: 0.25;로 설정되며, (따로 지정하지 않은 경우)부모요소로부터 상속받은 색상을 사용한다 ← 부트스트랩의 <hr> 태그에서는 .text-색상, .border, .opacity-# 등의 클래스들 또한 사용할 수 있다!

수직선: .vr 클래스: 부트스트랩의 .vr 클래스는 width: 1px; 및 min-height: 1em; 값을 가지며, 부모 요소의 색상 및 불투명도를 상속받는다: ← 자신의 필요에 맞추어 선의 굵기 및 높이, 색상 등은 변경해줄 수 있다!

부트스트랩 색상

░ 부트스트랩 v5.3)의 에서 Css 색상 변수들은 :root로 전역 설정되며, 다크 색상모드에서도 또한 (기존 테마 색상들은 변경되지 않은 상태에서)그에 맞추어 자동 조정된다!

부트스트랩의 색상 파레트: .text-body와 .bg-body 클래스는 <body> 기본 텍스트색과 배경색을 나타내며, .text-reset 클래스는 현재 요소의 텍스트 색상을 부모요소의 색상으로 되돌린다; 1. 부트스트랩 v5.3)의 신규 색상 파레트에는 기존의 테마 색상들에다 -secondary(연한 색상 for color와 bg), -tertiary(더 연한 색상 for color와 bg), -emphasis(더 진한 텍스트 for color) 등이 추가되었다; 2. 부트스트랩 v5.3)의 신규 색상 파레트에서 배경색과 테두리 색상에는 -subtle(연한 색상 for bg와 border) 색상 변수가 추가되었다

텍스트색 및 배경색의 불투명도: 텍스트의 불투명도를 설정하는 .text-opacity-25/50/75, 배경색의 불투명도를 설정하는 .bg-opacity-25/50/75는 모두 색상 클래스와 함께 조합하여 사용해야 한다!

요소의 불투명도: 요소의 불투명도는 .opacity-0/25/50/75/100 클래스로 설정한다: .opacity-25 .opacity-50 .opacity-75

그라디언트 배경: 배경색과 함께 다음과 같은 사용자정의 .bg-gradients 클래스를 만들어 추가해주면 배경에 자신만의 그라디언트를 더해줄 수 있다

타이포그래피

░ 여기서는 부트스트랩 v5.3)의 텍스트, 글꼴 관련 클래스들을 간략히 살펴봅니다..

텍스트 타이포그래피: 1. 아래 예제 코드를 보면서 .display-1/2/3/4/5/6 대 .fs-1/2/3/4/5/6간 차이를 눈으로 새겨두시면 됩니다; 2. 마찬가지로, <h#> 태그들과 .lead 클래스, <body> 기본 텍스트, <small> 태그간 글자의 크기 및 굵기 차이를 눈으로 새겨두시면 됩니다; 3. 그밖에, 다음과 같은 글꼴 관련 클래스들이 있습니다:

점보트론 디자인: 부트스트랩 v4) 버전에서 있었던 점보트론은 v5) 버전으로 올라가면서 공식적으로는 폐기되었다. 하지만, 여전히 Css 및 부트스트랩 유틸리티 클래스들을 이용하여 만들어 쓸 수 있는데, 점보트론 내부에는 다른 부트스트랩 요소 및 클래스를 포함하여 거의 모든 유효한 html을 넣을 수 있다 - 아래는, 사용자정의 .jumbotron 클래스를 작성하여 예전의 점보트론 디자인을 재현해본 것입니다:

패러그래프

░ 여기서는 부트스트랩 v5.3)의 문단 관련 클래스들을 간략히 살펴봅니다..

문단 수평정렬: .text-start/center/end: 이는 기본적인 문단 수평정렬인데(Css 3에서의 .text-left/center/right), 뷰포트에 따라 따라 반응하는 .text-*-start/center/end 클래스를 사용할 수도 있다 ← 참고로, 부트스트랩 5) 버전에서는 left/right 속성명은 제거되었습니다 - 대신, start/end 속성명을 사용하십시오(여타, 同)

줄 높이: .lh-sm/base/lg: html 문서 기본, 또는 부트스트랩에서 재설정한 기본값인 .lh-base 클래스의 line-height 값은 대략 1.5 정도이다

텍스트 자르기, 래핑 및 오버플로: 1. .text-truncate 클래스는 현재의 화면 너비를 벗어나는 영역서부터는 자르고, 나머지는 ...로 표시한다 ← 이 클래스는 블록레벨 요소 및 인라인-블록 요소에서만 작동된다!; 2. html에서는 기본적으로 텍스트가 길어지면 자동 줄바꿈하여 다음 줄로 내려간다(기본값인 .text-wrap). 하지만, 해당 요소에 .text-nowrap 클래스를 주면; (텍스트가 길어져서 다른 영역을 침범하더라도)자동 줄바꿈을 하지 않는다

블록쿼터: Bootstrap 5)에서 <blockquote> 태그(및 .blockquote 클래스)는 마진이 margin: 0 0 1rem;(= 상/좌우/하)으로 재설정되었고, <address> 태그는 이탤릭체에서 브라우저 기본 스타일로 재정의되고 line-height 또한 상속되며, margin-bottom: 1rem;이 추가되었다

리스트 스타일

░ 여기서는 부트스트랩 v5.3)의 리스트 관련 클래스들을 간략히 살펴봅니다..

목록 리스트: Bootstrap 5)에서는 <ul> 및 <ol>, <dl>의 margin-top은 제거되고, margin-bottom: 1rem;으로 재설정되며(내부의 중첩된 목록에서는 margin-bottom도 제거된다), 앞쪽 패딩 또한 재설정된다; 1. <ul> 및 <ol>에서 .list-unstyled 클래스를 주면; 앞에 붙는 불릿을 없애고 앞쪽 마진도 없애준다:; 2. <ul> 및 <ol>에서 .list-inline 클래스를 주고, 각 <li>에서 .list-inline-item 클래스를 주면; 가로로 펼쳐지는 인라인 리스트를 만들 수 있다:

사전목록 리스트: Bootstrap 5)에서는 <dl> 리스트에서 (html 5에서와는 좀 다르게)<dt>는 굵게 표시되고, <dd>는 margin-left: 0; margin-bottom: 0.5rem;으로 재설정된다. 한편, 가로 사전목록은 Bootstrap 5)의 그리드시스템을 써서 작성할 수 있다

박스 스타일

░ 부트스트랩 이전 버전들 속성명에서 방향을 의미하는 left/right는 Bootstrap 5) 버전에 와서 start/end로 바뀌었습니다. 이는, 최근의 Css 쓰기모드를 고려한 새로운 작명 방식인데, 부트스트랩 이전 버전들만 아니라 Css의 속성명과도 좀 상이해진 점이 있으니 우선적으로 기억해두십시오..

박스 테두리 스타일: .border: 박스 테두리는 .border 클래스로 그려주는데, .border-top/bottom/start/end 클래스로 원하는 방면만 따로 그려줄 수도 있다. 반대로, 4방향에서 특정 방면만 제외하고자 할 때는; .border에 덧붙여 .border border-top/bottom/start/end-0 식으로 사용해주면 된다:; 둥근 모서리: .border rounded 및 .border rounded-1/2/3/4/5 클래스; 테두리 두께: .border border-lg (부트스트랩 기본 굵은 테두리) 및 .border border-1/2/3/4/5 클래스; 테두리의 불투명도: 텍스트 및 배경 색상에서와 마찬가지로, border border-색상 에다 .border-opacity-100/75/50/25/10/0 불투명도 클래스를 덧붙여서 사용한다

박스 모서리 스타일: .rounded: 박스 모서리: .rounded | .rounded-pill | .rounded-circle | .rounded-0; 각 방면 박스 모서리: .rounded-top/end/bottom/start; 크기별 박스 모서리: .rounded-1/2/3/4/5; Etc..

박스 그림자 스타일: .shadow: 박스 그림자: .shadow-sm | .shadow | .shadow-lg

포커스 링 스타일: .focus-ring: .focus-ring은 포커스가 주어진 상태(:focus)의 기본 윤곽선을 제거하고 보다 광범위하게 사용자 정의할 수 있는 박스 모양으로 대체하는데, 모든 요소 및 컴포넌트에 대해 사용할 수 있다

Table 작성 기본

░ 부트스트랩의 Table은 (타사 위젯을 사용하는)Opt-in으로서, <table> 태그 안에서 .table로 지정해준 다음, 선택적 수정자 클래스 및 사용자 지정 스타일로 확장하게 된다!

테이블 작성하기: 테이블의 색상은 table 전체나 각 row마다, 또는 개별 셀마다 각각 설정해줄 수도 있다. 한편, 부트스트랩에서 모든 테이블 스타일은 상속되지 않는다 - 곧, 중첩된 테이블은 독자적으로 스타일을 지정해줄 수 있다; 테이블 제목을 나타내는 <caption> .. </caption> 태그는 (어디에 놓여지든 간에)기본적으로 bottom에 배치되는데, .table caption-top 클래스로 상단에 배치해줄 수 있다:

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter

* 테이블 캡션
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	@twitter
footer	footer	footer	footer

이미지/미디어 다루기

░ 부트스트랩에서 이미지는 기본적으로 반응형 으로 동작하며, max-width: 100%; height: auto;로 부모 요소를 꽉 채우게 된다!

이미지 삽입 및 배치: 이미지 삽입 시 .img-fluid는 기본값이며, .img-thumbnail로 주면; 둥근 모서리를 가진 1픽셀 테두리(= border rounded 1px)로 이미지를 둘러싸준다; <picture> & <source> 태그와 함께 사용할 때는; 이미지 관련 클래스를 <img> 태그에 넣어주어야 한다; 이미지에 설명글을 달아줄 때는, <figure>(& .figure) 요소 안에서 <img>(& .figure-img)의 위나 아래에 <figcaption>(& .figure-caption)으로 작성해주면 된다

미디어 삽입하기: 미디어 삽입 시는; .media 요소 내부에 넣어주면 된다; 유튜브 등의 동영상 삽입 시는; .ratio ratio-1x1/4x3/16x9/21x9(기본값: 1x1)로 넣어준다. 이는 <iframe>, <video>, <object> 등으로 삽입한 비디오나 슬라이드를 부모 요소의 너비에 따라 반응형으로 처리하는데, 스타일은 부모 요소의 .ratio 클래스로부터 자식 요소로 직접 적용된다

SVGs 아이콘

░ 부트스트랩은 향상된 접근성 및 벡터 지원 이라는 측면에서 을 선호한다!

부트스트랩의 Svg 아이콘: 1-1. 부트스트랩의 Svg 아이콘을 사용하려면; 먼저, <header> 안에서 부트스트랩 아이콘을 사용하기 위한 CDN 링크를 넣어주어야 한다; 1-2. 이어서, html 문서 내에서 Svg 아이콘을 직접 작성해주거나(), 갖고 있는 Svg 아이콘을 일반적인 이미지처럼 <img> 요소로 참조하거나() 할 수 있는데, width 및 height 등의 속성도 함께 사용할 수 있다; 2. 순전히 장식용인 아이콘에는 aria-hidden= "true" 속성을 추가해서 보조기술로부터 숨겨주어야 하며, role= "img" 및 aria-label 속성으로 그 의미를 보조기술에 알려주어야 한다 ← 그렇지 않은 경우에는; 적절한 방법으로 대체 텍스트를 제공해주어야 한다!

오픈소스 아이콘

░ 부트스트랩에서 기본 제공하는 SVGs 아이콘 외에도 다양한 오픈소스 아이콘 제공 사이트들이 있는데, 이러한 오픈소스 아이콘들은 <body> 안에서 사용하려는 아이콘 이름을 <i>나 <span> 태그 등으로 (각 사이트에서 제공하는 방식에 맞추어)추가해주면; 외부 오픈소스 아이콘을 웹문서에 불러들여 사용할 수 있다

오픈소스 아이콘: 은 스크립트 파일을 CDN으로 불러와서 초기화 설정을 해준 이후에 <i>나 <span> 태그를 써서 사용할 수 있는데, 에 표시된 이름으로 불러들여 쓰거나(), 또는 다운로드하여 <img> 태그로 삽입해줄() 수도 있다:; 또한, Feather 아이콘과 같은 방식으로 사용한다. 먼저, CDN 링크와 스크립트 파일을 불러온 이후에 <i>나 <span> 태그를 써서 이용할 수 있다; 은 .fill-색상 및 .stroke-색상 클래스로 SVG 색을 채워줄 수 있다. 한편, 아이콘 크기 변경은 간단히 svg 요소의 width와 height 속성을 사용하면 된다

아이콘 링크

░ 모든 아이콘에 대한 클래스를 가진 아이콘 폰트 또한 부트스트랩 아이콘에 포함되는데, 필요할 때 html 문서에서 클래스 이름으로 참조하면 된다

아이콘 붙은 링크: 는 사용하고자 하는 <a> 태그 안에서 텍스트 앞 또는 뒤에 <i> 태그로 .bi-아이콘이름으로 넣어주는 것만으로 충분하다: 소소한 이야기; 아이콘의 크기, 배치 및 색상은 자동으로 조정되는데, 아이콘 모양을 변경하려면; Css의 font-size 및 color 속성을 사용할 수 있다; 부트스트랩의 .icon-link(및 .icon-link-hover) 클래스는 인라인 flexbox 스타일 및 .gap 기본값을 써서 기본 링크 스타일을 수정하고, 아이콘과 텍스트의 쌍을 빠르게 정렬해준다:

확장 링크

░ 확장 링크는 링크 클릭 범위 를 확장하는데, Css가 작동하는 방식에 의해 대부분의 <table> 요소에서는 사용할 수 없다!

확장 링크의 기본: <a> 요소에 .stretched-link 클래스를 추가하면; 가상요소 ::after를 통해 그 부모 요소로까지 클릭 범위가 확장되는데, 이때 <a>의 부모요소는 .position-relative로 설정되어 있어야한다

카드에서의 확장링크: 카드는 부트스트랩 자체 규정에 의해 .position-relative로 설정되어 있으므로, 카드 안에서 사용한 .stretched-link는 기본적으로 카드 박스 전체로 확장된다

미디어 구성요소에서의 확장링크: 미디어 구성요소에서 사용한 확장 링크는 미디어 박스 전체로 확장되지 않으므로, 별도로 .media 컨테이너에 .position-relative 클래스를 추가해주어야 한다:

컬럼에서의 확장링크: 컬럼에서의 확장 링크는 다른 컬럼으로까지 링크 범위가 확장되지 않고, 현재 컬럼 내부만으로 확장 링크의 범위가 제한된다 ← 단, 해당 컬럼에서의 .position-relative는 필요하다!

확장링크가 작동하지 않는 경우: 만일 확장 링크가 제대로 작동되지 않는다면; 컨테이닝 블록이 그 원인일 가능성이 많은데, 다음 Css 속성들이 요소를 컨테이닝 블록으로 만든다: static 이외의 position 값, none 이외의 transform, perspective, filter 값 등..

캐러셀 슬라이드

░ 캐러셀은 Css 3d 트랜스폼과 약간의 스크립트로 구축된, 이어진 컨텐츠들(이미지나 텍스트 등) 사이를 순환하는 슬라이드 쇼 이다

캐러셀 기본: 캐레셀에서 슬라이드 크기를 자동으로 정규화하지는 않으므로, 컨텐츠 크기를 적절하게 조정하려면 추가 유틸리티나 사용자정의 스타일을 사용해야 한다; 캐러셀은 이전/다음 버튼과 표시자 도 지원하는데, 필요에 따라 추가하고 스타일링해주면 된다. 또한, 캐러셀은 기본적으로 터치스크린 기기에서의 좌/우 스와프를 지원하는데, 이 기능을 비활성화하려면; data-bs-touch= "false" 값을 추가해주면 된다; 색상 설정은 루트 요소, 부모 래퍼 혹은 컴포넌트 자체에서 data-bs-theme= "dark" 속성을 사용해주면 된다 ← 이는 Css의 filter 속성을 써서 기본값인 white 계열과 대비되는 색상으로 반전시킨다!; 캐러셀 아이템간 자동 순환 시간 간격을 변경하려면; 개별 .carousel-item에서 data-bs-interval= "밀리초" 속성을 추가해주면 된다; 자동 재생 슬라이드는 data-bs-ride= "carousel" 속성을 주면된다. 이 API를 지원하는 브라우저에서 웹페이지가 표시되지 않으면(예컨대, 브라우저 탭이 비활성화되거나 브라우저 창이 최소화된 경우) 캐러셀 순환이 중지된다 - 자동 재생은 마우스를 가져가면 일시 중지되는데, 이 동작은 pause 옵션으로 제어할 수 있다 ← ride 옵션을 data-bs-ride= "true"로 설정하면; 페이지 로드 시 자동으로 순환을 시작하지 않되, 첫번째 사용자 상호작용 후에 시작된다!

캐러셀 슬라이드쇼: 캐러셀 슬라이드 중의 하나는 반드시 .active 클래스를 지정해주어야 한다. 또한, 특히 단일 페이지에서 다수의 캐러셀을 사용하는 경우에, 선택적 컨트롤을 위해 고유한 id를 설정해주어야 한다. 컨트럴 및 표시자 요소들에는 캐러셀 요소의 id에 일치하는 data-bs-target= "대상요소", 또는 링크용 href= "#대상요소" 속성이 주어져야 한다

사용자 상호작용

░ 필요하다면; 특정 요소에 html의 role= "button" 속성을 추가함으로써 기본 커서를 (버튼 요소 없이도)포인터로 변경하여 대화형임을 강조할 수 있다!

html의 role 속성에 대하여: 1. role 속성을 쓰면 html 태그에 최소한의 의미 체계를 부여하고, 문서의 맥락에서 해당 요소가 갖는 역할을 설명해줄 수 있다. 이는 스크린리더기 등의 보조 기술, 그리고 경우에 따라서는 검색엔진에도 중요하다. 곧, role 속성이 부여하는 역할을 통해 스크린 리더기 등은 사용자가 원하는 컨텐츠에 빠르게 액세스할 수 있으며, 이를 통해 스크린리더 사용자에게 대화형 요소와 상호작용하는 정확한 방법을 제공할 수 있게된다: <main role="main"> .. </main>; 2. 나아가, role 속성을 사용하면 태그가 암시하는 것과 다른 역할을 비롯하여 의미가 없는 모든 요소에 의미론적 역할을 부여할 수도 있다. 예컨대, <button> 태그에는 버튼이라는 기본적인 역할이 있는데, 어떤 요소에든 role="button" 속성을 부여하면; 그 요소를 (실제로 버튼의 기능을 수행하지는 않지만, 의미론적 차원에서)버튼으로 변환할 수 있다: 클릭해보세요.. ← 단, 실제 버튼의 기능은 못하고, 단지 버튼의 모양새만 흉내내고 있을 뿐이다!

상호작용 방지하기: .text-decoration-none 클래스는 <a> 태그의 링크 밑줄을 제거하며(소소한 이야기), .pe-none 클래스는 포인터(마우스, 스타일러스펜, 터치 등)과의 상호작용도 방지한다(소소한 이야기)

숨겨진 대화형 컨텐츠: 시각적으로는 숨기되, 스크린리더기 등에는 알려야 하는 컨텐츠에는 .visually-hidden 클래스를 사용할 수 있는데, 이는 추가적인 시각 정보나 단서를 (예컨대, 색상을 통해 무언가를 알리고자 하는데)볼 수 없는 사용자에게 그 의도를 전달해야할 때 유용하다; 시각적으로 숨겨진 대화형 컨텐츠의 경우, .visually-hidden-focusable 클래스를 사용할 수 있는데, 포커스가 주어지면 컨트롤이 표시된다

텍스트 선택방식: .user-select-all/none 클래스는 사용자가 텍스트 단락에서 클릭할 때 컨텐츠가 선택되는 방식을 설정한다

상태표시 바

░ 플레이스 홀더와 스피너 보더는 컴포넌트 또는 페이지에서 무언가가 로딩 중임을 표시하며, 프로그레스 바는 프로젝트의 현재 진척 정도를 표시한다

플레이스 홀더: 플레이스 홀더는 .placeholder 클래스와 (너비 설정을 위하여)그리드 컬럼으로 만든다. 플레이스 홀더의 높이는 기본적으로 부모 요소의 크기를 기반으로 하지만, .placeholder-lg/sm/xs 클래스로 변경해줄 수도 있다. 너비는 그리드 컬럼이나 .w- 유틸리티 클래스, 또는 인라인 스타일을 통해 변경해줄 수 있고, 색상은 기본적으로 currentColor를 사용하는데, .bg-색상 클래스로 변경해줄 수도 있다; 애니메이션에는 .placeholder-glow/wave 클래스를 사용할 수 있다

스피너 보더: 부트스트랩에서 스피너 보더는 스크립트 없이 단지 html과 Css로만 작성하는데, rem 단위 사이즈 및 display: inline-flex;로 빌드된다. 스피너 보더의 형태에는 .spinner-border 및 .spinner-grow가 있고, .spinner-*-sm/lg 클래스를 써서 크기를 설정해줄 수도 있다; 스피너 보더의 색상은 기본적으로 currentColor(부모요소의 색상)으로 빌드되는데, .text-색상 및 .text-bg-색상 클래스를 써서 변경해줄 수도 있다

프로그레스 바: 프로그레스 바는 두 개의 html 요소와 너비 설정을 위한 Css, 약간의 추가적인 속성들로 구성된다. 프로그레스 바를 쌓고, 거기에 애니메이션을 적용하고, 그 위에 텍스트 레이블을 배치해줄 수 있다; 프로그레스 바의 높이 및 값 범위를 나타내기 위해 .progress를 래퍼로 사용하는데, 이 래퍼는 role= "progressbar" 속성과 접근을 위한 label 및 접근 가능하게 만드는 aria 속성들(aria-label, aria-labelledby)을 필요로 한다. 그 내부에서 바와 레이블을 위해 .progress-bar를 배치하는데, 색상 및 너비는 인라인 스타일이나 유틸리티 클래스, 또는 사용자정의 Css를 사용하여 설정할 수 있다; 프로그레스바의 모양은 .progress-bar 클래스에 .progress-bar-striped 및 .progress-bar-animated 등을 덧붙여서 설정해줄 수 있다; 다중/누적 프로그레스바를 위해서는 래퍼로 .progress-stacked 클래스를 사용하는데, 멀티 진행률 표시기에서의 너비는 .progress-bar가 아닌 .progress에서 설정해주어야 한다

Focus & Tab

░ 폼 컨트롤, 버튼, 링크과 같은 상호작용 요소는 포커스를 주거나 탭을 통해 이동하는 것이 가능한데, 탐색 포커스 순서는 기본적으로 소스 코드의 눈에 보이는 흐름과 동일하다 ← html의 tabindex 속성을 써서 실제 탭 순서를 변경하거나 Css의 order 속성 등을 써서 시각적 렌더링 순서를 변경하는 것은 사용자의 접근성에 악영향을 끼칠 수 있으므로 주의해서 사용해야 한다!

탭 인덱스: html 전역 속성인 속성은 어떤 요소에든 추가할 수 있고, 그 요소에 Tab 키를 써서 포커스를 맞출 수 있도록 해준다 - 곧, 기본값인 0 은 요소를 포커스 및 탭 가능하게 만들어 소스코드 순서에 따르는 순차탐색 순서에 추가한다; -1 같은 음수값은 요소에 포커스를 맞출 수는 있지만, 탭할 수는 없다 ← 예컨데, 버튼이나 링크 같은 상호작용 요소에 tabindex 값으로 -1 을 주면; 더 이상 Tab 키는 사용할 수 없게된다!; 1 이상 값을 주면; 요소에 포커스 가능하고 탭할 수 있게 되지만, 우선 순위가 지정된 탭 시퀀스에 추가되어 혼란을 줄 수 있으므로 가능하면 피하는 것이 좋다 ← 다시 말해, tabindex를 써서 html 문서의 DOM 트리 순서를 변경하는 것은 좋지 않다!

탐색 포커스: 요소가 를 받을 때 기본 브라우저 동작은 포커스 링을 표시하는 것인데, 이 포커스 링은 브라우저와 운영체제에 따라 제각각이다. 따라서, 요점은 요소의 기본 스타일과 대비되는 포커스 스타일을 따로 설정해주어야 한다는 것인데, 이를 위해서는 요소에 윤곽선이나 그림자를 설정해주는 것이 일반적이다; 요소의 autofocus 속성 및 스크립트의 요소.focus(); 메서드는 페이지가 로드될 때 포커스 가능한 요소에 초점을 맞춰주며, 뷰는 그 위치로 스크롤하여 표시된다 ← 단, 이것이 순차 포커스 탐색 순서를 변경하는 것은 아니다!

버튼과 뱃지, 선

Typography

미디어/아이콘/링크

상호작용

버튼 작성하기

버튼 그룹과 버튼 툴바

뱃지 달아주기

수평/수직선 긋기

부트스트랩 색상

타이포그래피

1

2

3

4

5

6

1

2

3

4

5

6

Title .text-body-secondary small

Hello, world!

패러그래프

리스트 스타일

박스 스타일

Table 작성 기본

Table 캡션

반응형 테이블

이미지/미디어 다루기

SVGs 아이콘

오픈소스 아이콘

아이콘 링크

확장 링크

Card with stretched link

확장된 링크가 있는 컬럼

캐러셀 슬라이드

기본 캐러셀 슬라이드

First slide label

Second slide label

Third slide label

사용자 상호작용

상태표시 바

Focus & Tab