GitHub에서 보기

소개

Bootstrap Table 개요, 다운로드 및 사용 방법, 기본 템플릿 등을 포함합니다.

이 페이지에서

빠른 시작

Bootstrap v5 프로젝트에 Bootstrap Table을 빠르게 추가하고 싶으신가요? CDNJS 팀에서 무료로 제공하는 CDN을 사용할 수 있습니다. 패키지 관리자를 사용하거나 소스 파일을 다운로드해야 하는 경우 다운로드 페이지로 이동하세요.

CSS

다음 스타일시트 <link> 태그를 <head> 태그에 복사하고 CSS를 올바르게 로드하려면 다른 모든 스타일시트 앞에 배치하세요.

<link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table.min.css">

JS

다음 <script> 태그를 페이지 끝, </body> 닫는 태그 바로 앞에 배치하세요. 로드 순서에 유의하세요: jQuery가 가장 먼저, 그 다음 Bootstrap.js, 마지막으로 우리의 JavaScript 플러그인이 로드되어야 합니다.

<script src="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table.min.js"></script>

시작 템플릿

페이지가 최신 디자인 및 개발 표준을 따르는지 확인하세요. 여기에는 올바른 반응형 동작을 위한 HTML5 doctype 및 viewport meta 태그 사용이 포함됩니다.

Bootstrap v5의 경우 Bootstrap Icons를 기본 아이콘 라이브러리로 사용하므로 Bootstrap Icons 스타일 파일을 가져와야 합니다.

위의 모든 내용을 결합하면 페이지는 다음과 같아야 합니다:

<!doctype html>
<html lang="ko">
  <head>
    <!-- 필수 메타 태그 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>안녕하세요, Bootstrap Table!</title>

    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table.min.css">
  </head>
  <body>
    <table data-toggle="table">
      <thead>
        <tr>
          <th>항목 ID</th>
          <th>항목 이름</th>
          <th>항목 가격</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>항목 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>항목 2</td>
          <td>$2</td>
        </tr>
      </tbody>
    </table>

    <script src="https://gcore.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table.min.js"></script>
  </body>
</html>

HTML5 doctype

Bootstrap Table은 HTML5 doctype이 필요합니다. 이것이 없으면 일부 불완전한 스타일 문제가 발생할 수 있지만, 추가하는 것은 일반적으로 호환성 문제를 일으키지 않습니다.

<!doctype html>
<html lang="ko">
  ...
</html>

커뮤니티

다음 리소스를 통해 Bootstrap Table의 최신 개발 동향을 파악하고 커뮤니티와 연결할 수 있습니다.