Bootstrap 4 Navbar 토글 버튼 색상을 어떻게 변경할 수 있습니까?

Bootstrap 4 Navbar 토글 버튼 색상 사용자 정의

컨텍스트:

Bootstrap 웹 사이트에서는 더 작게 화면에는 일반적으로 탐색을 위한 햄버거 메뉴 버튼이 있습니다. 이 버튼은 기본적으로 특정 색상을 가지고 있습니다.

질문:

Bootstrap 4 navbar 토글 버튼의 ​​색상을 수정할 수 있습니까?

답변:

사용 Bootstrap의 사전 정의된 스타일:

Bootstrap 4는 토글 아이콘에 SVG 배경 이미지를 활용합니다. 다양한 스타일에 대한 특정 클래스가 있습니다:

• .navbar-dark: 어두운 배경의 밝은 색상 아이콘
• .navbar-light: 밝은 배경의 어두운 색상 아이콘

아이콘 사용자 정의:

If 이러한 사전 정의된 옵션이 귀하의 요구 사항에 맞지 않으면 원하는 색상으로 사용자 정의 SVG 아이콘을 만들 수 있습니다. 예를 들면 다음과 같습니다.

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

이 코드는 아이콘 색상을 분홍색으로 설정합니다. rgba() 함수의 값을 원하는 색상과 일치하도록 조정할 수 있습니다.

외부 아이콘 라이브러리 사용:

또는 글꼴과 같은 라이브러리의 아이콘을 사용할 수 있습니다. 멋지네요. 스타일을 지정하는 데 필요한 CSS 클래스를 적용했는지 확인하세요.

부트스트랩 업데이트 4.0.0:

이전에 navbar-inverse로 알려졌던 어두운 테마의 navbar 클래스는 이제 navbar-dark로 바뀌어 링크와 토글 버튼에 더 밝은 색상을 생성합니다.

위 내용은 Bootstrap 4 Navbar 토글 버튼 색상을 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!