مشاهده در GitHub

معرفی Bootstrap Table

مروری بر Bootstrap Table، نحوه دانلود و استفاده، الگوهای پایه و موارد دیگر.

در این صفحه

شروع سریع

می‌خواهید Bootstrap Table را به پروژه Bootstrap v5 خود به سرعت اضافه کنید؟ از CDN استفاده کنید، که به صورت رایگان توسط افرادی در CDNJS ارائه شده است. از مدیر بسته استفاده می‌کنید یا نیاز به دانلود فایل‌های منبع دارید؟ به صفحه دانلود بروید.

CSS

stylesheet <link> را قبل از تمام stylesheet‌های دیگر در <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، و سپس پلاگین‌های جاوااسکریپت ما.

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

الگوی شروع

اطمینان حاصل کنید که صفحات خود با آخرین استانداردهای طراحی و توسعه تنظیم شده است. این بدان معناست که از doctype HTML5 و برچسب meta viewport برای رفتارهای مناسب واکنش‌گرا استفاده کنید.

برای Bootstrap v5، ما از Bootstrap Icons به عنوان آیکون‌های پیش‌فرض استفاده می‌کنیم، بنابراین نیاز به وارد کردن لینک Bootstrap Icons داریم.

همه موارد را با هم ترکیب کنید، و صفحات شما باید شبیه به این näyttد:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, 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>Item ID</th>
          <th>Item Name</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 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 نیاز به استفاده از doctype HTML5 دارد. بدون آن، برخی از استایل‌های ناقص و عجیب‌عجیب را خواهید دید، اما شامل آن باید هیچ مشکل قابل توجهی ایجاد نکند.

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

Community

Stay up to date on the development of Bootstrap Table and reach out to the community with these helpful resources.