Source

Табели

Документација и примери за стилизирање на табели (со оглед на нивната распространета употреба во приклучоците за JavaScript) со Bootstrap.

Примери

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

Користејќи го најосновното обележување на табелата, еве како .tableизгледаат табелите засновани во Bootstrap. Сите стилови на табели се наследени во 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или .thead-darkза да направите <thead>s да изгледа светло или темно сиво.

# Прво Последно Рачка
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класата.

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

Имајте предвид дека со оглед на тоа што прелистувачите во моментов не поддржуваат прашања за контекст на опсегот , работиме околу ограничувањата 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>