דאַקיומענטיישאַן און ביישפילן פֿאַר אַפּט-אין סטילינג פון טישן (געגעבן זייער פאַרשפּרייט נוצן אין דזשאַוואַסקריפּט פּלוגינס) מיט Bootstrap.
אויף דעם בלאַט
איבערבליק
רעכט צו דער וויידספּרעד נוצן פון <table>עלעמענטן אַריבער דריט-פּאַרטיי ווידזשיץ ווי קאַלענדאַרס און דאַטע פּיקערז, באָאָטסטראַפּ טישן זענען אַפּט-אין . לייג די באַזע קלאַס .tableצו קיין <table>, און פאַרברייטערן מיט אונדזער אַפּשאַנאַל מאָדיפיער קלאסן אָדער מנהג סטיילז. כל טיש סטיילז זענען נישט ינכעראַטיד אין באָאָטסטראַפּ, וואָס מיטל אַז קיין נעסטעד טישן קענען זיין סטיילד פרייַ פון די פאָטער.
ניצן די מערסט יקערדיק טיש מאַרקאַפּ, דאָ ס ווי- .tableבאזירט טישן קוק אין Bootstrap.
#
ערשטער
לעצטע
שעפּן
1
מארק
אָטאָ
@מדאָ
2
יעקב
Thornton
@פעט
3
לערי די בירד
@טוויטער
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
וועריאַנץ
ניצן קאָנטעקסטואַל קלאסן צו קאָלירן טישן, טיש ראָוז אָדער יחיד סעלז.
קלאַס
כעדינג
כעדינג
פעליקייַט
צעל
צעל
ערשטיק
צעל
צעל
צווייטיק
צעל
צעל
הצלחה
צעל
צעל
געפאַר
צעל
צעל
ווארענונג
צעל
צעל
אינפֿאָרמאַציע
צעל
צעל
ליכט
צעל
צעל
טונקל
צעל
צעל
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
קאַנווייינג טייַטש צו אַסיסטיוו טעקנאַלאַדזשיז
ניצן קאָליר צו לייגן טייַטש בלויז גיט אַ וויזשאַוואַל אָנווייַז, וואָס וועט נישט זיין קאַנווייד צו יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז - אַזאַ ווי פאַרשטעלן לייענער. פאַרזיכערן אַז אינפֿאָרמאַציע דינאָוטיד דורך די קאָליר איז קלאָר ווי דער טאָג פון די אינהאַלט זיך (למשל די קענטיק טעקסט), אָדער איז אַרייַנגערעכנט דורך אָלטערנאַטיוו מיטל, אַזאַ ווי נאָך טעקסט פאַרבאָרגן מיט די .visually-hiddenקלאַס.
אַקסענטיד טישן
סטרייפּט ראָוז
ניצן .table-stripedצו לייגן זעבראַ-סטריפּינג צו קיין טיש רודערן אין די <tbody>.
ווען אָדער .table-stripedאָדער .table-hoverקלאסן .table-activeזענען מוסיף, די --bs-table-accent-bgאיז באַשטימט צו אַ סעמיטראַנספּאַרענט קאָליר צו קאַלערייז די הינטערגרונט.
טיש סעלז פון <thead>זענען שטענדיק ווערטיקאַל אַליינד צו די דנאָ. טאַבלע סעלז אין <tbody>ירשענען זייער אַליינמאַנט פון <table>און זענען אַליינד צו די שפּיץ דורך פעליקייַט. ניצן די ווערטיקאַל ייַנרייען קלאסן צו שייַעך-ייַנרייען ווו דארף.
קעפל 1
קעפל 2
קעפל 3
קעפל 4
דעם צעל ינכעראַץ vertical-align: middle;פון די טיש
דעם צעל ינכעראַץ vertical-align: middle;פון די טיש
דעם צעל ינכעראַץ vertical-align: middle;פון די טיש
דאָ איז עטלעכע אָרטהאָלדער טעקסט, בדעה צו נעמען אַ ביסל ווערטיקאַל פּלאַץ, צו באַווייַזן ווי די ווערטיקאַל אַליינמאַנט אַרבעט אין די פריערדיקע סעלז.
דעם צעל ינכעראַץ vertical-align: bottom;פון די טיש רודערן
דעם צעל ינכעראַץ vertical-align: bottom;פון די טיש רודערן
דעם צעל ינכעראַץ vertical-align: bottom;פון די טיש רודערן
דאָ איז עטלעכע אָרטהאָלדער טעקסט, בדעה צו נעמען אַ ביסל ווערטיקאַל פּלאַץ, צו באַווייַזן ווי די ווערטיקאַל אַליינמאַנט אַרבעט אין די פריערדיקע סעלז.
דעם צעל ינכעראַץ vertical-align: middle;פון די טיש
דעם צעל ינכעראַץ vertical-align: middle;פון די טיש
דעם צעל איז אַליינד צו די שפּיץ.
דאָ איז עטלעכע אָרטהאָלדער טעקסט, בדעה צו נעמען אַ ביסל ווערטיקאַל פּלאַץ, צו באַווייַזן ווי די ווערטיקאַל אַליינמאַנט אַרבעט אין די פריערדיקע סעלז.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
איר קענען אויך שטעלן די <caption>אויף די שפּיץ פון די טיש מיט .caption-top.
רשימה פון ניצערס
#
ערשטער
לעצטע
שעפּן
1
מארק
אָטאָ
@מדאָ
2
יעקב
Thornton
@פעט
3
לערי
די פויגל
@טוויטער
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>