부트 스트랩 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 클래스를 사용하여 탐색을 인라인으로 표시 |