리액트용 부트스트랩

리액트에서 부트스트랩을 사용하는 방법은 import로 불러와서 컴포넌트를 사용한다.

그래서 기존의 부트스트랩과는 사용 방법도 다른만큼 어느정도의 기능의 차이도 있을 거라고 생각한다.

 

나는 부트스트랩에 대해서 잘 모르기 때문에 답답해서 어떤 기능이 있나 한 번 찾아봤다.

공식 홈페이지의 문서를 참조해서 그냥 이런게 있다 라는 것만 적어봤다.

 

레이 아웃

문서 내에서 컴포넌트로 분류되지는 않지만 부트스트랩은 레이아웃 기능을 제공합니다.

이 레이아웃은 반응형 flexbox로 만들어졌습니다.

Container ->

width에 반응형을 준 컨테이너 레이아웃을 사용할 수 있습니다.

가운데로 정렬된 수평의 컨텐츠를 보여주는 데 용이합니다.

Fluid Container ->

가로의 해상도에 상관없이 항상 100%의 width를 가집니다.

1000px -> 750px -> 650px같이 딱딱 줄어드는 Container와는 다르게 부드럽습니다.

 

컴포넌트

Alerts ->

피드백 메시지를 띄울 때 사용하면 좋습니다. 색깔 별로 세팅도 가능합니다.

 

Arcodion ->

Card 구성요소를 한 번에 하나씩만 열도록 제한하는 방법을 제공합니다.

 

Badges ->

상대적인 글꼴 크기 및 em 단위를 사용하여 부모 요소의 크기에 맞춰 크기를 조정합니다. Pill을 사용해 좀 더 둥글게 만들 수 있습니다. 모양새는 버튼과 비슷합니다.

 

Buttons & Button Group ->

버튼과 버튼의 그룹에 관한 세트를 제공합니다. 문서의 양이 방대하기 때문에 꼭 따로 읽어볼 걸 당부합니다.

 

Cards ->

다양한 변형 및 옵션이 있는 유연하고 확장 가능한 콘텐츠 컨테이너를 제공합니다. Img, Body, Title, Text 같은 계층적 구조를 가지고 있습니다.

 

Carousels ->

슬라이드 기능을 제공합니다. 이때 컨텐츠의 크기는 자동으로 조정되지 않기에 별도의 정규화 작업이 필요합니다.

 

Close Button ->

닫기 버튼에 관한 세트를 제공합니다.

 

Dropdowns ->

드롭다운 기능을 제공합니다.

 

Figure ->

선택적 캡션이 있는 이미지와 같은 콘텐츠를 표시할 때 유용합니다. Imgae와 Caption으로 구성되어 있습니다.

 

Forms ->

Form에 관련한 아주 많은 디자인과 기능을 제공합니다. Buttons 마찬가지로 문서의 양이 방대하니 별도로 읽어보길 바랍니다.

 

InputGroup ->

인풋창에 대한 세트를 제공합니다.

 

Images ->

이미지에 관한 세트를 제공합니다. Shape와 Fluid 기능을 제공합니다.

 

List Groups ->

유연하고 강력한 리스트를 제공합니다. Active – 활성화 Disable – 비활성화 Action – 액션 활성화 Flush – 선 없애고 아이템 사이의 구분선만 남김 Horizontal – 수평으로 나열

 

Modal ->

모달에 관한 세트를 제공합니다.

 

Navs ->

링크에 관한 리스트를 나열할 때 유용합니다. Tab이나 Pills 같은 스타일도 지원합니다. NavDropdown로 드랍다운처럼 사용할 수도 있습니다.

 

Navbars ->

유연하고 강력한 네비게이션 바를 제공합니다. Toggle 기능, 브랜드 표시, 색깔 변경, 위치 지정, 스크롤 기능을 지원합니다.

 

Overlay ->

버튼을 활성화시켰을 때 작은 말풍선 등의 정보를 띄우고 싶은 경우에 사용하면 좋을 것 같습니다.

 

Pagination ->

페이지네이션에 관한 기능과 스타일을 제공합니다.

 

Playholder ->

컨텐츠가 로딩 중일 때 로딩 효과를 주고 싶을 때 사용하면 좋습니다.

 

Progress bars ->

다운로드 표시 등의 진행 상황을 나타내는 게이지를 나타내고 싶을 때 사용하면 좋습니다. 그 외에 게이지를 나타내고 싶을 때 언제든 사용해도 됩니다.

 

Spinners ->

뭔가 로딩되고 있을 때 사용하면 좋습니다. 빙글빙글 돌아가는 도돌이표를 보여줍니다.

 

Tables ->

테이블에 관한 세트를 제공합니다.

 

Tabs ->

탭에 관한 여러 세트를 제공합니다.

 

Toasts ->

가볍고 쉬운 알림 메시지를 제공합니다.