in English

Табели

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

Одговорни табели

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint specific

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

Овие табели може да изгледаат скршени додека не се применат нивните одговорни стилови на одредени ширини на приказите.

# Наслов Наслов Наслов Наслов Наслов Наслов Наслов Наслов
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>