부트스트랩 4에서 기대할 수 있는 것

게시 됨: 2015-11-17

지난 몇 년 동안 Bootstrap은 매우 유명해졌습니다. Bootstrap 요소를 포함하는 WordPress 테마를 발견했거나 만들 수 있는 좋은 기회가 있습니다. 기본 사전 응답 프레임워크에서 강력하고 기능이 풍부하며 현대적인 응답 프레임워크로 발전했습니다. Bootstrap 3는 꽤 오랫동안 사용되어 왔으며 Bootstrap 4에서 다음에 나올 내용에 대해 배우는 것은 흥미진진합니다.

부트스트랩 4의 상태

부트스트랩 4는 현재 작업 중이며 아직 프로덕션에 사용할 준비가 되지 않았습니다. 현재 알파 버전입니다. 이것은 미래 프로젝트에 어떻게 도움이 될 것인지 미리 보고 익숙해질 수 있는 좋은 기회입니다.

Bootstrap 4에 대한 문서는 아직 완성되지 않았으므로 실험은 몇 가지 새로운 기능을 테스트할 수 있는 좋은 방법입니다. 공식적으로 프로덕션 용도로 사용할 수 있게 되면 모든 새로운 개선 사항을 잘 알게 될 것입니다.

부트스트랩-4-다운로드

최신 브라우저용으로 제작

우리가 웹에서 발전함에 따라 웹 개발이 제공해야 하는 최고의 최신 기능을 사용하면서 구형 브라우저를 지원하는 것이 점점 더 어려워지고 있습니다. 이것이 귀에 들리는 음악이든 아니든, 우리는 모두 최신 브라우저에서 작업할 때 더 나은 CSS3 기술이 더 쉬워진다는 데 동의할 수 있습니다. Bootstrap 4는 이전 브라우저에서 완전히 벗어나는 완벽한 방법일 수 있습니다. 이 업데이트로 Internet Explorer 8 지원이 완전히 중단되었습니다. 프레임워크는 여전히 Internet Explorer 9를 지원하며 많은 문제 없이 CSS3를 지원합니다.

향상된 재설정

훌륭한 재설정 옵션인 Normalize.css에 익숙해졌을 것입니다. reboot.css라는 Bootstrap 관련 항목이 추가된 새롭고 향상된 재설정이 있습니다. 부트스트랩의 세부 사항은 테두리, 측정 단위로서의 rems, 링크 스타일 및 양식 스타일과 같은 상자 크기 조정과 같은 것입니다. Normalize.css와 특정 Bootstrap 요구 사항 사이의 훌륭한 조합이므로 훌륭한 시작을 확실히 할 수 있습니다.

부트스트랩 4 재부팅

SASS

Bootstrap의 이전 시대에는 LESS가 선호되는 것 같았습니다. 업계 변화와 디자이너 선호도가 SASS로 기울어짐에 따라 현재는 SASS가 선호되고 있습니다. 버전 3으로 돌아가서 기억한다면 SASS 옵션이 포트 옵션과 함께 사용 가능하게 된 때입니다. 현재로서는 LESS에 대한 계획된 지원이 없습니다.

부트스트랩-4-sass

커스터마이징

Bootstrap 4를 사용하면 사용자 정의 디자인을 쉽게 만들 수 있으며 이 모든 작업이 체계적으로 완료됩니다. 모든 변수 옵션은 단일 파일로 통합됩니다. SASS는 쉽게 컴파일할 수 있으며 과거와 같이 별도의 스타일 시트가 필요하지 않습니다.

부트스트랩-4-변수

Bootstrap 4에는 몇 가지 새로운 사용자 정의 옵션이 있습니다. 여기에서 현재 상태를 볼 수 있습니다. 세부 사항이 계속 공개됨에 따라 약간 발전할 가능성이 큽니다.

