............ > 팁자료실

본문 바로가기

회원로그인

회원가입

공지

............

페이지 정보

profile_image
작성자 그누웹
댓글 0건 조회 75회 작성일 24-07-09 15:43

본문

<div class="container">

  <div class="row">

    <div class="col">

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

        <!-- 네비게이션 메뉴의 기본 구조 -->

        <a class="navbar-brand" href="#">로고</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

          <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarNav">

          <ul class="navbar-nav">

            <li class="nav-item active">

              <a class="nav-link" href="#">홈 <span class="sr-only">(현재)</span></a>

            </li>

            <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 disabled" href="#" tabindex="-1" aria-disabled="true">비활성</a>

            </li>

          </ul>

        </div>

      </nav>

    </div>

  </div>

</div>


<!-- 본문 내용 -->

<div class="container">

  <div class="row">

    <div class="col-8">

      <h1>스티키 메뉴 테스트</h1>

      <p>부트스트랩에서 스티키 메뉴를 적용하는 방법을 확인합니다.</p>

    </div>

    <div class="col-4">

      <div class="position-sticky" style="top: 10px;">

        <div class="p-4 bg-light rounded">

          <h4 class="fst-italic">부트스트랩 스티키</h4>

          <p class="mb-0">여기에 사이드 메뉴 또는 추가 콘텐츠를 배치할 수 있습니다.</p>

        </div>

      </div>

    </div>

  </div>

</div>


  

등록된 댓글이 없습니다.



사이트 정보

회사명 : 회사명 / 대표 : 대표자명
주소 : OO도 OO시 OO구 OO동 123-45
사업자 등록번호 : 123-45-67890
전화 : 02-123-4567 팩스 : 02-123-4568
통신판매업신고번호 : 제 OO구 - 123호
개인정보관리책임자 : 정보책임자명

Copyright © 소유하신 도메인. All rights reserved.