부트 스트랩 3과 4의 차이점

기술

Bootstrap은 HTML, CSS 및 JS 프레임 워크를 사용하여 웹에서 반응 형 모바일 우선 사이트를 구축하기위한 강력하고 인기있는 모바일 우선 프런트 엔드 프레임 워크입니다.

다음 표는 Bootstrap 3과 Bootstrap 4의 차이점을 보여줍니다.

S. 아니. 구성 요소 부트 스트랩 3 부트 스트랩 4
1 CSS 소스 파일 적게 SCSS
2 그리드 시스템 4 계층 그리드 시스템 (xs, sm, md, lg) 5 계층 그리드 시스템 (xs, sm, md, lg, xl)
CSS 단위 px
4 글꼴 크기 14px 16px
5 드롭 다운 구조 <ul> 및 <li>로 생성 <ul> 또는 <div>로 생성됨
6 열 오프셋 col-md-offset-4 오프셋 -md-4
7 이미지 .img 응답 클래스 .img-fluid 클래스
8 테이블 부모 <div> 요소에 .table-responsive 클래스 추가 <table> 요소에 .table-responsive 클래스 추가
9 글 리피 콘 지원 지원되지 않음
10 미디어 개체 .media , .media-body , .media-object , .media-heading , .media-right , .media-left , .media-list.media-body 와 같은 미디어 객체에 대한 클래스를 사용합니다. 미디어 개체에 .media 클래스 만 사용 합니다.
11 다크 / 인버스 테이블 지원되지 않음 용도 .table-어두운 클래스는 어두운 / 역 테이블을 만들려면
12 체크 박스 및 라디오 버튼 .radio , .radio-inline , .checkbox 또는 .checkbox-inline 클래스 를 사용하여 확인란과 라디오 버튼을 표시합니다. .form-check , .form-check-label , .form-check-input 또는 .form-check-inline 클래스 를 사용하여 확인란 및 라디오 버튼을 표시합니다.
13 양식 제어 크기 .input-lg.input-sm 클래스 를 사용하여 입력 컨트롤의 크기를 늘리거나 줄입니다. .form-control-lg.form-control-sm 클래스 를 사용하여 입력 컨트롤의 크기를 늘리거나 줄입니다.
14 도움말 텍스트 .help-block 클래스를 사용하여 도움말 텍스트 표시 .form-text 클래스를 사용하여 도움말 텍스트 표시
15 스타일 용도 .btn 기본.btn - 정보 버튼 클래스를 버튼에서 .btn-secondary , .btn-light.btn-dark 클래스를 사용하고 .btn-default 클래스를 삭제했습니다 .
16 개요 버튼 지원되지 않음 .btn-outline- * 클래스를 사용하여 외곽선 색상으로 버튼 스타일 지정
17 버튼 크기 .btn-XS의 클래스를 사용할 수 있습니다 .btn-sm.btn-lg 클래스 만 사용 가능 하며 .btn-xs 클래스 삭제
18 메뉴 헤더 li 태그에 .dropdown-header 클래스 사용 사용 헤더 .dropdown 에 클래스를 H1 - H2의 태그
19 분할기 li 요소에서 .divider 클래스 사용 div 요소에서 .dropdown-divider 클래스 사용
20 고정 Navbar .navbar-fixed-top.navbar-fixed-bottom 클래스 를 사용하여 navbar를 상단 또는 하단으로 수정 .fixed-top.fixed-bottom 클래스 를 사용하여 navbar를 상단 또는 하단으로 수정
21 호출기 .previous.next 클래스를 사용하여 페이지 정렬 지원되지 않음
22 Jumbotron 전폭 전폭 점보트론 에서는 .jumbotron-fluid 클래스를 사용하지 않습니다. 전폭 점보트론에 .jumbotron-fluid 클래스를 사용합니다.
23 캐 러셀 항목 캐 러셀 항목에 .item 클래스를 사용 합니다. 캐 러셀 항목에 .carousel-item 클래스를 사용 합니다.
24 웰, 패널 및 썸네일 지원 지원되지 않습니다. 대신 카드 사용
25 인라인 탐색 .nav-inline 클래스 는 포함되지 않습니다. .nav-inline 클래스를 사용하여 탐색을 인라인으로 표시