부트스트랩 5 사이드바 - 반응형 부트스트랩 5 사이드바를 만드는 방법

10897 단어 programmingwebdevbootstrap5
웹사이트 레이아웃에서 메인 콘텐츠의 오른쪽이나 왼쪽 열에 정보 조각이 있는 경우가 있습니다. 이 열을 사이드바라고 합니다.

Bootstrap 5 사이드바는 탐색 링크 또는 광고와 같은 추가 정보를 포함하는 사용자 인터페이스 요소(일반적으로 왼쪽 열)입니다.

목차


  • 무엇을 만들고 있습니까?
  • 전제 조건
  • 대비 부트스트랩 5 UI가 무엇입니까?
  • 부트스트랩 5 사이드바 만들기
  • 결론
  • 자원

    • 우리가 만들고 있는 것



    이 기사에서는 Contrast를 사용하여 부트스트랩 사이드바를 구축하는 방법을 살펴보겠습니다. 아래 이미지와 같습니다.



    전제 조건



    이 문서를 최대한 활용하려면 다음이 있어야 합니다.
  • HTML에 대한 기본적인 이해.
  • CSS에 대한 기본적인 이해.
  • JavaScript에 대한 기본적인 이해

    • Contrast Bootstrap 5 UI가 무엇인지 이해하고 있습니까?



    Contrast 또는 Bootstrap 5 UI 키트는 2000개 이상의 필수 구성 요소를 포함하는 우아한 부트스트랩 UI 키트입니다. Contrast는 웹 개발 프로세스를 단순화하는 데 도움이 되며 모든 프로젝트와 통합되어 모바일 우선, 반응형, 우아한 웹사이트 및 웹 앱을 구축할 수 있습니다.

    대비 부트스트랩 5 라이브러리 CDN 추가



    Contrast 부트스트랩 5 라이브러리를 사용하여 부트스트랩 5 사이드바를 구축할 것입니다. 이를 위해 부트스트랩 CDN을 사용하여 프로젝트에 라이브러리를 포함하는 것으로 시작합니다.

    HTML 파일의 <head>에 Bootstrap 스타일 지정을 담당하는 CSS CDN을 포함합니다.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/cdb.min.css" />


    CSS CDN 링크를 포함시킨 후 프로젝트 하단에 동적 구성 요소 생성을 담당하는 JavaScript CDN을 포함합니다. 기능을 추가하기 전에 구성 요소를 원하기 때문에 이렇게 합니다.

    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/cdb.min.js"></script>


    CDN을 추가한 후 HTML 파일은 다음과 같아야 합니다.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cdbootstrap/css/cdb.min.css" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cdbootstrap/js/cdb.min.js"></script>
  </body>
</html>


    부트스트랩 5 사이드바 만들기



    Contrast Bootstrap 5 UI 키트를 사용하여 2가지 종류의 사이드바를 만들 수 있습니다.
  • 기본 사이드바
  • 다단계 고급 사이드바

    • 기본 사이드바




    <div class="mx-auto r-w">
  <div class="container">
    <div class="app" style="display: flex; height: 100%; position: absolute">
      <div class="sidebar bg-dark text-white" id="sidebar-showcase" role="cdb-sidebar">
        <div class="sidebar-container">
          <div class="sidebar-header text-center">
            <a class="sidebar-toggler"><i class="fa fa-bars"></i></a>
            <a class="sidebar-brand">Contrast</a>
          </div>

          <div class="sidebar-nav">
            <div class="sidenav">
              <a class="sidebar-item">
                <i class="fa fa-th-large sidebar-icon"></i>
                <span>Dashboard</span>
              </a>
              <a class="sidebar-item">
                <i class="fa fa-sticky-note sidebar-icon"></i>
                <span>Components</span>
              </a>
            </div>

            <div class="sidenav">
              <div class="sidebar-dropdown">
                <div
                  class="sidebar-item"
                  data-toggle="collapse"
                  data-target="#collapseOne"
                  aria-expanded="true"
                  aria-controls="collapseOne"
                >
                  <i class="fa fa-th sidebar-icon"></i>
                  <span>Sidemenu</span>
                  <i class="fa fa-angle-right arrow-wrapper ml-auto"></i>
                </div>
              </div>
              <div class="sidebar-dropdown">
                <div
                  class="sidebar-item"
                  data-toggle="collapse"
                  data-target="#collapseTwo"
                  aria-expanded="true"
                  aria-controls="collapseTwo"
                >
                  <i class="fa fa-book sidebar-icon"></i>
                  <span>Sidemenu 2</span>
                  <i class="fa fa-angle-right arrow-wrapper ml-auto"></i>
                </div>
              </div>
            </div>
          </div>

          <div class="sidebar-footer">Sidebar Footer</div>
        </div>
      </div>
    </div>
  </div>
