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>

Үстел басының опциялары

Кестелер мен күңгірт кестелерге ұқсас, модификатор сыныптарын пайдаланыңыз .thead-lightнемесе s ашық немесе қою сұр болып көрінуі .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- көру порттарының шектеулерімен жұмыс істейтінін ескеріңіз. .

Жазбалар

Кестеге арналған <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>