VSCode_부트스트랩. 네비게이션 1

44022 단어 vscodevscode

nav

네비게이션을 이용해 메뉴바를 만들거나 원하는 텍스트를 보이게 하고

숨길 수도 있습니다.

먼저 네비게이션을 어떻게 작성할 지 알아봅시다.

<body>
<div class="container">

  <h1> 네비게이션  </h1>
  <h4>탭형 네비게이션 </h4>
     <ul class="nav nav-tabs">
         <li class="nav-item"><a class="nav-link" href="#">메뉴1</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴2</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
     </ul>
  <br>
  <h4>탭형 네비게이션  class="active" 추가할 경우 </h4>
     <ul class="nav nav-tabs">
         <li class="nav-item"><a class="nav-link" href="#">메뉴1</a></li>
         <li class="nav-item"><a class="nav-link active" href="#">메뉴2</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
     </ul>
  <br>
  <h4>알약형 네비게이션 </h4>
     <ul class="nav nav-pills">
         <li class="nav-item"><a class="nav-link" href="#">메뉴1</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴2</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
     </ul>
  <br>
  <h4>알약형 네비게이션  class="active" 추가할 경우 </h4>
     <ul class="nav nav-pills">
         <li class="nav-item"><a class="nav-link active" href="#">메뉴1</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴2</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
     </ul>
     
 	  <br>
  <h4>알약형 네비게이션은 수직으로 정렬 가능  </h4>
    <div class="col-md-3">
     <ul class="nav nav-pills flex-column">
         <li class="nav-item"><a class="nav-link active" href="#">메뉴1</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴2</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
     </ul>
    </div>

보시다시피 리스트를 선언할 때 class="nav nav-tabs"로 작성하면 탭형

class="nav nav-pills"로 작성하면 알약형의 네비가 만들어집니다.

a태그에 a class="nav-link"를 걸고

href="#" 하이퍼링크의 #안에 원하는 태그의 ID나 주소를 적어넣음으로

클릭할 시 발생되는 이벤트를 설정할 수 있습니다.

알약형 네비게이션은 수직정렬이 가능하고

class="active"를 통해 펼쳐진 버튼태그를 강조할 수 있습니다

nav-justified

 <div class="clearfix"></div>
    <h4>탭형 네비게이션 양쪽 정렬 </h4>
     <ul class="nav nav-tabs nav-justified"><!--nav-justified를 통해 -->
         <li class="nav-item"><a class="nav-link active" href="#">메뉴1</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴2</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
     </ul>
    <br>
     <h4>알약형 네비게이션 양쪽 정렬 </h4>
     <ul class="nav nav-pills nav-justified">
         <li class="nav-item"><a class="nav-link active" href="#">메뉴1</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴2</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
         <li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
     </ul>

nav-justified를 이용해 양쪽정렬을 적용할 수 있습니다.

VSCode_부트스트랩. 버튼그룹
[Spring Boot] 컴포넌트 스캔

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage