자습서: 간단한 관리 대시보드 인터페이스를 구축하기 위해 Bootstrap 5를 사용하는 방법

24422 단어 showdev opensource bootstrap tutorial

약 2개월 전Bootstrap 5 alpha has been launched, 두 가지 큰 소식이 있었다. jQuery는 더 이상 의존항이 아니라 IE 10/11을 직접 지원하지 않는다는 것이다.우리는 줄곧 새로운 버전의 프레임워크를 가지고 놀았는데, 예를 들어 실용 프로그램 API와 vanilla JS를 사용하는 기능을 보았는데, 사람을 흥분시켰다.

오늘 강좌에서는 Bootstrap 5를 사용하여 매우 간단한 관리 대시보드 인터페이스를 만드는 방법을 보여 드리고 싶습니다.만약 당신이 건설하기 전에 살펴보고 싶다면, 여기 online demo 가 있습니다.다음 섹션을 만듭니다.

사용자가 설정한 내비게이션 표시줄이 있음;

내비게이션 항목이 있는 사이드바;

현재 페이지의 제목, 표어와 빵 부스러기 부분을 표시합니다.

주 내용 구역에 두 개의 작은 위젯 카드가 있습니다.

마지막이지만 가장 중요하지 않은 페이지는 아니다.

입문

인터페이스를 구축하기 전에 다음 스타일시트와 스크립트를 포함해야 합니다.간단하게 말하자면, 모든 의존 항목을 도입하기 위해 CDN 링크를 사용합니다.
우선, 색인을 만들어야 합니다.다음 기본 태그가 있는 html 파일:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Simple Admin Dashboard</title>
    <!-- insert stylesheets here -->
</head>
<body>
    <h1>Hello world!</h1>
    <!-- insert scripts here -->
</body>
</html>

다음 스타일시트를 복사하여 <head> 태그에 붙여넣습니다.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

보푸르 포함.태그 이전 js 및 부트 스크립트 파일을 닫기</body>:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

너무 좋아요.이제 저희 프로젝트에는 Bootstrap 5가 포함되어 있습니다. 관리 대시보드 인터페이스를 구축할 수 있습니다.

사용자 설정이 있는 탐색 모음

이 섹션에는 다음과 같은 세 가지 주요 섹션이 있습니다.

회사 로고

검색 표시줄

사용자 설정

우선, <nav> 표시가 시작된 후에 <body> 항목을 만들어야 합니다.다음 태그를 사용합니다.

<nav class="navbar navbar-light bg-light p-3">
  <div class="d-flex col-12 col-md-3 col-lg-2 mb-2 mb-lg-0 flex-wrap flex-md-nowrap justify-content-between">
      <a class="navbar-brand" href="#">
          Simple Dashboard
      </a>
      <button class="navbar-toggler d-md-none collapsed mb-3" type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
  </div>
  <div class="col-12 col-md-4 col-lg-2">
      <input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search">
  </div>
  <div class="col-12 col-md-5 col-lg-8 d-flex align-items-center justify-content-md-end mt-3 mt-md-0">
      <div class="mr-3 mt-1">
          <a class="github-button" href="https://github.com/themesberg/simple-bootstrap-5-dashboard" data-color-scheme="no-preference: dark; light: light; dark: light;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star /themesberg/simple-bootstrap-5-dashboard">Star</a>
      </div>
      <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
            Hello, John Doe
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <li><a class="dropdown-item" href="#">Settings</a></li>
            <li><a class="dropdown-item" href="#">Messages</a></li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
          </ul>
        </div>
  </div>
</nav>

이 코드는 뷰포트의 전체 너비를 뛰어넘는 내비게이션 표시줄을 만들 것입니다.현재 회사 이름/로고, 검색 표시줄, 사용자 설정 드롭다운 메뉴와 햄버거 아이콘이 있습니다. 이동 장치에서 이 아이콘을 표시하여 사이드바 링크를 전환합니다.

탐색 항목이 있는 사이드바 만들기

