બુટસ્ટ્રેપ સાથે કોષ્ટકોના ઑપ્ટ-ઇન સ્ટાઇલ માટે દસ્તાવેજીકરણ અને ઉદાહરણો (જાવાસ્ક્રિપ્ટ પ્લગિન્સમાં તેમના પ્રચલિત ઉપયોગને જોતાં).
આ પૃષ્ઠ પર
ઝાંખી
સમગ્ર તૃતીય-પક્ષ વિજેટ્સ જેવા કે કેલેન્ડર્સ અને તારીખ પીકર પર તત્વોના વ્યાપક ઉપયોગને કારણે <table>, બુટસ્ટ્રેપના કોષ્ટકો પસંદ કરવામાં આવે છે . .tableકોઈપણમાં બેઝ ક્લાસ ઉમેરો <table>, પછી અમારા વૈકલ્પિક મોડિફાયર વર્ગો અથવા કસ્ટમ શૈલીઓ સાથે વિસ્તૃત કરો. બધી કોષ્ટક શૈલીઓ બુટસ્ટ્રેપમાં વારસામાં મળતી નથી, એટલે કે કોઈપણ નેસ્ટેડ કોષ્ટકો પેરેન્ટથી સ્વતંત્ર રીતે સ્ટાઈલ કરી શકાય છે.
સૌથી મૂળભૂત ટેબલ માર્કઅપનો ઉપયોગ કરીને, .tableબુટસ્ટ્રેપમાં -આધારિત કોષ્ટકો કેવી દેખાય છે તે અહીં છે.
#
પ્રથમ
છેલ્લા
હેન્ડલ
1
ચિહ્ન
ઓટ્ટો
@mdo
2
જેકબ
થોર્ન્ટન
@ચરબી
3
લેરી ધ બર્ડ
@Twitter
<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>.
--bs-table-bgઅમે કસ્ટમ પ્રોપર્ટી સાથે ટેબલ સેલની પૃષ્ઠભૂમિ સેટ કરીને પ્રારંભ કરીએ છીએ . બધા ટેબલ વેરિઅન્ટ્સ પછી તે કસ્ટમ પ્રોપર્ટી ટેબલ કોષોને રંગીન કરવા માટે સેટ કરે છે. આ રીતે, જો અર્ધ-પારદર્શક રંગોનો ટેબલ બેકગ્રાઉન્ડ તરીકે ઉપયોગ કરવામાં આવે તો આપણે મુશ્કેલીમાં ન આવીએ.
પછી આપણે ટેબલ કોષો box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);પર કોઈ પણ ઉલ્લેખિત ની ઉપરના સ્તર સાથે એક ઇનસેટ બોક્સ શેડો ઉમેરીએ છીએ background-color. કારણ કે અમે એક વિશાળ સ્પ્રેડ અને કોઈ અસ્પષ્ટતાનો ઉપયોગ કરીએ છીએ, રંગ એકવિધ હશે. ડિફૉલ્ટ રૂપે અનસેટ હોવાથી --bs-table-accent-bg, અમારી પાસે ડિફૉલ્ટ બૉક્સ શેડો નથી.
જ્યારે કાં તો .table-striped, .table-hoverઅથવા .table-activeવર્ગો ઉમેરવામાં આવે છે, --bs-table-accent-bgત્યારે પૃષ્ઠભૂમિને રંગીન કરવા માટે અર્ધપારદર્શક રંગ પર સેટ કરવામાં આવે છે.
--bs-table-accent-bgદરેક ટેબલ વેરિઅન્ટ માટે, અમે તે રંગના આધારે સૌથી વધુ કોન્ટ્રાસ્ટ સાથેનો રંગ જનરેટ કરીએ છીએ . ઉદાહરણ તરીકે, માટેનો ઉચ્ચાર રંગ .table-primaryઘાટો છે જ્યારે .table-darkહળવા ઉચ્ચારણ રંગ ધરાવે છે.
ટેક્સ્ટ અને બોર્ડર રંગો એ જ રીતે જનરેટ થાય છે, અને તેમના રંગો મૂળભૂત રીતે વારસામાં મળે છે.
ના કોષ્ટક કોષો <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>
માળો
બોર્ડર સ્ટાઈલ, એક્ટિવ સ્ટાઈલ અને ટેબલ વેરિઅન્ટ્સ નેસ્ટેડ કોષ્ટકો દ્વારા વારસામાં મળતા નથી.
કોઈપણ શૈલીને નેસ્ટેડ કોષ્ટકો પર લીક થવાથી રોકવા માટે, અમે >અમારા CSS માં ચાઈલ્ડ કોમ્બીનેટર ( ) પસંદગીકારનો ઉપયોગ કરીએ છીએ. અમારે , , અને માં તમામ tds અને s ને લક્ષ્ય બનાવવાની જરૂર હોવાથી , અમારા પસંદગીકાર તેના વિના ખૂબ લાંબુ દેખાશે. જેમ કે, અમે બધા s અને s ને લક્ષ્ય બનાવવા માટે એકદમ વિચિત્ર દેખાતા પસંદગીકારનો ઉપયોગ કરીએ છીએ , પરંતુ કોઈપણ સંભવિત નેસ્ટેડ કોષ્ટકોમાંથી કોઈ નહીં.ththeadtbodytfoot.table > :not(caption) > * > *tdth.table
નોંધ કરો કે જો તમે <tr>ટેબલના ડાયરેક્ટ ચિલ્ડ્રન તરીકે s ઉમેરો છો, તો તે ડિફૉલ્ટ રૂપે <tr>લપેટવામાં આવશે <tbody>, આમ અમારા પસંદગીકારો હેતુ મુજબ કાર્ય કરશે.
શરીરરચના
ટેબલ હેડ
કોષ્ટકો અને શ્યામ કોષ્ટકોની જેમ, મોડિફાયર વર્ગોનો ઉપયોગ કરો .table-lightઅથવા s ને આછો અથવા ઘેરો રાખોડી દેખાવા .table-darkમાટે .<thead>
<caption>ટેબલ માટે મથાળા જેવા કાર્યો . તે સ્ક્રીન રીડર્સ ધરાવતા વપરાશકર્તાઓને ટેબલ શોધવામાં અને તે શેના વિશે છે તે સમજવામાં અને તેઓ તેને વાંચવા માગે છે કે કેમ તે નક્કી કરવામાં મદદ કરે છે.
વપરાશકર્તાઓની સૂચિ
#
પ્રથમ
છેલ્લા
હેન્ડલ
1
ચિહ્ન
ઓટ્ટો
@mdo
2
જેકબ
થોર્ન્ટન
@ચરબી
3
લેરી ધ બર્ડ
@Twitter
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
તમે <caption>સાથે ટેબલની ટોચ પર પણ મૂકી શકો છો .caption-top.
વપરાશકર્તાઓની સૂચિ
#
પ્રથમ
છેલ્લા
હેન્ડલ
1
ચિહ્ન
ઓટ્ટો
@mdo
2
જેકબ
થોર્ન્ટન
@ચરબી
3
લેરી
પક્ષી
@Twitter
<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>
રિસ્પોન્સિવ કોષ્ટકો
રિસ્પોન્સિવ કોષ્ટકો કોષ્ટકોને સરળતા સાથે આડા સ્ક્રોલ કરવાની મંજૂરી આપે છે. કોઈપણ કોષ્ટકને બધા વ્યૂપોર્ટમાં એક .tableસાથે લપેટીને પ્રતિભાવશીલ બનાવો .table-responsive. અથવા, મહત્તમ બ્રેકપોઇન્ટ પસંદ કરો કે જેની સાથે નું ઉપયોગ કરીને પ્રતિભાવ કોષ્ટક હોય .table-responsive{-sm|-md|-lg|-xl|-xxl}.
વર્ટિકલ ક્લિપિંગ/કાપવું
રિસ્પોન્સિવ કોષ્ટકો ઉપયોગ કરે છે overflow-y: hidden, જે કોઈપણ સામગ્રીને ક્લિપ કરે છે જે કોષ્ટકની નીચે અથવા ટોચની ધારની બહાર જાય છે. ખાસ કરીને, આ ડ્રોપડાઉન મેનુ અને અન્ય તૃતીય-પક્ષ વિજેટોને ક્લિપ કરી શકે છે.
હંમેશા પ્રતિભાવશીલ
દરેક બ્રેકપોઇન્ટ પર, .table-responsiveઆડા સ્ક્રોલિંગ કોષ્ટકો માટે ઉપયોગ કરો.
.table-responsive{-sm|-md|-lg|-xl|-xxl}ચોક્કસ બ્રેકપોઇન્ટ સુધી પ્રતિભાવશીલ કોષ્ટકો બનાવવા માટે જરૂર મુજબ ઉપયોગ કરો . તે બ્રેકપોઇન્ટ અને ઉપરથી, ટેબલ સામાન્ય રીતે વર્તે છે અને આડી રીતે સ્ક્રોલ કરશે નહીં.
જ્યાં સુધી તેમની પ્રતિભાવશીલ શૈલીઓ ચોક્કસ વ્યુપોર્ટ પહોળાઈ પર લાગુ ન થાય ત્યાં સુધી આ કોષ્ટકો તૂટેલા દેખાઈ શકે છે.