تێڕوانینێکی گشتی
بەهۆی بەکارهێنانی بەربڵاوی <table>
توخمەکان لە سەرانسەری ویجتەکانی لایەنی سێیەم وەک ساڵنامە و هەڵگرەکانی بەروار، خشتەکانی Bootstrap بەشداریکردنن . پۆلی بنەڕەتی زیاد بکە .table
بۆ هەر <table>
, پاشان درێژ بکەرەوە بە پۆلەکانی دەستکاریکەری هەڵبژاردەمان یان ستایلە تایبەتمەندەکانمان. هەموو ستایلەکانی خشتەکان لە Bootstrapدا بۆماوە نین، واتە هەر خشتەیەکی هێلانەکراو دەتوانرێت سەربەخۆ لە باوک ستایل بکرێت.
بە بەکارهێنانی بنەڕەتیترین نیشاندانی خشتەکان، لێرەدا چۆن .table
خشتەکانی -based لە Bootstrap دەردەکەون.
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table" >
< thead >
< tr >
< th scope = "col" > #</ th >
< th scope = "col" > First</ th >
< th scope = "col" > Last</ th >
< th scope = "col" > Handle</ th >
</ tr >
</ thead >
< tbody >
< tr >
< th scope = "row" > 1</ th >
< td > Mark</ td >
< td > Otto</ td >
< td > @mdo</ td >
</ tr >
< tr >
< th scope = "row" > 2</ th >
< td > Jacob</ td >
< td > Thornton</ td >
< td > @fat</ td >
</ tr >
< tr >
< th scope = "row" > 3</ th >
< td colspan = "2" > Larry the Bird</ td >
< td > @twitter</ td >
</ tr >
</ tbody >
</ table >
جۆرەکان
پۆلەکانی کۆنتێکست بەکاربهێنە بۆ ڕەنگکردنی خشتەکان، ڕیزەکانی خشتەکان یان خانە تاکەکەسییەکان.
پۆل
سەردێڕ
سەردێڕ
بنەڕەتی
خانە
خانە
سەرەکی
خانە
خانە
لاوەکی
خانە
خانە
سەرکەوتن
خانە
خانە
مەترسی
خانە
خانە
ئاگادار کردنەوە
خانە
خانە
زانیاری
خانە
خانە
ڕووناکی
خانە
خانە
تاریک
خانە
خانە
کۆپی بکە
<!-- On tables -->
< table class = "table-primary" > ...</ table >
< table class = "table-secondary" > ...</ table >
< table class = "table-success" > ...</ table >
< table class = "table-danger" > ...</ table >
< table class = "table-warning" > ...</ table >
< table class = "table-info" > ...</ table >
< table class = "table-light" > ...</ table >
< table class = "table-dark" > ...</ table >
<!-- On rows -->
< tr class = "table-primary" > ...</ tr >
< tr class = "table-secondary" > ...</ tr >
< tr class = "table-success" > ...</ tr >
< tr class = "table-danger" > ...</ tr >
< tr class = "table-warning" > ...</ tr >
< tr class = "table-info" > ...</ tr >
< tr class = "table-light" > ...</ tr >
< tr class = "table-dark" > ...</ tr >
<!-- On cells (`td` or `th`) -->
< tr >
< td class = "table-primary" > ...</ td >
< td class = "table-secondary" > ...</ td >
< td class = "table-success" > ...</ td >
< td class = "table-danger" > ...</ td >
< td class = "table-warning" > ...</ td >
< td class = "table-info" > ...</ td >
< td class = "table-light" > ...</ td >
< td class = "table-dark" > ...</ td >
</ tr >
گەیاندنی مانا بۆ تەکنەلۆژیا یارمەتیدەرەکان
بەکارهێنانی ڕەنگ بۆ زیادکردنی مانا تەنیا ئاماژەیەکی بینراو دەدات، کە ناگەیەنرێتە بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان – وەک خوێنەری شاشە. دڵنیابە لەوەی کە ئەو زانیاریانەی کە بە ڕەنگەکە دیاری دەکرێن یان لە خودی ناوەڕۆکەکەوە دیارن (بۆ نموونە دەقی بینراو)، یان لە ڕێگەی ئامرازی بەدیلەوە جێگیر دەکرێن، وەک دەقی زیادە کە لەگەڵ .visually-hidden
پۆلەکەدا شاراوەتەوە.
خشتەی زەق و زەق
ڕیزەکانی ڕەنگاوڕەنگ
بەکاری بهێنە .table-striped
بۆ زیادکردنی زیبرا-ڕیز بۆ هەر ڕیزێکی خشتەکە لەناو <tbody>
.
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table table-striped" >
...
</ table >
هەروەها دەتوانرێت ئەم پۆلانە زیاد بکرێت بۆ جۆرەکانی خشتەکە:
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table table-dark table-striped" >
...
</ table >
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table table-success table-striped" >
...
</ table >
ڕیزەکانی هەڵواسراو
زیادکردن .table-hover
بۆ چالاککردنی دۆخی هۆڤەر لەسەر ڕیزەکانی خشتەکان لەناو <tbody>
.
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table table-hover" >
...
</ table >
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table table-dark table-hover" >
...
</ table >
هەروەها دەتوانرێت ئەم ڕیزە هەڵواسراوانە لەگەڵ جۆری ڕەنگاوڕەنگدا تێکەڵ بکرێت:
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table table-striped table-hover" >
...
</ table >
خشتەی چالاک
ڕیزێک یان خانەیەک بە زیادکردنی .table-active
پۆلێک تیشک بخەرە سەر.
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table" >
< thead >
...
</ thead >
< tbody >
< tr class = "table-active" >
...
</ tr >
< tr >
...
</ tr >
< tr >
< th scope = "row" > 3</ th >
< td colspan = "2" class = "table-active" > Larry the Bird</ td >
< td > @twitter</ td >
</ tr >
</ tbody >
</ table >
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table table-dark" >
< thead >
...
</ thead >
< tbody >
< tr class = "table-active" >
...
</ tr >
< tr >
...
</ tr >
< tr >
< th scope = "row" > 3</ th >
< td colspan = "2" class = "table-active" > Larry the Bird</ td >
< td > @twitter</ td >
</ tr >
</ tbody >
</ table >
چۆن جۆرەکان و خشتەکانی زەق کاردەکەن؟
بۆ خشتەکانی زەق ( ڕیزەکانی ڕەنگاوڕەنگ , ڕیزەکانی هەڵواسراو , و خشتەی چالاک ) )، ئێمە هەندێک تەکنیکمان بەکارهێنا بۆ ئەوەی ئەم کاریگەریانە بۆ هەموو جۆرەکانی خشتەکەمان کاربکەن :
ئێمە بە دانانی پاشبنەمای خانەیەکی خشتەی بە --bs-table-bg
تایبەتمەندی custom دەست پێدەکەین. پاشان هەموو جۆرەکانی خشتەکە ئەو تایبەتمەندییە تایبەتمەندە دادەنێن بۆ ڕەنگکردنی خانەکانی خشتەکە. بەم شێوەیە، ئێمە تووشی کێشە نابین ئەگەر ڕەنگی نیمچە شەفاف وەک پاشبنەمای مێز بەکاربهێنرێت.
پاشان سێبەری سندوقی ئینسێت زیاد دەکەین لەسەر خانەکانی خشتەکە لەگەڵ box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
چینێک لەسەر هەر دیاریکراوێک background-color
. چونکە ئێمە بڵاوبوونەوەی گەورە بەکاردەهێنین و هیچ کاڵبوونەوەیەکی نییە، ڕەنگەکەی یەک ڕەنگ دەبێت. بەو پێیەی --bs-table-accent-bg
بە شێوەی پێشوەختە unset ە، ئێمە سێبەری بۆکسی پێشوەختەمان نییە.
کاتێک یان .table-striped
, .table-hover
یان .table-active
پۆلەکان زیاد دەکرێن، the --bs-table-accent-bg
ڕێکدەخرێت بۆ ڕەنگێکی نیمچە شەفاف بۆ ڕەنگکردنی پاشبنەما.
بۆ هەر جۆرێکی خشتەکە، ئێمە --bs-table-accent-bg
ڕەنگێک دروست دەکەین کە بەرزترین کۆنتراستی هەبێت بەپێی ئەو ڕەنگە. بۆ نموونە ڕەنگی لەهجە بۆ .table-primary
تۆخترە لە کاتێکدا .table-dark
ڕەنگی لەهجەی سووکترە.
ڕەنگی دەق و سنوور بە هەمان شێوە دروست دەکرێن، و ڕەنگەکانیان بە شێوازی پێشوەختە بۆماوەیی دەکرێن.
لە پشت پەردەوە بەم شێوەیە دەردەکەوێت:
کۆپی بکە
@mixin table-variant ( $state , $background ) {
.table- #{ $state } {
$color : color-contrast ( opaque ( $body-bg , $background ));
$hover-bg : mix ( $color , $background , percentage ( $table-hover-bg-factor ));
$striped-bg : mix ( $color , $background , percentage ( $table-striped-bg-factor ));
$active-bg : mix ( $color , $background , percentage ( $table-active-bg-factor ));
--#{$variable-prefix}table-bg : #{ $background } ;
--#{$variable-prefix}table-striped-bg : #{ $striped-bg } ;
--#{$variable-prefix}table-striped-color : #{ color-contrast ( $striped-bg ) } ;
--#{$variable-prefix}table-active-bg : #{ $active-bg } ;
--#{$variable-prefix}table-active-color : #{ color-contrast ( $active-bg ) } ;
--#{$variable-prefix}table-hover-bg : #{ $hover-bg } ;
--#{$variable-prefix}table-hover-color : #{ color-contrast ( $hover-bg ) } ;
color : $color ;
border-color : mix ( $color , $background , percentage ( $table-border-factor ));
}
}
سنووری خشتەکان
مێزەکانی سنووردار
زیاد بکە .table-bordered
بۆ سنوورەکان لە هەموو لاکانی خشتەکە و خانەکان.
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table table-bordered" >
...
</ table >
دەتوانرێت سوودمەندییەکانی ڕەنگی سنوور زیاد بکرێت بۆ گۆڕینی ڕەنگەکان:
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table table-bordered border-primary" >
...
</ table >
مێزەکانی بێ سنوور
زیاد بکە .table-borderless
بۆ مێزێکی بێ سنوور.
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table table-borderless" >
...
</ table >
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table table-dark table-borderless" >
...
</ table >
مێزی بچووک
زیاد بکە .table-sm
بۆ ئەوەی .table
چڕتر بێت بە بڕینی هەموو خانەکان padding
لە نیوە.
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table table-sm" >
...
</ table >
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table table-dark table-sm" >
...
</ table >
ڕێکخستنی ڕاست
خانەکانی خشتەی <thead>
هەمیشە ڕاست ڕێکخراون بۆ خوارەوە. خانەکانی خشتەکان لە <tbody>
میراتی ڕێکخستنی خۆیان لە <table>
و ڕێکدەخرێن بۆ سەرەوە بە شێوازی پێشوەختە. پۆلەکانی ڕێکخستنی ڕاست بەکاربهێنە بۆ دووبارە ڕێکخستنەوە لە شوێنی پێویست.
سەردێڕی یەکەم
سەردێڕی ٢
سەردێڕی سێیەم
سەردێڕی ٤
ئەم خانەیە vertical-align: middle;
لە خشتەکەوە میرات دەگرێت
ئەم خانەیە vertical-align: middle;
لە خشتەکەوە میرات دەگرێت
ئەم خانەیە vertical-align: middle;
لە خشتەکەوە میرات دەگرێت
ئەمە لێرەدا هەندێک دەقی شوێنگرەوەیە، کە مەبەست لێی وەرگرتنی کەمێک شوێنی ڕاستە، بۆ ئەوەی نیشان بدات کە چۆن ڕێکخستنی ڕاست لە خانەکانی پێشوودا کاردەکات.
ئەم خانەیە vertical-align: bottom;
لە ڕیزی خشتەکەوە میرات دەگرێت
ئەم خانەیە vertical-align: bottom;
لە ڕیزی خشتەکەوە میرات دەگرێت
ئەم خانەیە vertical-align: bottom;
لە ڕیزی خشتەکەوە میرات دەگرێت
ئەمە لێرەدا هەندێک دەقی شوێنگرەوەیە، کە مەبەست لێی وەرگرتنی کەمێک شوێنی ڕاستە، بۆ ئەوەی نیشان بدات کە چۆن ڕێکخستنی ڕاست لە خانەکانی پێشوودا کاردەکات.
ئەم خانەیە vertical-align: middle;
لە خشتەکەوە میرات دەگرێت
ئەم خانەیە vertical-align: middle;
لە خشتەکەوە میرات دەگرێت
ئەم خانەیە لەگەڵ سەرەوە ڕێکدەخرێت.
ئەمە لێرەدا هەندێک دەقی شوێنگرەوەیە، کە مەبەست لێی وەرگرتنی کەمێک شوێنی ڕاستە، بۆ ئەوەی نیشان بدات کە چۆن ڕێکخستنی ڕاست لە خانەکانی پێشوودا کاردەکات.
کۆپی بکە
< div class = "table-responsive" >
< table class = "table align-middle" >
< thead >
< tr >
...
</ tr >
</ thead >
< tbody >
< tr >
...
</ tr >
< tr class = "align-bottom" >
...
</ tr >
< tr >
< td > ...</ td >
< td > ...</ td >
< td class = "align-top" > This cell is aligned to the top.</ td >
< td > ...</ td >
</ tr >
</ tbody >
</ table >
</ div >
هێلانەکردن
شێوازەکانی سنوور، شێوازە چالاکەکان و جۆرەکانی خشتەکان لەلایەن خشتەکانی هێلانەکراوەوە بە میرات ناگیرێن.
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
سەردێڕ
سەردێڕ
سەردێڕ
ئە
یەکەم
دوایین
ب
یەکەم
دوایین
ج
یەکەم
دوایین
3. 3
لاری
باڵندەکە
لە @twitter
کۆپی بکە
< table class = "table table-striped" >
< thead >
...
</ thead >
< tbody >
...
< tr >
< td colspan = "4" >
< table class = "table mb-0" >
...
</ table >
</ td >
</ tr >
...
</ tbody >
</ table >
چۆنێتی کارکردنی هێلانەکردن
بۆ ڕێگریکردن لە دزەکردنی هەر ستایلێک بۆ خشتەکانی هێلانەکراو، ئێمە هەڵبژێرەری کۆکەرەوەی منداڵ ( >
) لە CSS ـەکەماندا بەکاردەهێنین. بەو پێیەی پێویستە هەموو td
s و th
s ی ناو thead
, tbody
, و tfoot
، بکەینە ئامانج، هەڵبژێرەرەکەمان بەبێ ئەو زۆر درێژ دەردەکەوێت. بەم شێوەیە، ئێمە .table > :not(caption) > * > *
هەڵبژێرەری تا ڕادەیەک نامۆ بەکاردەهێنین بۆ بە ئامانجگرتنی هەموو td
s و th
s ی .table
, بەڵام هیچ کام لە هیچ خشتەی هێلانەکراو.
تێبینی بکە کە ئەگەر <tr>
s وەک منداڵی ڕاستەوخۆی خشتەیەک زیاد بکەیت، ئەوانە بە شێوەی پێشوەختە <tr>
لە a دەپێچرێن <tbody>
، بەم شێوەیە هەڵبژێرەرەکانمان وەک مەبەست کاردەکەن.
ئەناتۆمی
سەری مێز
هاوشێوەی خشتەکان و خشتەکانی تۆخ، پۆلەکانی دەستکاریکەر بەکاربهێنە .table-light
یان .table-dark
بۆ ئەوەی <thead>
s بە خۆڵەمێشی سووک یان تۆخ دەربکەوێت.
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری
باڵندەکە
لە @twitter
کۆپی بکە
< table class = "table" >
< thead class = "table-light" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری
باڵندەکە
لە @twitter
کۆپی بکە
< table class = "table" >
< thead class = "table-dark" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری
باڵندەکە
لە @twitter
ژێرەوە
ژێرەوە
ژێرەوە
ژێرەوە
کۆپی بکە
< table class = "table" >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
< tfoot >
...
</ tfoot >
</ table >
کەپشنەکان
A <caption>
وەک سەردێڕێک بۆ خشتەیەک کاردەکات. یارمەتی بەکارهێنەران دەدات کە خوێنەری شاشەیان هەیە بۆ دۆزینەوەی خشتەیەک و تێبگەن کە باسی چی دەکات و بڕیار بدەن کە ئایا دەیانەوێت بیخوێننەوە یان نا.
لیستی بەکارهێنەران
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری باڵندە
لە @twitter
کۆپی بکە
< table class = "table table-sm" >
< caption > List of users</ caption >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
هەروەها دەتوانیت <caption>
لەسەر سەرەوەی مێزەکە بە .caption-top
.
لیستی بەکارهێنەران
# .
یەکەم
دوایین
دەسک
1. 1
مارک
ئۆتۆ
@mdo
2. 2
یاقوب
تۆرنتن
@قەڵەو
3. 3
لاری
باڵندەکە
لە @twitter
کۆپی بکە
< table class = "table caption-top" >
< caption > List of users</ caption >
< thead >
< tr >
< th scope = "col" > #</ th >
< th scope = "col" > First</ th >
< th scope = "col" > Last</ th >
< th scope = "col" > Handle</ th >
</ tr >
</ thead >
< tbody >
< tr >
< th scope = "row" > 1</ th >
< td > Mark</ td >
< td > Otto</ td >
< td > @mdo</ td >
</ tr >
< tr >
< th scope = "row" > 2</ th >
< td > Jacob</ td >
< td > Thornton</ td >
< td > @fat</ td >
</ tr >
< tr >
< th scope = "row" > 3</ th >
< td > Larry</ td >
< td > the Bird</ td >
< td > @twitter</ td >
</ tr >
</ tbody >
</ table >
خشتەکانی وەڵامدەرەوە
خشتەکانی وەڵامدەرەوە ڕێگە بە خشتەکان دەدەن بە ئاسانی بە شێوەی ئاسۆیی سکڕۆڵ بکرێن. هەر خشتەیەک بکە بە وەڵامدەرەوە لە سەرانسەری هەموو دەرگاکانی بینین بە پێچانی .table
بە .table-responsive
. یان، زۆرترین خاڵێکی شکاندن هەڵبژێرە کە لەگەڵیدا خشتەی وەڵامدەرەوەت هەبێت تا بە بەکارهێنانی .table-responsive{-sm|-md|-lg|-xl|-xxl}
.
بڕین/بڕینی ڕاست
خشتەکانی وەڵامدەرەوە سوود لە overflow-y: hidden
, وەردەگرن، کە هەر ناوەڕۆکێک کە لە لێوارەکانی خوارەوە یان سەرەوەی خشتەکە تێپەڕێت، دەبڕێت. بە تایبەتی ئەمە دەتوانێت مینیوەکانی دابەزین و ویجتەکانی تری لایەنی سێیەم ببڕێت.
هەمیشە وەڵامدەرەوە
لە سەرانسەری هەموو خاڵێکی شکاندن، .table-responsive
بۆ خشتەکان بە شێوەی ئاسۆیی بەکاری بهێنە.
# .
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
1. 1
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
2. 2
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
3. 3
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
کۆپی بکە
< div class = "table-responsive" >
< table class = "table" >
...
</ table >
</ div >
تایبەت بە خاڵی شکاندن
بەپێی پێویست بەکاری بهێنە .table-responsive{-sm|-md|-lg|-xl|-xxl}
بۆ دروستکردنی خشتەی وەڵامدەرەوە تا خاڵێکی شکاندنی دیاریکراو. لەو خاڵە شکاندنەوە و بەرەو سەرەوە، خشتەکە بە شێوەیەکی ئاسایی ڕەفتار دەکات و بە شێوەی ئاسۆیی سکڕۆڵ ناکات.
ئەم خشتانە لەوانەیە شکاو دەرکەون تا ئەو کاتەی شێوازە وەڵامدەرەوەکانیان لە پانایی دەرچەی بینینی تایبەتدا جێبەجێ دەکرێن.
# .
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
1. 1
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
2. 2
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
3. 3
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
# .
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
1. 1
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
2. 2
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
3. 3
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
# .
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
1. 1
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
2. 2
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
3. 3
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
# .
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
1. 1
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
2. 2
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
3. 3
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
# .
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
1. 1
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
2. 2
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
3. 3
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
# .
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
سەردێڕ
1. 1
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
2. 2
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
3. 3
خانە
خانە
خانە
خانە
خانە
خانە
خانە
خانە
کۆپی بکە
< div class = "table-responsive" >
< table class = "table" >
...
</ table >
</ div >
< div class = "table-responsive-sm" >
< table class = "table" >
...
</ table >
</ div >
< div class = "table-responsive-md" >
< table class = "table" >
...
</ table >
</ div >
< div class = "table-responsive-lg" >
< table class = "table" >
...
</ table >
</ div >
< div class = "table-responsive-xl" >
< table class = "table" >
...
</ table >
</ div >
< div class = "table-responsive-xxl" >
< table class = "table" >
...
</ table >
</ div >
ساس
گۆڕاوەکان
کۆپی بکە
$table-cell-padding-y : .5 rem ;
$table-cell-padding-x : .5 rem ;
$table-cell-padding-y-sm : .25 rem ;
$table-cell-padding-x-sm : .25 rem ;
$table-cell-vertical-align : top ;
$table-color : $body-color ;
$table-bg : transparent ;
$table-accent-bg : transparent ;
$table-th-font-weight : null ;
$table-striped-color : $table-color ;
$table-striped-bg-factor : .05 ;
$table-striped-bg : rgba ( $black , $table-striped-bg-factor );
$table-active-color : $table-color ;
$table-active-bg-factor : .1 ;
$table-active-bg : rgba ( $black , $table-active-bg-factor );
$table-hover-color : $table-color ;
$table-hover-bg-factor : .075 ;
$table-hover-bg : rgba ( $black , $table-hover-bg-factor );
$table-border-factor : .1 ;
$table-border-width : $border-width ;
$table-border-color : $border-color ;
$table-striped-order : odd ;
$table-group-separator-color : currentColor ;
$table-caption-color : $text-muted ;
$table-bg-scale : - 80 % ;
ئەڵقە
کۆپی بکە
$table-variants : (
"primary" : shift-color ( $primary , $table-bg-scale ) ,
"secondary" : shift-color ( $secondary , $table-bg-scale ) ,
"success" : shift-color ( $success , $table-bg-scale ) ,
"info" : shift-color ( $info , $table-bg-scale ) ,
"warning" : shift-color ( $warning , $table-bg-scale ) ,
"danger" : shift-color ( $danger , $table-bg-scale ) ,
"light" : $light ,
"dark" : $dark ,
);
خۆکارکردن
گۆڕاوە فاکتەرەکان ( $table-striped-bg-factor
, $table-active-bg-factor
& $table-hover-bg-factor
) بەکاردەهێنرێن بۆ دیاریکردنی کۆنتراست لە جۆرەکانی خشتەکەدا.
جگە لە جۆرەکانی خشتەی ڕووناکی و تاریک، ڕەنگەکانی تەوەر بەهۆی $table-bg-level
گۆڕاوەکەوە ڕووناک دەکرێنەوە.