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կամ 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-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ընդմիջման կետում մինչև (բայց չներառելով) համապատասխանաբար 576px, 768px, 992px և 1120px:

Նկատի ունեցեք, որ քանի որ բրաուզերները ներկայումս չեն աջակցում տիրույթի համատեքստի հարցումները , մենք աշխատում ենք կոտորակային լայնություններով սահմանափակումների min-և max-նախածանցների և տեսադաշտերի շուրջ (որոնք կարող են առաջանալ որոշակի պայմաններում, օրինակ, բարձր dpi սարքերում)՝ օգտագործելով այս համեմատությունների համար ավելի բարձր ճշգրտությամբ արժեքներ: .

Ենթագրեր

A- <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>

Պատասխանատու աղյուսակներ

Պատասխանատու աղյուսակները թույլ են տալիս հեշտությամբ ոլորել աղյուսակները հորիզոնական: Դարձրեք ցանկացած աղյուսակ արձագանքող բոլոր դիտակետերում՝ փաթաթելով a- .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 Բջջ Բջջ Բջջ Բջջ Բջջ
# Վերնագիր Վերնագիր Վերնագիր Վերնագիր Վերնագիր
1 Բջջ Բջջ Բջջ Բջջ Բջջ
2 Բջջ Բջջ Բջջ Բջջ Բջջ
3 Բջջ Բջջ Բջջ Բջջ Բջջ
# Վերնագիր Վերնագիր Վերնագիր Վերնագիր Վերնագիր
1 Բջջ Բջջ Բջջ Բջջ Բջջ
2 Բջջ Բջջ Բջջ Բջջ Բջջ
3 Բջջ Բջջ Բջջ Բջջ Բջջ
# Վերնագիր Վերնագիր Վերնագիր Վերնագիր Վերնագիր
1 Բջջ Բջջ Բջջ Բջջ Բջջ
2 Բջջ Բջջ Բջջ Բջջ Բջջ
3 Բջջ Բջջ Բջջ Բջջ Բջջ 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>