Source

ጠረጴዛዎች

የሰንጠረዦችን መርጦ የመግባት ምሳሌዎች (በጃቫ ስክሪፕት ፕለጊኖች በብዛት ጥቅም ላይ ውለው) ከ 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>

# አንደኛ የመጨረሻ ያዝ
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ከክፍል ጋር የተደበቀ ተጨማሪ ጽሑፍ።

ሰንጠረዡን በእያንዳንዱ መግቻ ነጥብ እስከ (ግን ሳይጨምር) 576 ፒክስል፣ 768 ፒክስል፣ 992 ፒክስል እና 1120 ፒክስል በቅደም ተከተል እንዲያሽከረክር .tableበማድረግ ምላሽ ሰጪ ሠንጠረዦችን ማንኛውንም በማጠቅለል ይፍጠሩ።.table-responsive{-sm|-md|-lg|-xl}max-width

አሳሾች በአሁኑ ጊዜ የክልል አውድ መጠይቆችን ስለማይደግፉ እኛ የምንሰራው ውስንነት min-እና max-ቅድመ ቅጥያዎችን እና የእይታ ወደቦችን ከክፍልፋይ ስፋቶች ጋር ነው (ለምሳሌ በአንዳንድ ሁኔታዎች በከፍተኛ ዲፒአይ መሳሪያዎች ላይ ሊከሰት ይችላል) ለእነዚህ ንፅፅሮች ከፍተኛ ትክክለኛነት ያላቸውን እሴቶች በመጠቀም። .

መግለጫ ጽሑፎች

<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 ሕዋስ ሕዋስ ሕዋስ ሕዋስ ሕዋስ
# ርዕስ ርዕስ ርዕስ ርዕስ ርዕስ
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>