부트 스트랩 4 개의 새롭고 멋진 기능 You 'll Love
Bootstrap 프레임 워크의 다음 주요 릴리스는 구석에 있습니다. alpha 버전은 Bootstrap의 개발 웹 사이트에서 이미 다운로드 할 수 있으며, 소스 코드는 Github에서도 사용할 수 있습니다..
Twitter Bootstrap은 현재 가장 널리 사용되는 프론트 엔드 프레임 워크입니다. 개발자는 모바일 우선 반응 형 웹 사이트를 신속하게 구축하십시오.. 부트 스트랩을 사용하면 표준 HTML5, CSS3 및 Javascript 프론트 엔드 트리오를 현명하게 사용할 수 있습니다. 현재 웹에서 600 만 개 이상의 사이트에서 사용되고 있습니다..
부트 스트랩 4는 아직 개발 단계에 있지만 (아직 라이브 사이트에서는 사용하지 않음) 개발자는 멋진 작업을 수행했습니다. 이 글에서는 새로운 버전을 살펴볼 것입니다. 프론트 엔드 개발 워크 플로우 간소화 및 개선.
1. 저주 대신 저주하십시오.
지금까지 Bootstrap은 주요 CSS 전처리 기자로 LESS를 사용했지만 새로운 주요 릴리즈에서는 스타일 규칙이 프론트 엔드 개발자들 사이에서 훨씬 더 많이 사용되는 Sass에 리팩토링되고 거대한 제공자 기반을 가지고 일반적으로 사용하기 쉽고 더 많은 것을 제공합니다 가능성. C / C로 작성된 강력한 Libsass Sass Complier 덕분에++ 부트 스트랩 4는 훨씬 빨리 컴파일됩니다. 전보다.
2. 더 작은 화면을위한 새로운 그리드 티어
부트 스트랩에는 정교한 반응 형 그리드 시스템이있어 개발자가 다른 뷰포트를 사용하여 장치를 타겟팅 할 수 있습니다. 부트 스트랩 3에는 현재 열에 4 개의 그리드 클래스가 있습니다., .col-xs-XX 휴대 전화 용, .col-sm-XX 태블릿 용, .col-md-XX 데스크톱 용 .col-lg-XX 대형 데스크톱의 경우 부트 스트랩 4는 그리드 시스템을 향상시켜 개발자가 480px 뷰포트 너비 미만의 소형 기기를 타겟팅하십시오..
새로운 그리드 클래스는 이전의 가장 작은 클래스의 이름을 취하고 그리드 티어의 현재 이름을 한 단계 씩 위로 밀었습니다. 부트 스트랩 4에서는 대형 데스크탑이 .col-xl-XX 클래스 선택자. 새로운 이름에도 불구하고 초대형 스크린을위한 새로운 클래스를 추가하지 않았지만 추가로 작은 스크린을위한 새로운 클래스를 추가하지 않았다는 것을 아는 것이 중요합니다..
3. 상대 CSS 단위 소개
부트 스트랩 4는 마침내 Internet Explorer 8에 대한 지원을 중단합니다. 이것은 성가신 폴리 폴리를 없애고 상대 CSS 단위로 변환 할 수있게 해주는 정말 현명한 단계입니다. 픽셀 대신 새로운 주요 릴리즈는 REM과 EM 사용 가능한 한 반응 형 타이포그래피 구현 부트 스트랩 사이트에 있습니다. 이렇게하면 가독성이 높아져 장애가있는 사용자가 사이트에 더 쉽게 액세스 할 수 있습니다..
새로운 부트 스트랩 4로 상대 단위의 작동 방식을 시험해 보려면 Codepen에서이 데모를 확인하십시오..
4. 아주 새로운 부트 스트랩 카드
개발 팀은 Bootstrap의 이전 사용자 인터페이스를 통합하기로 결정하여 카드라는 새로운 UI 구성 요소. 카드는 이전 우물, 축소판 및 패널을 대체하고 사용자에게보다 간소화 된 작업 흐름을 제공합니다. 걱정하지 마십시오. 카드는 우물, 축소판 및 패널의 제목, 머리글 및 바닥 글과 같은 익숙한 요소를 유지합니다..
카드는 현재 UI 구성 요소보다 유연하므로 창의적인 구현을위한 더 큰 공간을 허용합니다. Bootstrap Cards로 Codepen에 대한 실험을 이미 수행 한 일부 개척자가 있습니다. 직접 확인하거나 자신 만의 카드를 만들 수 있습니다..
5. 새로운 재부팅 모듈
새로운 Reboot 모듈은 이전의 normalize.css 파일을 재설정하십시오. 그것은 그것을 버리지 않습니다; 반대로, 그것에 규칙을 더 세웁니다. 이 작업의 목표는 모든 일반 CSS 선택기를 포함시키고 단일 사용하기 쉬운 SCSS 파일. 새 모듈의 작동 방식을 더 잘 이해하려면 여기에서 소스 코드를 살펴보십시오..
새로운 리셋 스타일이 박스 크기의 CSS 속성을 국경 상자 ~에 요소를 가지므로 페이지의 각 하위 요소에 상속됩니다. 새로운 스타일 규칙 반응 형 레이아웃을보다 관리하기 쉽게 만듭니다.. content-box와 border-box 레이아웃 유형의 차이점을 경험하고 싶다면 CSS-Tricks.com에서 제공하는이 편리한 데모를보십시오 (Bootstrap 4에서는 생성되지 않았습니다. 상자 크기 조정 방법을 보여줍니다). 일반적으로 작동).
6. 옵트 인 플렉스 박스 지원
부트 스트랩 4를 사용하면 CSS3의 플렉스 박스 레이아웃을 활용할 수 있지만 (Internet Explorer 9은 플렉스 박스 모듈을 지원하지 않으므로 부트 스트랩 4의 기본 버전이됩니다.) float를 사용하고 CSS 속성을 표시하여 유체 레이아웃 구현.
Flexbox는 사용하기 쉬운 공간을 채우기 위해 확장되거나 축소되는 유연한 컨테이너를 제공하기 때문에 반응 형 디자인에서 탁월하게 활용할 수있는 사용하기 쉬운 레이아웃을 갖추고 있습니다. 플렉스 박스 옵트 인 기능을 사용하는 경우에만 하지마. IE9에 대한 지원을 제공해야합니다..
7. 간소화 된 변수 사용자 정의
새 부트 스트랩 릴리스에 사용 된 모든 Sass 변수는 _variables.scss라는 단일 파일에 포함되어 개발 프로세스를 상당히 간소화합니다. 이 파일의 설정을 다른 설정으로 복사하는 것 외에는 다른 작업을 수행 할 필요가 없습니다. _custom.scss 기본값을 변경하려면.
너는 할 수있다. 많은 것을 맞춤화하다 색상, 간격, 링크 스타일, 활판 인쇄, 표, 격자 중단 점 및 컨테이너, 열 번호 및 거터 폭, 기타 많은 것들.
8. 공간을위한 새로운 유틸리티 클래스
부트 스트랩 3에는 부동 소수점 또는 clearfix를 변경하는 것과 같은 실용적인 유틸리티 클래스가 이미 많이 있지만 부트 스트랩 4는 더 많이 추가합니다. 그만큼 새로운 간격 클래스 개발자가 사이트의 패딩 및 여백을 빠르게 변경할 수 있도록 허용.
새 클래스의 구문은 매우 간단합니다. 예를 들어 .m-a-0 클래스 스타일 규칙을 주어진 요소의 모든면에서 여백을 0으로 설정합니다 (margin-all-0).. 마진은 엠- 접두어로, 패딩은 피- 접두사. 개발 문서에서 모든 새로운 간격 유틸리티 클래스를 살펴볼 수 있습니다..
9. 테더로 강화 된 툴팁과 포로
부트 스트랩 4에서는 툴팁과 팝업이 동일한 페이지의 다른 요소 바로 옆에 절대적으로 배치 된 요소를 유지할 수있게 해주는 위치 지정 엔진 인 supercool Tether 라이브러리를 사용합니다. 이것은 툴팁과 popovers를 의미합니다 자동으로 적절하게 배치됩니다. 부트 스트랩 4 웹 사이트에.
Tether는 타사 JavaScript 라이브러리이므로 bootstrap.js 파일보다 먼저 HTML에 별도로 포함시켜야합니다..
10. 리팩토링 된 자바 스크립트 플러그인
개발 팀은 EcmaScript 6을 사용하여 새 릴리스에 대한 각 JavaScript 플러그인을 리팩토링했습니다. 프론트 엔드 환경을 개선하려는 최신 구체화 및 최신 향상 기능을 현명하게 활용함으로써.
새로운 Bootstrap 4는 또한 다음과 같은 다른 JavaScript 개선을 겪었습니다. 옵션 유형 검사, 일반적인 티어 다운 방법, 과 UMD 지원, 그 모든 것이 함께 작동하여 가장 인기있는 프론트 엔드 프레임 워크가 이전보다 더 원활하게 실행되도록합니다..
Now Read : Bootstrap & Foundation에 대한 10 가지 경량 대안