다음은 처음에 쉽게 설정할 수 있는 사용자 지정 항목입니다.

  • 본문 기본값
  • 색상 변수
  • 플렉스 박스
  • 전환, 둥근 모서리, 그림자 등의 CSS3 디자인 옵션
  • 간격 측정
  • 링크 스타일
  • 그리드 중단점
  • 그리드 컨테이너
  • 그리드 열
  • 타이포그래피 크기 조정
  • 구성품
  • 테이블
  • 더!

Flexbox 누구?

Flexbox는 확실히 인기를 얻었고 우리는 이것을 사용하는 웹 디자이너를 점점 더 많이 보게 될 것입니다. CSS 스타일로 간단하고 유연한 레이아웃 옵션을 제공하므로 사용하기 좋은 도구입니다. 상위 요소 내에서 콘텐츠의 수직 정렬이 용이하고, 미디어 쿼리를 사용하여 장치 및 화면 해상도에 걸쳐 콘텐츠를 재정렬하고, 그리드에서 동일한 높이의 열을 갖는 쉬운 방법에 감사하는 경우 Flexbox가 훌륭한 솔루션입니다. .

모든 프로젝트를 실행하고 변환하기 전에 언급해야 할 중요한 사항이 있습니다. 브라우저 지원이 크게 증가했지만 Internet Explorer 9는 여전히 Flexbox 지원이 부족합니다. 사용 편의성 측면에서 Bootstrap 4는 IE9 지원이 필요하지 않은 경우 Flexbox를 쉽게 사용할 수 있도록 합니다. 기본적으로 _variables.scss 파일을 찾아 $enable-flex를 false에서 true로 변경하기만 하면 됩니다. SASS에 대해 잘 알고 있다면 이 작업을 빠르게 수행할 수 있습니다.

그리드 업데이트

Bootstrap의 오랜 팬이라면 아마도 그리드 시스템이 명명 규칙과 함께 작동하는 방식에 대한 전문가일 것입니다. Bootstrap 4에서 구문은 동일하게 유지되지만 사용된 측정값에 차이가 있습니다. 그리드 시스템은 이제 "rems"를 기반으로 합니다. 픽셀 완벽한 디자인에 익숙한 경우 조정이 가능하므로 이제 상황이 더 유동적입니다.

우리에게 너무 익숙해진 픽셀과 헤어질 때 .container 및 .row. 이제 컨테이너의 최대 너비가 rems로 설정되었습니다. 행의 기본 음수 왼쪽 및 오른쪽 여백은 -.9375rem 인 반면 열의 기본 왼쪽 및 오른쪽 여백은 0.9375rem 입니다. 기억하시겠지만 이 값은 이전에 Bootstrap 3에서 15px 였습니다. 이 새로운 rem 값은 그 값과 비슷합니다.

향상된 미디어 쿼리

이전 버전의 부트스트랩에서 미디어 쿼리는 다소 일반적이었고 때로는 사용자 정의 쿼리를 생성해야 했습니다. 그들의 모습은 다음과 같습니다.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

이제 다음과 같이 업데이트된 미디어 쿼리를 사용하여 보다 모바일적인 접근 방식을 취할 수 있습니다.

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

다른 것을 원할 경우 중단점을 직접 선택하려는 경우 SASS에서 구성할 수 있습니다.

부트스트랩 4 카드

대체 카드

패널, 우물 및 축소판에 익숙합니까? 카드는 이제 가장 최신의 제품이며 멋진 스타일 옵션을 제공합니다. 한 가지 예는 카드 그룹입니다. 텍스트의 양은 다양하지만 JavaScript에 의존하지 않고 카드의 높이가 동일합니다. 이것은 Flexbox와 기본 그리드 모드에서 모두 작동합니다. Flexbox를 사용할 때 카드는 Flexbox 속성을 사용하여 빌드됩니다. 기본 그리드는 CSS 트릭을 사용하여 JavaScript가 필요하지 않습니다. 컨테이너는 display: table; 각 "카드"가 display: table-cell; 테이블 속성을 제공합니다. 이것이 동일한 열 높이가 나오는 곳입니다.

