몇 시간 전에 Bootstrap의 트위터 계정에서 Bootstrap 5 알파 버전이 공식적으로 출시되었다는 알림을 받았습니다. 

다음은 Bootstrap 5의 공식 페이지와 설명서입니다.

https://themesberg.com/blog/bootstrap/bootstrap-version-5-alpha-whats-new 

새 버전과 다른 점은 무엇입니까? 우선 새로운 로고와 그 뒤에 있는 아이디어를 절대적으로 좋아한다고 말씀 드리겠습니다. 프레임 워크 뒤의 개발자에 따르면 다음과 같이 영감을 받았습니다.

이제 요점을 알아 보겠습니다. Bootstrap 5는 공식적으로 jQuery를 삭제하고 Internet Explorer 10 및 11을 지원합니다. 이는 가벼운 코드베이스와 미래에 대한 전망을 크게 향상 시킵니다. 엔터프라이즈 기반 프로젝트에서 작업하는 일부 개발자는 이 점을 단점으로 생각하지만 polyfill을 사용하여 IE 지원을 해결하는 방법이 있습니다.

유틸리티 API, 업데이트 된 양식, 확장 된 색상 표, 사용자 정의 아이콘 등과 같은 다른 흥미로운 새 기능이 있습니다. 이 기사의 각 섹션에 대해 자세히 설명하겠습니다.

jQuery 삭제 

우리는 이것이 이미 몇 달 전에 일어날 것이라는 것을 알고 있었지만 jQuery를 종속성으로 떨어 뜨리는 것은 CSS 프레임 워크를 더 가볍고 빠르게 만드는 측면에서 크게 개선되었습니다. jQuery는 바닐라 자바 ​​스크립트에서 쿼리가 없기 때문에 프론트 엔드 개발 초기에 귀중한 라이브러리였습니다.

대부분의 jQuery 기능은 이제 바닐라 JS를 사용하여 수행 할 수 있으므로 유지할 이유가 없습니다. 우리는 앞으로 Bootstrap 4에서 버전 5로 마이그레이션하고 이전 jQuery 코드를 업데이트 된 바닐라 JS로 바꾸는 방법에 대한 가이드를 작성합니다.

IE 10 및 11 지원 제거 ? 

일부 개발자의 경우 엔터프라이즈 웹 사이트에 이러한 오래된 브라우저를 사용하는 회사와 사람들이 여전히 많기 때문에 jQuery를 종속성으로 제거하는 것보다 더 큰 놀라움이 생길 수 있습니다.

그러나 폴리 필을 사용하여 작동하도록 하는 해결 방법이 있지만 더 이상 기본적으로 지원되지 않습니다. 이전 기사에서 IE 10 & 11에 대한 Bootstrap 5 삭제 지원에 대한 자세한 내용을 읽을 수 있습니다.

CSS 사용자 정의 속성 

이것은 또 다른 매우 환영받는 기능입니다. CSS 사용자 정의 속성은 브라우저의 기본 변수이며 Sass 변수와 비교할 때 기본 변수라는 장점이 있습니다. 광범위한 CSS 속성을 동적으로 업데이트하는 것이 훨씬 쉽습니다.

예를 들어, 어두운 대 빛 모드는 이제 더 이상 다른 CSS 파일을 통해가 아니라 사용자 정의 속성을 통해 변경해야 합니다. 색상에 대한 근본 변수의 기본 목록은 다음과 같습니다.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #28a745;
  --bs-teal: #20c997;
  --bs-cyan: #17a2b8;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #28a745;
  --bs-info: #17a2b8;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #343a40;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

개선 된 문서 

공식 블로그 게시물에 따르면 프레임 워크의 개발자는 더 많은 설명을 제공하고 모호성을 제거하며 프레임 워크를 사용자 정의하는 방법을 보여주는 페이지를 확장하여 문서를 개선했다고 말합니다.

개선 된 문서 외에도 액세스 가능하고 대조적 인 색상을 선택하는 데 중점을 두어 훨씬 광범위하고 아름다운 색상 팔레트를 볼 수 있습니다.

유틸리티 API 

아마도 이것이 Bootstrap 5의 가장 흥미로운 측면이라고 생각합니다. Tailwind CSS가 유틸리티 첫 번째 CSS 프레임 워크로 작동하는 방식을 생각 나게 합니다. Bootstrap의 유틸리티 API를 사용하여 간격, 위치 지정, 크기 조정 및 곧.

예를 들어, 사용자 정의 Sass 코드를 작성하지 않고도`m- *`,`p- *`클래스 수를 쉽게 확장 할 수 있습니다. 다음은 여러 값을 추가하여 $ utilities 변수를 확장하는 방법을 보여주는 예입니다.

$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "width": (
      property: width,
      class: w,
      values: (
        25: 25%,
        50: 50%,
        75: 75%,
        100: 100%,
        auto: auto
      )
    ),
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
  ), $utilities);

부트 스트랩 5 아이콘 

몇 달 전에 Bootstrap 제작자가 새롭고 흥미로운 맞춤형 SVG 기반 아이콘을 출시했습니다. 아이콘의 원래 모양과 느낌에 감사하며 오래된 라이브러리를 사용하고 있다면 시도해 볼 가치가 있습니다. 또한 디자인, 유용성 및 성능 측면에서 Bootstrap 5와 Font Awesome을 비교 한 기사를 작성했습니다.

이 기사를 마치기 전에 Themesberg의 가장 인기 있는 Bootstrap UI 키트 두 가지를 소개하겠습니다. 둘 다 안정적인 최신 버전의 Bootstrap을 사용하며 곧 Bootstap 5에서도 제공 될 예정입니다.

Pixel Lite 부트 스트랩 UI 키트 

Pixel Lite는 무료, 오픈 소스 Bootstrap UI 키트로 약 200 개가 넘는 개별 구성 요소와 약 페이지 가격, 가격, 로그인 및 가입 페이지를 포함한 6 개의 수작업 페이지를 제공합니다.

Pixel은이 자습서와 마찬가지로 SASS 및 Gulp 명령과 함께 고급 Gulp 명령을 기반으로 하는 프로젝트 축소 및 최적화와 같은 몇 가지 더 강력한 기능을 제공합니다.

https://themesberg.com/product/ui-kits/pixel-lite-free-bootstrap-4-ui-kit

Live Demo