부트스트랩 5 알약

부트스트랩 페이지네이션이란?

알약은 웹 사이트 명확성을 크게 향상시키고 사용자 경험을 향상시킬 수 있는 준 탐색 구성 요소입니다.

설치

수동 설치(zip 패키지)

부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 MDB 5 Free package을 설치해야 합니다.

MDB CLI

MDB 5 및 MDB CLI의 모든 잠재력을 발견하고 사용하려면 당사Quick Start Tutorial를 시청하십시오.

고궁

전제 조건

프로젝트를 시작하기 전에 Node LTS (12.x.x recommended)을 설치해야 합니다.


설치

프로젝트에 MDB UI KIT를 설치하려면 터미널에 다음 명령을 쉽게 입력하십시오.

npm i mdb-ui-kit 

JS 모듈 가져오기

전체 라이브러리 또는 개별 모듈만 가져올 수 있습니다.

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module 

CSS 파일 가져오기

MDB 스타일시트를 가져오려면 다음 구문을 사용하십시오.

@import '~mdb-ui-kit/css/mdb.min.css'; 

SCSS 모듈 가져오기

개별 SCSS 모듈을 가져올 수도 있습니다. 제대로 하려면 node_modules/mdb-ui-kit/src/scss 위치에서 프로젝트로 직접 복사하고 CSS 파일과 같은 방식으로 가져오는 것이 좋습니다.


웹팩 통합

Starter 을 사용하여 Webpack을 기반으로 새 프로젝트를 만드는 프로세스의 속도를 크게 높일 수 있습니다.

CDN

CDN을 통한 설치는 MDB UI KIT를 프로젝트와 통합하는 가장 쉬운 방법 중 하나입니다. 최신 컴파일된 JS 스크립트 태그와 CSS 링크 태그를 cdnjs에서 애플리케이션으로 복사하기만 하면 됩니다.

필요한 경우 Font Awesome 및 Roboto 글꼴도 추가하는 것을 잊지 마십시오. 다음은 예제 코드입니다.


CSS

<!-- Font Awesome -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
  rel="stylesheet"
/>
<!-- Google Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  rel="stylesheet"
/>
<!-- MDB -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css"
  rel="stylesheet"
/>

JS

<!-- MDB -->
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.js"
></script>

커스터마이징

기본 예

기본 알약은 Pills navs(nav-items 포함) 및 Pills 콘텐츠(tab-panes 포함)의 두 가지 주요 섹션으로 나뉩니다.
id 및 href 속성을 사용하여 알약 탐색과 알약 콘텐츠를 연결합니다.

아래 예에서 탭 1은 첫 번째href="#ex1-pills-1" 요소에서 nav-link를 사용하여 IDtab-pane가 있는 첫 번째ex1-pills-1.와 연결합니다.

<!-- Pills navs -->
<ul class="nav nav-pills mb-3" id="ex1" role="tablist">
  <li class="nav-item" role="presentation">
    <a
      class="nav-link active"
      id="ex1-tab-1"
      data-mdb-toggle="pill"
      href="#ex1-pills-1"
      role="tab"
      aria-controls="ex1-pills-1"
      aria-selected="true"
      >Tab 1</a
    >
  </li>
  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      id="ex1-tab-2"
      data-mdb-toggle="pill"
      href="#ex1-pills-2"
      role="tab"
      aria-controls="ex1-pills-2"
      aria-selected="false"
      >Tab 2</a
    >
  </li>
  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      id="ex1-tab-3"
      data-mdb-toggle="pill"
      href="#ex1-pills-3"
      role="tab"
      aria-controls="ex1-pills-3"
      aria-selected="false"
      >Tab 3</a
    >
  </li>
</ul>
<!-- Pills navs -->

<!-- Pills content -->
<div class="tab-content" id="ex1-content">
  <div
    class="tab-pane fade show active"
    id="ex1-pills-1"
    role="tabpanel"
    aria-labelledby="ex1-tab-1"
  >
    Tab 1 content
  </div>
  <div class="tab-pane fade" id="ex1-pills-2" role="tabpanel" aria-labelledby="ex1-tab-2">
    Tab 2 content
  </div>
  <div class="tab-pane fade" id="ex1-pills-3" role="tabpanel" aria-labelledby="ex1-tab-3">
    Tab 3 content
  </div>
</div>
<!-- Pills content -->

채우기 및 양쪽 맞춤

.nav의 콘텐츠가 두 수정자 클래스 중 하나의 사용 가능한 전체 너비를 확장하도록 강제합니다.


채우다

사용 가능한 모든 공간을 .nav-items 로 비례적으로 채우려면 .nav-fill 를 사용하십시오. 모든 수평 공간이 채워져 있지만 모든 탐색 항목의 너비가 같은 것은 아닙니다.

