부트스트랩 5 베타 도착: 공식 RTL 지원, Popper.js v2 및 네임스페이스 데이터 속성

부트스트랩 팀은 약 3주 전에 출시Bootstrap 5 Alpha 3한 후 불과 하루 전에 베타 1 버전을 출시하여 안정적인 버전의 부트스트랩 5를 추진하기 위해 열심히 노력하고 있는 것 같습니다. 우리는 그들이 이 릴리스에서 RTL 버전을 제공할 것이라는 것을 이미 알고 있었지만, 오른쪽에서 왼쪽으로 읽는 국가를 위한 웹 사이트를 구축하는 개발자를 위한 환영 업데이트로 제공됩니다.



공식 블로그 게시물에 따르면 핵심 팀은 이제부터 최종 안정 릴리스가 도착할 때까지 미세 조정 기능, 버그 수정, 최적화 및 문서 업데이트만 기대해야 한다고 말합니다.

따라서 더 이상 고민하지 않고 베타 버전 출시와 함께 부트스트랩에 어떤 새로운 멋진 기능이 추가되었는지 살펴보겠습니다.

RTL 지원

이것은 Right-to-left writing system을 기반으로 하는 국가용 프로젝트를 구축하는 개발자들이 오랫동안 가장 많이 요청한 기능 중 하나였습니다. 따라서 부트스트랩이 이제 이에 대한 기본 지원을 제공한다는 것을 아는 것이 좋습니다.



RTL 지원과 관련된 몇 가지 주요 사항은 다음과 같습니다.

RTL 지원은 기존 LTR 스타일시트를 RTL로 변환하는 데 도움이 되는 프로젝트인 RTLCSS를 사용하여 구축되었습니다.

Popper.js v2

Popper.js는 현재 버전 2로 업데이트된 툴팁과 팝오버의 위치를 ​​지정하기 위해 부트스트랩이 사용하는 라이브러리로, 부트스트랩의 툴팁과 팝오버의 현재 동작에 영향을 주지 않으면서 더 작은 파일 크기, 업데이트된 위치 지정 계산과 같은 몇 가지 새로운 기능을 제공합니다. .



부트스트랩 5 베타로 업데이트할 때 고려해야 할 몇 가지 주요 변경 사항이 있습니다.

이제 도구 설명, 팝오버 및 드롭다운 구성 요소에서 offset 옵션이 제거되었습니다. popperConfig 매개변수

를 사용하여 기능을 계속 사용할 수 있습니다.

fallbackPlacement 옵션이 fallbackPlacements로 변경되었습니다.

네임스페이스 데이터 속성

새 베타 버전부터 부트스트랩이 사용하는 데이터 속성에는 이제 공식 플러그인에서 JavaScript 동작을 활성화하는 "bs"라는 중위가 있습니다. 유사한 데이터 속성 대상 지정도 사용되었지만 부트스트랩 기능 외부에 있는 상황을 방지하기 위한 업데이트입니다.

다음은 이제 data-bs-toggle 속성을 사용하는 드롭다운 버튼의 예입니다.

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

유틸리티 API에 상태가 추가되었습니다.

여기 Themesberg에서 우리는 유틸리티 기반 스타일시트의 열렬한 팬이며 이제 부트스트랩 5 베타의 유틸리티 API에 상태가 추가되었다는 사실이 훨씬 더 좋습니다. 이것이 의미하는 바는 호버, 포커스, 활성 및 기타와 같은 특정 상태가 사용자 동작에 의해 트리거될 때만 스타일이 적용되는 유틸리티 클래스를 만들 수 있다는 것입니다.

이러한 클래스의 예는 .opacity-hover:hover 입니다. 다음 옵션이 확장에 의해 유틸리티 API에 추가된 경우:

$utilities: (
    "opacity": (
        property: opacity,
        class: opacity,
        state: hover,
        values: (
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1,
        )
    )
);

Sass의 이러한 설정은 다음 CSS를 생성합니다.

.opacity-0-hover:hover { opacity: 0; }
.opacity-25-hover:hover { opacity: .25; }
.opacity-50-hover:hover { opacity: .5; }
.opacity-75-hover:hover { opacity: .75; }
.opacity-100-hover:hover { opacity: 1; }

새로운 토스트 구성 요소 위치 지정, JavaScript 관련 개선 사항, 믹스인 및 스타일시트 관련 몇 가지 추가 개선 사항과 같은 몇 가지 기능이 더 추가되었습니다.

결론

이것은 큰 업데이트이며 그것에 대해 의심의 여지가 없습니다. RTL 버전, 유틸리티 API 상태, 네임스페이스 속성, 웹 개발자가 사용자 인터페이스를 더 빠르고 효율적으로 구축하는 데 도움이 되는 모든 업데이트를 환영합니다. 우리는 Bootstrap 5의 안정적인 릴리스를 간절히 기다리고 있으며 그때까지 계속해서 업데이트를 다룰 것입니다.

가기 전에 여기 Themesberg에서 우리는 이미 새로운 부트스트랩 5 프레임워크를 기반으로 하는 테마를 구축하여 jQuery를 종속성으로 효과적으로 제거하고 프레임워크의 새 버전의 멋진 기능을 모두 사용하고 있음을 알려드립니다. .

우리의 Bootstrap themes and templates 중 일부를 확인하도록 초대합니다. 일부 무료 및 오픈 소스를 사용해 볼 수도 있습니다.