부트 스트랩 내비게이션 바를 설정하는 방법

Bootstrap은 내비게이션 막대 설정을위한 간단한 가이드를 제공합니다. 내비게이션 바 컨테이너 추가 브랜드 아이덴티티 추가 내비게이션 링크 추가 (선택 사항) 스타일 조정 스타일 (선택 사항)

부트 스트랩 내비게이션 바 설정 안내서

Bootstrap은 반응적이고 강력한 탐색 막대를 쉽게 만들 수있는 강력한 도구를 제공합니다. 다음 단계는 부트 스트랩 내비게이션 바를 설정하도록 안내합니다.

1. 부트 스트랩 라이브러리 소개

HTML 파일에서 부트 스트랩 라이브러리를 페이지에 연결하십시오.

 <code><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbszth/b1EixfHpvwxNxQ8p5m8178fX2RC1tiIsu3nT3UpHvmwHuH 89y k9/nl8" crossorigin="anonymous"></code>

2. 내비게이션 바 컨테이너를 만듭니다

nav 요소를 사용하여 네비게이션 바 컨테이너를 만듭니다.

 <code><nav class="navbar navbar-expand-lg navbar-light bg-light"></nav></code>

• navbar 클래스는 Bootstrap Navigation Bar 스타일을 적용합니다.
• navbar-expand-lg 클래스는 더 큰 화면에서 내비게이션 막대를 자동으로 확장시킵니다.
• navbar-light 및 bg-light 클래스는 밝은 색의 테마를 적용합니다.

3. 브랜드 아이덴티티 추가

navbar-brand 클래스를 사용하여 네비게이션 바에 브랜드 아이덴티티를 추가하십시오.

 <code><a class="navbar-brand" href="#">我的网站</a></code>

4. 내비게이션 링크를 만듭니다

nav-item 및 nav-link 클래스를 사용하여 내비게이션 링크 생성 :

 <code><ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">主页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于</a> </li> <li class="nav-item"> <a class="nav-link" href="#">联系我们</a> </li> </ul></code>

5. 다른 요소 추가 (선택 사항)

검색 필드, 버튼 또는 드롭 다운 메뉴와 같은 필요에 따라 추가 요소를 추가 할 수 있습니다.

6. 스타일 조정 (선택 사항)

첨부 된 CSS 클래스를 사용하여 텍스트 색상, 배경색 또는 글꼴 크기 변경과 같은 탐색 표시 줄의 모양과 동작을 사용자 정의 할 수 있습니다.

샘플 코드 :

 <code><nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">我的网站</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#">主页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">更多</a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">联系我们</a></li> <li><a class="dropdown-item" href="#">帮助</a></li> </ul> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </nav></code>

위 내용은 부트 스트랩 내비게이션 바를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!