ئومۇمىي چۈشەنچە
<table>
كالېندار ۋە چېسلا تاللىغۇچ قاتارلىق ئۈچىنچى تەرەپ كىچىك قوراللىرىدا ئېلېمېنتلارنىڭ كەڭ كۆلەمدە ئىشلىتىلىشى سەۋەبىدىن ، Bootstrap نىڭ ئۈستەللىرى تاللانغان . ئاساسى سىنىپنى .table
ھەر قانداق ئادەمگە قوشۇڭ <table>
، ئاندىن بىزنىڭ ئىختىيارى ئۆزگەرتكۈچ سىنىپىمىز ياكى ئىختىيارى ئۇسلۇبلىرىمىز بىلەن كېڭەيتىڭ. بارلىق جەدۋەل ئۇسلۇبلىرى Bootstrap غا ۋارىسلىق قىلمايدۇ ، يەنى ھەر قانداق ئۇۋىغان جەدۋەللەرنى ئاتا-ئانىدىن مۇستەقىل ئۇسلۇبتا لايىھىلەشكە بولىدۇ.
ئەڭ ئاساسىي جەدۋەل بەلگىسىنى ئىشلىتىپ ، .table
Bootstrap دا ئاساسلانغان جەدۋەللەرنىڭ كۆرۈنۈشى.
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@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 >
Variants
رەڭلىك جەدۋەل ، جەدۋەل قۇر ياكى يەككە كاتەكچىلەرگە مەزمۇن خاراكتېرلىك دەرسلەرنى ئىشلىتىڭ.
سىنىپ
ماۋزۇ
ماۋزۇ
سۈكۈتتىكى
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
مۇۋەپپەقىيەت
Cell
Cell
خەتەر
Cell
Cell
ئاگاھلاندۇرۇش
Cell
Cell
ئۇچۇر
Cell
Cell
نۇر
Cell
Cell
قاراڭغۇ
Cell
Cell
كۆچۈرۈڭ
<!-- 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
ئىچىدىكى ھەر قانداق جەدۋەل قۇرىغا zebra- سىزىق قوشۇشقا ئىشلىتىڭ <tbody>
.
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@twitter
كۆچۈرۈڭ
< table class = "table table-striped" >
...
</ table >
بۇ دەرسلەرنى جەدۋەلنىڭ ۋارىيانتلىرىغىمۇ قوشقىلى بولىدۇ:
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@twitter
كۆچۈرۈڭ
< table class = "table table-dark table-striped" >
...
</ table >
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@twitter
كۆچۈرۈڭ
< table class = "table table-success table-striped" >
...
</ table >
يۆتكىلىشچان قۇر
.table-hover
A دىكى جەدۋەل قۇرلىرىغا يۆتكىلىش ھالىتىنى قوزغىتىش ئۈچۈن قوشۇڭ <tbody>
.
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@twitter
كۆچۈرۈڭ
< table class = "table table-hover" >
...
</ table >
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@twitter
كۆچۈرۈڭ
< table class = "table table-dark table-hover" >
...
</ table >
بۇ يۆتكىلىشچان قۇرلارنى سىزىقلىق ۋارىيانت بىلەن بىرلەشتۈرۈشكە بولىدۇ:
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@twitter
كۆچۈرۈڭ
< table class = "table table-striped table-hover" >
...
</ table >
ئاكتىپ جەدۋەل
.table-active
دەرس قوشۇش ئارقىلىق جەدۋەل قۇر ياكى كاتەكچىنى گەۋدىلەندۈرۈڭ .
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@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 >
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@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
بىز خاس خاسلىق بىلەن جەدۋەل كاتەكچىسىنىڭ تەگلىكىنى تەڭشەشتىن باشلايمىز . جەدۋەلنىڭ بارلىق ۋارىيانتلىرى ئاندىن بۇ خاسلىقنى جەدۋەل كاتەكچىلىرىنى رەڭدارلاشتۇرىدۇ. بۇنداق بولغاندا ، يېرىم سۈزۈك رەڭلەر ئۈستەل تەگلىكى سۈپىتىدە ئىشلىتىلسە ئاۋارىچىلىككە ئۇچرىمايمىز.
ئاندىن جەدۋەل كاتەكچىلىرىگە قىستۇرما رامكا سايىسىنى box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
ھەر قانداق بەلگىلەنگەن ئۈستىگە قاتلايمىز background-color
. بىز غايەت زور تارقىلىشچان ۋە تۇتۇق بولمىغاچقا ، رەڭ يەككە بولىدۇ. سۈكۈتتىكى --bs-table-accent-bg
ھالەتتە تەڭشەلمىگەچكە ، بىزنىڭ كۆڭۈلدىكى ساندۇق سايىمىز يوق.
ياكى ياكى دەرسلەر قوشۇلغاندا ، .table-striped
the تەگلىكنى رەڭدار قىلىش ئۈچۈن يېرىم سۈزۈك رەڭگە تەڭشەلدى..table-hover
.table-active
--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
جەدۋەل ۋە كاتەكچىلەرنىڭ ھەممە تەرىپىگە چېگرا قوشۇڭ .
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@twitter
كۆچۈرۈڭ
< table class = "table table-bordered" >
...
</ table >
رەڭ ئۆزگەرتىش ئۈچۈن چېگرا رەڭ ئەسلىھەلىرىنى قوشقىلى بولىدۇ:
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@twitter
كۆچۈرۈڭ
< table class = "table table-bordered border-primary" >
...
</ table >
جەدۋەلسىز جەدۋەل
.table-borderless
چېگراسىز جەدۋەلنى قوشۇڭ .
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@twitter
كۆچۈرۈڭ
< table class = "table table-borderless" >
...
</ table >
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@twitter
كۆچۈرۈڭ
< table class = "table table-dark table-borderless" >
...
</ table >
كىچىك جەدۋەل
بارلىق كاتەكچىلەرنى ئىككىگە بۆلۈپ تېخىمۇ ئىخچاملاش .table-sm
ئۈچۈن قوشۇڭ ..table
padding
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@twitter
كۆچۈرۈڭ
< table class = "table table-sm" >
...
</ table >
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@twitter
كۆچۈرۈڭ
< table class = "table table-dark table-sm" >
...
</ table >
تىك توغرىلاش
جەدۋەل كاتەكچىلىرى <thead>
ھەمىشە ئاستىغا تىك توغرىلىنىدۇ. جەدۋەل كاتەكچىلىرى <tbody>
ئۇلارنىڭ ماسلىشىشىغا ۋارىسلىق قىلىدۇ <table>
ۋە سۈكۈتتىكى ھالەتتە ئۈستىگە توغرىلىنىدۇ. ۋېرتىكال توغرىلاش سىنىپلىرىنى ئىشلىتىپ ئېھتىياجغا قاراپ قايتا توغرىلاڭ.
Heading 1
Heading 2
Heading 3
Heading 4
بۇ ھۈجەيرە 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 >
Nesting
چېگرا ئۇسلۇبى ، ئاكتىپ ئۇسلۇب ۋە جەدۋەل ۋارىيانتلىرى ئۇلانغان جەدۋەللەرگە ۋارىسلىق قىلمايدۇ.
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
Header
Header
Header
A.
بىرىنچى
ئاخىرقى
B.
بىرىنچى
ئاخىرقى
C.
بىرىنچى
ئاخىرقى
3
Larry
قۇش
@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>
ئورالغان بولىدۇ ، شۇڭا تاللىغۇچىلىرىمىز كۆڭۈلدىكىدەك ئىشلەيدۇ.<tbody>
Anatomy
جەدۋەل بېشى
جەدۋەل ۋە قېنىق ئۈستەللەرگە ئوخشاش ، ئۆزگەرتكۈچ سىنىپىنى ئىشلىتىڭ ياكى .table-light
s سۇس ياكى قېنىق كۈلرەڭ كۆرۈنۈڭ..table-dark
<thead>
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry
قۇش
@twitter
كۆچۈرۈڭ
< table class = "table" >
< thead class = "table-light" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry
قۇش
@twitter
كۆچۈرۈڭ
< table class = "table" >
< thead class = "table-dark" >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry
قۇش
@twitter
Footer
Footer
Footer
Footer
كۆچۈرۈڭ
< table class = "table" >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
< tfoot >
...
</ tfoot >
</ table >
خەتلەر
جەدۋەلنىڭ ماۋزۇسىغا <caption>
ئوخشاش ئىقتىدارلار. ئۇ ئېكران ئوقۇرمەنلىرى بار ئىشلەتكۈچىلەرنىڭ جەدۋەل تېپىشى ۋە ئۇنىڭ نېمە ئىش ئىكەنلىكىنى چۈشىنىشى ۋە ئۇنى ئوقۇماقچى ياكى ئەمەسلىكىنى قارار قىلىشىغا ياردەم بېرىدۇ.
ئىشلەتكۈچى تىزىملىكى
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry the Bird
@twitter
كۆچۈرۈڭ
< table class = "table table-sm" >
< caption > List of users</ caption >
< thead >
...
</ thead >
< tbody >
...
</ tbody >
</ table >
<caption>
ئۈستەلنى ئۈستەلنىڭ ئۈستىگە قويسىڭىزمۇ بولىدۇ .caption-top
.
ئىشلەتكۈچى تىزىملىكى
#
بىرىنچى
ئاخىرقى
Handle
1
Mark
Otto
@mdo
2
ياقۇپ
Thornton
@fat
3
Larry
قۇش
@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
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 >
بۆسۈش نۇقتىسى كونكرېت
ئېھتىياجغا ئاساسەن ئىشلىتىپ .table-responsive{-sm|-md|-lg|-xl|-xxl}
، مەلۇم بىر نۇقتىغا قەدەر ئىنكاس جەدۋىلى ھاسىل قىلىڭ. بۇ نۇقتىدىن يۇقىرىغا قاراپ ، جەدۋەل نورمال ھەرىكەت قىلىدۇ ۋە توغرىسىغا توغرىلانمايدۇ.
بۇ جەدۋەللەر ئۇلارنىڭ ئىنكاس ئۇسلۇبى ئالاھىدە كۆرۈنۈش كەڭلىكىدە قوللىنىلغۇچە بۇزۇلغاندەك كۆرۈنۈشى مۇمكىن.
#
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
#
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
#
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
#
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
#
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
#
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
ماۋزۇ
1
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
2
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
3
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
كۆچۈرۈڭ
< 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 >
Sass
ئۆزگەرگۈچى مىقدار
كۆچۈرۈڭ
$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 % ;
Loop
كۆچۈرۈڭ
$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
ئۆزگەرگۈچى مىقدار تەرىپىدىن نۇرلىنىدۇ.