جداول پایه
مثال اساسی
برای یک ظاهر طراحی اولیه - بالشتک های سبک و فقط تقسیم کننده های افقی - کلاس پایه را .tableبه هر کدام اضافه کنید <table>.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت گذاری | اتو | عنوان متن دوم |
| 2 | یعقوب | تورنتون | عنوان متن اول |
| 3 | لری | پرنده | @توییتر |
جدول معکوس
همچنین می‌توانید رنگ‌ها را با متن روشن روی پس‌زمینه‌های تیره معکوس کنید .table-dark.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت گذاری | اتو | عنوان متن دوم |
| 2 | یعقوب | تورنتون | عنوان متن اول |
| 3 | لری | پرنده | @توییتر |
گزینه های سر جدول
از یکی از دو کلاس اصلاح کننده استفاده کنید تا <thead>s را خاکستری روشن یا تیره نشان دهید.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت گذاری | اتو | عنوان متن دوم |
| 2 | یعقوب | تورنتون | عنوان متن اول |
| 3 | لری | پرنده | @توییتر |
ردیف های راه راه
Use .table-striped to add zebra-striping to any table row
within the <tbody>.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | عنوان متن دوم |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Bordered table
Add .table-bordered for borders on all sides of the table and cells.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | عنوان متن دوم |
| 2 | Mark | Otto | @TwBootstrap |
| 3 | Jacob | Thornton | @fat |
| 4 | Larry the Bird | ||
Bordered color table
Add .table-bordered for borders on all sides of the table and cells.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | عنوان متن دوم |
| 2 | Mark | Otto | @TwBootstrap |
| 3 | Jacob | Thornton | @fat |
| 4 | Larry the Bird | ||
Small table
Add .table-sمیلیون to make tables more compact by cutting cell padding in half.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | عنوان متن دوم |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| 8 | Column content | Column content | Column content |
| 9 | Column content | Column content | Column content |
Contextual classes
از کلاس های متنی برای رنگ آمیزی ردیف های جدول یا سلول های فردی استفاده کنید.
| # | عنوان ستون | عنوان ستون | عنوان ستون |
|---|---|---|---|
| 1 | محتوای ستون | محتوای ستون | محتوای ستون |
| 2 | محتوای ستون | محتوای ستون | محتوای ستون |
| 3 | محتوای ستون | محتوای ستون | محتوای ستون |
| 4 | محتوای ستون | محتوای ستون | محتوای ستون |
| 5 | محتوای ستون | محتوای ستون | محتوای ستون |
| 6 | محتوای ستون | محتوای ستون | محتوای ستون |
| 7 | محتوای ستون | محتوای ستون | محتوای ستون |
| 8 | محتوای ستون | محتوای ستون | محتوای ستون |
| 9 | محتوای ستون | محتوای ستون | محتوای ستون |
گزینه های سر جدول
مشابه جداول و جداول تیره، از کلاس های اصلاح کننده استفاده کنید .table-lightیا s .table-darkرا <thead>خاکستری روشن یا تیره نشان دهید.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت گذاری | اتو | عنوان متن دوم |
| 2 | یعقوب | تورنتون | عنوان متن اول |
| 3 | لری | پرنده | @توییتر |
کلاس های متنی با رنگ پس زمینه
همچنین می‌توانید رنگ‌ها را با متن روشن روی پس‌زمینه‌های تیره معکوس کنید .table-dark.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت گذاری | اتو | عنوان متن دوم |
| 2 | یعقوب | تورنتون | عنوان متن اول |
| 3 | لری | پرنده | @توییتر |
میز بدون حاشیه
برای یک ظاهر طراحی اولیه - بالشتک های سبک و فقط تقسیم کننده های افقی - کلاس پایه را .tableبه هر کدام اضافه کنید <table>.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت گذاری | اتو | عنوان متن دوم |
| 2 | یعقوب | تورنتون | عنوان متن اول |
| 3 | لری | پرنده | @توییتر |
جدول معکوس بدون حاشیه
متن عالی شما اینجاست. متن عالی شما اینجاست.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت گذاری | اتو | عنوان متن دوم |
| 2 | یعقوب | تورنتون | عنوان متن اول |
| 3 | لری | پرنده | @توییتر |
ردیف های قابل شناور
جداول واکنش‌گرا را با قرار دادن هر یک .tableدر داخل .table-responsive
آن ایجاد کنید تا در دستگاه‌های کوچک (زیر 768 پیکسل) به صورت افقی حرکت کنند.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت گذاری | اتو | عنوان متن دوم |
| 2 | یعقوب | تورنتون | عنوان متن اول |
| 3 | لری پرنده | @توییتر | |
جداول فعال
.table-activeبا افزودن یک کلاس
، یک ردیف یا سلول جدول را برجسته کنید .
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت گذاری | اتو | عنوان متن دوم |
| 2 | یعقوب | تورنتون | عنوان متن اول |
| 3 | لری پرنده | @توییتر | |
لانه سازی
سبک‌های حاشیه، سبک‌های فعال و انواع جدول توسط جداول تودرتو به ارث نمی‌رdocs.
| # | نام کوچک | نام خانوادگی | نام کاربری | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | علامت گذاری | اتو | عنوان متن دوم | ||||||||||||
|
|||||||||||||||
| 3 | لری پرنده | @توییتر | |||||||||||||
پای میز
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت گذاری | اتو | عنوان متن دوم |
| 2 | یعقوب | تورنتون | عنوان متن اول |
| 3 | لری | پرنده | @توییتر |
| پاورقی | پاورقی | پاورقی | پاورقی |
