Source

ሕብርታት

ብኣጻብዕ ዝቑጸሩ ናይ ሕብሪ ዩቲሊቲ ክፍልታት ብሕብሪ ኣቢልካ ትርጉም ምትሕልላፍ። ንቅዲ ምትእስሳር ምስ ሆቨር ስቴትስ ዝግበር ደገፍ እውን የጠቓልል።

ሕብሪ

.ጽሑፍ-መባእታ

.ጽሑፍ-ካልኣይ ደረጃ

.ጽሑፍ-ዓወት

.ጽሑፍ-ሓደጋ

.ጽሑፍ-መጠንቀቕታ

.ጽሑፍ-ሓበሬታ

.ጽሑፍ-ብርሃን

.ጽሑፍ-ጸልማት

.ጽሑፍ-ዝተዓጽወ

.ጽሑፍ-ጻዕዳ

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

ዓውደ-ጽሑፋዊ ጽሑፍ ክፍልታት እውን ኣብ መልህቕ ምስቲ ዝተዋህበ ሆቨርን ፎኮስን ኩነታት ጽቡቕ ይሰርሑ። ኣስተውዕል እቲ .text-whiteand .text-mutedclass ዝኾነ ናይ ሊንክ ቅዲ የብሉን።

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

ሕብሪ ድሕረ ባይታ

ምስቶም ዓውደ-ጽሑፍ ሕብሪ ክፍልታት ዝመሳሰል፡ ድሕረ ባይታ ናይ ሓደ ባእታ ናብ ዝኾነ ዓውደ-ጽሑፍ ክፍሊ ብቐሊሉ ኣቐምጦ። መልህቕ ኣካላት ኣብ ሆቨር ክጸልምቱ እዮም፣ ልክዕ ከምቲ ናይ ጽሑፍ ክፍልታት። Background utilities do not setcolor , ስለዚ ኣብ ገለ ገለ ኣጋጣሚታት ዩቲሊቲታት ክትጥቀም ክትደሊ ኢኻ .text-*።

.bg-መባእታዊ

.bg-ካልኣይ ደረጃ

.bg-ዓወት

.bg-ሓደጋ

.bg- መጠንቀቕታ

.bg-info ዝብል ጽሑፍ ኣሎ።

.bg-ብርሃን

.bg-ጸልማት

.bg-ጻዕዳ

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

ድሕረ ባይታ ምዕባለ

መዓስ ናብ ሓቂ ይቕየር፣ ናይ ዩቲሊቲ ክፍልታት $enable-gradientsክትጥቀም ትኽእል ኢኻ ። ብነባሪ መልክዑ ፡ ይስረዝ እሞ እዚ ኣብ ታሕቲ ዘሎ ኣብነት ኮነ ኢልካ ይስበር። እዚ ካብታ Bootstrap ክትጥቀም ካብ እትጅምር ህሞት ጀሚሩ ንዝቐለለ ምምዕርራይ ዝግበር እዩ። ነዞም ክፍልታትን ካልእን ንምንቅስቓስ ብዛዕባ ናይ ሳስ ኣማራጺታትና ፍለጡ ።.bg-gradient-$enable-gradients

.bg-gradient-primary ዝብል ጽሑፍ ኣሎ።

.bg-gradient-ካልኣይ ደረጃ

.bg-gradient-success ዝብል ጽሑፍ ኣሎ።

.bg-ግራድየንት-ሓደጋ

.bg-gradient-warning ዝብል ጽሑፍ ኣሎ።

.bg-gradient-info ዝብል ጽሑፍ ኣሎ።

.bg-ግራድየንት-ብርሃን

.bg-ግራድየንት-ጸልማት

<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>

ምስ ፍሉይነት ምግጣም

ሓደ ሓደ ግዜ ብሰንኪ ፍሉይነት ካልእ መምረጺ፡ ዓውደ-ጽሑፋዊ ክፍልታት ኣብ ግብሪ ክውዕሉ ኣይክእሉን እዮም። ኣብ ገለ ገለ ኣጋጣሚታት፡ እኹል መፍትሒ፡ ትሕዝቶ ባእታኻ ኣብ a <div>ምስ ክፍሊ ምጥቕላል እዩ።

ንሓገዝቲ ቴክኖሎጂታት ትርጉም ምትሕልላፍ

ትርጉም ንምውሳኽ ሕብሪ ምጥቃም ስእላዊ ምልክት ጥራይ እዩ ዝህብ፣ እዚ ድማ ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት - ከም ስክሪን ሪደርስ - ኣይመሓላለፍን እዩ። ብሕብሪ ዝተመልከተ ሓበሬታ ወይ ካብቲ ትሕዝቶ ባዕሉ ርኡይ ምዃኑ ኣረጋግጽ (ንኣብነት እቲ ዝርአ ጽሑፍ)፣ ወይ ድማ ብኣማራጺ ኣገባብ ከም ዝሕወስ ኣረጋግጽ፣ ከም ተወሳኺ ጽሑፍ ምስቲ .sr-onlyክፍሊ ዝተሓብአ።