</div>


    상호 작용을 위한 JavaScript 추가

    JavaScript를 사용하면 프로젝트가 동적으로 되고 사용자가 구성 요소 및 웹 페이지와 상호 작용할 수 있습니다.

    <script>
  const sidebar = document.querySelector('.sidebar');
  new CDB.Sidebar(sidebar);
</script>

<script src="../build/cdbbootstrap.js"></script>


    위의 코드 블록에서 querySelector 문서 개체를 사용하여 제공한 사이드바 클래스를 사용하여 사이드바를 선택합니다sidebar.

    그런 다음 CDB에서 가져온 Sidebar 메서드에서 새 사이드바 인스턴스를 만듭니다.

    마지막으로 프로젝트를 Contrast Bootstrap에서 가져온 JavaScript 파일에 연결합니다.

    이를 통해 Contrast UI 라이브러리를 사용하여 동적 부트스트랩 5 사이드바를 만들었습니다.

    .

    다단계 사이드바



    Contrast bootstrap 5 UI Multilvel Sidebar를 사용하여 사이드바에 하위 메뉴를 만들 수 있습니다. 이 하위 메뉴는 메뉴 안에 있는 메뉴를 나타냅니다.

    <div class="app" style="display: flex; height: 100%; position: absolute">
  <div class="sidebar bg-dark text-white" id="sidebar-showcase" role="cdb-sidebar">
    <div class="sidebar-container">
      <div class="sidebar-header text-center">
        <a class="sidebar-toggler"><i class="fa fa-bars"></i></a>
        <a class="sidebar-brand">Contrast</a>
      </div>

      <div class="sidebar-nav">
        <div class="sidenav">
          <a class="sidebar-item">
            <i class="fa fa-th-large sidebar-icon"></i>
            <span>Dashboard</span>
          </a>
          <a class="sidebar-item">
            <i class="fa fa-sticky-note sidebar-icon"></i>
            <span>Components</span>
          </a>
        </div>

        <div class="sidenav">
          <div class="sidebar-dropdown">
            <div
              class="sidebar-item"
              data-toggle="collapse"
              data-target="#collapseOne"
              aria-expanded="true"
              aria-controls="collapseOne"
            >
              <i class="fa fa-th sidebar-icon"></i>
              <span>Sidemenu</span>
              <i class="fa fa-angle-right arrow-wrapper ml-auto"></i>
            </div>
            <div class="sidebar-sub-menu collapse bg-dark" id="collapseOne">
              <a class="sub-menu-item">Submenu 1</a>
              <a class="sub-menu-item">Submenu 2</a>
              <a class="sub-menu-item">Submenu 3</a>
            </div>
          </div>
          <div class="sidebar-dropdown">
            <div
              class="sidebar-item"
              data-toggle="collapse"
              data-target="#collapseTwo"
              aria-expanded="true"
              aria-controls="collapseTwo"
            >
              <i class="fa fa-book sidebar-icon"></i>
              <span>Sidemenu 2</span>
              <i class="fa fa-angle-right arrow-wrapper ml-auto"></i>
            </div>
            <div class="sidebar-sub-menu collapse bg-dark" id="collapseTwo">
              <a class="sub-menu-item">Submenu 1</a>
              <a class="sub-menu-item">Submenu 2</a>
              <a class="sub-menu-item">Submenu 3</a>
            </div>
          </div>
        </div>
      </div>

      <div class="sidebar-footer">Sidebar Footer</div>
    </div>
  </div>
</div>


    상호 작용을 위한 JavaScript 추가




    
<script>
    const sidebarNav = document.querySelector('#sidebar-nav');
    new CDB.Sidebar(sidebarNav);
</script>
<script>
    const sidebarShow = document.querySelector('#sidebar-showcase');
    new CDB.Sidebar(sidebarShow);
</script>


    그 다음에는 다음과 같이 보이는 사이드바가 있습니다.



    결론



    이 기사에서는 부트스트랩 5 사이드바가 무엇인지, 프로젝트에서 부트스트랩 5 사이드바를 사용하는 이유, Contrast 부트스트랩 5 UI 키트를 사용하여 사이드바를 만드는 방법에 대해 설명했습니다.
    CSS를 사용하여 클레이모피즘 만들기
    JavaScript에서 배열의 최소값과 최대값 찾기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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