Source

جەدۋەل

Bootstrap ئارقىلىق جەدۋەللەرنى سۈزۈش ئۇسلۇبىدىكى ھۆججەتلەر ۋە مىساللار (ئۇلارنىڭ JavaScript قىستۇرمىلىرىدا كەڭ قوللىنىلغانلىقىنى كۆزدە تۇتۇپ).

مىساللار

كالېندار ۋە چېسلا تاللىغۇچىلارغا ئوخشاش ئۈچىنچى تەرەپ كىچىك قوراللاردا جەدۋەللەرنىڭ كەڭ كۆلەمدە ئىشلىتىلىشى سەۋەبىدىن ، ئۈستەللىرىمىزنى تاللاشقا لايىھىلەپ چىقتۇق . ئاساسىي سىنىپنى .tableخالىغان بىرىگە قوشۇڭ <table>، ئاندىن خاس ئۇسلۇب ياكى بىزنىڭ ھەرخىل ئۆزگەرتىلگەن دەرسلىرىمىز بىلەن كېڭەيتىڭ.

ئەڭ ئاساسىي جەدۋەل بەلگىسىنى ئىشلىتىپ ، .tableBootstrap دا ئاساسلانغان جەدۋەللەرنىڭ كۆرۈنۈشى. بارلىق جەدۋەل ئۇسلۇبلىرى Bootstrap 4 گە ۋارىسلىق قىلغان ، يەنى ھەر قانداق ئۇۋىغان جەدۋەللەر ئاتا-ئانىغا ئوخشاش ئۇسلۇبتا يېزىلغان.

# بىرىنچى ئاخىرقى Handle
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry قۇش @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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

سىز يەنە رەڭلەرنى قاراڭغۇ تەگلىكتە سۇس تېكىست بىلەن ئۆزگەرتەلەيسىز .table-dark.

# بىرىنچى ئاخىرقى Handle
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry قۇش @twitter 
<table class="table table-dark">
  <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>

جەدۋەل باش تاللانمىلىرى

جەدۋەل ۋە قېنىق ئۈستەللەرگە ئوخشاش ، ئۆزگەرتكۈچ سىنىپىنى ئىشلىتىڭ ياكى .thead-lights سۇس ياكى قېنىق كۈلرەڭ كۆرۈنۈڭ..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 class="table">
  <thead class="thead-dark">
    <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 class="table">
  <thead class="thead-light">
    <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-stripedئىچىدىكى ھەر قانداق جەدۋەل قۇرىغا zebra- سىزىق قوشۇشقا ئىشلىتىڭ <tbody>.

# بىرىنچى ئاخىرقى Handle
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry قۇش @twitter 
<table class="table table-striped">
  <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>
# بىرىنچى ئاخىرقى Handle
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry قۇش @twitter 
<table class="table table-striped table-dark">
  <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-borderedجەدۋەل ۋە كاتەكچىلەرنىڭ ھەممە تەرىپىگە چېگرا قوشۇڭ .

# بىرىنچى ئاخىرقى Handle
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
  <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>
# بىرىنچى ئاخىرقى Handle
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered table-dark">
  <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>

يۆتكىلىشچان قۇر

.table-hoverA دىكى جەدۋەل قۇرلىرىغا يۆتكىلىش ھالىتىنى قوزغىتىش ئۈچۈن قوشۇڭ <tbody>.

# بىرىنچى ئاخىرقى Handle
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover">
  <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>
# بىرىنچى ئاخىرقى Handle
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover table-dark">
  <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>

كىچىك ئۈستەل

.table-smجەدۋەلنى يېرىم قىلىپ كېسىش ئارقىلىق جەدۋەلنى تېخىمۇ ئىخچاملاش ئۈچۈن قوشۇڭ .

# بىرىنچى ئاخىرقى Handle
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-sm">
  <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>
# بىرىنچى ئاخىرقى Handle
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-sm table-dark">
  <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>

مەزمۇن دەرسلىرى

مەزمۇن جەدۋىلىنى ئىشلىتىپ جەدۋەل قۇر ياكى يەككە كاتەكچىلەرگە ئىشلىتىڭ.

سىنىپ ماۋزۇ ماۋزۇ
ئاكتىپ Cell Cell
سۈكۈتتىكى Cell Cell
Primary Cell Cell
Secondary Cell Cell
مۇۋەپپەقىيەت Cell Cell
خەتەر Cell Cell
ئاگاھلاندۇرۇش Cell Cell
ئۇچۇر Cell Cell
نۇر Cell Cell
قاراڭغۇ Cell Cell 
<!-- On rows -->
<tr class="table-active">...</tr>

