Bootstrap5 새소식(큰 변화 4가지)

부트스트랩에 대한 새소식이 전해져옵니다.

많은 개발자들이 css를 작성하지 않고도 손쉽게 웹앱을 만들 수 있어 부트스트랩을 많이 선호를 하고 있는데요.

시대의 흐름에 따라 부트스트랩도 4에는 크게 flex css 속성을 넣는 등 계속해서 점진적 발전을 거듭하고 있습니다.

그런데 또 2020년에 부트스트랩 5가 출시된다고 하니 놀라울 따름인데요. 

2020년에 출시되는 부트스트랩 5에서 가장 큰 변화가 눈에 띄어서 포스팅 해보려고 합니다.

바로 jquery free 입니다.

 

작년에 github에 이어 이제 부트스트랩 5에도 jquery가 사라지게 된다는 말인데요.

 

2019년 초에 부트스트랩 제작자는 또 다른 시도를 시작했습니다.

 

1. Dropped jQuery(제이쿼리를 버리다)

제이쿼리는 혁신적인 수백 수천만의 개발자들의 크로스 브라우징을 쉽게하고 반응형 웹을 쉽게 만들도록 도왔던 혁신적인 기술이었습니다. 그러나 새로운 솔루션들(앵귤러, 리액트, 또는 뷰)이 나오고 나서 제이쿼리는 다른 프레임워크들과 경쟁하기에 충분한 메리트를 가지지 못했습니다. 

그래서 부트스트랩 5는 순수 100% 제이쿼리 없이 만들어져있으며 모든 구문은 바닐라 js로 만들어져 있습니다. 이것은 자바스크립트 프레임워크들과의 결합에 매우 높은 효율을 가질 것입니다. 하지만 여전히 부트스트랩5는 제이쿼리와 사용할 수는 있습니다.

 

2. Responsive Containers(반응형 컨테이너)

현재 부트스트랩은 두가지 컨테이너 옵션이 있습니다.  일반적인 container 또는 container-fluid가 있습니다.

Bootstrap5에는 컨테이너에 대한`.container-sm`,`.container-md` 등과 같은 몇 가지 새로운 옵션이 있습니다. 반응형 컨테이너는 지정된 중단 점을 얻을 때까지 너비가 100 %입니다. 

 

3. Using as a module(Module 사용)

Bootstrap5에는 ESM 버전이 도입되어 모듈로 사용할 수 있습니다 (브라우저에서 지원하는 경우).

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'


  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

4. Refreshed website

지금까지 Bootstrap의 웹 사이트는 Jekyll의 도움을 받아 GitHub Pages에 호스팅됩니다.

부트스트랩5는 GitHub 페이지보다 고급 옵션을 제공하는 Netlify에서 호스팅됩니다.

또한 Jekyll은 삭제되었고 이제 Bootstrap은 Hugo 프레임 워크를 사용할 것입니다.

 

부트스트랩의 이러한 변화들은 부트스트랩 공식 github에서 계속하여 팔로우 할 수 있습니다.

 

공식 github 주소 : https://github.com/twbs/bootstrap/projects/11

 

 

출처 : https://mdbootstrap.com/articles/jquery/whats-new-in-bootstrap-5/