Bootstrap ئارقىلىق جەدۋەللەرنى سۈزۈش ئۇسلۇبىدىكى ھۆججەتلەر ۋە مىساللار (ئۇلارنىڭ JavaScript قىستۇرمىلىرىدا كەڭ قوللىنىلغانلىقىنى كۆزدە تۇتۇپ).
مىساللار
كالېندار ۋە چېسلا تاللىغۇچىلارغا ئوخشاش ئۈچىنچى تەرەپ كىچىك قوراللاردا جەدۋەللەرنىڭ كەڭ كۆلەمدە ئىشلىتىلىشى سەۋەبىدىن ، ئۈستەللىرىمىزنى تاللاشقا لايىھىلەپ چىقتۇق . ئاساسىي سىنىپنى .table
خالىغان بىرىگە قوشۇڭ <table>
، ئاندىن خاس ئۇسلۇب ياكى بىزنىڭ ھەرخىل ئۆزگەرتىلگەن دەرسلىرىمىز بىلەن كېڭەيتىڭ.
ئەڭ ئاساسىي جەدۋەل بەلگىسىنى ئىشلىتىپ ، .table
Bootstrap دا ئاساسلانغان جەدۋەللەرنىڭ كۆرۈنۈشى. بارلىق جەدۋەل ئۇسلۇبلىرى Bootstrap 4 گە ۋارىسلىق قىلغان ، يەنى ھەر قانداق ئۇۋىغان جەدۋەللەر ئاتا-ئانىغا ئوخشاش ئۇسلۇبتا يېزىلغان.
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry |
قۇش |
@twitter |
سىز يەنە رەڭلەرنى قاراڭغۇ تەگلىكتە سۇس تېكىست بىلەن ئۆزگەرتەلەيسىز .table-dark
.
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry |
قۇش |
@twitter |
جەدۋەل باش تاللانمىلىرى
جەدۋەل ۋە قېنىق جەدۋەللەرگە ئوخشاش ، ئۆزگەرتكۈچ سىنىپىنى ئىشلىتىڭ ياكى .thead-light
s سۇس ياكى قېنىق كۈلرەڭ كۆرۈنۈڭ..thead-dark
<thead>
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry |
قۇش |
@twitter |
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry |
قۇش |
@twitter |
قۇر قۇر
.table-striped
ئىچىدىكى ھەر قانداق جەدۋەل قۇرىغا zebra- بەلگە قوشۇشقا ئىشلىتىڭ <tbody>
.
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry |
قۇش |
@twitter |
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry |
قۇش |
@twitter |
چېگرا جەدۋىلى
.table-bordered
جەدۋەل ۋە كاتەكچىلەرنىڭ ھەممە تەرىپىگە چېگرا قوشۇڭ .
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
چېگراسىز جەدۋەل
.table-borderless
چېگراسىز جەدۋەلنى قوشۇڭ .
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
.table-borderless
قاراڭغۇ ئۈستەللەردىمۇ ئىشلىتىشكە بولىدۇ.
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
يۆتكىلىشچان قۇر
.table-hover
A دىكى جەدۋەل قۇرلىرىغا يۆتكىلىش ھالىتىنى قوزغىتىش ئۈچۈن قوشۇڭ <tbody>
.
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
كىچىك ئۈستەل
.table-sm
جەدۋەلنى يېرىم قىلىپ كېسىش ئارقىلىق جەدۋەلنى تېخىمۇ ئىخچاملاش ئۈچۈن قوشۇڭ .
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry the Bird |
@twitter |
مەزمۇن دەرسلىرى
مەزمۇن جەدۋىلىنى ئىشلىتىپ جەدۋەل قۇر ياكى يەككە كاتەكچىلەرگە ئىشلىتىڭ.
سىنىپ |
ماۋزۇ |
ماۋزۇ |
ئاكتىپ |
Cell |
Cell |
سۈكۈتتىكى |
Cell |
Cell |
Primary |
Cell |
Cell |
Secondary |
Cell |
Cell |
مۇۋەپپەقىيەت |
Cell |
Cell |
خەتەر |
Cell |
Cell |
ئاگاھلاندۇرۇش |
Cell |
Cell |
ئۇچۇر |
Cell |
Cell |
نۇر |
Cell |
Cell |
قاراڭغۇ |
Cell |
Cell |
ئادەتتىكى جەدۋەل تەگلىك ۋارىيانتلىرى قاراڭغۇ جەدۋەل بىلەن تەمىنلەنمەيدۇ ، ئەمما سىز ئوخشاش ئۇسلۇبنى ئەمەلگە ئاشۇرۇش ئۈچۈن تېكىست ياكى تەگلىك قوراللىرىنى ئىشلىتەلەيسىز .
# |
ماۋزۇ |
ماۋزۇ |
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 |
ياردەمچى تېخنىكىلارغا مەنە يەتكۈزۈش
رەڭ ئىشلىتىش ئارقىلىق مەنە قوشۇش پەقەت كۆرۈنۈشلۈك كۆرسەتكۈچ بىلەن تەمىنلەيدۇ ، بۇ ئېكران تېخنىكىلىرىغا ئوخشاش ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەرگە يەتكۈزۈلمەيدۇ. رەڭ بىلەن ئىپادىلەنگەن ئۇچۇرنىڭ مەزمۇننىڭ ئۆزىدىن ئېنىق بولۇشىغا كاپالەتلىك قىلىڭ (مەسىلەن كۆرۈنگەن تېكىست) ، ياكى باشقا ئۇسۇللار ئارقىلىق ئۆز ئىچىگە ئېلىنغان ، مەسىلەن .sr-only
دەرسكە يوشۇرۇنغان قوشۇمچە تېكىست دېگەندەك.
.table
ھەر قانداقسىنى ئوراپ ئىنكاسچان جەدۋەل ھاسىل قىلىڭ ، جەدۋەلنى ئايرىم-ئايرىم ھالدا 576px ، 768px ، 992px ۋە 1120px غىچە بولغان .table-responsive{-sm|-md|-lg|-xl}
ھەر بىر بۆسۈش نۇقتىسىدا توغرىسىغا توغرىلاڭ.max-width
خەتلەر
جەدۋەلنىڭ ماۋزۇسىغا <caption>
ئوخشاش ئىقتىدارلار. ئۇ ئېكران ئوقۇرمەنلىرى بار ئىشلەتكۈچىلەرنىڭ جەدۋەل تېپىشى ۋە ئۇنىڭ نېمە ئىش ئىكەنلىكىنى چۈشىنىشى ۋە ئۇنى ئوقۇماقچى ياكى ئەمەسلىكىنى قارار قىلىشىغا ياردەم بېرىدۇ.
ئىشلەتكۈچى تىزىملىكى
# |
بىرىنچى |
ئاخىرقى |
Handle |
1 |
Mark |
Otto |
@mdo |
2 |
ياقۇپ |
Thornton |
@fat |
3 |
Larry |
قۇش |
@twitter |
جاۋاب جەدۋىلى
مەسئۇلىيەتچان جەدۋەللەر جەدۋەلنى ئوڭايلا توغرىسىغا توغرىلاشقا بولىدۇ. ھەر قانداق جەدۋەلنى بارلىق كۆرۈنۈشلەر بىلەن ئوراپ ، ئىنكاس .table
قايتۇرۇڭ .table-responsive
. ياكى ، ئەڭ يۇقىرى چەكنى تاللاڭ ، بۇ ئارقىلىق ئىشلىتىش ئارقىلىق ئىنكاس جەدۋىلى بار .table-responsive{-sm|-md|-lg|-xl}
.
تىك كېسىش / كېسىش
مەسئۇلىيەتچان جەدۋەللەردىن پايدىلىنىدۇ 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 |
بۆسۈش نۇقتىسى كونكرېت
ئېھتىياجغا ئاساسەن ئىشلىتىپ .table-responsive{-sm|-md|-lg|-xl}
، مەلۇم بىر نۇقتىغا قەدەر ئىنكاس جەدۋىلى ھاسىل قىلىڭ. بۇ نۇقتىدىن يۇقىرىغا قاراپ ، جەدۋەل نورمال ھەرىكەت قىلىدۇ ۋە توغرىسىغا توغرىلانمايدۇ.
بۇ جەدۋەللەر ئۇلارنىڭ ئىنكاس ئۇسلۇبى ئالاھىدە كۆرۈنۈش كەڭلىكىدە قوللىنىلغۇچە بۇزۇلغاندەك كۆرۈنۈشى مۇمكىن.
# |
ماۋزۇ |
ماۋزۇ |
ماۋزۇ |
ماۋزۇ |
ماۋزۇ |
ماۋزۇ |
ماۋزۇ |
ماۋزۇ |
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 |