부트스트랩5에서 기본적인 다이내믹한 컨포넌트

이 블로그 스킨을 부트스트랩5로 만들었다는 것을 말했다. 이 블로그에 부트스트랩에서 제공하는 컴포넌트를 사용해 다이내믹하게 만드려 했다. 다른 사람이 부트스트랩5를 변형한 소스를 사용하지 않고 다이내믹하게 만들기는 쉽지 않았다. 아래는 부트스트랩5에서 기본으로 제공하는 내가 생각하는 다이내믹한 컴포넌트인 아코디언, 캐러셀, 오프캔버스 3개다. 

아코디언

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

캐러셀

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

 

오프캔버스

5에서 새롭게 추가된 오프캔버스(Off-Canvas) 콘퍼넌트로 개인적으로 가장 마음에 든다. 버튼을 클릭하면 오프캔버스가 왼쪽에서 나올 것이다. 캔버스는왼쪽만이 아닌 위, 아래, 오른쪽에서 나오게 할 수 있다. 오프캔버스는 5에서 새롭게 추가된 것이라 계속 업데이트 및 업그레이드가 필요할 것 같았다. 왜냐하면 오프캔버스 내에 콘텐츠가 오프캔버스를 벗어나면 스크롤바가 생기지 않았다.

 

Colored with scrolling

Try scrolling the rest of the page to see this option in action.

Offcanvas with backdrop

.....

Backdroped with scrolling

Try scrolling the rest of the page to see this option in action.