메인 내비게이션 부분은 사이드바에 추가되며 모바일 기기의 햄버거 메뉴를 사용하면 전환할 수 있습니다.그러나 사이드바를 만들기 전에 유체 용기를 사용하여 주요 내용 레이아웃을 설정해야 합니다.
탐색 후 다음 태그를 추가하여 대시보드의 레이아웃을 정의합니다.

<div class="container-fluid">
  <div class="row">
      <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
          <!-- sidebar content goes in here -->
      </nav>
      <main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 py-4">
          <h1 class="h2">Dashboard</h1>
      </main>
  </div>
</div>

현재 당신은 이미 반응이 민감한 계기판 구조를 가지고 있으며, 당신은 사이드바 부분을 구축하기 시작할 수 있습니다.<nav> 태그에 다음 태그를 추가합니다.

<div class="position-sticky pt-md-5">
  <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
          <span class="ml-2">Dashboard</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
          <span class="ml-2">Orders</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
          <span class="ml-2">Products</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
          <span class="ml-2">Customers</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
          <span class="ml-2">Reports</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
          <span class="ml-2">Integrations</span>
        </a>
      </li>
    </ul>
</div>

그런 다음 사용자 정의 스타일시트 파일을 만들거나 부트 스타일시트 뒤에 <style> 태그를 만들고 사이드바에 다음 스타일을 추가합니다.

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 90px 0 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  z-index: 99;
}

@media (max-width: 767.98px) {
  .sidebar {
    top: 11.5rem;
    padding: 0;
  }
}

.navbar {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
}

@media (min-width: 767.98px) {
  .navbar {
    top: 0;
    position: sticky;
    z-index: 999;
  }
}

.sidebar .nav-link {
  color: #333;
}

.sidebar .nav-link.active {
  color: #0d6efd;
}

이러한 스타일은 사이드바를 아래로 스크롤할 때 고정시키고 뷰포트의 전체 높이를 차지하게 합니다.또한 능동적인 탐색 항목을 더욱 두드러진 색으로 돋보이게 한다.
잘했어!이제 대시보드의 주요 부분인 내비게이션 막대, 사이드 막대, 주요 내용 구역을 준비했습니다.계속해서 주 내용 영역에 더 많은 작은 위젯을 추가합시다.

제목, 표어와 빵 부스러기 부분

계기판의 모든 페이지는 페이지의 위치를 표시하기 위해 제목, 설명, 빵 부스러기가 있어야 한다.<main> 태그의 시작 부분에 다음 태그만 추가하면 됩니다.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Overview</li>
  </ol>
</nav>
<h1 class="h2">Dashboard</h1>
<p>This is the homepage of a simple admin interface which is part of a tutorial written on Themesberg</p>

간단하죠?이것은 사용자가 계기판의 페이지 사이를 내비게이션할 때 자신의 위치를 잘 이해할 수 있는 좋은 방식이다.

주요 내용 구역에는 몇 개의 작은 위젯 카드가 있다

이 점에서 말하자면, 이것은 정말 당신과 당신이 도대체 당신의 사용자에게 무엇을 보여주고 싶은지에 달려 있다.도표, 통계 데이터, 처리해야 할 사항, 알림.일반적으로 고품질의 계기판 인터페이스는 작은 부품이라고 불리는 구축 블록을 사용하여 각종 지표를 조직한다.먼저 다음 요소를 만듭니다.

<div class="card">
  <h5 class="card-header">Customers</h5>
  <div class="card-body">
    <h5 class="card-title">345k</h5>
    <p class="card-text">Feb 1 - Apr 1, United States</p>
    <p class="card-text text-success">18.2% increase since last month</p>
  </div>
</div>

제목 아래에 다음 네 가지를 계속 추가합니다.

