부트스트랩에서 탐색 표시줄 색상을 변경하는 방법

coldplay.xixi
풀어 주다: 2023-02-13 13:55:15
원래의
11775명이 탐색했습니다.

부트스트랩에서 탐색 표시줄 색상을 변경하는 방법: 1. 탐색의 배경색을 검은색으로 변경하고, 탐색 태그의 배경색도 검은색으로 설정합니다. 2. 선택한 탐색의 색상을 변경합니다. 열에서 클래스 이름을 active로 newactive로 변경하고 배경색을 빨간색으로 설정합니다.

부트스트랩에서 탐색 표시줄 색상을 변경하는 방법

이 문서의 운영 환경: Windows 7 시스템, bootstrapv4.4.1 버전, Dell G3 컴퓨터.

부트스트랩에서 탐색바 색상을 변경하는 방법:

1. bootstrap에서 만든 탐색바 HTML 페이지는 bootstrap.min.css, bootstrap.min을 로드해야 합니다. js 탐색 효과를 얻으려면. 아래 그림은 전체 코드와 렌더링입니다. bootstrap.min.cssbootstrap.min.js才能实现导航的效果。下图是完整的代码及效果图。

부트스트랩에서 탐색 표시줄 색상을 변경하는 방법

2、改变导航背景颜色,设置为黑色。给nav标签设置背景颜色为黑色,代码为background:#000。下面是代码及效果图。

부트스트랩에서 탐색 표시줄 색상을 변경하는 방법

3、改变导航选中栏目颜色,如“首页”设置为背景为红色。改变类名active为newactive,并设置其背景颜色为红色。

부트스트랩에서 탐색 표시줄 색상을 변경하는 방법

4、改变“菜单”下的二级栏目,鼠标放上去的颜色。设置类名为dropdown-menu下的a标签hover属性,设置放上去的颜色为黑色。

부트스트랩에서 탐색 표시줄 색상을 변경하는 방법

5、改变点击“菜单”,弹出二级栏目时的颜色。CSS代码是.navbar-default .navbar-nav>.open>a:focus {color: black;background-color: red;},即设置这个类下面a标签focus属性的颜色。

부트스트랩에서 탐색 표시줄 색상을 변경하는 방법

6、改变导航栏默认文字的颜色。设置类名navbar-default下面a标签的文字颜色为白色,代码是.navbar-default .navbar-nav>li>a {color: #fff;}

부트스트랩에서 탐색 표시줄 색상을 변경하는 방법

부트스트랩에서 탐색 표시줄 색상을 변경하는 방법2 , 탐색 배경색을 변경하고 검은색으로 설정합니다. nav 태그의 배경색을 검정색으로 설정하고, 코드는 Background:#000입니다. 아래는 코드와 렌더링입니다.

부트스트랩에서 탐색 표시줄 색상을 변경하는 방법 3 . "홈페이지" 배경을 빨간색으로 설정하는 등 탐색 선택 열의 색상을 변경합니다. 클래스 이름을 active로 newactive로 변경하고 배경색을 빨간색으로 설정합니다. 부트스트랩에서 탐색 표시줄 색상을 변경하는 방법

🎜4 , 마우스를 위에 놓으면 "메뉴" 아래 보조 열의 색상을 변경합니다. 클래스 이름 dropdown-menu 아래에 있는 a 태그의 hover 속성을 설정하고 색상을 검정색으로 설정합니다. 🎜🎜부트스트랩에서 탐색 표시줄 색상을 변경하는 방법 🎜🎜5 , "메뉴"를 클릭하면 색상을 변경하여 보조 열을 팝업할 수 있습니다. CSS 코드는 .navbar-default .navbar-nav>.open>a:focus {color: black;ground-color: red;}이며, 이는 a의 focus 속성 색상을 설정합니다. 이 클래스 아래에 태그를 지정하세요. 🎜🎜부트스트랩에서 탐색 표시줄 색상을 변경하는 방법🎜🎜6 , 탐색 표시줄의 기본 텍스트 색상을 변경합니다. 클래스 이름 navbar-default 아래에 있는 a 태그의 텍스트 색상을 흰색으로 설정하고 코드는 .navbar-default .navbar-nav>li>a {color: #fff;}입니다. 🎜🎜🎜🎜🎜🎜추천: 🎜부트스트랩 비디오 튜토리얼🎜🎜🎜

위 내용은 부트스트랩에서 탐색 표시줄 색상을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!