Home-theater-designers
Bootstrap 5에는 Internet Explorer(IE) 지원 중단 및 jQuery 종속성을 포함하여 주요 변경 사항이 있습니다. Twitter에서 개발한 Bootstrap은 세계에서 가장 인기 있는 CSS 프레임워크입니다. 오픈 소스 사용자 인터페이스 프레임워크는 미래를 위한 포지셔닝을 모색하고 있으며, 이를 통해 v5에서 획기적인 변경이 이루어졌습니다.
IE용 부트스트랩은 이를 수행하는 최초의 웹 개발 도구가 되었습니다. 이러한 움직임은 Internet Explorer의 시장 점유율이 전체 웹 브라우저의 3% 미만을 차지하면서 계속 줄어들면서 이루어졌습니다.
Bootstrap에 대한 추가 개선 사항과 이러한 개선 사항이 귀하에게 미치는 영향을 확인하십시오.
1. 제이쿼리 지원
부트스트랩은 더 이상 jQuery 라이브러리를 사용하지 않습니다. 개발 팀은 대신 이 변경 사항을 적용하기 위해 JavaScript 라이브러리를 개선했습니다. jQuery 종속성은 Bootstrap에서 반드시 나쁜 것은 아닙니다.
사실 jQuery의 도입은 JavaScript가 사용되는 방식을 근본적으로 바꾸었습니다. 그렇지 않으면 많은 코드 줄을 사용했을 JavaScript의 작성 작업을 단순화했습니다.
이 모든 것에도 불구하고, 팀은 그것을 없애기로 결정했습니다. 이것은 더 작은 소스 파일과 더 높은 페이지 로드 시간의 이점과 함께 제공됩니다. 이것은 Bootstrap이 보다 미래 친화적인 스타일을 얻게 될 매우 필요한 변경이었습니다.
소스 파일 크기는 85KB 축소된 JavaScript로 더 가벼워졌으며 Google은 모바일 사이트의 페이지 로드 시간을 순위 요소로 고려하기 때문에 이것이 핵심입니다.
Bootstrap 5에서 jQuery의 사용이 더 이상 필요하지 않은 만큼 원하는 경우 계속 사용할 수 있습니다. 모든 JavaScript 플러그인을 계속 사용할 수 있다는 점도 주목할 가치가 있습니다.
2. CSS 사용자 정의 속성
Internet Explorer 지원을 중단하여 사용자 정의 CSS 속성(변수)을 사용할 수 있습니다. IE는 사용자 정의 속성을 지원하지 않습니다. 웹 개발자를 오랫동안 보류한 이유 중 하나일 뿐입니다.
CSS 사용자 정의 속성은 CSS를 보다 유연하고 프로그래밍 가능하게 만듭니다. CSS 변수에는 접두사가 붙습니다. -bs 타사 CSS와의 충돌을 방지합니다.
사용 가능한 변수에는 루트 변수와 구성 요소 변수의 두 가지 유형이 있습니다.
루트 변수는 부트스트랩 CSS가 로드되는 모든 곳에서 액세스할 수 있습니다. 이러한 변수는 _root.scss 파일이며 컴파일된 dist 파일의 일부입니다.
구성 요소 변수는 특정 구성 요소에서 지역 변수로 사용됩니다. 중첩 테이블과 같은 구성 요소에서 실수로 스타일이 상속되는 것을 방지하는 데 도움이 됩니다.
3. 그리드 시스템 개선
버전 3에서 4로 업그레이드하는 데 몇 가지 문제가 있었기 때문에 Bootstrap 5는 시스템을 완전히 변경하는 대신 기존 시스템을 기반으로 이번에 대부분의 시스템을 유지합니다. 일부 변경 사항은 다음과 같습니다.
- 거터 클래스( .소년들 ) 유틸리티( .NS* ) 여백 및 패딩과 매우 유사합니다.
- 수직 간격 등급도 포함되었습니다.
- 열은 더 이상 기본값이 아닙니다. 위치:상대
4. 문서 개선
문서는 특히 사용자 정의와 관련하여 더 많은 정보로 향상되었습니다. 일반적인 문제는 부트스트랩을 사용하는 많은 사이트에서 부트스트랩을 사용하고 있다는 것을 즉시 식별할 수 있다는 것입니다. Bootstrap 5는 이제 새로운 모양과 느낌과 더 나은 사용자 지정 기능을 제공합니다.
이제 모든 사이트 또는 앱이 동일한 유사성을 갖지 않도록 테마를 사용자 정의할 수 있는 유연성이 향상되었습니다. v4 테마 페이지는 실제로 Sass(인기 있는 CSS 전처리기) 파일 위에 구축하기 위한 더 많은 콘텐츠와 코드 조각으로 확장되었습니다. 템플릿 리포지토리로 사용할 수 있는 GitHub 플랫폼에서 스타터 npm 프로젝트를 찾을 수도 있습니다.
색상 팔레트도 버전 5에서 확장되었습니다. 확장된 기본 제공 색상 시스템은 코드베이스를 떠나지 않고도 쉽게 색상 스타일을 지정할 수 있음을 의미합니다. 또한 Bootstrap 색상 문서에 색상 대비 메트릭을 추가하는 것을 포함하여 색상 대비를 개선하기 위한 더 많은 작업이 수행되었습니다.
5. 개선된 양식 컨트롤
부트스트랩은 양식 컨트롤, 입력 그룹 등을 개선했습니다.
v4에서 부트스트랩은 각 브라우저에서 제공하는 기본값 외에 사용자 정의 양식 컨트롤을 사용했습니다. v5에서는 이제 모두 사용자 정의됩니다. 모든 라디오 버튼, 확인란, 파일, 범위 등을 사용하여 다른 브라우저에서 동일한 모양과 동작을 제공합니다.
새 양식 컨트롤에는 더 이상 불필요한 다채로운 마크업이 포함되지 않고 대신 표준 및 논리적 디자인 기능에 중점을 둡니다.
6. 부트스트랩 5에 유틸리티 API 추가
Tailwind CSS와 같은 새로운 CSS 라이브러리에 이어 Bootstrap은 이제 유틸리티 라이브러리도 추가합니다. 부트스트랩 팀은 우리가 지난 10년 이상 동안 웹에서 구축한 방식에 다른 개발자들이 어떻게 도전하고 있는지 기쁘게 생각한다고 말합니다.
유틸리티는 개발 커뮤니티에서 추진력을 얻고 있으며 부트스트랩 팀은 이에 주목했습니다. 팀은 이전에 글로벌을 사용하여 v4에서 유틸리티에 대한 프로비저닝을 추가했습니다. $활성화-* 클래스. v5에서는 API 접근 방식과 Sass의 새로운 언어 및 구문으로 변경되었습니다. 이렇게 하면 주어진 기본값을 제거하거나 수정할 수 있는 동시에 새 유틸리티를 생성할 수 있는 권한이 부여됩니다.
더 나은 구성을 제공하기 위해 v4에 있던 일부 유틸리티가 도우미 섹션으로 이동되었습니다.
7. 새로운 부트스트랩 아이콘 라이브러리
Bootstrap은 이제 1,300개 이상의 아이콘이 있는 자체 오픈 소스 SVG 아이콘 라이브러리를 자랑합니다. 프레임워크의 구성 요소를 위해 맞춤 제작되었지만 모든 프로젝트에서 계속 사용할 수 있습니다.
SVG 이미지이기 때문에 빠르게 확장할 수 있고 다양한 방식으로 구현할 수 있으며 CSS로 스타일을 지정할 수도 있습니다.
다음을 사용하여 아이콘을 설치할 수 있습니다. 해발:
$ npm i bootstrap-icons부트스트랩 5 설치
당신은 갈 수 있습니다 부트스트랩 5 공식 다운로드 페이지 당신이 그것을 설치하려는 경우. 최신 개발 릴리스를 확인하고 싶다면 다음을 사용할 수 있습니다. 해발 그것을 당기려면:
$ npm i bootstrap@next
이 글을 쓰는 시점에서 프레임워크는 베타 3 버전입니다. 이것은 소프트웨어가 사용하기에 안전하지만 아직 개발 중임을 의미합니다. 자유롭게 팀에 피드백을 제공하고 필요한 기여를 하십시오.
공유하다 공유하다 트위터 이메일 웹 구성 요소 및 구성 요소 기반 아키텍처 소개일반적인 웹 구성 요소를 살펴보고 왜 유용한지 살펴보겠습니다.
다음 읽기 관련 항목- 프로그램 작성
- 웹 개발
- 자바스크립트
- CSS
Jerome은 MakeUseOf의 스태프 라이터입니다. 그는 프로그래밍 및 Linux에 대한 기사를 다룹니다. 그는 또한 암호화폐 애호가이며 항상 암호화폐 산업을 주시하고 있습니다.
제롬 데이비슨이 참여한 작품 더보기뉴스레터 구독
기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!
비디오에서 이미지를 캡처하는 방법구독하려면 여기를 클릭하세요.