부트스트랩 3 대 부트스트랩 4 – 개요

Bootstrap은 반응형 모바일 우선 웹사이트를 개발하기 위해 가장 신뢰할 수 있는 오픈 소스 프런트 엔드 프레임워크였습니다. 부트스트랩은 유명한 프레임워크인데 왜??? HTML과 CSS에 대한 기본 지식만 있으면 되기 때문에 미리 정의된 부트스트랩 클래스를 사용하여 매력적이고 기능적인 웹사이트를 구축할 수 있기 때문입니다.

Bootstrap 3는 2013년에 출시되었고 마지막 안정 버전인 Bootstrap 3.3.7은 2016년 7월에 출시되었습니다. 2014년 10월에 Twitter는 Bootstrap 4가 개발 중이라고 발표했습니다. Bootstrap 4의 첫 번째 알파 버전은 2015년 8월에 출시되었습니다. 그리고 지금은 2017년 8월에 Bootstrap 4.0.0-베타 버전이 출시되었습니다. 0 부터 학습을 시작하려면 이 심층 부트스트랩 튜토리얼을 확인하세요.

이 게시물의 관심의 중심은 버전 3에서 새로 출시된 버전 4.0.0-베타까지의 주요 차이점, 추가 및 빼기입니다.

버전 4의 차이점:

이제 Bootstrap 4의 새로운 기능에 대해 이야기할 수 있습니다. 기술이 빠르게 발전함에 따라 깨끗하고 빠른 웹 사이트를 훨씬 더 간단하게 구축할 수 있도록 더 새롭고 더 똑똑한 언어가 개발되었습니다. Bootstrap의 최신 릴리스가 그러한 경우입니다. 팀은 이 "버전 4는 거의 전체 프로젝트의 주요 재작성"이라고 말합니다. 이 개선된 몇 가지 주요 변경 사항을 요약합니다.

글로벌 변경 사항:

• 소스 CSS 파일에 대해 Less 에서 Sass 로 전환했습니다.
• px rem 에서 Bootstrap의 기본 CSS 단위로 전환되었지만 장치 뷰포트가 유형 크기의 영향을 받지 않기 때문에 픽셀은 여전히 ​​미디어 쿼리 및 그리드 동작에 사용됩니다.
• 전역 글꼴 크기가 14px 에서 16px 로 증가했습니다.
• ~480px 이하에 대한 새 그리드 계층을 추가했습니다.

그리드 시스템:

개선을 향한 Bootstrap 4의 주요 단계는 Flexbox를 채택하려는 움직임입니다. flexbox의 일부로 수직 및 수평 정렬 클래스에 대한 지원이 포함되었습니다. Bootstrap 4는 사용자 정의에 많은 중점을 둡니다. 새로운 그리드 계층 시스템으로 Bootstrap 4는 최대 5개의 그리드 계층(5개 계층의 예: .col-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4 ). Bootstrap 4는 향상된 그리드 시스템에 대한 액세스를 제공한다고 쉽게 말할 수 있습니다.

• 보다 세분화된 제어를 위해 768px 아래에 새로운 sm 그리드 계층을 추가했습니다. 이제 xs, sm, md, lg 및 xl이 있습니다. 이것은 또한 모든 계층이 한 단계 올라갔다는 것을 의미합니다(따라서 v3의 .col-md-6은 이제 v4의 .col-lg-6입니다).
• 새로운 그리드 계층을 설명하고 열이 최대 너비에서 12로 균등하게 나눌 수 있도록 그리드 시스템 미디어 쿼리 중단점 및 컨테이너 너비를 변경했습니다.
• 그리드 중단점 및 컨테이너 너비는 이제 소수의 개별 변수 대신 Sass 맵($grid-breakpoints 및 $container-max-widths)을 통해 처리됩니다. 이는 @screen-* 변수를 완전히 대체하고 그리드 계층을 완전히 사용자 정의할 수 있도록 합니다.
• 미디어 쿼리도 변경되었습니다. 매번 같은 값으로 미디어 쿼리 선언을 반복하는 대신 이제 @include media-breakpoint-up/down/only가 있습니다. 이제 @media (min-width: @screen-sm-min) { … }를 쓰는 대신 @include media-breakpoint-up(sm) { … }를 쓸 수 있습니다.

브라우저 지원:

• IE8 및 iOS 6 지원이 중단되었습니다. v4는 이제 IE9+ 및 iOS 7+입니다. 둘 중 하나가 필요한 사이트의 경우 v3를 사용하십시오.

유틸리티 클래스:

