سلام, محسن م

##### جداول

اقدامات
گسترش مترونیک `بوت استرپ Table` مؤلفه ای با گزینه های مختلف برای ارائه اجزای منحصر به فرد جدول که مطابق با استانداردهای طراحی مترونیک است.
برای اطلاعات بیشتر کلیک کنید بوت استرپ مستندات.

### نمونه پایه

افزودن base class `.table` to any `table`, then extend with custom styles or our various included modifier classes.

# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">First</th>
                                        <th scope="col">Last</th>
                                        <th scope="col">وضعیت</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>نوید</td>
                                        <td>Stone</td>
                                        <td>
                                            <span class="label label-inline label-light-primary font-weight-bold">
                                                در انتظار
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">2</th>
                                        <td>Ana</td>
                                        <td>Jacobs</td>
                                        <td>
                                            <span class="label label-inline label-light-success font-weight-bold">
                                                تایید شده
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td>Larry</td>
                                        <td>Pettis</td>
                                        <td>
                                            <span class="label label-inline label-light-danger font-weight-bold">
                                                جدید
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

Invert the colors with light text on dark backgrounds using `.table-dark`.

# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

                            <table class="table table-dark">
                                ...
                            </table>

Add `.rounded` class to `.table` for rounded edges.

# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

                            <table class="table table-dark rounded">
                                ...
                            </table>

### هد جدول

Use the modifier classes `.thead-light` or `.thead-dark` to make <thead>s appear light or dark gray.

# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

                            <table class="table">
                                <thead class="thead-dark">
                                    ...
                                </thead>
                                <tbody>
                                    ...
                                </tbody>
                            </table>

                            <table class="table">
                                <thead class="thead-light">
                                ...
                                </thead>
                                <tbody>
                                ...
                                </tbody>
                            </table>

### ردیف های راه راه

Use `.table-striped` to add zebra-striping to any table row within the <tbody>.

# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

                            <table class="table table-striped">
                                ...
                            </table>

                            <table class="table table-striped table-dark">
                                ...
                            </table>

### حاشیه جدول

Add `.table-bordered` for borders on all sides of the table and cells.

# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

                            <table class="table table-bordered">
                                ...
                            </table>

                            <table class="table table-bordered table-dark">
                                ...
                            </table>

### بدون حاشیه

Add `.table-borderless` for a table without borders.

# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

                            <table class="table table-borderless">
                                ...
                            </table>

                            <table class="table table-borderless table-dark">
                                ...
                            </table>

### هاور سطر

Add `.table-hover` for a table with hover effect.

# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

                            <table class="table table-hover">
                                ...
                            </table>

                            <table class="table table-hover table-dark">
                                ...
                            </table>

### جدول کوچک

Add `.table-sm` to make tables more compact by cutting cell padding in half.

# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

                            <table class="table table-sm">
                                ...
                            </table>

### کلاس های مختلف

Use contextual classes to color table rows or individual cells.

کلاس | Heading | Heading
--- | --- | ---
فعال | Cell | Cell
پیش فرض | Cell | Cell
اولیه | Cell | Cell
ثانویه | Cell | Cell
موفقیت | Cell | Cell
هشدار | Cell | Cell
اخطار | Cell | Cell
اطلاعات | Cell | Cell
Light | Cell | Cell
Dark | Cell | Cell

                            <table class="table">
                                <thead>
                                    <tr>
                                        <th scope="col">کلاس</th>
                                        <th scope="col">Heading</th>
                                        <th scope="col">Heading</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="table-active">
                                        <th scope="row">فعال</th>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">پیش فرض</th>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>

                                    <tr class="table-primary">
                                        <th scope="row">اولیه</th>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr class="table-secondary">
                                        <th scope="row">ثانویه</th>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr class="table-success">
                                        <th scope="row">موفقیت</th>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr class="table-danger">
                                        <th scope="row">هشدار</th>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr class="table-warning">
                                        <th scope="row">اخطار</th>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr class="table-info">
                                        <th scope="row">اطلاعات</th>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr class="table-light">
                                        <th scope="row">Light</th>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                    <tr class="table-dark">
                                        <th scope="row">Dark</th>
                                        <td>Cell</td>
                                        <td>Cell</td>
                                    </tr>
                                </tbody>
                            </table>

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

# | Heading | Heading
--- | --- | ---
1 | Cell | Cell
2 | Cell | Cell
3 | Cell | Cell
4 | Cell | Cell
5 | Cell | Cell
6 | Cell | Cell
7 | Cell | Cell
8 | Cell | Cell
9 | Cell | Cell

                            <table class="table table-dark">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Heading</th>
                                    <th scope="col">Heading</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="bg-primary">
                                    <th scope="row">1</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr class="bg-success">
                                    <th scope="row">3</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr>
                                    <th scope="row">4</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr class="bg-info">
                                    <th scope="row">5</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr>
                                    <th scope="row">6</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr class="bg-warning">
                                    <th scope="row">7</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr>
                                    <th scope="row">8</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                                <tr class="bg-danger">
                                    <th scope="row">9</th>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                </tr>
                            </tbody>
                        </table>

### کپشن ها

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

لیست of users
# | First | Last | وضعیت
--- | --- | --- | ---
1 | نوید | Stone | در انتظار
2 | Ana | Jacobs | تایید شده
3 | Larry | Pettis | جدید

                            <table class="table">
                                <caption>لیست of users</caption>
                                <thead>
                                    <tr>
                                        ...
                                    </tr>
                                </thead>
                                <tbody>
                                    ...
                                </tbody>
                            </table>

### ریسپانسیو جداول

