Sourceሰደቓታት
ሰነዳትን ኣብነታትን ናይ ምምራጽ ቅዲ ሰደቓታት (ኣብ ጃቫስክሪፕት ፕላጊናት ዘለዎም ስፍሕ ዝበለ ኣጠቓቕማ ኣብ ግምት ብምእታው) ምስ ቡትስትራፕ።
ብሰንኪ ሰፊሕ ኣጠቓቕማ ሰደቓታት ኣብ መላእ ሳልሳይ ወገን ዊጀት ከም ዓውደ-ኣዋርሕን ዕለት ምልቃምን፡ ሰደቓታትና ምርጫ-ኢን ክኾኑ ዲዛይን ጌርናዮም ኣለና ። Just the base class .table
to any <table>
, ድሕሪኡ ብብሕታዊ ቅዲታት ወይ ዝተፈላለዩ ዝተሓወሱ መቐየሪ ክፍልታትና ኣስፍሕዎ።
እቲ ኣዝዩ መሰረታዊ ዝኾነ ናይ ሰደቓ ምልክት ብምጥቃም .table
፡ ኣብ Bootstrap -based tables ከመይ ይመስሉ እንሆ። ኩሎም ቅዲታት ሰደቓ ኣብ Bootstrap 4 ይውረስ ፣ ማለት ዝኾነ ዝተሰነየ ሰደቓታት ብተመሳሳሊ ኣገባብ ከምቲ ወላዲ ቅዲ ክግበር እዩ።
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ |
እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
ነቶም ሕብርታት እውን ክትገልብጦም ትኽእል ኢኻ-ብፍኹስ ዝበለ ጽሑፍ ኣብ ጸሊም ድሕረ ባይታ-ብ .table-dark
.
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ |
እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
ምስ ሰደቓታትን ጸሊም ሰደቓታትን ዝመሳሰል፡ ናይ መቐየሪ ክፍልታት ተጠቐም .thead-light
ወይ s ፍኹስ ዝበለ ወይ ጸሊም ግራጭ ንኽመስል .thead-dark
ምግባር ።<thead>
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ |
እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ |
እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
.table-striped
ኣብ ዝኾነ መስርዕ ሰደቓ ኣብ ውሽጢ ዜብራ-ስትሪፒንግ ንምውሳኽ ተጠቐም <tbody>
።
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ |
እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ |
እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
.table-bordered
ንዶባት ኣብ ኩሉ ወገን ናይቲ ሰደቓን ዋህዮታትን ወስኸሉ ።
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
.table-borderless
ንዶብ ዘይብሉ ሰደቓ ወስኹሉ ።
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
.table-borderless
ኣብ ጸሊም ጠረጴዛታት እውን ክትጥቀመሉ ትኽእል ኢኻ።
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
ኣብ ውሽጢ .table-hover
ሓደ <tbody>
.
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
.table-sm
ንዋህዮ መሸፈኒ ኣብ ክልተ ብምቑራጽ ጠረጴዛታት ዝያዳ ጽዑቓት ንኽኾኑ ወስኹሉ ።
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
ንመስርዕ ሰደቓ ወይ ንውልቀ ዋህዮታት ሕብሪ ንምሃብ ዓውደ-ጽሑፋዊ ክፍልታት ተጠቐም።
ክፍሊ |
ኣርእስቲ |
ኣርእስቲ |
ንቑሕ |
ዋህዮ |
ዋህዮ |
ትሑዝ |
ዋህዮ |
ዋህዮ |
ቀዳማይ |
ዋህዮ |
ዋህዮ |
ካልኣይ ደረጃ |
ዋህዮ |
ዋህዮ |
ዓወት |
ዋህዮ |
ዋህዮ |
ሓደጋ |
ዋህዮ |
ዋህዮ |
ምኸዳን |
ዋህዮ |
ዋህዮ |
ሓበሬታ |
ዋህዮ |
ዋህዮ |
ብርሃን |
ዋህዮ |
ዋህዮ |
ፀልማት |
ዋህዮ |
ዋህዮ |
ስሩዕ ናይ ሰደቓ ድሕረ ባይታ ፍልልያት ምስቲ ጸሊም ሰደቓ ኣይርከቡን እዮም፣ ይኹን እምበር፣ ተመሳሳሊ ቅዲታት ንምዕዋት ጽሑፍ ወይ ድሕረ ባይታ ውጽኢታት ክትጥቀም ትኽእል ኢኻ።
# |
ኣርእስቲ |
ኣርእስቲ |
1. |
ዋህዮ |
ዋህዮ |
2. |
ዋህዮ |
ዋህዮ |
3. |
ዋህዮ |
ዋህዮ |
4. |
ዋህዮ |
ዋህዮ |
5. |
ዋህዮ |
ዋህዮ |
6. |
ዋህዮ |
ዋህዮ |
7. |
ዋህዮ |
ዋህዮ |
8. |
ዋህዮ |
ዋህዮ |
9. |
ዋህዮ |
ዋህዮ |
ንሓገዝቲ ቴክኖሎጂታት ትርጉም ምትሕልላፍ
ትርጉም ንምውሳኽ ሕብሪ ምጥቃም ስእላዊ ምልክት ጥራይ እዩ ዝህብ፣ እዚ ድማ ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት - ከም ስክሪን ሪደርስ - ኣይመሓላለፍን እዩ። ብሕብሪ ዝተመልከተ ሓበሬታ ወይ ካብቲ ትሕዝቶ ባዕሉ ርኡይ ምዃኑ ኣረጋግጽ (ንኣብነት እቲ ዝርአ ጽሑፍ)፣ ወይ ድማ ብኣማራጺ ኣገባብ ከም ዝሕወስ ኣረጋግጽ፣ ከም ተወሳኺ ጽሑፍ ምስቲ .sr-only
ክፍሊ ዝተሓብአ።
.table
ዝኾነ ምስ ብምጥቕላል ምላሽ ዝህቡ ሰደቓታት ፍጠር .table-responsive{-sm|-md|-lg|-xl}
፣ እቲ ሰደቓ ኣብ ነፍሲ ወከፍ max-width
ነጥቢ ምብታኽ ክሳብ (ግን ከይሓወሰ) ብቕደም ተኸተል ብኣግማድ ክሽክርከር ምግባር።
A <caption>
ከም ርእሲ ሰደቓ ኮይኑ ይሰርሕ። ስክሪን ሪደር ዘለዎም ተጠቀምቲ ሰደቓ ንኽረኽቡን ብዛዕባ እንታይ ምዃኑ ንኽርድኡን ከንብብዎ እንተደልዮም ንኽውስኑን ይሕግዞም።
ዝርዝር ተጠቀምቲ
# |
መጀመርታ |
መጨረሻ |
ኣካይድ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ |
እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
ምላሽ ዝህቡ ሰደቓታት ሰደቓታት ብቐሊሉ ብኣግማድ ንኽንቀሳቐሱ የኽእሉ። ዝኾነ ሰደቓ ኣብ ኩሉ ቪውፖርትታት ምላሽ ዝህብ ግበሮ a .table
with ብምጥቕላል .table-responsive
። ወይ ድማ፡ ብመገዲ ምላሽ ዝህብ ሰደቓ ክሳብ ዝህልወካ ዝለዓለ ናይ ምብታኽ ነጥቢ ምረጽ .table-responsive{-sm|-md|-lg|-xl}
።
ቀጥ ዝበለ ምቑራጽ/ምቑራጽ
ምላሽ ዝህቡ ሰደቓታት ን , ይጥቀሙ overflow-y: hidden
፣ እዚ ድማ ንዝኾነ ካብ ታሕተዋይ ወይ ላዕለዋይ ወሰናት ናይቲ ሰደቓ ዝሓልፍ ትሕዝቶ ይቖርጾ። ብፍላይ እዚ ንቑልቁል ዝወርድ ምልክታታትን ካልኦት ናይ ሳልሳይ ወገን ዊጀታትን ክቖርጾም ይኽእል።
ኣብ ነፍሲ ወከፍ ነጥቢ ምብታኽ .table-responsive
፡ ንኣግማድ ምዝዋር ሰደቓታት ተጠቐም።
# |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
1. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
2. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
3. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
.table-responsive{-sm|-md|-lg|-xl}
ክሳብ ሓደ ፍሉይ ነጥቢ ምብታኽ ምላሽ ዝህቡ ሰደቓታት ንምፍጣር ከም ኣድላይነቱ ተጠቐም ። ካብቲ ምብታኽን ንላዕሊን፡ እቲ ሰደቓ ብንቡር ባህሪ ክህልዎ እምበር ብኣግማድ ኣይክሽክርከርን እዩ።
እዞም ሰደቓታት እዚኦም ምላሽ ዝህቡ ቅዲታቶም ኣብ ፍሉይ ስፍሓት ቪውፖርት ክሳብ ዝትግበሩ ዝተሰብሩ ክመስሉ ይኽእሉ።
# |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
1. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
2. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
3. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
# |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
1. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
2. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
3. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
# |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
1. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
2. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
3. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
# |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
ኣርእስቲ |
1. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
2. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
3. |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |
ዋህዮ |