본문

[CSS] Bootstrap 4를 5분 안에 배우기

일부분의 내용이며 자세한 내용은 링크를 참고할것

#1: Flatter buttons

# 2 : 미디어 쿼리가 더 좋습니다.

이제는 새로운 브레이크 포인트 xl를 추가했습니다. 이것은 이전에 가지고 있던 lg의 역할을 취하고 나머지 브레이크 포인트를 아래쪽으로 밀어 넣어 범위를 576px까지 줄였습니다.

# 3 : Flexbox 지원으로 유연성 향상

이제 유명한 부트스트랩 grids가 floats 대신 Flexbox로 생성됩니다. 첫눈에, 대부분의 그리드 레이아웃이 똑같이 작동하기 때문에 이것은 개발자로서 큰 차이를 만들지 않습니다. 그러나 몇 가지 가능성을 열어줍니다.

# 4 : classes와 spacing 제어

이거 꽤 멋지다. 이제 p-* 및 m-* 클래스를 사용하여 padding 및 margins을 제어 할 수 있습니다. 범위는 0에서 5까지의 숫자를 적용하여 0.25rem에서 3rem으로 바뀝니다.

예를 들어 가능한 한 많은 padding을 만들기 위해 Flexbox 컨테이너에 p-5 클래스를 제공합니다.

# 5 : pixels에서 rems까지

부트스트랩 4는 media queries 및 grid 동작을 제외한 모든 위치에서 상대적 측정 단위 (rems)로 pixels을 교체했습니다. 이는 rem 단위가 절대 pixels이 아니기 때문에 더 많은 유연성과 응답성을 의미합니다.

rems와 함께 모든 font-size는 root element (html 태그)에 상대적이며 기본적으로 1rem은 16px와 같습니다. 그러나 root element에서 font-size를 50%로 변경하면 1rem은 앱 전체에서 8px와 같습니다.

이 변경은 웹 사이트에서 자신의 스타일을 적용 할 때 rem을 사용해야한다는 의미는 아닙니다.

# 6 : Cards가 panels, wells 및 thumbnails을 대체합니다.

부트 스트랩에는 cards라고 불리는 완전히 새로운 component가 포함되어있어 panels, wells 및 thumbnails을 대체합니다. 

#7: Goodbye IE9

부트스트랩 v4는 IE8, IE9 및 iOS 6에 대한 지원을 중단했습니다. 

등록된 댓글이 없습니다.