ریسپانسیو tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`.

# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell

                            <div class="table-responsive">
                                <table class="table">
                                ...
                                </table>
                            </div>

Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint. از جانب that breakpoint and up, the table will behave normally and not scroll horizontally.

# | Heading | Heading | Heading | Heading | Heading
--- | --- | --- | --- | --- | ---
1 | Cell | Cell | Cell | Cell | Cell
2 | Cell | Cell | Cell | Cell | Cell
3 | Cell | Cell | Cell | Cell | Cell

                            <div class="table-responsive-lg">
                                <table class="table">
                                ...
                                </table>
                            </div>

### پروفایل کاربر 12 پیام

محسن برومند
توسعه اپلیکیشن
jm@softplus.com خروج
پروفایل من
تنظیمات اکانت بروزرسانی
پیام های من
صندوق پیام ها و کارها
فعالیت های من
لاگ ها و اعلان ها
کارهای من
اخرین کارها و پروژه ها

##### آخرین اعلان ها

اهداف دیگر موعد 2 روز
+28%
برای مردم خواهد بود موعد 2 روز
+50%
هدف این خواهد بود که ترغیب شود موعد 2 روز
-27%
بهترین محصول موعد 2 روز
+8%

#### سبد خرید

iBlender بهترین وسایل آشپزخانه در سال 2020
دلار 350 5
پاک کننده هوشمند ابزار هوشمند برای پخت و پز
650دلار 4
دوربین دوربین حرفه ای برای عکس
150دلار 3
چاپگر 4D ساخت اشیاء منحصر به فرد
دلار 1450 7
موشن ابزار انیمیشن ایده آل
650دلار 7

##### پیام های سیستم

نویسندگان برتر موفق ترین ها
+82دلار
نویسندگان محبوب موفق ترین ها
+280دلار
کاربران جدید موفق ترین ها
+4500دلار
فعال مشتریان موفق ترین ها
+4500دلار
تم پرفروش موفق ترین ها
+4500دلار

##### اعلان ها

اهداف دیگر موعد 2 روز
+28%
برای مردم خواهد بود موعد 2 روز
+50%
هدف این خواهد بود که ترغیب شود موعد 2 روز
-27%
بهترین محصول موعد 2 روز
+8%
5 گزارش تولید شده توسط کاربر جدید
گزارش ها بر اساس فروش
2 موارد جدید ارسال شد
توسط محمد رضایی
فایل های ایجاد شده
گزارش ها بر اساس فروش
دلار2900 ارزش محصولات فروخته شده
جمع آوری 234 مورد
میانگین زمان پاسخگویی 4.5 ساعت
فاستوست باری است
3 هشدارهای دفاعی
هفته گذشته 40٪ هشدار کمتری دارد
میانگین 4 پست وبلاگ برای هر نویسنده
12 بار ارسال شده است
هفته گذشته 16 نویسنده پیوستند
طراح
2 مورد جدید ارسال شده است
توسط محمد رضایی
حجم دانلودها 2 گیگ
مفاهیم بنیادی
دلار2900 ارزش محصولات فروخته شده
جمع آوری 234 مورد
7 گزارش تولید شده توسط کاربر جدید
گزارش ها بر اساس فروش
میانگین زمان پاسخگویی 4.5 ساعت
فاستوست باری است

##### مراقبت از مشتری

فعال کردن اعلان ها:
فعال کردن ردیابی:
پرتال پشتیبانی

##### گزارشات

گزارش عمومیات:
فعال سازی خروچی گزارش
اجازه جمع آوری داده ها:

##### اعضا

فعال سازی عضویت اعضا
اجازه نظر دهی
فعال کردن پرتال مشتری
محسن برومند
فعال
محسن برومند 2 ساعت
چقدر احتمال دارید که شرکت ما را توصیه کنید به دوستان و خانواده خود؟
3 دقیقه شما
سلام در آنجا ، ما فقط می نویسیم تا به شما اطلاع دهیم که در مخزن گیت هاب مشترک شده اید.
محسن برومند 40 ثانیه
باشه ، فهمیدم
همین الان شما
برای همه مشکلات اعلان دریافت خواهید کرد ، درخواستها را بکشید!
محسن برومند 40 ثانیه
شما می توانید با کلیک بر روی این مخزن بلافاصله از حالت انتخاب خارج شوید:https://github.com
همین الان شما
آموزش رو دیدم.
محسن برومند 40 ثانیه
بیشترین دوره های تجاری خریداری شده در این فروش!
همین الان شما
شرکت BBQ برای جشن گرفتن دستاوردها و اهداف سه ماهه آخر. غذا و نوشیدنی تهیه شده

#### انتخاب نسخه ی نمایشی

##### نسخه ی نمایشی 1

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 2

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 3

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 4

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 5

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 6

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 7

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 8

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 9

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 10

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 11

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 12

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 13

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 14

به زودی

##### نسخه ی نمایشی 15

به زودی

##### نسخه ی نمایشی 16

به زودی

##### نسخه ی نمایشی 17

به زودی

##### نسخه ی نمایشی 18

به زودی

##### نسخه ی نمایشی 19

به زودی

##### نسخه ی نمایشی 20

به زودی

##### نسخه ی نمایشی 21

به زودی

##### نسخه ی نمایشی 22

به زودی

##### نسخه ی نمایشی 23

به زودی

##### نسخه ی نمایشی 24

به زودی

##### نسخه ی نمایشی 25

به زودی

##### نسخه ی نمایشی 26

به زودی

##### نسخه ی نمایشی 27

به زودی

##### نسخه ی نمایشی 28

به زودی

##### نسخه ی نمایشی 29

به زودی

##### نسخه ی نمایشی 30

به زودی