Source

Хүснэгтүүд

Bootstrap ашиглан хүснэгтүүдийг загварчлах (JavaScript залгаасуудад түгээмэл хэрэглэгддэг) баримт бичиг, жишээнүүд.

Жишээ

Хуанли, огноо сонгогч гэх мэт гуравдагч талын виджетүүдэд хүснэгтүүдийг өргөнөөр ашигладаг тул бид хүснэгтүүдээ бүртгүүлэх боломжтой болгосон . Зүгээр л үндсэн ангийг .tableдурын <table>дээр нэмээд дараа нь өөрчлөн тохируулсан хэв маяг эсвэл бидний оруулсан янз бүрийн өөрчлөгч ангиудаар өргөтгөнө.

Хамгийн энгийн хүснэгтийн тэмдэглэгээг ашиглан .tableBootstrap дээр суурилсан хүснэгтүүд хэрхэн харагдахыг эндээс үзнэ үү. Хүснэгтийн бүх загварууд Bootstrap 4-д өвлөгддөг бөгөөд энэ нь ямар ч үүрлэсэн хүснэгтүүд нь эцэг эхтэй ижил загвартай байх болно гэсэн үг юм.

# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Та мөн бараан дэвсгэр дээр цайвар бичвэр бүхий өнгийг эргүүлж болно .table-dark.

# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
3 Ларри шувуу @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>

Ширээний толгойн сонголтууд

Хүснэгт болон бараан хүснэгттэй адилаар s-г цайвар эсвэл хар саарал харагдуулахын тулд өөрчлөх ангиудыг .thead-lightашиглана уу .thead-dark.<thead>

# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
3 Ларри шувуу @twitter
# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
3 Ларри шувуу @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доторх хүснэгтийн аль ч мөрөнд тахө зураас нэмэхийн тулд ашиглана уу <tbody>.

# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
3 Ларри шувуу @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>
# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
3 Ларри шувуу @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Хүснэгт болон нүднүүдийн бүх талын хүрээг нэмнэ үү .

# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
3 Шувуу Ларри @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>
# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
3 Шувуу Ларри @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-borderlessХил хязгааргүй хүснэгтэд нэмнэ үү .

# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
3 Шувуу Ларри @twitter 
<table class="table table-borderless">
  <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-borderlessмөн харанхуй ширээн дээр хэрэглэж болно.

# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
3 Шувуу Ларри @twitter 
<table class="table table-borderless 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-hoverДотор хүснэгтийн мөрүүд дээр хулганын төлөвийг идэвхжүүлэхийн тулд нэмэх <tbody>.

# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
3 Шувуу Ларри @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>
# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
3 Шувуу Ларри @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Хүснэгтийг илүү нягт нямбай болгохын тулд эсийн дэвсгэрийг хагасаар нь багасгаж нэмнэ .

# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
3 Шувуу Ларри @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>
# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
3 Шувуу Ларри @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>

Контекст ангиуд

Хүснэгтийн мөр эсвэл бие даасан нүднүүдийг будахын тулд контекст ангиллыг ашиглана уу.

Анги Гарчиг Гарчиг
Идэвхтэй Эс Эс
Өгөгдмөл Эс Эс
Үндсэн Эс Эс
Хоёрдогч Эс Эс
Амжилт Эс Эс
аюул Эс Эс
Анхааруулга Эс Эс
Мэдээлэл Эс Эс
Гэрэл Эс Эс
Харанхуй Эс Эс 
<!-- 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 Эс Эс
2 Эс Эс
3 Эс Эс
4 Эс Эс
5 Эс Эс
6 Эс Эс
7 Эс Эс
8 Эс Эс
9 Эс Эс 
<!-- 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ангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.

Хүснэгтийг 576px, 768px, 992px, 1120px хүртэл (гэхдээ оруулахгүй) таслах цэг бүр дээр хэвтээ байдлаар гүйлгэх замаар аль нэгийг .tableнь ороож, хариу үйлдэл үзүүлэх хүснэгт үүсгэнэ үү..table-responsive{-sm|-md|-lg|-xl}max-width

Хөтөчүүд одоогоор хүрээний контекст асуулгыг дэмждэггүй тул бид эдгээр харьцуулалтад илүү нарийвчлалтай утгуудыг ашиглан бутархай өргөнтэй угтвар min-болонmax- харах цонхны хязгаарлалтыг тойрон ажилладаг болохыг анхаарна уу (жишээ нь өндөр dpi төхөөрөмж дээр тодорхой нөхцөлд тохиолдож болно). .

Тайлбар

Хүснэгтийн <caption>гарчиг шиг функцийг гүйцэтгэдэг. Энэ нь дэлгэц уншигчтай хэрэглэгчдэд хүснэгтийг хайж олоход тусалдаг бөгөөд энэ нь юу болохыг ойлгох, мөн үүнийг уншихыг хүсч байгаагаа шийдэхэд тусалдаг.

Хэрэглэгчдийн жагсаалт
# Эхлээд Сүүлийн Бариул
1 Марк Отто @mdo
2 Жейкоб Торнтон @ тарган
3 Ларри шувуу @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 Эс Эс Эс Эс Эс Эс Эс Эс Эс
2 Эс Эс Эс Эс Эс Эс Эс Эс Эс
3 Эс Эс Эс Эс Эс Эс Эс Эс Эс 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Тодорхой таслах цэг

.table-responsive{-sm|-md|-lg|-xl}Тодорхой таслах цэг хүртэл хариу үйлдэл үзүүлэх хүснэгтүүдийг үүсгэхийн тулд шаардлагатай бол ашиглана уу. Энэ завсарлага ба түүнээс дээш үед хүснэгт хэвийн ажиллах бөгөөд хэвтээ байдлаар гүйлгэхгүй.

Эдгээр хүснэгтүүд нь тодорхой харагдах цонхны өргөнд хариу үйлдэл үзүүлэх хүртэл эвдэрсэн мэт харагдаж болно.

# Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг
1 Эс Эс Эс Эс Эс Эс Эс Эс
2 Эс Эс Эс Эс Эс Эс Эс Эс
3 Эс Эс Эс Эс Эс Эс Эс Эс 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг
1 Эс Эс Эс Эс Эс Эс Эс Эс
2 Эс Эс Эс Эс Эс Эс Эс Эс
3 Эс Эс Эс Эс Эс Эс Эс Эс 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг
1 Эс Эс Эс Эс Эс Эс Эс Эс
2 Эс Эс Эс Эс Эс Эс Эс Эс
3 Эс Эс Эс Эс Эс Эс Эс Эс 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг Гарчиг
1 Эс Эс Эс Эс Эс Эс Эс Эс
2 Эс Эс Эс Эс Эс Эс Эс Эс
3 Эс Эс Эс Эс Эс Эс Эс Эс 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>