<div class="row my-4">
  <div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0">
      <div class="card">
          <h5 class="card-header">Customers</h5>
          <div class="card-body">
            <h5 class="card-title">345k</h5>
            <p class="card-text">Feb 1 - Apr 1, United States</p>
            <p class="card-text text-success">18.2% increase since last month</p>
          </div>
        </div>
  </div>
  <div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3">
      <div class="card">
          <h5 class="card-header">Revenue</h5>
          <div class="card-body">
            <h5 class="card-title">$2.4k</h5>
            <p class="card-text">Feb 1 - Apr 1, United States</p>
            <p class="card-text text-success">4.6% increase since last month</p>
          </div>
        </div>
  </div>
  <div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3">
      <div class="card">
          <h5 class="card-header">Purchases</h5>
          <div class="card-body">
            <h5 class="card-title">43</h5>
            <p class="card-text">Feb 1 - Apr 1, United States</p>
            <p class="card-text text-danger">2.6% decrease since last month</p>
          </div>
        </div>
  </div>
  <div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3">
      <div class="card">
          <h5 class="card-header">Traffic</h5>
          <div class="card-body">
            <h5 class="card-title">64k</h5>
            <p class="card-text">Feb 1 - Apr 1, United States</p>
            <p class="card-text text-success">2.5% increase since last month</p>
          </div>
        </div>
  </div>
</div>

계속해서 다른 작은 위젯을 만듭니다. 그 중 하나는 당신의 기업에 대한 최신 구매를 보여 주는 표입니다.

<div class="row">
  <div class="col-12 col-xl-8 mb-4 mb-lg-0">
      <div class="card">
          <h5 class="card-header">Latest transactions</h5>
          <div class="card-body">
              <div class="table-responsive">
                  <table class="table">
                      <thead>
                        <tr>
                          <th scope="col">Order</th>
                          <th scope="col">Product</th>
                          <th scope="col">Customer</th>
                          <th scope="col">Total</th>
                          <th scope="col">Date</th>
                          <th scope="col"></th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row">17371705</th>
                          <td>Volt Premium Bootstrap 5 Dashboard</td>
                          <td>[email protected]</td>
                          <td>€61.11</td>
                          <td>Aug 31 2020</td>
                          <td><a href="#" class="btn btn-sm btn-primary">View</a></td>
                        </tr>
                        <tr>
                          <th scope="row">17370540</th>
                          <td>Pixel Pro Premium Bootstrap UI Kit</td>
                          <td>[email protected]</td>
                          <td>$153.11</td>
                          <td>Aug 28 2020</td>
                          <td><a href="#" class="btn btn-sm btn-primary">View</a></td>
                        </tr>
                        <tr>
                          <th scope="row">17371705</th>
                          <td>Volt Premium Bootstrap 5 Dashboard</td>
                          <td>[email protected]</td>
                          <td>€61.11</td>
                          <td>Aug 31 2020</td>
                          <td><a href="#" class="btn btn-sm btn-primary">View</a></td>
                        </tr>
                        <tr>
                          <th scope="row">17370540</th>
                          <td>Pixel Pro Premium Bootstrap UI Kit</td>
                          <td>[email protected]</td>
                          <td>$153.11</td>
                          <td>Aug 28 2020</td>
                          <td><a href="#" class="btn btn-sm btn-primary">View</a></td>
                        </tr>
                        <tr>
                          <th scope="row">17371705</th>
                          <td>Volt Premium Bootstrap 5 Dashboard</td>
                          <td>[email protected]</td>
                          <td>€61.11</td>
                          <td>Aug 31 2020</td>
                          <td><a href="#" class="btn btn-sm btn-primary">View</a></td>
                        </tr>
                        <tr>
                          <th scope="row">17370540</th>
                          <td>Pixel Pro Premium Bootstrap UI Kit</td>
                          <td>[email protected]</td>
                          <td>$153.11</td>
                          <td>Aug 28 2020</td>
                          <td><a href="#" class="btn btn-sm btn-primary">View</a></td>
                        </tr>
                      </tbody>
                    </table>
              </div>
                <a href="#" class="btn btn-block btn-light">View all</a>
          </div>
      </div>
  </div>
  <div class="col-12 col-xl-4">
      <!-- Another widget will go here -->
  </div>
</div>

경탄했어현재, 사용자, 사무 등 내용을 추가할 수 있는 테이블이 있는 작은 위젯을 가지고 있습니다.
이 강좌에서 만들 마지막 작은 위젯은 도표가 있는 작은 위젯입니다.우리는 Chartist를 주제로 사용하는 것을 좋아한다. 왜냐하면 그것은 개원, 경량급, 호응성이기 때문이다.
ChartList 사용을 시작하려면 <head> 태그에 다음 스타일시트를 포함해야 합니다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">