<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-active">...</td>

  <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>

ئادەتتىكى جەدۋەل تەگلىك ۋارىيانتلىرى قاراڭغۇ جەدۋەل بىلەن تەمىنلەنمەيدۇ ، ئەمما سىز ئوخشاش ئۇسلۇبنى ئەمەلگە ئاشۇرۇش ئۈچۈن تېكىست ياكى تەگلىك قوراللىرىنى ئىشلىتەلەيسىز .

# ماۋزۇ ماۋزۇ
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 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
ياردەمچى تېخنىكىلارغا مەنە يەتكۈزۈش

رەڭ ئىشلىتىش ئارقىلىق مەنە قوشۇش پەقەت كۆرۈنۈشلۈك كۆرسەتكۈچ بىلەن تەمىنلەيدۇ ، بۇ ئېكران تېخنىكىلىرىغا ئوخشاش ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەرگە يەتكۈزۈلمەيدۇ. رەڭ بىلەن ئىپادىلەنگەن ئۇچۇرنىڭ مەزمۇننىڭ ئۆزىدىن ئېنىق بولۇشىغا كاپالەتلىك قىلىڭ (مەسىلەن كۆرۈنگەن تېكىست) ، ياكى باشقا ئۇسۇللار ئارقىلىق ئۆز ئىچىگە ئېلىنغان ، مەسىلەن .sr-onlyدەرسكە يوشۇرۇنغان قوشۇمچە تېكىست دېگەندەك.

.tableھەر قانداقسىنى ئوراپ ئىنكاسچان جەدۋەل ھاسىل قىلىڭ ، جەدۋەلنى ئايرىم-ئايرىم ھالدا 576px ، 768px ، 992px ۋە 1120px غىچە بولغان .table-responsive{-sm|-md|-lg|-xl}ھەر بىر بۆسۈش نۇقتىسىدا توغرىسىغا توغرىلاڭ.max-width

شۇنىڭغا دىققەت قىلىڭكى ، توركۆرگۈچلەر دائىرىلىك مەزمۇن سوئاللىرىنى قوللىمىغاچقا ، بىز بۇ سېلىشتۇرۇشلارغا تېخىمۇ ئېنىقلىق بىلەن قىممەت ئىشلىتىش ئارقىلىق بۆلەك كەڭلىكى (مەسىلەن يۇقىرى dpi ئۈسكۈنىلىرىدە مەلۇم شارائىتتا يۈز بېرىشى مۇمكىن) نىڭ چەكلىمىسى ۋە ئالدى قوشۇلغۇچىسى ۋە كۆرۈنۈش ئېكرانىنىڭ min-چەكلىمىسىنى max-چۆرىدىگەن ھالدا ئىشلەيمىز. .

خەتلەر

جەدۋەلنىڭ ماۋزۇسىغا <caption>ئوخشاش ئىقتىدارلار. ئۇ ئېكران ئوقۇرمەنلىرى بار ئىشلەتكۈچىلەرنىڭ جەدۋەل تېپىشى ۋە ئۇنىڭ نېمە ئىش ئىكەنلىكىنى چۈشىنىشى ۋە ئۇنى ئوقۇماقچى ياكى ئەمەسلىكىنى قارار قىلىشىغا ياردەم بېرىدۇ.

ئىشلەتكۈچى تىزىملىكى
# بىرىنچى ئاخىرقى Handle
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry قۇش @twitter 
<table class="table">
  <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}.

تىك كېسىش / كېسىش

مەسئۇلىيەتچان جەدۋەللەردىن پايدىلىنىدۇ 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}، مەلۇم بىر نۇقتىغا قەدەر ئىنكاس جەدۋىلى ھاسىل قىلىڭ. بۇ نۇقتىدىن يۇقىرىغا قاراپ ، جەدۋەل نورمال ھەرىكەت قىلىدۇ ۋە توغرىسىغا توغرىلانمايدۇ.

# ماۋزۇ ماۋزۇ ماۋزۇ ماۋزۇ ماۋزۇ
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# ماۋزۇ ماۋزۇ ماۋزۇ ماۋزۇ ماۋزۇ
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# ماۋزۇ ماۋزۇ ماۋزۇ ماۋزۇ ماۋزۇ
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell
# ماۋزۇ ماۋزۇ ماۋزۇ ماۋزۇ ماۋزۇ
1 Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell 
<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>