Source

Табле

Документација и примери за избор стилова табела (с обзиром на њихову преовлађујућу употребу у ЈаваСцрипт додацима) са Боотстрап-ом.

Примери

Због широко распрострањене употребе табела у виџетима независних произвођача као што су календари и бирачи датума, дизајнирали смо наше табеле тако да се могу укључити . Само додајте основну класу .tableбило којој <table>, а затим проширите прилагођеним стиловима или нашим различитим укљученим класама модификатора.

Користећи најосновније ознаке табеле, ево како .tableизгледају табеле засноване на Боотстрапу. Сви стилови табела су наслеђени у Боотстрап 4 , што значи да ће све угнежђене табеле бити стилизоване на исти начин као и родитељ.

# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Ларри птица @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Ларри птица @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Ларри птица @твиттер
# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Ларри птица @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Ларри птица @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Ларри птица @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<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 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Птица Лари @твиттер 
<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класом.

Креирајте прилагодљиве табеле премотавањем било које .tableса .table-responsive{-sm|-md|-lg|-xl}, чинећи да се табела помера хоризонтално на свакој max-widthтачки прекида до (али не укључујући) 576пк, 768пк, 992пк и 1120пк, респективно.

Имајте на уму да пошто прегледачи тренутно не подржавају упите контекста опсега , ми заобилазимо ограничења min-и max-префиксе и оквире за приказ са делимичним ширинама (које се могу појавити под одређеним условима на уређајима са високим дпи, на пример) користећи вредности са већом прецизношћу за ова поређења .

Наслови

Функционише <caption>као наслов за табелу. Помаже корисницима са читачима екрана да пронађу табелу и разумеју о чему се ради и одлуче да ли желе да је прочитају.

Списак корисника
# Први Ласт Дршка
1 Марк Отто @мдо
2 Јацоб Тхорнтон @дебео
3 Ларри птица @твиттер 
<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>