Source

Таблицалар

Bootstrap ярдәмендә таблицаларны оптимальләштерү өчен документлар һәм мисаллар (аларның JavaScript плагиннарында киң кулланылышын исәпкә алып).

Мисаллар

Өченче як виджетлары буенча календарьлар һәм дата сайлау кебек таблицаларның киң кулланылуы аркасында, без таблицаларыбызны сайлау өчен эшләдек . Бары тик төп классны .tableөстәгез <table>, аннары махсус стильләр яки безнең кертелгән модификатор классларыбыз белән киңәйтегез.

Иң төп өстәл билгесен кулланып, монда .tableBootstrap-та нигезләнгән таблицалар. Барлык өстәл стильләре Bootstrap 4 мирас итеп алынган , димәк, ояланган өстәлләр ата-аналар белән бер үк стильдә ясалачак.

# Башта Соңгы Тоткыч
1 Билге Отто @mdo
2 Ягъкуб Торнтон @fat
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 Ягъкуб Торнтон @fat
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яисә ачык яки куе соры булып күренсен .thead-darkөчен .<thead>

# Башта Соңгы Тоткыч
1 Билге Отто @mdo
2 Ягъкуб Торнтон @fat
3 Ларри Кош @twitter
# Башта Соңгы Тоткыч
1 Билге Отто @mdo
2 Ягъкуб Торнтон @fat
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 Ягъкуб Торнтон @fat
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 Ягъкуб Торнтон @fat
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 Ягъкуб Торнтон @fat
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 Ягъкуб Торнтон @fat
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 Ягъкуб Торнтон @fat
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 Ягъкуб Торнтон @fat
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 Ягъкуб Торнтон @fat
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 Ягъкуб Торнтон @fat
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 Ягъкуб Торнтон @fat
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 Ягъкуб Торнтон @fat
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

Игътибар итегез, браузерлар хәзерге вакытта контекст сорауларын хупламаганлыктан, без бу чагыштырулар өчен югары төгәллек белән кыйммәтләр кулланып, фракциональ киңлекләр белән (мәсәлән, югары dpi җайланмаларында билгеле бер шартларда булырга мөмкин) чикләүләр, min-префикслар max-һәм күренешләр өстендә эшлибез. .

Язулар

<caption>Таблицага баш кебек функцияләр . Бу экран укучылары булган кулланучыларга таблицаны табарга һәм аның нәрсә икәнен аңларга һәм аны укырга теләгәннәрен хәл итәргә булыша.

Кулланучылар исемлеге
# Башта Соңгы Тоткыч
1 Билге Отто @mdo
2 Ягъкуб Торнтон @fat
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>

Onsаваплы таблицалар

Onsаваплы таблицалар таблицаларны горизонталь яктан җиңел әйләндерергә мөмкинлек бирә. Барлык күренешләр буенча теләсә нинди таблицаны җаваплы итеп .tableясагыз .table-responsive. Яисә, кулланып, җаваплы таблицага ия булган максималь ноктаны сайлагыз .table-responsive{-sm|-md|-lg|-xl}.

Вертикаль кисү / кисү

Onsаваплы таблицалар кулланыла overflow-y: hidden, алар өстәлнең аскы яисә өске кырларыннан арткан эчтәлекне кисеп ала. Аерым алганда, бу тамчы менюларны һәм бүтән өченче як виджетларын кисәргә мөмкин.

Waysәрвакыт җаваплы

Breakәрбер нокта аша .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>