Bootstrap 4에는 기존 기능을 방해하지 않고 새로운 유틸리티 클래스가 포함되었습니다. 이러한 중요한 추가 기능으로는 반응형 텍스트 정렬 클래스, 반응형 부동 소수점 및 반응형 임베딩이 있습니다. 많은 바로 가기를 제공하는 것 외에도 이들은 각각 텍스트 정렬, 요소 부동 및 포함된 미디어의 종횡비 크기 조정을 변경할 수 있습니다. (예: .hidden-md-up 은 중형, 대형 및 초대형 뷰포트에서 요소를 숨깁니다. 이제 .hidden-md-up 대신 .d-md-none 사용).

이미지:

• .img-responsive 에서 .img-fluid 로 이름이 변경되었습니다.
• .img-rounded 에서 .rounded 로 이름 변경
• .img-circle 에서 .rounded-circle 로 이름 변경

테이블:

• 반응형 테이블에는 더 이상 래핑 요소가 필요하지 않습니다. 간단히 말해서 Bootstrap 3에서는 부모 <div>에 .table-responsive 클래스를 추가해야 합니다. 그러나 Bootstrap 4에서는 .table-responsive 클래스가 <table> 요소에 추가됩니다.
• 새로운 .table-inverse 옵션을 추가했습니다.
• 추가된 테이블 헤더 수정자: .thead-default 및. .thead-inverse
• .table- 를 갖도록 컨텍스트 클래스의 이름을 변경했습니다. 따라서 .active .success , .warning , .danger 및 .table-info 는 .table-active , .table-success , .table-warning , .table-danger 및 .table-info.

항해:

Bootstrap 4에서는 Navigation 구성 요소가 크게 단순화되었습니다. 하나는 최신 탐색 기본 클래스를 사용하는 새 요소 목록을 만드는 데 필요합니다. nav-link 클래스, nav-item 클래스 및 탐색 모음 스타일과 같은 최근 추가 사항도 있습니다.

• flexbox로 구성 요소를 다시 작성했습니다.
• .navbar-default 는 이제 .navbar-light 이지만 .navbar-dark 는 그대로 유지됩니다. 그러나 이러한 클래스는 더 이상 background-color 를 설정하지 않습니다. 대신 본질적으로 color 에만 영향을 미칩니다.
• .navbar-toggle 은 이제 .navbar-toggler 이며 다른 스타일과 내부 마크업을 갖습니다(더 이상 세 개의 <span> 없음).
• .navbar-form 클래스를 완전히 삭제했습니다. 더 이상 필요하지 않습니다. 대신 .form-inline 을 사용하고 필요에 따라 마진 유틸리티를 적용하십시오.
• Navbar는 더 이상 기본적으로 margin-bottom 또는 border-radius 를 포함하지 않습니다.

부트스트랩 버전 3과 버전 4의 비교표

이미 말했듯이 Bootstrap 팀은 프레임워크를 다시 작성했습니다. 따라서 위의 변경 사항은 여기에 쓴 주요 변경 사항일 뿐입니다. 자세한 내용을 읽으려면 Bootstrap 4 링크를 따르십시오.

부트스트랩 4로 마이그레이션하거나 부트스트랩 3을 유지해야 합니다.

우리는 Bootstrap 4가 제공하는 기능에 대해 이야기했습니다. 전체 프레임워크에서 불필요한 요소와 클래스를 최적화하고 정리하는 데 많은 작업이 수행되었음을 알 수 있습니다. Bootstrap 4는 모바일 친화적인 멋진 웹사이트를 만들 때 훨씬 더 빠르고 간편하여 유연성과 용이성을 약속합니다.

부트스트랩 4, flexbox로 이동했습니다. 이는 가장 크고 의미 있는 성과 중 하나라고 할 수 있습니다. 이렇게 하면 다음과 같은 이점이 있습니다.

• Flexbox 기반 그리드
• 새로운 XLl 그리드 계층
• 최신 자동 레이아웃 그리드
• Navbar 사용자 정의 옵션
• 새로운 간격 유틸리티
• Sans Glyphicons 구성(Bloat-free 영역)
• 반응형 크기 조정
• 반응형 플로트
• 자동 여백
• 수직 센터링

결론

Bootstrap은 항상 개발자의 삶을 편안하게 해 왔으며 버전 업데이트를 통해 이제 bootstrap에는 개발자를 위해 훨씬 더 쉽게 일을 할 수 있는 더 많은 새로운 기능과 옵션이 있습니다. 이것이 사람들이 Bootstrap 3에서 Bootstrap으로 마이그레이션하는 이유입니다. 4 이전에 비해 더 편리하고 접근이 용이하기 때문입니다.