<!-- Pills navs -->
<ul class="nav nav-pills nav-fill mb-3" id="ex1" role="tablist">
  <li class="nav-item" role="presentation">
    <a
      class="nav-link active"
      id="ex2-tab-1"
      data-mdb-toggle="pill"
      href="#ex2-pills-1"
      role="tab"
      aria-controls="ex2-pills-1"
      aria-selected="true"
      >Link</a
    >
  </li>
  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      id="ex2-tab-2"
      data-mdb-toggle="pill"
      href="#ex2-pills-2"
      role="tab"
      aria-controls="ex2-pills-2"
      aria-selected="false"
      >Very very very very long link</a
    >
  </li>
  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      id="ex2-tab-3"
      data-mdb-toggle="pill"
      href="#ex2-pills-3"
      role="tab"
      aria-controls="ex2-pills-3"
      aria-selected="false"
      >Another link</a
    >
  </li>
</ul>
<!-- Pills navs -->

<!-- Pills content -->
<div class="tab-content" id="ex2-content">
  <div
    class="tab-pane fade show active"
    id="ex2-pills-1"
    role="tabpanel"
    aria-labelledby="ex2-tab-1"
  >
    Tab 1 content
  </div>
  <div
    class="tab-pane fade"
    id="ex2-pills-2"
    role="tabpanel"
    aria-labelledby="ex2-tab-2"
  >
    Tab 2 content
  </div>
  <div
    class="tab-pane fade"
    id="ex2-pills-3"
    role="tabpanel"
    aria-labelledby="ex2-tab-3"
  >
    Tab 3 content
  </div>
</div>
<!-- Pills content -->

신이 옳다고 하다

너비가 같은 요소의 경우 .nav-justified 를 사용하십시오. 모든 수평 공간은 탐색 링크가 차지하지만 위의 .nav-fill와 달리 모든 탐색 항목의 너비는 동일합니다.

<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist">
  <li class="nav-item" role="presentation">
    <a
      class="nav-link active"
      id="ex3-tab-1"
      data-mdb-toggle="pill"
      href="#ex3-pills-1"
      role="tab"
      aria-controls="ex3-pills-1"
      aria-selected="true"
      >Link</a
    >
  </li>
  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      id="ex3-tab-2"
      data-mdb-toggle="pill"
      href="#ex3-pills-2"
      role="tab"
      aria-controls="ex3-pills-2"
      aria-selected="false"
      >Very very very very long link</a
    >
  </li>
  <li class="nav-item" role="presentation">
    <a
      class="nav-link"
      id="ex3-tab-3"
      data-mdb-toggle="pill"
      href="#ex3-pills-3"
      role="tab"
      aria-controls="ex3-pills-3"
      aria-selected="false"
      >Another link</a
    >
  </li>
</ul>
<!-- Pills navs -->

<!-- Pills content -->
<div class="tab-content" id="ex2-content">
  <div
    class="tab-pane fade show active"
    id="ex3-pills-1"
    role="tabpanel"
    aria-labelledby="ex3-tab-1"
  >
    Tab 1 content
  </div>
  <div
    class="tab-pane fade"
    id="ex3-pills-2"
    role="tabpanel"
    aria-labelledby="ex3-tab-2"
  >
    Tab 2 content
  </div>
  <div
    class="tab-pane fade"
    id="ex3-pills-3"
    role="tabpanel"
    aria-labelledby="ex3-tab-3"
  >
    Tab 3 content
  </div>
</div>
<!-- Pills content -->

📄 Pills 설명서 페이지에서 더 많은 사용자 지정 예제를 볼 수 있습니다.

중요한 자원

다음은 이 구성 요소로 작업하는 데 도움이 되도록 준비한 리소스입니다.

읽기📄 Pills documentation page <-- 여기에서 시작

프로젝트를 최대한 활용하려면 Pills와 관련된 다른 탐색 옵션도 숙지해야 합니다. 목록을 찾으려면 아래 섹션을 참조하십시오.

📥 Starter Bootstrap 5 templates에서 미리 디자인된 탐색 요소를 사용할 수 있습니다.

템플릿은 📦 Free UI Kit for Bootstrap 5의 일부입니다.

프로젝트를 완료한 후 CLI로 게시하여 💽 Free hosting (beta)을 받을 수 있습니다.

관련 콘텐츠 및 스타일 옵션 및 기능

Breadcrumbs

Footer

Headers

Navbar

Pagination

Scrollspy

Sidenav

Tabs

1.5시간 안에 부트스트랩 5 배우기

추가 리소스

학습 로드맵을 통해 웹 개발에 대해 알아보세요.
🎓 Start Learning

메일링 리스트에 가입하고 개발자를 위한 독점 리소스를 받으세요.
🎁 Get gifts

영감과 커뮤니티 경험을 위해 비공개 FB 그룹에 가입하세요.
👨‍👩‍👧‍👦 Ask to join

GitHub의 STAR를 사용하여 오픈 소스 패키지 생성 지원