사이트 내 전체검색

[CSS] Bootstrap 4를 5분 안에 배우기 (변동사항)

페이지 정보

로빈 조회 82회 2019-02-17 00:24

본문

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


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

#1: Flatter buttons

presentation


presentation

# 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 태그)에 상대적이며 기본적으로 1rem16px와 같습니다. 그러나 root element에서 font-size를 50%로 변경하면 1rem은 앱 전체에서 8px와 같습니다.
이 변경은 웹 사이트에서 자신의 스타일을 적용 할 때 rem을 사용해야한다는 의미는 아닙니다.

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

#7: Goodbye IE9
부트스트랩 v4는 IE8, IE9 및 iOS 6에 대한 지원을 중단했습니다.
추천0

댓글목록

등록된 댓글이 없습니다.

회원로그인

접속자집계

오늘
221
어제
541
최대
3,566
전체
2,369,349