타이포그래피

그리드가 이제 rems를 어떻게 사용하는지 기억하십니까? 글쎄요, 타이포그래피도 그렇게 할 수 있다는 것은 의미가 있습니다! 이에 대해 생각할 때 모든 글꼴 크기는 루트 요소인 HTML 태그에 상대적이라는 것을 기억하십시오. HTML 태그의 글꼴 크기(또는 다른 스타일)를 변경하면 프로젝트 전체에서 스타일을 쉽게 지정하고 크기를 조정할 수 있습니다.

HTML 요소의 스타일이 font-size: 16px 라고 가정해 보겠습니다. h5 태그가 그 크기가 되기를 원한다고 가정해 봅시다. 1rem의 글꼴 크기를 선언할 것입니다.

h5 {
font-size: 1rem;
}

이제 앞으로 나아가는 것과 관련된 수학이 있을 수 있습니다. h1 태그를 40px로 만들고 싶다면 다음과 같이 알아보세요.

h1 {
font-size: 2.5rem; /* 16 * 2.5 = 40px */
}

아직 렘을 느끼지 못하셨나요? 원하는 경우 크기 조정에 픽셀과 em을 사용할 수 있습니다.

부트스트랩-4-제목

더 많은 제목 스타일

제목은 계층 구조를 설정하는 데 유용합니다. 그러나 h1, h2, h3 등보다 더 눈에 띄는 것을 원한다면 어떻게 될까요? 좋은 소식은 디스플레이 제목 클래스를 표준 제목에 추가하여 더 크게 만들 수 있다는 것입니다. 다음과 같이 보일 것입니다.

<h1 class="display-4">Heading Display 4</h1>

display-4 는 display-2 보다 큽니다.

더 작은 파일 크기

부트스트랩 4는 설치 공간이 더 작습니다. 실제로 최신 버전인 Bootstrap 3보다 약 30% 작습니다. 이전에는 약 123kb였고 지금은 ~88kb입니다. 더 작아지고 여전히 동일한 훌륭한 기능을 가지고 있다는 것이 굉장합니다.

필요한 부트스트랩 부분만 사용하는 옵션이 있으므로 파일 크기가 훨씬 작아집니다.

멋진 글꼴 아이콘

더 이상 글리피콘이 없습니까?

Glyphicon은 Bootstrap의 이전 버전에서 널리 사용되었으므로 사라지는 것이 안타깝습니다. 걱정하지 마세요. 이것이 웹 아이콘의 끝이 아닙니다. 그 자리에서 FontAwesome은 당신에게도 서비스를 제공해야 합니다. 훌륭한 아이콘 옵션에 대해서는 Github의 Octigons를 확인할 수도 있습니다.

부트스트랩 4로 이동

현재 알파 버전이지만 테스트 환경에서 작업하지 못할 이유가 없습니다. 소스 코드는 GitHub의 v4-dev 분기에서 사용할 수 있습니다. 실험하고 주의가 필요한 사항을 확인하면 변경 사항 및 기타 새로운 개선 사항에 대한 메모가 포함된 개발 및 추적 풀 요청이 있습니다.

모든 것이 알파 상태이며 기능 및 기능을 테스트할 준비가 된 후 결국 베타 릴리스가 있을 것입니다. 베타 이후에는 두 가지 릴리스 후보를 사용하여 프로덕션 환경에서 테스트할 것입니다. 모든 것이 잘되면 최종 릴리스가 준비됩니다!

우리는 여기에서 표면을 긁었고 Bootstrap 4 대화가 막 시작되었습니다. 미래가 어떻게 될지 보는 것은 흥미진진하고 알파 버전에서 나올 것이라는 사실에 흥분하고 있습니다. 업데이트를 주시하고 사본을 다운로드하여 새로운 Bootstrap 4 구성 요소를 테스트하십시오.