그리고 <body> 태그의 끝에 다음 스크립트를 포함합니다.

<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

ChartList가 이미 포함되어 있으며 <div class=”col-12 col-lg-4”> 요소에 다음 태그만 추가하면 됩니다.

<div class="card">
  <h5 class="card-header">Traffic last 6 months</h5>
  <div class="card-body">
      <div id="traffic-chart"></div>
  </div>
</div>

사용자 정의 javascript 파일이나 스크립트 태그를 만들고 초기화합니다.

new Chartist.Line('#traffic-chart', {
    labels: ['January', 'Februrary', 'March', 'April', 'May', 'June'],
    series: [
      [23000, 25000, 19000, 34000, 56000, 64000]
    ]
  }, {
  low: 0,
  showArea: true
});

경탄했어대시보드에 대해 여러 유형의 데이터를 표시하는 3가지 유형의 작은 부품을 만들었습니다.계기판의 마지막 부분, 즉 페이지를 계속 봅시다.

구문 바닥글

대시보드의 바닥글은 내비게이션이 비교적 적은 페이지에 대한 인용을 표시하는 좋은 방법이다. 예를 들어 프라이버시 정책, 협의 조항, 연락처 등이다.<main> 태그의 끝에 다음 태그를 추가합니다.

<footer class="pt-5 d-flex justify-content-between">
  <span>Copyright © 2019-2020 <a href="https://themesberg.com">Themesberg</a></span>
  <ul class="nav m-0">
      <li class="nav-item">
        <a class="nav-link text-secondary" aria-current="page" href="#">Privacy Policy</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-secondary" href="#">Terms and conditions</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-secondary" href="#">Contact</a>
      </li>
    </ul>
</footer>

축하이제 Bootstrap 5를 사용하여 간단한 대시보드 관리 인터페이스를 구축했습니다.만약 당신이 튜토리얼 파일에 접근하고 싶다면, 복제public repository를 하고 별을 하나 주어 개원의 사랑을 전파하기만 하면 된다❤️.
당신들이 떠나기 전에 제가 Themesberg에서 진행하고 있는 프로젝트를 소개하는 것을 허락해 주십시오.이것은 Volt라고 불리며 무료 개원 Bootstrap 5 관리 계기판으로 전문 디자이너가 디자인하여 우리가 본 강좌를 위해 구축한 계기판의 더 많은 기능을 가지고 있다.

무전압 부트 5 관리 대시보드

그것은 100여 개의 부트 5개 구성 요소, 11개의 예시 페이지, 3개의 플러그인을 가지고 있다.Sass 파일과 고급 Gulp 명령 시스템도 포함되어 있습니다. 이 시스템은 BrowserSync를 사용하여 로컬 서버를 만들고 개발 과정에서 파일 변경을 감시할 수 있습니다.
지난주에 Github, Hacker News와 Product Hunt에서 유행이 되었는데, 가장 좋은 소식은 완전히 무료로 사용한다는 것이다.

Live Demo

Download

또는, 당신도 더욱 전문적인 Volt 버전을 선택할 수 있습니다. 20개의 예시 페이지, 800여 개의 구성 요소와 10개의 플러그인이 있으며, 당신의 계기판 인터페이스를 새로운 수준으로 향상시킬 수 있습니다.

Volt-Premium Bootstrap 5 대시보드

Volt Pro는 무료 버전의 Pro 확장이라고 생각할 수 있습니다. 3배가 넘는 구성 요소, 페이지, 플러그인을 사용할 수 있습니다.59달러만 내면 최소 6개월의 고급 지원과 무료 업데이트를 받을 수 있습니다.

Live demo

Purchase - $59

Reference

이 문제에 관하여(자습서: 간단한 관리 대시보드 인터페이스를 구축하기 위해 Bootstrap 5를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/themesberg/tutorial-how-to-build-a-simple-admin-dashboard-interface-using-bootstrap-5-2734

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

AWS에서 Step 함수 데이터 읽기 방지

CA 인증에 대한 구체적인 실험 단계

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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