bootstrap3과 bootstrap4의 차이점

서문: bootstrap4 등장 이후 bootstrap3의 불편한 점을 수정하여 프레임워크를 사용하는 프런트엔드 개발자가 더욱 편리하게 사용할 수 있게 되었습니다. (Bootstrap은 이하 bs라고 합니다.)

1. 그리드 시스템

원래 bs3에 비해 bs4는 적응 범위가 더 넓습니다. 과거 bs3의 xs sm md lg 중에서 bs4는 초대형 화면에 적응하기 위해 xl 범위를 추가했습니다. ​

원본 버전은 모두 플로트 레이아웃을 사용했고, 새 버전은 플렉스 레이아웃을 사용했습니다. 그리고 새 버전에서는 그리드 시스템 열이 지정된 수의 열을 추가할 필요가 없습니다. 예를 들어 연속된 2개의 열이 있으면 자동으로 -6과 -6으로 나누어집니다. 세 열 중 하나가 열 번호를 지정하고 다른 두 열은 지정하지 않는 경우, 즉 (12-x/)2입니다.

2. 새 버전의 img-circle 및 둥근 원

이전 버전에서는 img-circle이 사진에만 적용되는 반면, 새 버전에서는 둥근 원이 모든 요소에 적용됩니다. 사용하기 전까지는 알 수 없습니다.

관련 권장 사항: "부트스트랩 시작 튜토리얼"

3. 미디어 개체

는 미디어 왼쪽을 제거하고 미디어 오른쪽만 미디어 본문에 적응하며, 왼쪽이더라도 본문 앞에 이미지를 씁니다. , 몸이 옳다면.

Four.display series/offset/margin/padding

offset: 더 이상 col-[size]-offset-[x]를 사용하지 않고 offset-[size]-[x]

여백: ml 왼쪽 여백 mr 오른쪽 바깥쪽 여백, mt 위쪽 바깥쪽 여백, mb 아래쪽 바깥쪽 여백 mx-가로방향 my-세로방향

ml-1

안쪽 여백: pl,pr,pt,pb, px,py

5. 1차 2차 정보 성공 경고 위험 밝음 어두움

bg- [Color]

text -[Color]

btn -[]

badge - []는 bs3 라벨에 해당

위 내용은 bootstrap3과 bootstrap4의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!