부트스트랩을 손쉽게 사용하기 위한 Bootstrap Cheat Sheet

#1947

Bootstrap은 어느 정도로 사용하고 있으신가요? 초기보다 기능도 다양해지고 클래스도 많아진 것 같은데요. 실제로 공식 사이트에서 제공되는 예제들을 보는 것으로도 문제없이 사용 가능한 수준이긴 하지만 뭔가 아쉬운 부분이 있기도 했습니다. 이 사이트에서는 전체적인 볼륨을 축소시킨 만큼 검색이 편하다는 생각이 들었습니다.

Bootstrap 4 Cheat Sheet - The ultimate list of Bootstrap classes

사이트는 기본적으로 각 UI를 구성하는 항목의 타이틀이 있고 그 아래로 실제로 Bootstrap에서 사용되는 클래스가 나열되어 있어 심플하게 정리되어 있습니다.

페이지가 길어서 전체를 파악하기 어려울 경우는 'Collapse all'로 타이틀만을 추려서 보면 좋을 것 같습니다.

'?'를 클릭하면 공식 사이트의 해당 항목으로 이동하게 되어 있습니다.

각 항목의 클래스를 선택하게 되면 페이지 하단에서 해당 클래스를 사용한 소스코드와 미리보기를 제공하고 있어 시각적으로 쉽게 판단할 수 있게 되어 있습니다. 공식 사이트에서는 페이지 전체를 활용하고 있고 부연 설명까지 이루어지고 있기 때문에 좀 읽기가 불편한 경우가 있습니다만 Bootstrap 4 Cheat Sheet에서 이런 부분을 상당수 해결한 듯한 느낌이 들었습니다. 치트 시트인 만큼 어느 정도 Bootstrap에 대한 이해도가 있다면 좀 더 제대로 사용할 수 있을 것 같네요.