ሓፈሻዊ ትሕዝቶ

ንዝሓሸ፣ ዝቐልጠፈ፣ ዝሓየለ ምዕባለ መርበብ ሓበሬታና ዝምልከት ኣቀራርባና ሓዊሱ ኣብ ቁልፊ ቁንጣሮ ትሕተ ቅርጺ ቡትስትራፕ ትሑት ዋጋ ርኸብ።

HTML5 ዶክታይፕ

ቡትስትራፕ ዝተወሰኑ ናይ HTML ባእታታትን ናይ CSS ባህርያትን ዝጥቀም ኮይኑ ናይ HTML5 doctype ምጥቃም ዘድልዮም እዩ። ኣብ መጀመርታ ኩሉ ፕሮጀክትታትካ ኣካትትዎ።

<!doctype html>
<html lang="en">
  ...
</html>

ሞባይል መጀመርታ

ምስ ቡትስትራፕ 2፡ ንቐንዲ መዳያት ናይቲ ፍሬምዎርክ፡ ኣማራጺ ንሞባይል ዝምችኡ ቅዲታት ወሲኽና። ምስ ቡትስትራፕ 3፡ ነቲ ፕሮጀክት ካብ መጀመርታ ንሞባይል ምቹእ ክኸውን ዳግማይ ጽሒፍናዮ ኣለና። ኣብ ክንዲ ኣብ ኣማራጺ ሞባይል ቅዲታት ዝውስኹ፡ ትኽ ኢሎም ናብቲ ሕመረት ይጥበሱ። ብሓቂ ቡትስትራፕ መጀመርታ ሞባይል እዩ . ሞባይል ቀዳሞት ቅዲታት ኣብ ክንዲ ኣብ ዝተፈላለዩ ፋይላት ኣብ ምሉእ ቤተ-መጻሕፍቲ ክትረኽቦም ትኽእል ኢኻ።

ግቡእ ምቕራብን ምትንኻፍ ምዕባይን ንምርግጋጽ ፡ ነቲ ናይ ቪውፖርት ሜታ መለለዪ ኣብቲ ናትካ ወስኸሉ <head>።

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noኣብ ሞባይል መሳርሒታት ናይ ምዕባይ ዓቕሚ ኣብቲ viewport meta tag ብምውሳኽ ክትዓጽዎ ትኽእል ኢኻ ። እዚ ድማ ምጉላሕ የሰናኽል፣ ማለት ተጠቀምቲ ምዝዋር ጥራይ እዮም ዝኽእሉ፣ ውጽኢቱ ድማ ናትካ መርበብ ሓበሬታ ቁሩብ ዝያዳ ከም ተወላዲ መተግበሪ ኮይኑ ይስምዓካ። ብሓፈሻ ኣብ ኩሉ መርበብ ሓበሬታ ነዚ ኣይንመክርን ኢና፡ ስለዚ ጥንቃቐ ግበር!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

ቡትስትራፕ መሰረታዊ ዓለማዊ ምርኢት፣ ታይፖግራፊን ቅዲታት ምትእስሳርን የቐምጥ። ብፍላይ ድማ ንሕና፤

  • ኣብ background-color: #fff;ልዕሊ እቲ...body
  • ነቲ @font-family-base, @font-size-base, ከምኡውን @line-height-baseባህርያት ከም ናይ ሕትመት መሰረትና ንጥቀመሉ
  • ነቲ ዓለማዊ ሕብሪ መላግቦ ብመንገዲ @link-colorኣቐምጦን ኣብ ስርዝ ድልዝ ጥራይ ኣተግብርን።:hover

እዞም ቅዲታት ኣብ ውሽጢ scaffolding.less.

ንቡር ምግባር.css

ንዝተመሓየሸ መስቀላዊ ኣቀራርባ፡ Normalize.css ንጥቀም ፡ እዚ ፕሮጀክት ብኒኮላስ ጋላገርን ጆናታን ኒልን ዝተሰርሐ እዩ።

ኮንተይነራት

ቡትስትራፕ ትሕዝቶታት ሳይት ንምጥቕላልን ስርዓት ሽቦና ንምቕማጥን ዝሓዘ ባእታ የድልዮ። ኣብ ፕሮጀክትታትካ ክትጥቀመሎም ካብ ክልተ ኮንተይነራት ሓደ ክትመርጽ ትኽእል ኢኻ። ኣስተውዕል padding፡ ብሰንኪን ካልእን፡ ክልቲኦም መትሓዚታት ዝሰፈሩ ኣይኮኑን።

.containerንሓደ ምላሽ ዝህብ ጽኑዕ ስፍሓት ዘለዎ መትሓዚ ተጠቐም ።

<div class="container">
  ...
</div>

.container-fluidንሙሉእ ስፍሓት ዘለዎ መትሓዚ ተጠቐም ፣ ንኹሉ ስፍሓት ናይቲ ቪውፖርትካ ዝሽፍን እዩ።

<div class="container-fluid">
  ...
</div>

ስርዓት ሽቦ

ቡትስትራፕ ምላሽ ዝህብ፣ ተንቀሳቓሲ ቀዳማይ ፈሳሲ ሽቦ ስርዓት ዘጠቓልል ኮይኑ እቲ መሳርሒ ወይ ቪውፖርት ዓቐን እናወሰኸ ምስ ከደ ብግቡእ ክሳብ 12 ዓምድታት ዝዓቢ እዩ። ንቐሊል ኣማራጺታት ኣቀማምጣ ኣቐዲሞም ዝተነጸሩ ክፍልታት ፡ ከምኡ’ውን ዝያዳ ትርጉማዊ ኣቀማምጣ ንምፍጣር ሓያላት ሚክሲናት የጠቓልል ።

መእተዊ

ስርዓታት ሽቦ ትሕዝቶኻ ዘዕቁቡ ተኸታተልቲ መስመራትን ዓምድታትን ኣቢሎም ኣቀማምጣ ገጽ ንምፍጣር ይጥቀሙ። ስርዓት ሽቦ ቡትስትራፕ ብኸመይ ከም ዝሰርሕ ኣብዚ ኣሎ፤

  • መስመራት ብግቡእ ኣሰላልፋን ምዕሻግን ኣብ ውሽጢ .container(fixed-width) ወይ (full-width) ክቕመጡ ኣለዎም።.container-fluid
  • መስመራት ተጠቒምካ ኣግማድ ጉጅለታት ዓምድታት ምፍጣር።
  • ትሕዝቶ ኣብ ውሽጢ ዓምድታት ክቕመጥ ኣለዎ፣ ዓምድታት ጥራይ ድማ ቅጽበታዊ ደቂ መስመራት ክኾኑ ይኽእሉ።
  • ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታት ከምን ንቕልጡፍ ኣቀማምጣ ሽቦ ንምግባር ይርከቡ .row። .col-xs-4ውሑድ ሚክሲን ንዝያዳ ትርጉማዊ ኣቀማምጣ እውን ክውዕል ይኽእል።
  • ዓምድታት ብመንገዲ padding. እቲ ፓዲንግ ንቐዳማይን ናይ መወዳእታን ዓምዲ ብመንገዲ ኣሉታዊ ወሰን ኣብ .rows ብመስርዕ ይቕየር።
  • እቲ ኣሉታዊ ወሰን ስለምንታይ እዩ እዞም ኣብ ታሕቲ ዘለዉ ኣብነታት ዝወጹ። ኣብ ውሽጢ ዓምድታት ሽቦ ዘሎ ትሕዝቶ ብዘይ ሽቦ ትሕዝቶ ንኽስለፍ እዩ።
  • ዓምድታት ሽቦ ብዝሒ ናይቶም ክትዝርግሖም እትደሊ ዓሰርተው ክልተ ዝርከቡ ዓምድታት ብምግላጽ ይፍጠሩ። ንኣብነት ሰለስተ ማዕረ ዓምድታት ሰለስተ ምተጠቐሙ .col-xs-4.
  • ልዕሊ 12 ዓምድታት ኣብ ውሽጢ ሓደ መስርዕ እንተተቐሚጦም፡ ነፍሲ ወከፍ ጉጅለ ተወሳኺ ዓምድታት፡ ከም ሓደ ኣሃዱ፡ ኣብ ሓድሽ መስመር ክጠቕልል እዩ።
  • ክፍልታት ሽቦ ካብ ዓቐናት ነጥቢ ምብታኽ ዝዓቢ ወይ ማዕረ ስፍሓት ስክሪን ዘለዎም መሳርሒታት ይምልከቱ፣ ንንኣሽቱ መሳርሒታት ዝዓለሙ ክፍልታት ሽቦ ድማ ይሽፍኑ። ስለዚ ንኣብነት ዝኾነ ክፍሊ ኣብ ሓደ ባእታ ምትግባር ኣብ ማእከላይ መሳርሒታት ጥራይ ዘይኮነስ ሓደ ክፍሊ .col-md-*እንተዘይሃልዩ ኣብ ዓበይቲ መሳርሒታት ቅዲኡ ዝጸሉ እዩ።.col-lg-*

ነዞም መትከላት ኣብ ኮድካ ንምትግባር ኣብነታት ርአ።

ናይ ሚድያ ሕቶታት

ኣብ ስርዓት ሽቦና ቁልፊ ምብታኽ ነጥብታት ንምፍጣር ኣብ Less ፋይላትና እዞም ዝስዕቡ ናይ ሚድያ ሕቶታት ንጥቀም።

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

ሓሓሊፍና ነዞም ናይ ሚድያ ሕቶታት ኣስፊሕና max-widthንCSS ናብ ዝጸበበ ስብስብ መሳርሒታት ንምድራት a ነካትት።

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

ናይ ሽቦ ኣማራጺታት

መዳያት ናይ ቡትስትራፕ ግሪድ ስርዓት ኣብ ብዙሓት መሳርሒታት ምስ ሓደ ምቹእ ሰደቓ ብኸመይ ከም ዝሰርሑ ርአ።

ተወሳኺ ንኣሽቱ መሳርሒታት ስልክታት (<768px) ንኣሽቱ መሳርሒታት ጣብላታት (≥768px) ማእከላይ መሳርሒታት ዴስክቶፕ (≥992px) ዓበይቲ መሳርሒታት ዴስክቶፕ (≥1200px)
ናይ ሽቦ ባህሪ ኣብ ኩሉ ግዜ ልኡም ንኽጅምር ዝፈረሰ፣ ልዕሊ ነጥብታት ምብታኽ ኣግማድ
ስፍሓት ኮንተይነር ዝኾነ (ኣውቶ) 750px ዝብል እዩ። 970px ዝብል እዩ። 1170px ዝብል እዩ።
ቅድመ-ጥብቆ ክፍሊ .col-xs- .col-sm- .col-md- .col-lg-
# ናይ ዓምድታት 12.
ስፍሓት ዓምዲ ኣውቶማቲክ ~62px ዝብል እዩ። ~81px ዝብል እዩ። ~97px ዝብል እዩ።
ስፍሓት ጐዳጉዲ 30px (15px ኣብ ነፍሲ ወከፍ ሸነኽ ናይ ሓደ ዓምዲ)
ሰፈር ዘለዎ እወ
ኦፍሴት (ኦፍሴትስ) እወ
ዓምዲ ምእዛዝ እወ

ኣብነት፡-ተደራራቢ-ናብ-ኣግማድ

ሓደ ስብስብ ናይ .col-md-*ሽቦ ክፍልታት ብምጥቃም፡ ኣብ ተንቀሳቐስቲ መሳርሒታትን መሳርሒታት ጣብላን (እቲ ተወሳኺ ንእሽቶ ክሳብ ንእሽቶ ደረጃ) ተደራሪቡ ዝጅምር መሰረታዊ ስርዓተ ሽቦ ክትፈጥር ትኽእል ኢኻ፡ ቅድሚ ኣብ መሳርሒታት ዴስክቶፕ (ማእከላይ) ኣግማድ ምዃኑ። ዓምድታት ሽቦ ኣብ ዝኾነ .row.

.ኮል-ምድ-1
.ኮል-ምድ-1
.ኮል-ምድ-1
.ኮል-ምድ-1
.ኮል-ምድ-1
.ኮል-ምድ-1
.ኮል-ምድ-1
.ኮል-ምድ-1
.ኮል-ምድ-1
.ኮል-ምድ-1
.ኮል-ምድ-1
.ኮል-ምድ-1
.col-md-8 ዝብል ጽሑፍ ኣሎ።
.col-md-4 ዝብል ጽሑፍ ኣሎ።
.col-md-4 ዝብል ጽሑፍ ኣሎ።
.col-md-4 ዝብል ጽሑፍ ኣሎ።
.col-md-4 ዝብል ጽሑፍ ኣሎ።
.col-md-6 ዝብል ጽሑፍ ኣሎ።
.col-md-6 ዝብል ጽሑፍ ኣሎ። 
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

ኣብነት፡ ፈሳሲ ዝሓዘ መትሓዚ

ዝኾነ ውሱን ስፍሓት ዘለዎ ኣቀማምጣ ሽቦ ናብ ምሉእ ስፍሓት ዘለዎ ኣቀማምጣ ቀይሮ ነቲ ደጋዊኻ .containerናብ .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

ኣብነት፡ ሞባይልን ዴስክቶፕን

ዓምድታትካ ኣብ ንኣሽቱ መሳርሒታት ጥራይ ክድምር ኣይትደልን ዲኻ? .col-xs-* .col-md-*ኣብ ዓምድታትካ ብምውሳኽ ነቶም ተወሳኺ ንኣሽቱን ማእከሎትን መሳርሒታት ሽቦ ክፍልታት ተጠቐም ። ኩሉ ብኸመይ ከም ዝሰርሕ ዝሓሸ ሓሳብ ንምርካብ ኣብ ታሕቲ ዘሎ ኣብነት ርአ።

.ኮል-xs-12 .ኮል-ምድ-8
.ኮል-xs-6 .ኮል-ምድ-4
.ኮል-xs-6 .ኮል-ምድ-4
.ኮል-xs-6 .ኮል-ምድ-4
.ኮል-xs-6 .ኮል-ምድ-4
.col-xs-6 ዝብል ጽሑፍ ኣሎ።
.col-xs-6 ዝብል ጽሑፍ ኣሎ። 
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

ኣብነት፡ ሞባይል፡ ጣብላ፡ ዴስክቶፕ

ካብቲ ዝሓለፈ ኣብነት ዝያዳ ዳይናሚክን ሓያልን ኣቀማምጣ ምስ ጣብላ .col-sm-*ክፍልታት ብምፍጣር ምህናጽ።

.ኮል-xs-12 .ኮል-ስም-6 .ኮል-ኤምዲ-8
.ኮል-xs-6 .ኮል-ምድ-4
.ኮል-xs-6 .ኮል-ስም-4
.ኮል-xs-6 .ኮል-ስም-4
.ኮል-xs-6 .ኮል-ስም-4 
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

ኣብነት፡ ዓምዲ ምጥቕላል

ልዕሊ 12 ዓምድታት ኣብ ውሽጢ ሓደ መስርዕ እንተተቐሚጦም፡ ነፍሲ ወከፍ ጉጅለ ተወሳኺ ዓምድታት፡ ከም ሓደ ኣሃዱ፡ ኣብ ሓድሽ መስመር ክጠቕልል እዩ።

.col-xs-9 ዝብል ጽሑፍ ኣሎ።
.col-xs-4
9 + 4 = 13 > 12 ስለ ዝኾነ፡ እዚ 4-ዓምዲ-ስፍሓት ዘለዎ div ከም ሓደ ተተሓሒዙ ኣብ ሓድሽ መስመር ይጥቕለል።
.col-xs-6 ስዒቦም
ዝመጹ ዓምድታት በቲ ሓድሽ መስመር ይቕጽሉ። 
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

ምላሽ ዝህብ ዓምዲ ዳግማይ ምትዕርራይ

ምስቲ ዘሎ ኣርባዕተ ደረጃታት ሽቦታት ኣብ ዝተወሰነ ምብታኽ ነጥብታት፡ ሓደ ካብቲ ካልእ ዝነውሐ ስለዝኾነ፡ ዓምድታትካ ምሉእ ብምሉእ ቅኑዕ ዘይጸርጉሉ ጉዳያት ክትጎዪ ግድን እዩ። ነዚ ንምእራም፡ ውህደት ናይ a .clearfixን ናትና ምላሽ ዝህቡ ዩቲሊቲ ክፍልታትን ተጠቐም ።

.col-xs-6 .col-sm-3 ንዓቐን ቪውፖርትካ ምቕያር
ወይ ንኣብነት ኣብ ስልክኻ ርአ።
.ኮል-xs-6 .ኮል-ስም-3
.ኮል-xs-6 .ኮል-ስም-3
.ኮል-xs-6 .ኮል-ስም-3 
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

ኣብ ርእሲ እቲ ኣብ ምላሽ ዝህቡ ነጥብታት ምብታኽ ዓምዲ ምጽራይ ፡ ንዝተፈላለዩ ምትዕርራያት፡ ምድፋእ ወይ ስሕበት ዳግማይ ምትካል ከድልየካ ይኽእል . ነዚ ብተግባር ኣብቲ ናይ ሽቦ ኣብነት ርአ ።

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

ጐዳጉዲ ኣውጽኡ

ካብ መስርዕ ጓተር ኣውጽእ እሞ ምስ .row-no-guttersክፍሊ ዓምድታት እዩ።

.ኮል-xs-12 .ኮል-ምድ-8
.ኮል-xs-6 .ኮል-ምድ-4
.ኮል-xs-6 .ኮል-ምድ-4
.ኮል-xs-6 .ኮል-ምድ-4
.ኮል-xs-6 .ኮል-ምድ-4
.col-xs-6 ዝብል ጽሑፍ ኣሎ።
.col-xs-6 ዝብል ጽሑፍ ኣሎ። 
<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

ምትዕርራይ ዓምድታት

.col-md-offset-*ክፍልታት ተጠቒምካ ዓምድታት ናብ የማን ኣንቀሳቕሶም ። እዞም ክፍልታት እዚኣቶም ንጸጋማይ ወሰን ናይ ሓደ ዓምዲ *ብዓምድታት ይውስኽዎ። ንኣብነት ኣብ ልዕሊ ኣርባዕተ ዓምድታት .col-md-offset-4ይንቀሳቐስ ።.col-md-4

.col-md-4 ዝብል ጽሑፍ ኣሎ።
.ኮል-ኤምዲ-4 .ኮል-ኤምዲ-ኦፍሴት-4
.ኮል-ኤምዲ-3 .ኮል-ኤምዲ-ኦፍሴት-3
.ኮል-ኤምዲ-3 .ኮል-ኤምዲ-ኦፍሴት-3
.col-md-6 .col-md-ኦፍሴት-3 ዝብል ጽሑፍ ኣሎ። 
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-*-offset-0ካብ ታሕተዎት ደረጃታት ሽቦ ንዝመጹ ኦፍሴት እውን ምስ ክፍልታት ክትሽፍኖም ትኽእል ኢኻ ።

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

ዓምድታት ምድቃል

ትሕዝቶኻ ምስቲ ነባሪ ሽቦ ንምስፋር፡ ኣብ ውሽጢ ሓደ ዝጸንሐ ዓምዲ ሓድሽን .rowስብስብን ዓምድታት ወስኸሉ ። ዝተሰፍሩ መስመራት ክሳብ 12 ወይ ትሕቲኡ ዝድመር ስብስብ ዓምድታት ከጠቓልሉ ኣለዎም (ኩሎም እቶም 12 ዘለዉ ዓምድታት ክትጥቀመሎም ኣየድልን እዩ)።.col-sm-*.col-sm-*

ደረጃ 1፡ .col-sm-9
ደረጃ 2፡ .col-xs-8 .col-sm-6
ደረጃ 2፡ .col-xs-4 .col-sm-6 
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

ዓምዲ ምእዛዝ

ብቐሊሉ ቅደም ተኸተል ናይቶም ኣብ ውሽጢ ዝተሃንጹ ናይ ሽቦ ዓምድታትና .col-md-push-*ምስን .col-md-pull-*መቐየሪ ክፍልታትን ምቕያር።

.ኮል-ምድ-9 .ኮል-ምድ-ፑሽ-3
.ኮል-ምድ-3 .ኮል-ምድ-ስሓብ-9 
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

ውሑድ ሚክሲንን ተለዋዋጢ ረቛሒታትን

ብዘይካ’ቲ ንቕልጡፍ ኣቀማምጣ ዝኸውን ኣቐዲሙ ዝተሃንጸ ናይ ሽቦ ክፍልታት ፡ ቡትስትራፕ ናይ ገዛእ ርእስኻ ቀሊልን ትርጉማዊን ኣቀማምጣ ብቕልጡፍ ንምፍጣር ዝሕግዙ Less variablesን mixinsን የጠቓልል።

ተለዋዋጢ ረቛሒታት

ተለዋዋጢ ቁጽሪ ዓምድታት፣ ስፍሓት ጐዳጉዲን ተንሳፋፊ ዓምድታት ዝጅምረሉ ናይ ሚድያ ሕቶ ነጥቢን ይውስኑ። ነዚኦም ነቶም ኣብ ላዕሊ ዝተሰነዱ ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታት ንምፍጣር ንጥቀመሎም፣ ከምኡ’ውን ነቶም ኣብ ታሕቲ ተዘርዚሮም ዘለዉ ብሕታዊ ምትሕውዋሳት።

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

ሚክሲን ዝበሃሉ ምዃኖም ይፍለጥ

ሚክሲን ምስ ተለዋዋጢ ሽቦ ተተሓሒዙ ንውልቀ ዓምድታት ሽቦ ትርጉማዊ CSS ንምፍጣር ይጥቀሙ።

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

ኣብነት ኣጠቓቕማ

ነቶም ተለዋዋጢ ዋጋታት ናብ ናይ ገዛእ ርእስኻ ብሕታዊ ክብርታት ክትቅይሮም ትኽእል ኢኻ፣ ወይ ድማ ነቶም ሚክሲናት ምስ ነባሪ ክብርታቶም ጥራይ ክትጥቀመሎም ትኽእል ኢኻ። ኣብ መንጎ ክፍተት ዘለዎ ክልተ ዓምዲ ዘለዎ ኣቀማምጣ ንምፍጣር ነባሪ ቅጥዕታት ምጥቃም ኣብነት ኣብዚ ኣሎ።

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

ታይፖግራፊ

ኣርእስታት

ኩሎም ኣርእስታት ኤችቲኤምኤል፣ <h1>ብመንገዲ <h6>፣ ይርከቡ። .h1ብመንገዲ .h6ክፍልታት እውን ይርከቡ፣ ንናይ ሓደ ኣርእስቲ ቅርጺ ቅርጺ ክትሰማማዕ ምስ እትደሊ ግን ገና ጽሑፍካ ኣብ መስመር ክረአ ምስ እትደሊ።

h1. ቡትስትራፕ ዝብል ርእሲ

 ፍርቂ ድሙቕ 36px

h2. ቡትስትራፕ ዝብል ርእሲ

 ፍርቂ ድሙቕ 30px

h3. ቡትስትራፕ ዝብል ርእሲ

 ፍርቂ ድሙቕ 24px

h4. ቡትስትራፕ ዝብል ርእሲ

 ፍርቂ ድሙቕ 18px
h5. ቡትስትራፕ ዝብል ርእሲ
 ፍርቂ ድሙቕ 14px
h6. ቡትስትራፕ ዝብል ርእሲ
 ፍርቂ ድሙቕ 12px 
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

ኣብ ዝኾነ ኣርእስቲ ብሓፈሻዊ <small>መለለዪ ወይ .smallክፍሊ ዝቐለለ ካልኣዊ ጽሑፍ ምፍጣር።

h1. ቡትስትራፕ ኣርእስቲ ካልኣዊ ጽሑፍ

h2. ቡትስትራፕ ኣርእስቲ ካልኣዊ ጽሑፍ

h3. ቡትስትራፕ ኣርእስቲ ካልኣዊ ጽሑፍ

h4. ቡትስትራፕ ኣርእስቲ ካልኣዊ ጽሑፍ
h5. ቡትስትራፕ ኣርእስቲ ካልኣዊ ጽሑፍ
h6. ቡትስትራፕ ኣርእስቲ ካልኣዊ ጽሑፍ
 
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

ኣካል ቅዳሕ

ቡትስትራፕ ዓለማዊ ነባሪ font-size14px , ምስ a line-heightof 1.428 . <body>እዚ ኣብቲን ኩለን ሕጡበ-ጽሑፋትን ይትግበር ። ብተወሳኺ <p>፡ (ሕጡበ-ጽሑፋት) ፍርቂ ናይቲ ዝተቖጽረ መስመር-ቁመት (ብነባሪ 10px) ዝኾነ ታሕተዋይ ወሰን ይረኽቡ።

ኑላም ኪስ ሪሱስ ኤጌት ኡርና ሞሊስ ኦርናረ ቬል ኤው ልዮ። Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ. ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ተሽከርከርቲ።

Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ. ዶነክ ኡላምኮርፐር ኑላ ኖን ሜቱስ ኦክተር ፍሪንጊላ። ዱይስ ሞሊስ፡ ኤስት ኖን ኮሞዶ ሉክቱስ፡ ኒሲ ኤራት ፖርቲቶር ሊጉላ፡ ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት። ዶነክ ኡላምኮርፐር ኑላ ኖን ሜቱስ ኦክተር ፍሪንጊላ።

ማሴናስ ሴድ ዲያም ኤጌት ሪሱስ ቫሪዩስ ብላንዲት ኮፍ ኣሜት ዘይ ማግና. Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus. ዱይስ ሞሊስ፡ ኤስት ኖን ኮሞዶ ሉክቱስ፡ ኒሲ ኤራት ፖርቲቶር ሊጉላ፡ ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት።

<p>...</p>

መሪሕነት ኣካል ቅዳሕ

ብምውሳኽ ንሓደ ሕጡበ ጽሑፍ ፍሉይ ግበሮ .lead.

ቪቫሙስ ሳጂቲስ ላከስ ቬል ኣውጉ ላኦሪት ሩትሩም ፋውሲበስ ዶሎር ኦክተር። ዱይስ ሞሊስ፡ ኤስት ኖን ኮሞዶ ሉክቱስ.

<p class="lead">...</p>

ብውሑድ ዝተሃንጸ

እቲ ናይ ሕትመት ስኬል ኣብ ክልተ Less variables in variables ዝተመርኮሰ እዩ ።less : @font-size-baseand @line-height-base. እቲ ቀዳማይ ኣብ ምሉእ ዝጥቀመሉ መሰረታዊ ቅርጺ-ዓቐን ኮይኑ እቲ ካልኣይ ድማ መሰረታዊ መስመር-ቁመት እዩ። ነቶም ተለዋዋጢ ረቛሒታትን ገለ ቀለልቲ ሒሳብን ተጠቒምና ናይ ኩሉ ዓይነትናን ካልእን ወሰን፡ ፓዲንግን መስመር-ቁመትን ንፈጥር። ንዓኣቶም ብዝጥዕመካ ኣመዓራርዮም ቡትስትራፕ ድማ ይመዓራረዮም።

ኣብ ውሽጢ መስመር ዝርከቡ ባእታታት ጽሑፍ

ምልክት ዘለዎ ጽሑፍ

ንሓደ ጉያ ጽሑፍ ብሰንኪ ኣብ ካልእ ዓውዲ ዘለዎ ተዛማድነት ንምጉላሕ፡ ነቲ <mark>መለለዪ ተጠቐም።

ነቲ ምልክት ምልክት ክትጥቀመሉ ትኽእል ኢኻ።ዝበለፀ ክፋልጽሑፍ.

You can use the mark tag to <mark>highlight</mark> text.

ዝተደምሰሰ ጽሑፍ

ንዝተደምሰሱ ብሎኮታት ጽሑፍ ንምምልካት ነቲ <del>መለለዪ ተጠቐም።

እዚ መስመር ጽሑፍ ከም ዝተደምሰሰ ጽሑፍ ክሕሰብ ተባሂሉ እዩ።

<del>This line of text is meant to be treated as deleted text.</del>

ብጽሑፍ ኣቢሉ ምውቃዕ

ድሕሪ ሕጂ ኣገደስቲ ዘይኮኑ ብሎኮታት ጽሑፍ ንምምልካት ነቲ <s>መለለዪ ተጠቐም።

እዚ መስመር ጽሑፍ እዚ ድሕሪ ደጊም ልክዕ ከም ዘይኰነ ጌርካ ኺሕሰብ ዝዓለመ እዩ።

<s>This line of text is meant to be treated as no longer accurate.</s>

ጽሑፍ ተኣትዩ።

ኣብቲ ሰነድ ተወሳኺ ንምምልካት ነቲ <ins>መለለዪ ተጠቐም።

እዚ መስመር ጽሑፍ እዚ ከም ተወሳኺ ናይቲ ሰነድ ክሕሰብ ተባሂሉ እዩ።

<ins>This line of text is meant to be treated as an addition to the document.</ins>

ስርዝ ድልዝ ዘለዎ ጽሑፍ

ጽሑፍ ንምስማር ነቲ <u>መለለዪ ተጠቐም።

እዚ መስመር ጽሑፍ ከምቲ ዝተሰረዘ ክቐርብ እዩ።

<u>This line of text will render as underlined</u>

ናይ HTML ነባሪ ናይ ምጉላሕ መለለዪታት ምስ ቀለልቲ ቅዲታት ተጠቐም።

ንእሽቶ ጽሑፍ

ንውሽጢ መስመር ወይ ብሎኮታት ጽሑፍ ንምጉላሕ <small>፡ ጽሑፍ ኣብ 85% ዓቐን ናይቲ ወላዲ ንምቕማጥ ነቲ መለለዪ ተጠቐም። font-sizeርእሲ ባእታታት ንዝተሰፈሩ ባእታታት ናይ ገዛእ ርእሶም ይቕበሉ <small>።

ከም ኣማራጺ .smallኣብ ክንዲ ዝኾነ <small>.

እዚ መስመር ጽሑፍ እዚ ከም ረቂቕ ኣጸሓሕፋ ንኽሕሰብ ተባሂሉ እዩ።

<small>This line of text is meant to be treated as fine print.</small>

ድሙቅ

ንሓደ ቁንጣሮ ጽሑፍ ብዝኸበደ ቅርጺ-ክብደት ንምጉላሕ።

እዚ ዝስዕብ ቁንጣሮ ጽሑፍ ከም ድሙቕ ጽሑፍ ይቐርብ ።

<strong>rendered as bold text</strong>

ሰያፍ ፊደላት

ንሓደ ቁንጣሮ ጽሑፍ ብሰያፍ ንምጉላሕ።

እዚ ዝስዕብ ቁንጣሮ ጽሑፍ ከም ሰያፍ ጽሑፍ ተተርጒሙ ኣሎ ።

<em>rendered as italicized text</em>

ተለዋዋጢ ባእታታት

ክትጥቀሙን ብHTML5 <b>ን ናጻ ትኾኑ ። ተወሳኺ ኣገዳስነት ከየመሓላልፍ ቃላት ወይ ሓረጋት ንምጉላሕ ዝዓለመ ክኸውን ከሎ መብዛሕትኡ ንድምጺ፡ ቴክኒካዊ ቃላት ወዘተ ዝኸውን እዩ።<i><b><i>

ናይ ኣሰላልፋ ክፍልታት

ጽሑፍ ብቐሊሉ ናብ ኣካላት ምስ ናይ ጽሑፍ ኣሰላልፋ ክፍልታት ዳግማይ ኣመዓራርዮ።

ንጸጋም ዝተሰለፈ ጽሑፍ።

ኣብ ማእከል ዝተሰለፈ ጽሑፍ።

ብየማን ዝተሰለፈ ጽሑፍ።

ዝተመኽነየ ጽሑፍ።

ዝኾነ መጠቕለሊ ጽሑፍ።

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

ናይ ለውጢ ክፍልታት

ጽሑፍ ኣብ ኣካላት ምስ ናይ ጽሑፍ ርእሰ-ጽሑፍ ክፍልታት ምቕያር።

ብንእሽቶ ፊደል ዘለዎ ጽሑፍ።

ዓቢ ፊደል ዘለዎ ጽሑፍ።

ብዓቢ ፊደል ዝተጻሕፈ ጽሑፍ።

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

ኣሕጽሮተ ቃላት

ቅዲ ዘለዎ ኣተገባብራ ናይ HTML <abbr>ባእታ ንኣሕጽሮተ ቃላትን ኣሕጽሮተ ቃላትን ነቲ ዝተሰፍሐ ስሪት ኣብ ሆቨር ንምርኣይ። ባህሪ ዘለዎም ኣሕጽሮተ ቃላት titleፍኹስ ዝበለ ነጥቢ ዘለዎ ታሕተዋይ ዶብን ኣብ ሆቨር ናይ ሓገዝ መመልከቲን ኣለዎም፣ እዚ ድማ ኣብ ሆቨርን ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታትን ተወሳኺ ዓውደ-ጽሑፍ ይህብ።

መሰረታዊ ኣሕጽሮተ ቃል

ኣሕጽሮተ ቃል ናይቲ ባህሪ ዝብል ቃል attr .

<abbr title="attribute">attr</abbr>

ኢኒሽያሊዝም (ኢኒሽያሊዝም)

.initialismቁሩብ ዝነኣሰ font-size ንምርካብ ኣብ ኣሕጽሮተ ቃል ወስኸሉ ።

HTML ድሕሪ ዝተቖርጸ ባኒ እቲ ዝበለጸ ነገር እዩ።

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

ኣድራሻታት

ንዝቐረበ ኣቦሓጎ ወይ ንመላእ ኣካል ስራሕ ርክብ ሓበሬታ ምቕራብ። ንኹሎም መስመራት ብ <br>.

ትዊተር፡ ኢንክ
1355 ማርኬት ስትሪት፡ ሱት 900
ሳን ፍራንሲስኮ፡ ሲኤ 94103
ፒ ፡ (123) 456-7890
ምሉእ ስም
[email protected] 
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

ብሎክኮትስ

ኣብ ውሽጢ ሰነድካ ካብ ካልእ ምንጪ ንዝተረኽበ ብሎኮታት ትሕዝቶ ንምጥቃስ።

ነባሪ ብሎክኮት።

<blockquote>ዝኾነ ኤችቲኤምኤል ከም ጥቕሲ ጠቕልሎ ። ትኽ ዝበለ ጥቕስታት፡ ንሕና ንመክር <p>.

ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

ናይ ብሎክኮት ኣማራጺታት

ቅዲን ትሕዝቶን ንቐለልቲ ፍልልያት ኣብ ሓደ ደረጃ ይቕየር <blockquote>.

ምንጪ ምጽዋዕ

<footer>ምንጪ ንምልላይ a ወስኹሉ ። ስም ናይቲ ምንጪ ስራሕ ኣብ <cite>.

ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante.

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ 
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ተለዋዋጢ ምልክታት

.blockquote-reverseንየማን ዝተሰለፈ ትሕዝቶ ዘለዎ ብሎክኮት ወስኹሉ ።

ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante.

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ 
<blockquote class="blockquote-reverse">
  ...
</blockquote>

ዝርዝራት

ዘይተኣዘዘ

እቲ ቅደም ተኸተል ብግልጺ ኣገዳስነት ዘይብሉ ዝርዝር ነገራት።

  • ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት።
  • ኮንሰክተተር ኣዲፒሲንግ ኤሊት
  • ምሉእ ቁጽሪ ሞለስቲ ሎረም ኣብ ማሳ
  • ፋሲሊሲስ ኣብ ፕሪቲየም ኒስል ኣሊኬት
  • ኑላ ቮሉትፓት ኣሊኳም ቬሊት።
    • ፋሰለስ ኢያኩሊስ ነከ ዝበሃል እዩ።
    • ፑሩስ ሶዳለስ ኡልትሪሲስ
    • ቬስቲቡሉም ላኦሪት ፖርቲቶር ሴም
    • ኣክ ትሪስቲክ ሊበሮ ቮሉትፓት ኣብ
  • ፋውሲቡስ ፖርታ ላከስ ፍሪንጊላ ቬል
  • ኤንየን ኮፍ ኣመት ኤራት ኑንክ
  • ኤጌት ፖርቲቶር ሎረም
<ul>
  <li>...</li>
</ul>

ተኣዚዙ

እቲ ስርዓት ብግልጺ ኣገዳሲ ዝኾነሉ ዝርዝር ነገራት ።

  1. ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት።
  2. ኮንሰክተተር ኣዲፒሲንግ ኤሊት
  3. ምሉእ ቁጽሪ ሞለስቲ ሎረም ኣብ ማሳ
  4. ፋሲሊሲስ ኣብ ፕሪቲየም ኒስል ኣሊኬት
  5. ኑላ ቮሉትፓት ኣሊኳም ቬሊት።
  6. ፋውሲቡስ ፖርታ ላከስ ፍሪንጊላ ቬል
  7. ኤንየን ኮፍ ኣመት ኤራት ኑንክ
  8. ኤጌት ፖርቲቶር ሎረም
<ol>
  <li>...</li>
</ol>

ቅዲ ዘይብሉ

ኣብ ዝርዝር ነገራት ዘሎ ነባሪን list-styleጸጋማይን ወሰን ኣውጽእ (ቅጽበታዊ ቆልዑ ጥራይ)። እዚ ንናይ ቀረባ ቆልዑ ዝርዝር ነገራት ጥራይ እዩ ዝምልከት , ማለት ንዝኾነ ዝተሰነየ ዝርዝር እውን ክፍሊ ክትውስኽ ከድልየካ እዩ።

  • ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት።
  • ኮንሰክተተር ኣዲፒሲንግ ኤሊት
  • ምሉእ ቁጽሪ ሞለስቲ ሎረም ኣብ ማሳ
  • ፋሲሊሲስ ኣብ ፕሪቲየም ኒስል ኣሊኬት
  • ኑላ ቮሉትፓት ኣሊኳም ቬሊት።
    • ፋሰለስ ኢያኩሊስ ነከ ዝበሃል እዩ።
    • ፑሩስ ሶዳለስ ኡልትሪሲስ
    • ቬስቲቡሉም ላኦሪት ፖርቲቶር ሴም
    • ኣክ ትሪስቲክ ሊበሮ ቮሉትፓት ኣብ
  • ፋውሲቡስ ፖርታ ላከስ ፍሪንጊላ ቬል
  • ኤንየን ኮፍ ኣመት ኤራት ኑንክ
  • ኤጌት ፖርቲቶር ሎረም
<ul class="list-unstyled">
  <li>...</li>
</ul>

ኣብ መስመር

ኩሎም ናይ ዝርዝር ነገራት ኣብ ሓደ መስመር display: inline-block;ምስን ገለ ብርሃን መሸፈኒን ኣቐምጦም።

  • ሎረም ኢፕሱም
  • ፋሰለስ ኢያኩሊስ ዝበሃል እዩ።
  • ኑላ ቮሉትፓት።
<ul class="list-inline">
  <li>...</li>
</ul>

መግለፂ

ዝርዝር ቃላት ምስ ተዛመድቲ መግለጺታቶም።

መግለጺ ዝርዝር
ዝርዝር መግለጺ ቃላት ንምግላጽ ፍጹም እዩ።
ዩይስሞድ
ቬስቲቡሉም ኢድ ሊጉላ ፖርታ ፌሊስ ዩስሞድ ሴምፐር ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት.
Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus.
ማሌሱዋዳ ፖርታ
ኢትያም ፖርታ ሰም ማሌሱዋዳ ማግና ሞሊስ ዩይስሞድ። 
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

ልኡል መግለጺ

ቃላትን መግለጺታትን ኣብ <dl>መስርዕ ጎኒ ንጎኒ ምግባር። ከም ነባሪ s ተደራሪቡ ይጅምር <dl>፣ ግን እቲ navbar ምስ ዝሰፍሕ፣ ነዚኦም እውን ከምኡ ግበሩ።

መግለጺ ዝርዝር
ዝርዝር መግለጺ ቃላት ንምግላጽ ፍጹም እዩ።
ዩይስሞድ
ቬስቲቡሉም ኢድ ሊጉላ ፖርታ ፌሊስ ዩስሞድ ሴምፐር ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት.
Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus.
ማሌሱዋዳ ፖርታ
ኢትያም ፖርታ ሰም ማሌሱዋዳ ማግና ሞሊስ ዩይስሞድ።
ፌሊስ ዩስሞድ ሴምፐር ኤጌት ላሲንያ
ፉስ ዳፒቡስ፡ ቴሉስ ኣክ ከርሱስ ኮሞዶ፡ ቶርቶር ማውሪስ ኮንዲመንቱም ኒብህ፡ ኡት ፈርመንቱም ማሳ ጁስቶ ኮፍ ኣሜት ሪሱስ። 
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

ኣውቶ-ምቑራጽ

ዝርዝር መግለጺታት ኣግማድ ነቶም ኣብ ጸጋማይ ዓምዲ ምስ ክሰማምዑ ኣዝዮም ነዊሕ ዝኾኑ ቃላት ክቖርጹ እዮም text-overflow። ኣብ ዝጸበቡ ቪውፖርትታት፡ ናብቲ ነባሪ ዝተደራረበ ኣቀማምጣ ክቕየሩ እዮም።

ኮድ

ኣብ መስመር

ኣብ ውሽጢ መስመር ዝርከቡ ቁንጣሮ ኮድ ብ <code>.

ንኣብነት <section>ከም ውሽጢ መስመር ክጥቕለል ይግባእ። 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ናይ ተጠቃሚ ምእታው

<kbd>ብተለምዶ ብመንገዲ ቁልፊ ሰሌዳ ዝኣቱ ምእታው ንምምልካት the ተጠቐም ።

ማህደራት ንምቕያር cd፡ ስም ናይቲ ማህደር ስዒቡ ጽሓፍ።
ቅጥዕታት ንምእራም፡ ንጽቀጥ ctrl + , 
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

መሰረታዊ ብሎክ

<pre>ንብዙሓት መስመራት ኮድ ተጠቐም ። ንግቡእ ምቕራብ ኣብቲ ኮድ ካብ ዝኾነ ናይ ኩርናዕ ቅንጥብጣብ ምህዳምካ ኣረጋግጽ።

<p>ኣብዚ ናሙና ጽሑፍ...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

ብኣማራጺ ነቲ ክፍሊ ክትውስኾ ትኽእል ኢኻ .pre-scrollable፣ እዚ ድማ max-height 350px ከቐምጥን y-axis scrollbar ክህብን እዩ።

ተለዋዋጢ ረቛሒታት

ንተለዋዋጢ ረቛሒታት ንምምልካት ነቲ <var>መለለዪ ተጠቐም።

y = m x + ለ ዝብል ጽሑፍ ኣሎ።

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ናሙና ውጽኢት

ንመመልከቲ ብሎኮታት ናሙና ውጽኢት ካብ ሓደ ፕሮግራም ነቲ <samp>መለለዪ ተጠቐም።

እዚ ጽሑፍ እዚ ከም ናሙና ውጽኢት ካብ ፕሮግራም ኮምፒተር ክሕሰብ ዝዓለመ እዩ።

<samp>This text is meant to be treated as sample output from a computer program.</samp>

ሰደቓታት

መሰረታዊ ኣብነት

ንመሰረታዊ ቅዲ-ቀሊል መሸፈኒን ኣግማድ መከፋፈልቲ ጥራይን-መሰረት ክፍሊ .tableኣብ ዝኾነ <table>. ልዕሊ ዓቐን ተደራራቢ ክመስል ይኽእል እዩ፡ ግን ንኻልኦት ፕላጊናት ከም ካላንደርን ዕለት መምረጺን ዝኣመሰሉ ሰደቓታት ብሰፊሑ ምጥቃሞም ኣብ ግምት ብምእታው፡ ንሕና ንባህላዊ ቅዲ ሰደቓታትና ክንነጽሎ መሪጽና ኣለና።

ኣማራጺ ናይ ሰደቓ መግለጺ።
# ናይ መጀመርታ ሽም ናይ መወዳእታ ሽም ስም ተጠቃሚ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table">
  ...
</table>

ስሪት ዘለዎም መስርዕ

.table-stripedኣብ ዝኾነ መስርዕ ሰደቓ ኣብ ውሽጢ ዜብራ-ስትሪፒንግ ንምውሳኽ ተጠቐም <tbody>።

ስግረ-ብራውዘር ምትእስሳር

ስሪት ዘለዎም ሰደቓታት ብመንገዲ :nth-childCSS መምረጺ ቅዲ ይግበሩ፣ እዚ ድማ ኣብ ኢንተርነት ኤክስፕሎረር 8 ኣይርከብን።

# ናይ መጀመርታ ሽም ናይ መወዳእታ ሽም ስም ተጠቃሚ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-striped">
  ...
</table>

ዶብ ዘለዎ ጠረጴዛ

.table-borderedንዶባት ኣብ ኩሉ ወገን ናይቲ ሰደቓን ዋህዮታትን ወስኸሉ ።

# ናይ መጀመርታ ሽም ናይ መወዳእታ ሽም ስም ተጠቃሚ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-bordered">
  ...
</table>

መስመራት ምሕንባስ

ኣብ ውሽጢ .table-hoverሓደ <tbody>.

# ናይ መጀመርታ ሽም ናይ መወዳእታ ሽም ስም ተጠቃሚ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-hover">
  ...
</table>

ዝተሓጽረ ጠረጴዛ

.table-condensedንዋህዮ መሸፈኒ ኣብ ክልተ ብምቑራጽ ጠረጴዛታት ዝያዳ ጽዑቓት ንኽኾኑ ወስኹሉ ።

# ናይ መጀመርታ ሽም ናይ መወዳእታ ሽም ስም ተጠቃሚ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ። 
<table class="table table-condensed">
  ...
</table>

ዓውደ-ጽሑፋዊ ክፍልታት

ንመስርዕ ሰደቓ ወይ ንውልቀ ዋህዮታት ሕብሪ ንምሃብ ዓውደ-ጽሑፋዊ ክፍልታት ተጠቐም።

ክፍሊ መግለፂ
.active ነቲ ናይ ሆቨር ሕብሪ ኣብ ሓደ ፍሉይ መስርዕ ወይ ዋህዮ ይትግብሮ
.success ዕዉት ወይ ኣወንታዊ ስጉምቲ ከም ዝወሰደ የመልክት።
.info ገለልተኛ መሃሪ ለውጢ ወይ ስጉምቲ ከምዘሎ የመልክት።
.warning ቆላሕታ ከድልዮ ዝኽእል መጠንቀቕታ የመልክት።
.danger ሓደገኛ ወይ ኣሉታዊ ክኸውን ዝኽእል ስጉምቲ የመልክት።
# ኣርእስቲ ዓምዲ ኣርእስቲ ዓምዲ ኣርእስቲ ዓምዲ
1. ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ
2. ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ
3. ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ
4. ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ
5. ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ
6. ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ
7. ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ
8. ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ
9. ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ ትሕዝቶ ዓምዲ 
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

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

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

ምላሽ ዝህቡ ሰደቓታት

.tableዝኾነ in ብምጥቕላል .table-responsiveኣብ ንኣሽቱ መሳርሒታት (ትሕቲ 768px) ብኣግማድ ከም ዝሽከል ብምግባር ምላሽ ዝህቡ ሰደቓታት ፍጠር። ካብ 768px ስፍሓት ንላዕሊ ዝኾነ ነገር ክትዕዘብ ከለኻ፡ ኣብዞም ሰሌዳታት ዝኾነ ፍልልይ ኣይትርእን ኢኻ።

ቀጥ ዝበለ ምቑራጽ/ምቑራጽ

ምላሽ ዝህቡ ሰደቓታት ን , ይጥቀሙ overflow-y: hidden፣ እዚ ድማ ንዝኾነ ካብ ታሕተዋይ ወይ ላዕለዋይ ወሰናት ናይቲ ሰደቓ ዝሓልፍ ትሕዝቶ ይቖርጾ። ብፍላይ እዚ ንቑልቁል ዝወርድ ምልክታታትን ካልኦት ናይ ሳልሳይ ወገን ዊጀታትን ክቖርጾም ይኽእል።

ፋየርፎክስን ፊልድሴትን ዝበሃሉ ምዃኖም ይፍለጥ

ፋየርፎክስ ገለ ጽዩፍ ፊልድሴት ቅዲ ኣለዎ widthንሱ ድማ ኣብቲ ምላሽ ዝህብ ሰደቓ ጣልቃ ዝኣቱ እዩ። እዚ ብዘይ ኣብ ቡትስትራፕ ዘይንህቦ ንፋየርፎክስ ዝምልከት ሃክ ክግለጽ ኣይክእልን እዩ ፤

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

ንዝያዳ ሓበሬታ ፡ ነዚ መልሲ ስታክ ኦቨርፍሎው ኣንብብዎ ።

# ኣርእስቲ ሰደቓ ኣርእስቲ ሰደቓ ኣርእስቲ ሰደቓ ኣርእስቲ ሰደቓ ኣርእስቲ ሰደቓ ኣርእስቲ ሰደቓ
1. ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ
2. ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ
3. ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ
# ኣርእስቲ ሰደቓ ኣርእስቲ ሰደቓ ኣርእስቲ ሰደቓ ኣርእስቲ ሰደቓ ኣርእስቲ ሰደቓ ኣርእስቲ ሰደቓ
1. ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ
2. ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ
3. ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ ዋህዮ ሰደቓ 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ቅጥዕታት

መሰረታዊ ኣብነት

ውልቃዊ ቅጥዒ መቆጻጸሪታት ብኣውቶማቲክ ገለ ዓለማዊ ቅዲ ይቕበሉ። ኩሎም ጽሑፋዊ <input>, <textarea>, ከምኡውን <select>ባእታታት ምስ ብነባሪ .form-controlናብ ይቕመጡ። ንዝበለጸ ርሕቀት width: 100%;ምልክታትን ቁጽጽርን ኣብ ውሽጢ ጠቕልል።.form-group

ኣብነት ናይ ብሎክ-ደረጃ ሓገዝ ጽሑፍ ኣብዚ።

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ናይ ቅጥዒ ጉጅለታት ምስ ናይ እታዎት ጉጅለታት ኣይትሕወሱ

ናይ ቅጥዒ ጉጅለታት ብቐጥታ ምስ ናይ እታዎት ጉጅለታት ኣይትሕወሱ ። ኣብ ክንድኡስ፡ ነቲ ናይ ምእታው ጉጅለ ኣብ ውሽጢ ናይቲ ቅጥዒ ጉጅለ ሰፈር።

ኣብ መስመር ዝርከብ ቅጥዒ

.form-inlineኣብ ቅጥዒኻ ወስኸሉ (እዚ ግድን ሓደ ክኸውን የብሉን <form>) ንጸጋም-ዝተሰለፉን ኣብ ውሽጢ-መስመር-ብሎክን ቁጽጽራት። እዚ ኣብ ውሽጢ ቪውፖርት ዝርከቡ ቅጥዕታት ብውሑዱ 768px ስፍሓት ዘለዎም ጥራይ እዩ ዝምልከት።

ብሕታዊ ስፍሓት ክሓትት ይኽእል።

እታዎታትን ምምራጽን width: 100%;ኣብ ቡትስትራፕ ብነባሪ ተግባራዊ ኮይኖም ኣለዉ። width: auto;ኣብ ውሽጢ ናይ ውሽጢ መስመር ቅጥዕታት ፡ ብዙሓት ቁጽጽራት ኣብ ሓደ መስመር ክነብሩ ምእንቲ ናብኡ ዳግማይ ንሰርዖ። ከከም ኣቀማምጣኻ ተወሳኺ ብሕታዊ ስፍሓት ከድልየካ ይኽእል እዩ።

ኩሉ ግዜ ስያመታት ወስኹ

ንነፍሲ ወከፍ እታዎት ምልክት እንተዘይኣእቲኻዮ፡ ኣንበብቲ ስክሪን ኣብ ቅጥዕታትካ ጸገም ክህልዎም እዩ። .sr-onlyነዞም ኣብ ውሽጢ መስመር ዝርከቡ ቅጥዕታት፡ ነቲ ክፍሊ ተጠቒምካ ነቶም ስያመታት ክትሓብኦም ትኽእል ኢኻ ። ንሓገዝቲ ቴክኖሎጂታት ምልክት ንምሃብ ተወሳኺ ኣማራጺ ሜላታት ኣሎ፡ ከም aria-label, aria-labelledbyወይ titleባህሪ። ካብዚኦም ዝኾነ እንተዘይሃልዩ፡ ኣንበብቲ ስክሪን ነቲ placeholderባህሪ ክጥቀሙ ይኽእሉ እዮም፡ እንተሃልዮም፡ ግን placeholderከም መተካእታ ንኻልኦት ሜላታት ምልክት ምጥቃም ከምዘይምከር ኣስተውዕል።

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
$
.00 ዝብል እዩ። 
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

ልኡል ቅርጺ

ናይ Bootstrap ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታት ተጠቒምካ ስያመታትን ጉጅለታት ናይ ቅጥዒ ቁጽጽርን ኣብ ኣግማድ ኣቀማምጣ .form-horizontalኣብቲ ቅጥዒ ብምውሳኽ (እዚ ግድን ሓደ ክኸውን የብሉን <form>) ኣሰላልፋ። ከምኡ ምግባር s ከም ሽቦ መስመራት ንኽመላለስ ይቕይሮ .form-group፣ ስለዚ .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

ዝድገፉ ቁጽጽር

ኣብነታት ናይ መደበኛ ቅጥዒ ቁጽጽር ኣብ ኣብነት ቅጥዒ ኣቀማምጣ ዝድገፉ።

እታዎታት

ዝበዝሑ ልሙዳት ምቁጽጻር ቅጥዒ፣ ኣብ ጽሑፍ ዝተመርኮሱ ናይ ምእታው ዓውድታት። ንኹሎም ዓይነታት HTML5 ዝኸውን ደገፍ የጠቓልል: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, ከምኡውን color.

ዓይነት መግለጺ የድሊ

እታዎታት ምሉእ ብምሉእ ቅዲ ዝግበረሎም ናቶም typeብግቡእ ምስ ዝእወጅ ጥራይ እዩ።

<input type="text" class="form-control" placeholder="Text input">

እታዎታት ጉጅለታት

ቅድሚን/ወይ ድሕሪን ዝኾነ ጽሑፍ መሰረት ዝገበረ ዝተዋሃሃደ ጽሑፍ ወይ መጠወቒታት ንምውሳኽ ፡ ነቲ <input>ናይ ምእታው ጉጅለ ክፍሊ ርአ ።

Textarea ዝብል ጽሑፍ ኣሎ።

ንብዙሓት መስመራት ጽሑፍ ዝድግፍ ምቁጽጻር ቅጥዒ። rowsከም ኣድላይነቱ ባህሪ ምቕያር ።

<textarea class="form-control" rows="3"></textarea>

ሳጹናት ምልክትን ሬድዮታትን

ሳጹናት ምልክት ኣብ ሓደ ዝርዝር ሓደ ወይ ሓያሎ ኣማራጺታት ንምምራጽ ክኸውን ከሎ፡ ሬድዮታት ድማ ካብ ብዙሓት ሓደ ኣማራጺ ንምምራጽ ዝሕግዙ እዮም።

ዝተሰናኸሉ ሳጹናት ምልክትን ሬድዮታትን ይድገፉ እዮም፣ ግን ኣብ ምዝዋር ናይቲ ወላዲ "ዘይፍቀድ" መመልከቲ ንምሃብ ፣ ነቲ ክፍሊ ናብቲ ወላዲ , , , ወይ <label>ክትውስኾ ከድልየካ እዩ ።.disabled.radio.radio-inline.checkbox.checkbox-inline

ነባሪ (ተደራሪቡ) .


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

ኣብ መስመር ዝርከቡ ሳጹናት ምልክትን ሬድዮታትን

ኣብ ሓደ መስመር ንዝረኣዩ ቁጽጽር ኣብ ተኸታታሊ ሳጹናት ምልክት ወይ ሬድዮታት ዝርከቡ .checkbox-inlineወይ ክፍልታት ተጠቐም ።.radio-inline


<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

ምልክት ጽሑፍ ዘይብሎም ሳጹናት ምልክትን ሬድዮታትን

ኣብ ውሽጢ እቲ ጽሑፍ እንተዘይብልካ <label>፡ እቲ እታው ከምቲ ትጽቢትካ ይቕመጥ። ኣብዚ እዋን ኣብ መስመር ዘይርከቡ ሳጹናት ምልክትን ሬድዮታትን ጥራይ እዩ ዝሰርሕ። ሕጂ’ውን ንሓጋዚ ቴክኖሎጂታት ገለ ዓይነት ምልክት ምሃብ ኣይትረስዕ (ንኣብነት ምጥቃም aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

ይመርጽ

border-radiusብዙሓት ተወለድቲ ምምራጽ ምልክታታት-ማለት ኣብ ሳፋሪን ክሮምን-ብመንገዲ ንብረት ክቕየሩ ዘይክእሉ ክቡባት ኩርናዓት ከም ዘለዎም ኣስተውዕል ።

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

ንመቆጻጸሪታት <select>ምስ multipleባህሪ፡ ብዙሓት ኣማራጺታት ብነባሪ ይርኣዩ።

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

ስታትቲካዊ ምቁጽጻር

ኣብ ውሽጢ ሓደ ቅጥዒ ኣብ ጎኒ ናይ ቅጥዒ ስያመ ንጹር ጽሑፍ ከተቐምጥ ኣብ ዘድልየካ እዋን፡ ነቲ .form-control-staticክፍሊ ኣብ ሓደ ተጠቐመሉ <p>።

ኢመይል@ኣብነት.com ክትረኽቡ ትኽእሉ ኢኹም።

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

ኢመይል@ኣብነት.com ክትረኽቡ ትኽእሉ ኢኹም።

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

ትኹረት ኩነታት

outlineኣብ ገለ ቅጥዒ ቁጽጽር ዝርከቡ ነባሪ ቅዲታት ነወግዶም እሞ box-shadowኣብ ክንድኡ ን :focus.

ዲሞ :focusግዝኣት

እዚ ኣብ ላዕሊ ዝተጠቕሰ ኣብነት ምእታው ኣብ ሰነድና ብሕታዊ ቅዲታት ብምጥቃም :focusኣብ ሓደ .form-control.

ስንክልና ዘለዎ ኩነታት

disabledተጠቃሚ ምትእስሳር ንምክልኻል ኣብ ሓደ እታው ቡልያን ባህሪ ምውሳኽ ። ዝተሰናኸሉ እታዎታት ቀለልቲ ኮይኖም ይረኣዩን not-allowedመመልከቲ ይውስኹን።

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

ዝተሰናኸሉ ስብስባት ሜዳ

disabledነቲ ባህሪ ናብ a ወስኸሉ <fieldset>ንኹሎም ኣብ ውሽጢ እቲ ዘለዉ ቁጽጽራት <fieldset>ብሓንሳብ ንምስንኻል።

መጠንቀቕታ ብዛዕባ ሊንክ ተግባር ናይ...<a>

ብነባሪ፡ ዳህሰስቲ ንኹሎም ኣብ ውሽጢ a ዝርከቡ ተወላዲ ቅጥዒ ቁጽጽር ( <input>፡ ከምኡ’ውን ባእታታት) ከም ዝተሰናኸሉ ክሕዝዎም እዮም፡ እዚ ድማ ንኽልቲኦም ናይ ቁልፊ ሰሌዳን ማውስን ምትእስሳር ኣብኦም ክኽልክሉ እዮም <select>። ይኹን እምበር፡ ቅጥዕኻ ባእታታት እውን ዘጠቓለለ እንተኾይኑ፡ እዚኦም ቅዲ ናይ . ከምቲ ኣብቲ ብዛዕባ ዝተሰናኸለ ኩነታት መጠወቒታት ዝብል ክፋል (ብፍላይ ድማ ኣብቲ ንኡስ ክፍሊ ንኣንኮር ባእታታት) ዝተገልጸ፡ እዚ ናይ CSS ንብረት ገና ደረጃ ዘለዎ ኣይኮነን ኣብ ኦፔራ 18ን ትሕቲኡን ምሉእ ብምሉእ ኣይተደገፈን፡ ወይ ኣብ ኢንተርነት ኤክስፕሎረር 11፡ ተዓዊቱ 't ተጠቀምቲ ቁልፊ ሰሌዳ ነዞም መላግቦታት ከተኩሩ ወይ ከየንቀሳቕሱ ከምዘይክእሉ ይከላኸል። ስለዚ ውሑስ ንምዃን፡ ከምዚ ዝኣመሰለ መላግቦታት ንምዕጻው ብሕታዊ ጃቫስክሪፕት ተጠቐም።<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

ስግረ-ብራውዘር ምትእስሳር

ቡትስትራፕ ነዞም ቅዲታት ኣብ ኩሎም ዳህሰስቲ ክጥቀመሎም እንከሎ፡ ኢንተርነት ኤክስፕሎረር 11ን ትሕቲኡን ግን ነቲ disabledባህሪ ኣብ ሓደ <fieldset>. ኣብዞም ዳህሰስቲ ንዘሎ ስብስብ ዓውዲ ንምስንኻል ብሕታዊ ጃቫስክሪፕት ተጠቐም።

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

ንንባብ ጥራይ ምግላጽ

readonlyናይቲ እታው ዋጋ ምምሕያሽ ንምክልኻል ኣብ ሓደ እታው ቡልያን ባህሪ ምውሳኽ ። ንንባብ ጥራይ ዝኸውን እታዎታት ቀለልቲ ይመስሉ (ልክዕ ከምቲ ዝተሰናኸሉ እታዎታት)፣ ግን ነቲ መደበኛ መመልከቲ ይዕቅብዎ።

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

ናይ ሓገዝ ጽሑፍ

ንመቆጻጸሪታት ቅጥዒ ዝኸውን ናይ ብሎክ ደረጃ ሓገዝ ጽሑፍ።

ናይ ሓገዝ ጽሑፍ ምስ ቁጽጽር ቅጥዒ ምትእስሳር

ናይ ሓገዝ ጽሑፍ ምስቲ ምስቲ ባህሪ ምጥቃም ዝዛመድ ናይ ቅጥዒ ምቁጽጻር ብግልጺ ክተሓሓዝ ኣለዎ aria-describedby። እዚ ድማ ሓገዝቲ ቴክኖሎጂታት - ከም ስክሪን ሪደርስ - ተጠቃሚ ኣብቲ ቁጽጽር ኣብ ዘተኮረሉ ወይ ምስ ኣተወ ነዚ ናይ ሓገዝ ጽሑፍ ከም ዘበስሩ ከረጋግጽ እዩ።

ናብ ሓድሽ መስመር ዝሰብርን ኪኖ ሓደ መስመር ክዝርጋሕ ዝኽእልን ብሎክ ናይ ሓገዝ ጽሑፍ። 
<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

ናይ ምጽዳቕ ኩነታት

ቡትስትራፕ ንጌጋ፣ መጠንቀቕታን ናይ ዓወት ኩነታትን ኣብ ቅጥዒ ቁጽጽር ቅዲታት ምጽዳቕ የጠቓልል። ንምጥቃም ፡ ፡ ፡ ወይ ኣብቲ ወላዲ ባእታ ምውሳኽ .has-warning። ዝኾነ , , ከምኡውን ኣብ ውሽጢ እቲ ባእታ ናይ ምጽዳቕ ቅዲታት ክቕበል እዩ።.has-error.has-success.control-label.form-control.help-block

ንሓገዝቲ ቴክኖሎጂታትን ሕብሪ ዘይብሎም ተጠቀምትን ናይ ምጽዳቕ ኩነታት ምትሕልላፍ

ነዞም ናይ ምጽዳቕ ቅዲታት ንኹነታት ናይ ሓደ ቅጥዒ ምቁጽጻር ንምምልካት ምጥቃም፡ ስእላዊ፡ ኣብ ሕብሪ ዝተመርኮሰ ምልክት ጥራይ እዩ ዝህብ፡ እዚ ድማ ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት - ከም ስክሪን ኣንበብቲ - ወይ ናብ ሕብሪ ዘይዓወሩ ተጠቀምቲ ኣይመሓላለፍን እዩ።

ኣማራጺ ምልክት መንግስቲ እውን ከም ዝቐርብ ምርግጋጽ። ንኣብነት፡ ኣብቲ ናይ ቅጥዒ ቁጽጽር <label>ጽሑፍ ባዕሉ ብዛዕባ ኩነታት ምልክት ከተእቱ ትኽእል ኢኻ (ከምቲ ኣብዚ ዝስዕብ ናይ ኮድ ኣብነት ዘሎ) ፡ ግሊፊኮን ከተካትት ትኽእል ኢኻ (ምስ ግቡእ ኣማራጺ ጽሑፍ ነቲ .sr-onlyክፍሊ ብምጥቃም - ኣብነታት ግሊፊኮን ርአ )፡ ወይ ድማ ሓደ ብምቕራብ ተወሳኺ ሓገዝ ጽሑፍ ምዕጋት። aria-invalid="true"ብፍላይ ንሓጋዚ ቴክኖሎጂታት፡ ዘይሕጋዊ ቁጽጽር ቅጥዒ እውን ባህሪ ክምደቡ ይኽእሉ ።

ናብ ሓድሽ መስመር ዝሰብርን ኪኖ ሓደ መስመር ክዝርጋሕ ዝኽእልን ብሎክ ናይ ሓገዝ ጽሑፍ። 
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

ምስ ኣማራጺ ምልክታት

.has-feedbackብተወሳኺ ናይን የማናይ ምልክትን ብምውሳኽ ኣማራጺ ግብረ መልሲ ምልክታት ክትውስኽ ትኽእል ኢኻ ።

ናይ ግብረ መልሲ ምልክታት ምስ ጽሑፋዊ <input class="form-control">ባእታታት ጥራይ እዮም ዝሰርሑ።

ምልክታት፣ ስያመታትን ናይ ምእታው ጉጅለታትን

ስያመ ዘይብሎም እታዎታትን ብየማን ተወሳኺ ንዘለዎም ጉጅለታት እታዎታትን ብኢድ ምቕማጥ ናይ ግብረ መልሲ ምልክታት የድሊ ። ንኹሉ እታዎታት ብተበፃሕነት ምኽንያት ምልክት ክትህቡ ኣትሪርኩም ንላቦ። ስያመታት ከይርኣዩ ክትከላኸል እንተደሊኻ ምስቲ .sr-onlyክፍሊ ሕብኦም። ብዘይ ስያመታት ክትገብር እንተድኣ ኣለካ top፡ ዋጋ ናይቲ ናይ ግብረ መልሲ ምልክት ኣስተኻኽል። ንናይ ምእታው ጉጅለታት፡ ነቲ rightዋጋ ከከም ስፍሓት ናይቲ ኣዶንካ ናብ ዝምጥን ዋጋ ፒክሰል ኣስተኻኽሎ።

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

ሓገዝቲ ቴክኖሎጂታት – ከም ስክሪን ሪደርስ – ትርጉም ናይ ሓደ ምልክት ብትኽክል ከም ዘመሓላልፉ ንምርግጋጽ፡ ተወሳኺ ሕቡእ ጽሑፍ ምስቲ .sr-onlyክፍሊ ክሕወስን ምስቲ ምስ ምጥቃም ዝተኣሳሰር ቅጥዒ ምቁጽጻር ብግልጺ ክተሓሓዝን ይግባእ aria-describedby። ከም ኣማራጺ፡ እቲ ትርጉም (ንኣብነት፡ ንፍሉይ ናይ ጽሑፍ ምእታው ዓውዲ መጠንቀቕታ ምህላዉ) ብገለ ካልእ መልክዕ ከም ዝመሓላለፍ ኣረጋግጽ፡ ከም ምቕያር ጽሑፍ ናይቲ ጭቡጥ <label>ምስ ቁጽጽር ቅጥዒ ዝተኣሳሰር።

እዞም ዝስዕቡ ኣብነታት ድሮ ኣብቲ ጽሑፍ ባዕሉ ንኹነታት ምጽዳቕ ናይ ነፍሲ ወከፎም ቅጥዒ ቁጽጽር ዝጠቐሱ እኳ እንተኾኑ፡ እቲ ኣብ <label>ላዕሊ ዝተጠቕሰ ሜላ ( .sr-onlyጽሑፍን ብምጥቃምን aria-describedby) ንመግለጺ ዕላማታት ተኻቲቱ ኣሎ።

(ዓወት)
(ምኸዳን)
(ስሕተት)
@
(ዓወት) 
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

ኣማራጺ ምልክታት ብኣግማድን ውሽጢ መስመርን መልክዕ

(ዓወት)
@
(ዓወት) 
<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>
(ዓወት)

@
(ዓወት) 
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

ኣማራጺ ምልክታት ምስ ሕቡእ .sr-onlyስያመታት

.sr-onlyነቲ ክፍሊ ንሓደ ቅጥዒ ቁጽጽር ንምሕባእ እንተተጠቒምካሉ <label>(ኣብ ክንዲ ካልኦት ናይ ምልክት ኣማራጺታት ምጥቃም፡ ከም aria-labelባህሪ)፡ ቡትስትራፕ ኣቀማምጣ ናይቲ ምልክት ምስ ተወሰኸ ብኣውቶማቲክ ከስተኻኽሎ እዩ።

(ዓወት)
@
(ዓወት) 
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

ምቁጽጻር ዓቐን ምግባር

ከም . .input-lg_.col-lg-*

ቁመት ምዕባይ

ምስ ዓቐናት መጠወቒ ዝሰማምዑ ዝነውሑ ወይ ዝሓጸሩ ናይ ቅጥዒ ቁጽጽር ፍጠር።

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

ልኡል ቅርጺ ጉጅለ ዓቐናት

ብቕልጡፍ ስያመታትን ቅጥዒ ቁጽጽርን ኣብ ውሽጢ .form-horizontalብምውሳኽ .form-group-lgወይ .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

ዓምዲ ምዕባይ

እታዎታት ኣብ ሽቦ ዓምድታት፣ ወይ ዝኾነ ብሕታዊ ወላዲ ባእታ፣ ብቐሊሉ ዝድለ ስፍሓት ንምትግባር ጠቕልል።

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

መጠወቒታት

ናይ መጠወቒ መለለዪታት

<a>ኣብ ሓደ , <button>, ወይ <input>ባእታ ዝርከቡ ናይ መጠወቒ ክፍልታት ተጠቐም ።

ሊንክ 
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

ንዓውዲ ዝምልከት ኣጠቓቕማ

ናይ መጠወቒ ክፍልታት ኣብን ባእታታትን ክጥቀሙ ክኽእሉ እንከለዉ፡ ኣብ ውሽጢ navን navbarን ኣካላትና ግን ባእታታት ጥራይ እዮም <a>ዝድገፉ <button>።<button>

ከም መጠወቒታት ዝሰርሑ መላግቦታት

እቶም <a>ባእታታት ከም መጠወቒታት ንኽሰርሑ ዝጥቀሙ እንተኾይኖም – ኣብ ውሽጢ ገጽ ንዘሎ ተግባር ዘበግሱ፡ ኣብ ክንዲ ናብ ካልእ ሰነድ ወይ ክፍሊ ኣብ ውሽጢ እቲ ህሉው ገጽ ምኻድ – ንዕኦም’ውን ዝምጥን role="button".

መስቀላዊ-ብራውዘር ምቕራብ

ከም ዝበለጸ ልምዲ ፡ ምትእስሳር መስቀላዊ-ብራውዘር ምቕራብ ንምርግጋጽ ፡ ብዝተኻእለ መጠን ነቲ ባእታ ክትጥቀመሉ ኣዚና ንመክር ።<button>

ካብ ካልእ ነገራት ንላዕሊ ፡ ኣብ ፋየርፎክስ <30 ሓደ ስሕተትline-height ኣሎ፡ እዚ ድማ of -based buttons ከይንሰርዖም ዝኽልክል <input>ኮይኑ፡ ምስ ቁመት ካልኦት መጠወቒታት ፋየርፎክስ ብልክዕ ከምዘይሰማምዑ ይገብሮም።

ኣማራጺታት

ዝኾነ ካብቶም ዘለዉ ናይ መጠወቒ ክፍልታት ተጠቒምካ ብቕልጡፍ ቅዲ ዘለዎ መጠወቒ ምፍጣር።

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

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

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

ዓቐናት

ዓበይቲ ወይ ዝነኣሱ መጠወቒታት ትፈትዉ? ንተወሳኺ ዓቐናት .btn-lg, .btn-sm, ወይ ወስኹሉ ።.btn-xs

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

ብሎክ ደረጃ መጠወቒታት ፍጠር-እቶም ምሉእ ስፍሓት ናይ ሓደ ወላዲ ዝሽፍኑ- ብምውሳኽ .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

ንጡፍ ኩነታት

መጠወቒታት ንጡፋት ከለዉ ተጸቒጦም (ምስ ዝጸልመተ ድሕረ ባይታ፡ ዝጸልመተ ዶብን ምትእትታው ጽላሎትን) ክረኣዩ እዮም። ንባእታታት ፡ እዚ <button>ብመንገዲ :active. <a>ንባእታታት ፡ ብ .active. .activeይኹን እምበር ፡ ኣብ <button>s ክትጥቀም ትኽእል ኢኻ (እቲ...aria-pressed="true"ይኹን እምበር ፡ ነቲ ንጡፍ ኩነታት ብፕሮግራም ክትደግሞ እንተድኣ ኣድልዩካ

ናይ መጠወቒ ባእታ

ስውር ክፍሊ ስለ ዝኾነ ምውሳኽ ኣየድልን እዩ :active፡ ግን ተመሳሳሊ መልክዕ ከተገድድ እንተድኣ ኣድልዩካ፡ ንቕድሚት ንኺድ እሞ ወስኸሉ .active።

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

መልህቕ ባእታ

.activeነቲ ክፍሊ ናብ <a>መጠወቒታት ምውሳኽ ።

መባእታዊ ሊንክ ሊንክ 

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

ስንክልና ዘለዎ ኩነታት

መጠወቒታት ብ opacity.

ናይ መጠወቒ ባእታ

disabledነቲ ባህሪ ኣብ <button>መጠወቒታት ምውሳኽ ።

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

ስግረ-ብራውዘር ምትእስሳር

ነቲ disabledባህሪ ኣብ a <button>እንተ ወሲኽካዮ፡ ኢንተርነት ኤክስፕሎረር 9ን ትሕቲኡን ንጽሑፍ ብጽዩፍ ጽሑፍ-ጽላሎት ክንእርሞ ዘይንኽእል ግራጭ ክገብሮ እዩ።

መልህቕ ባእታ

.disabledነቲ ክፍሊ ናብ <a>መጠወቒታት ምውሳኽ ።

መባእታዊ ሊንክ ሊንክ 

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

.disabledኣብዚ ከም ዩቲሊቲ ክላስ ንጥቀመሉ ፣ ምስቲ ናይ ሓባር .activeክፍሊ ዝመሳሰል፣ ስለዚ ዝኾነ ቅድመ-ጥብቆ ኣየድልን።

ናይ ምትእስሳር ተግባር መጠንቀቕታ

እዚ ክፍሊ እዚ pointer-events: noneንናይ s ምትእስሳር ተግባር ንምቁራጽ ንምፍታን ይጥቀመሉ <a>፣ ግን እቲ CSS ንብረት ገና ደረጃ ዘይብሉን ምሉእ ብምሉእ ኣብ ኦፔራ 18ን ትሕቲኡን፣ ወይ ኣብ ኢንተርነት ኤክስፕሎረር 11 ኣይድገፍን እዩ።ብተወሳኺ፣ ዋላ ኣብ መርበብ ሓበሬታታት ዝድግፉ pointer-events: none, keyboard ናቪጌሽን ገና ኣይተተንከፈን፣ እዚ ማለት ድማ ​​ርእዮም ዝረኣዩ ተጠቀምቲ ቁልፊ ሰሌዳን ተጠቀምቲ ሓጋዚ ቴክኖሎጂታትን ጌና ነዞም መላግቦታት ከንቀሳቕስዎም ክኽእሉ እዮም። ስለዚ ውሑስ ንምዃን፡ ከምዚ ዝኣመሰለ መላግቦታት ንምዕጻው ብሕታዊ ጃቫስክሪፕት ተጠቐም።

ምስልታት

ምላሽ ዝህቡ ምስልታት

ኣብ ቡትስትራፕ 3 ዝርከቡ ምስልታት ብመንገዲ ምውሳኽ ናይቲ .img-responsiveክፍሊ ምላሽ ዝህቡ ክኾኑ ይኽእሉ። እዚ ይምልከት max-width: 100%;፣ height: auto;ከምኡውን display: block;ኣብቲ ምስሊ ጽቡቕ ጌሩ ናብቲ ወላዲ ባእታ ንኽመጣጠን ይሰርሕ።

ነቲ .img-responsiveክፍሊ ዝጥቀሙ ምስልታት ማእከል ንምግባር .center-block፡ ኣብ ክንዲ .text-center. ብዛዕባ ኣጠቓቕማ ዝያዳ ዝርዝር ሓበሬታ ኣብ ክፍሊ ሓገዝቲ ክፍልታት ርአ ።.center-block

SVG ምስልታትን IE 8-10ን ዝበሃሉ ምዃኖም ይፍለጥ

ኣብ ኢንተርነት ኤክስፕሎረር 8-10፡ SVG ምስልታት ምስ .img-responsiveዘይተመጣጠነ ዓቐን ኣለዎም። ነዚ ንምእራም width: 100% \9;ኣድላዪ ኣብ ዝኾነሉ ቦታ ምውሳኽ። ቡትስትራፕ ነዚ ብኣውቶማቲክ ኣይጥቀመሉን እዩ ምኽንያቱ ኣብ ካልኦት ቅርጽታት ምስሊ ጸገማት ስለ ዘስዕብ።

<img src="..." class="img-responsive" alt="Responsive image">

ቅርጽታት ምስሊ

<img>ኣብ ዝኾነ ፕሮጀክት ብቐሊሉ ምስልታት ቅዲ ንምግባር ክፍልታት ናብ ሓደ ባእታ ምውሳኽ ።

ስግረ-ብራውዘር ምትእስሳር

ኢንተርነት ኤክስፕሎረር 8 ንኽቡብ ኩርናዓት ዝኸውን ደገፍ ከምዘይብሉ ኣብ ግምት ኣእትዉ።

140x140 ዝኾነ 140x140 ዝኾነ 140x140 ዝኾነ 
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

ናይ ሓጋዚ ክፍልታት

ዓውደ-ጽሑፋዊ ሕብርታት

ትርጉም ብሕብሪ ምስ ብኣጻብዕ ዝቑጸሩ ናይ ምጉላሕ ዩቲሊቲ ክፍልታት ምትሕልላፍ። እዚኦም ኣብ መላግቦታት እውን ክውዕሉ ይኽእሉ እዮም ከምኡውን ልክዕ ከምቲ ነባሪ ቅዲታት መላግቦና ኣብ ሆቨር ክጸልመቱ እዮም።

ፉስ ዳፒቡስ፡ ቴሉስ ኣክ ከርሱስ ኮሞዶ፡ ቶርቶር ማውሪስ ኒብህ።

ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.

ዱይስ ሞሊስ፡ ኤስት ኖን ኮሞዶ ሉክቱስ፡ ኒሲ ኤራት ፖርቲቶር ሊጉላ።

ማሴናስ ሴድ ዲያም ኤጌት ሪሱስ ቫሪዩስ ብላንዲት ኮፍ ኣሜት ዘይ ማግና.

ኢትያም ፖርታ ሰም ማሌሱዋዳ ማግና ሞሊስ ዩይስሞድ።

ዶነክ ኡላምኮርፐር ኑላ ኖን ሜቱስ ኦክተር ፍሪንጊላ።

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

ምስ ፍሉይነት ምግጣም

ሓደ ሓደ ግዜ ብሰንኪ ፍሉይነት ካልእ መምረጺ፡ ናይ ምጉላሕ ክፍልታት ኣብ ግብሪ ክውዕሉ ኣይክእሉን። ኣብ መብዛሕትኡ እዋን፡ እኹል መፍትሒ ጽሑፍካ ኣብ a <span>ምስቲ ክፍሊ ምጥቕላል እዩ።

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

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

ዓውደ-ጽሑፋዊ ድሕረ ባይታታት

ምስቶም ዓውደ-ጽሑፋዊ ጽሑፍ ሕብሪ ክፍልታት ዝመሳሰል፡ ድሕረ ባይታ ናይ ሓደ ባእታ ናብ ዝኾነ ዓውደ-ጽሑፋዊ ክፍሊ ብቐሊሉ ኣቐምጦ። መልህቕ ኣካላት ኣብ ሆቨር ክጸልምቱ እዮም፣ ልክዕ ከምቲ ናይ ጽሑፍ ክፍልታት።

ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.

ዱይስ ሞሊስ፡ ኤስት ኖን ኮሞዶ ሉክቱስ፡ ኒሲ ኤራት ፖርቲቶር ሊጉላ።

ማሴናስ ሴድ ዲያም ኤጌት ሪሱስ ቫሪዩስ ብላንዲት ኮፍ ኣሜት ዘይ ማግና.

ኢትያም ፖርታ ሰም ማሌሱዋዳ ማግና ሞሊስ ዩይስሞድ።

ዶነክ ኡላምኮርፐር ኑላ ኖን ሜቱስ ኦክተር ፍሪንጊላ።

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

ምስ ፍሉይነት ምግጣም

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

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

As with contextual colors , ዝኾነ ይኹን ብሕብሪ ዝመሓላለፍ ትርጉም እውን ብጽሩይ ኣቀራርባ ብዘይኮነ ቅርጺ ከም ዝመሓላለፍ ኣረጋግጽ።

ምልክት ምዕጻው

ከም ሞዳላትን መጠንቀቕታታትን ዝኣመሰሉ ትሕዝቶታት ንምንጻግ ነቲ ሓፈሻዊ ናይ ምዕጻው ምልክት ተጠቐም።

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

ካሬታት

ንቑልቁል ዝወርድ ተግባርን ኣንፈትን ንምምልካት ካሬት ተጠቐም። ኣስተውዕል እቲ ነባሪ ካሬት ኣብ ንቑልቁል ዝወርድ ምልክታታት ብኣውቶማቲክ ክግልበጥ ’ ዩ ።

<span class="caret"></span>

ቅልጡፍ ተንሳፋፊ

ሓደ ባእታ ምስ ሓደ ክፍሊ ንጸጋም ወይ ንየማን ኣንሳፈፍ። !importantፍሉይነት ዝምልከት ሕቶታት ንኸይፍጠር ተኻቲቱ ኣሎ። ክፍልታት ከም ሚክሲን እውን ክጥቀሙ ይኽእሉ እዮም።

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

ኣብ navbars ንኽትጥቀመሉ ኣይኮነን።

ኣብ navbars ዝርከቡ ኣካላት ምስ utility classes ንምስምማዕ፡ ኣብ ክንድኡ .navbar-leftወይ ተጠቐም .navbar-right። ንዝርዝር ሓበሬታ ኣብ navbar docs ርአ ።

ማእከል ትሕዝቶ ብሎኮታት

ንሓደ ባእታ display: blockብመንገዲ margin. ከም ሚክሲንን ክላስን ይርከብ።

<div class="center-block">...</div>
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

ንጹር ምትዕርራይ

ኣብቲ ወላዲ ባእታfloat ብምውሳኽ s ብቐሊሉ ኣጽርዮ ። ከምቲ ብኒኮላስ ጋላገር ዝፍለጥ ማይክሮ ክሊርፊክስ ይጥቀመሉ ። ከም ሚክሲን እውን ክውዕል ይኽእል።.clearfix 

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

ትሕዝቶ ምርኣይን ምሕባእን

ሓደ ባእታ ንኽርአ ወይ ንኽሕባእ ኣገድድ ( ንኣንበብቲ ስክሪን ሓዊስካ ) ብኣጠቓቕማን .showክፍልታትን .hidden። እዞም ክፍልታት እዚኣቶም ልክዕ ከምቲ ቅልጡፍ ተንሳፋፊ!important ናይ ፍሉይነት ግርጭታት ንምውጋድ ይጥቀሙ . ንብሎክ ደረጃ ምቕያር ጥራይ እዮም ዝረኣዩ። ከም ሚክሲን እውን ክጥቀሙ ይኽእሉ እዮም።

.hideኣሎ፡ ግን ኩሉ ግዜ ንኣንበብቲ ስክሪን ዝጸሉ ኣይኮነን ፡ ካብ v3.0.1 ጀሚሩ ድማ ተኣልዩ ኣሎ። .hiddenኣብ ክንድኡ ወይ ተጠቐም .sr-only።

ብተወሳኺ .invisible፡ ርኡይነት ናይ ሓደ ባእታ ጥራይ ንምቕያር ክውዕል ይኽእል፡ ማለት ናቱ displayኣይተቐየረን እቲ ባእታ ጌና ንዋሕዚ ናይቲ ሰነድ ክጸልዎ ይኽእል።

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

ስክሪን ሪደርን ትሕዝቶ ናቪጌሽን ቁልፊ ሰሌዳን

ብዘይካ ስክሪን ኣንበብቲ ንኹሎም መሳርሒታት ሓደ ባእታ ብ .sr-only. .sr-onlyምስ ኣወሃሂድካ .sr-only-focusableነቲ ባእታ ትኹረት ክገብር ከሎ እንደገና ንምርኣይ (ንኣብነት ብናይ ቁልፊ ሰሌዳ ጥራይ ተጠቃሚ)። ንናይ ተበፃሕነት ብሉፃት ተሞክሮታት ንምኽታል ኣድላዪ . ከም ሚክሲን እውን ክውዕል ይኽእል።

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

ምስሊ ምትካእ

.text-hideንትሕዝቶ ጽሑፍ ናይ ሓደ ባእታ ብድሕረ ባይታ ምስሊ ንምትካእ ንምሕጋዝ ነቲ ክፍሊ ወይ ሚክሲን ተጠቐም።

<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
  .text-hide();
}

ምላሽ ዝህቡ ዩቲሊቲታት

ንዝቐልጠፈ ንሞባይል ዝምችእ ምዕባለ፡ ነዞም ዩቲሊቲ ክፍልታት ብመሳርሒ ብመንገዲ ሚድያ ሕቶ ንምርኣይን ንምሕባእን ተጠቐሙ። ከምኡ’ውን ትሕዝቶ ክሕተም ከሎ ንምቕያር ዝሕግዙ ናይ ዩቲሊቲ ክፍልታት ተኻቲቶም ኣለዉ።

ነዚኦም ብውሱን መሰረት ክትጥቀመሎም ፈትንን ምሉእ ብምሉእ ዝተፈላለየ ስሪት ናይ ሓደ መርበብ ሓበሬታ ካብ ምፍጣር ተቖጠብን። ኣብ ክንድኡስ፡ ንኣቀራርባ ነፍሲ ወከፍ መሳርሒ ንምምላእ ተጠቐመሎም።

ዝርከቡ ክፍልታት

ንትሕዝቶ ኣብ ስግር ቪውፖርት ምብታኽ ነጥብታት ንምቕያር ሓደ ወይ ውህደት ናይቶም ዘለዉ ክፍልታት ተጠቐም።

ተወሳኺ ንኣሽቱ መሳርሒታትስልክታት (<768px) ንኣሽቱ መሳርሒታትጣብላታት (≥768px) ማእከላይ መሳርሒታትዴስክቶፕ (≥992px) ዓበይቲ መሳርሒታትናይ ዴስክቶፕ (≥1200px)
.visible-xs-* ዝርአ እዩ።
.visible-sm-* ዝርአ እዩ።
.visible-md-* ዝርአ እዩ።
.visible-lg-* ዝርአ እዩ።
.hidden-xs ዝርአ እዩ። ዝርአ እዩ። ዝርአ እዩ።
.hidden-sm ዝርአ እዩ። ዝርአ እዩ። ዝርአ እዩ።
.hidden-md ዝርአ እዩ። ዝርአ እዩ። ዝርአ እዩ።
.hidden-lg ዝርአ እዩ። ዝርአ እዩ። ዝርአ እዩ።

ካብ v3.2.0 ጀሚሩ፡ እቶም .visible-*-*ክፍልታት ንነፍሲ ​​ወከፍ ነጥቢ ምብታኽ ብሰለስተ ፍልልያት ይመጹ፡ ሓደ ንነፍሲ ​​ወከፍ displayኣብ ታሕቲ ተዘርዚሩ ዘሎ ዋጋ ንብረት CSS።

ጉጅለ ክፍልታት ሲኤስኤስdisplay
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

ስለዚ፡ ንተወሳኺ ንኣሽቱ ( xs) ስክሪናት ንኣብነት፡ እቶም ዝርከቡ .visible-*-*ክፍልታት .visible-xs-block፡ , .visible-xs-inline, ከምኡውን .visible-xs-inline-block.

እቶም ክፍልታት .visible-xs, .visible-sm, .visible-md, ከምኡውን .visible-lgኣለዉ፣ ግን ካብ v3.2.0 ጀሚሮም ተኣልዮም ኣለዉ ። ብግምት ምስ ማዕረ እዮም .visible-*-block፣ ብዘይካ ምስ ተወሳኺ ፍሉያት ጉዳያት ንመቐያየሪ <table>-ተዛመድቲ ባእታታት።

ናይ ሕትመት ክፍልታት

ልክዕ ከምቲ ስሩዕ ምላሽ ዝህቡ ክፍልታት፡ ነዚኦም ንሕትመት ዝኸውን ትሕዝቶ ንምቕያር ተጠቐመሎም።

ክፍልታት መርበብ ሓበሬታ ሕትመት
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		ዝርአ እዩ።
.hidden-print ዝርአ እዩ።

እቲ ክፍሊ .visible-printእውን ኣሎ ግን ካብ v3.2.0 ጀሚሩ ተኣልዩ ኣሎ። ብግምት ምስ ማዕረ እዩ .visible-print-block፣ ብዘይካ ምስ ተወሳኺ ፍሉያት ጉዳያት ን <table>-ተዛመድቲ ባእታታት።

ናይ ፈተና ጉዳያት

ንዓቐን መርበብ ሓበሬታኻ ምቕያር ወይ ኣብ ዝተፈላለዩ መሳርሒታት ምጽዓን ነቶም ምላሽ ዝህቡ ዩቲሊቲ ክፍልታት ንምፍታን።

ኣብ...

ቀጠልያ ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት

✔ ኣብ x-small ዝረአ
✔ ኣብ ንኣሽቱ ዝረአ
ማእኸላይ ✔ ኣብ ማእከላይ ዝረአ
✔ ብዓቢ ዝረአ
✔ ኣብ x-ንእሽቶን ዝረአ
✔ ኣብ ማእኸላይን ዓብን ዝረአ
✔ ኣብ x-ንእሽቶን ማእኸላይን ይርአ
✔ ኣብ ንኣሽቱን ዓበይትን ዝረአ
✔ ኣብ x-ንእሽቶን ዓብን ዝረአ
✔ ኣብ ንኣሽቱን ማእኸለዎትን ዝረአ

ኣብ ልዕሊ...

ኣብዚ፡ ቀጠልያ ምልክት ምልክት እውን እቲ ባእታ ኣብቲ ሕጂ ዘለኻዮ ቪውፖርት ተሓቢኡ ከምዘሎ የመልክቱ።

✔ ኣብ x-small ተሓቢኡ ኣሎ።
✔ ኣብ ልዕሊ ንእሽተይ ተሓቢኡ
ማእኸላይ ✔ ኣብ ማእከላይ ተሓቢኡ
✔ ኣብ ዓብዪ ተሓቢኡ
✔ ኣብ x-ንእሽቶን ተሓቢኡ ይርከብ።
✔ ኣብ ማእኸላይን ዓብን ዝተሓብአ
✔ ኣብ x-ንእሽቶን ማእኸላይን ተሓቢኡ ይርከብ።
✔ ኣብ ንኣሽቱን ዓበይትን ዝተሓብአ
✔ ኣብ x-ንእሽቶን ዓብን ዝተሓብአ
✔ ኣብ ንኣሽቱን ማእኸለዎትን ዝተሓብአ

ውሑድ ምጥቃም

ናይ Bootstrap CSS ኣብ Less ዝተሃንጸ ኮይኑ፡ ተወሳኺ ተግባራት ከም ተለዋዋጢ፡ ሚክሲንን ንCSS ንምጥርናፍ ዝሕግዙ ተግባራትን ዘለዎ ቅድመ-ፕሮሰሰር እዩ። እቶም ኣብ ክንዲ እቶም ዝተጠርነፉ CSS ፋይላትና ምንጪ Less ፋይላት ክጥቀሙ ዝደልዩ ሰባት ኣብ ምሉእ ፍሬምዎርክ እንጥቀመሎም ብዙሓት ተለዋዋጢ ረቛሒታትን ሚክሲናትን ክጥቀሙ ይኽእሉ።

ተለዋዋጢ ሽቦን ሚክሲንን ኣብ ውሽጢ ክፍሊ ስርዓት ሽቦ ይሽፈኑ ።

ምጥርናፍ ቡትስትራፕ

ቡትስትራፕ ብውሑዱ ብኽልተ መንገዲ ክንጥቀመሉ ንኽእል ኢና፡ ምስቲ ዝተጠርነፈ CSS ወይ ምስቲ ምንጪ Less ፋይላት። ንLess ዝበሃሉ ፋይላት ንምጥርናፍ ፡ ከመይ ጌርካ ዘድልዩ ትእዛዛት ንምስራሕ ናይ ምዕባለ ሃዋህውካ ትሰርዖ ፡ ኣብቲ Getting Started ዝብል ክፍሊ ተወከስ ።

ናይ ሳልሳይ ወገን ምትእኽኻብ መሳርሒታት ምስ ቡትስትራፕ ክሰርሑ ይኽእሉ እዮም፣ ግን ብቐንዲ ጋንታና ኣይድገፉን እዮም።

ተለዋዋጢ ረቛሒታት

ተለዋዋጢ ዋጋታት ኣብ ምሉእ ፕሮጀክት ከም መገዲ ምትእኽኻብን ምክፋልን ልሙዳት ዝጥቀሙሉ ክብርታት ከም ሕብርታት፣ ርሕቀት፣ ወይ ቁጽሪ ቅርጺ ፊደላት ይጥቀሙ። ምሉእ ምብትታን ንምርካብ፡ በጃኻ ነቲ Customizer ርአ ።

ሕብርታት

ብቐሊሉ ክልተ ሕብራዊ ስርዓታት ተጠቐም፡ ግራጭን ትርጉማውን። ግራጭ ሕብርታት ንልሙድ ዝጥቀሙ ጽላሎት ጸሊም ቅልጡፍ ምብጻሕ ዝህቡ ክኾኑ እንከለዉ ትርጉማዊ ድማ ትርጉም ዘለዎም ዓውደ-ጽሑፋዊ ክብርታት ዝተመደቡ ዝተፈላለዩ ሕብርታት ዘጠቓልል እዩ።

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

ዝኾነ ካብዞም ናይ ሕብሪ ተቐያየርቲ ከም ዘለዉዎ ተጠቐም ወይ ንፕሮጀክትካ ናብ ዝያዳ ትርጉም ዘለዎም ተቐያየርቲ ዳግማይ ምምዳብ።

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

ስካፎልድ ምግባር

ቁልፊ ባእታታት ናይ መርበብ ሓበሬታኻ ዓጽሚ ብቕልጡፍ ንምምዕርራይ ብኣጻብዕ ዝቑጸሩ ተለዋዋጢ ረቛሒታት።

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

ብቐሊሉ ንመላግቦታትካ ብትኽክለኛ ሕብሪ ብሓደ ዋጋ ጥራይ ቅዲ ግበር።

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

ኣስተውዕል እቲ @link-hover-colorሓደ ፋንክሽን ይጥቀም፣ ካልእ ዘደንቕ መሳርሒ ካብ Less፣ ብኣውቶማቲክ ቅኑዕ ናይ ሆቨር ሕብሪ ንምፍጣር። ክትጥቀም ትኽእል ኢኻ darken, lighten, saturate, ከምኡውን desaturate.

ታይፖግራፊ

ብውሑዳት ቅልጡፋት ተለዋዋጢ ረቛሒታት ብቐሊሉ ቅርጺ ጽሑፍካ፡ ዓቐን ጽሑፍካ፡ መሪሕካን ካልእን ኣቐምጦ። ቡትስትራፕ ነዚኦም እውን ተጠቒሙ ቀለልቲ ናይ ታይፕግራፊክ ሚክሲናት ይህብ።

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

ምልክታት

ክልተ ቅልጡፋት ተቐያየርቲ ንኣቀማምጣን ስም ፋይልን ናይ ምልክታትካ ንምምዕርራይ።

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

ኣካላት

ኣብ ምሉእ ቡትስትራፕ ዝርከቡ ኣካላት ንናይ ሓባር ክብርታት ንምቕማጥ ገለ ነባሪ ተለዋዋጢ ረቛሒታት ይጥቀሙ። እቶም ዝበዝሑ ዝጥቀሙሉ ኣብዚ ኣለዉ።

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

ሸያጢ ሚክሲናት

ናይ ሸየጥቲ ሚክሲናት ኣብቲ ዝተጠርነፈ CSS ናትካ ኩሎም ኣገደስቲ ቅድመ-ጥብቆታት ሸየጥቲ ብምሕዋስ ንብዙሓት ኣሰጋገርቲ ንምድጋፍ ዝሕግዙ ሚክሲናት እዮም።

ሳንዱቕ-ዓቐን ምግባር

ናይ ኣካላትካ ሳንዱቕ ሞዴል ብሓደ ሚክሲን ዳግማይ ምትካል። ንዓውደ-ጽሑፍ፡ ነዛ ሓጋዚት ጽሑፍ ካብ ሞዚላ ርአ ።

እቲ mixin ካብ v3.2.0 ጀሚሩ ተኣልዩ ኣሎ፣ ምስ ምትእትታው Autoprefixer። ንድሕሪት-ምትእስሳር ንምዕቃብ፡ Bootstrap ክሳብ Bootstrap v4 ነቲ mixin ብውሽጢ ውሽጢ ምጥቃም ክቕጽል እዩ።

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

ክቡባት ኩርናዓት

ሎሚ ኩሎም ዘመናውያን ዳህሰስቲ ነቲ ቅድመ-ጥብቆ ዘይብሉ border-radiusንብረት ይድግፉ። ከምኡ ስለዝኾነ፡ ሚክሲን የለን .border-radius()፡ ቡትስትራፕ ግን ኣብ ሓደ ፍሉይ ወገን ናይ ሓደ ነገር ንኽልተ ኩርናዓት ብቕልጡፍ ንምኽባብ ዝሕግዙ ኣቋራጭ መገድታት የጠቓልል።

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

ሳጹን (Drop) ጽላሎት

ዕላማኻ ዝኾኑ ተዓዘብቲ እዋናውያንን ዝዓበዩን ዳህሰስቲን መሳርሕታትን ዝጥቀሙ እንተኾይኖም፡ ነቲ box-shadowንብረት ባዕሉ ጥራይ ምጥቃምካ ኣረጋግጽ። ንኣረጊት መሳርሒታት ኣንድሮይድ (ቅድሚ v4)ን iOSን (ቅድሚ iOS 5) ደገፍ እንተደሊኻ፡ ነቲ ዝድለ ቅድመ-ጥብቆ ንምውሳድ፡ ነቲ ዘይተጠቕመ mixin ተጠቐም ።-webkit

ቡትስትራፕ ነቶም ነቲ መደበኛ ንብረት ዘይድግፉ ግዜኦም ዝሓለፉ መድረኻት ብወግዒ ስለዘይድግፍ ፡ እቲ ሚክሲን ካብ v3.1.0 ጀሚሩ ተኣልዩ ኣሎ። ንድሕሪት-ምትእስሳር ንምዕቃብ፡ Bootstrap ክሳብ Bootstrap v4 ነቲ mixin ብውሽጢ ውሽጢ ምጥቃም ክቕጽል እዩ።

ኣብ ሳንዱቕ ጽላሎትካ ሕብርታት ምጥቃምካ ኣረጋግጽ rgba()ምእንቲ ብዝተኻእለ መጠን ምስ ድሕረ ባይታታት ብዘይ ገለ ጸገም ክወሃሃዱ።

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

መሰጋገሪታት

ንተዓጻጻፍነት ዝኸውን ብዙሕ ሚክሲን ። ኩሉ ናይ ምስግጋር ሓበሬታ ብሓደ ኣቐምጦ፣ ወይ ከም ኣድላይነቱ ዝተፈለየ ምድንጓይን ንውሓት ግዜን ግለጽ።

እቶም ሚክሲናት ካብ v3.2.0 ጀሚሮም ተኣልዮም ኣለዉ፣ ምስ ምትእትታው Autoprefixer። ንድሕሪት-ምትእስሳር ንምዕቃብ፡ Bootstrap ክሳብ Bootstrap v4 ነቶም mixins ብውሽጢ ውሽጢ ምጥቃም ክቕጽል እዩ።

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

ለውጢታት

ዝኾነ ነገር ምዝዋር፣ ምዕቃን፣ ምትርጓም (ምንቅስቓስ) ወይ ምዝንባል።

እቶም ሚክሲናት ካብ v3.2.0 ጀሚሮም ተኣልዮም ኣለዉ፣ ምስ ምትእትታው Autoprefixer። ንድሕሪት-ምትእስሳር ንምዕቃብ፡ Bootstrap ክሳብ Bootstrap v4 ነቶም mixins ብውሽጢ ውሽጢ ምጥቃም ክቕጽል እዩ።

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

ኣኒሜሽን

ንኹሎም ናይ CSS3 ናይ ተንቀሳቓሲ ባህርያት ኣብ ሓደ ኣዋጅ ንምጥቃም ዝሕግዝ ሓደ ሚክሲን ንውልቃዊ ባህርያት ድማ ካልኦት ሚክሲናት።

እቶም ሚክሲናት ካብ v3.2.0 ጀሚሮም ተኣልዮም ኣለዉ፣ ምስ ምትእትታው Autoprefixer። ንድሕሪት-ምትእስሳር ንምዕቃብ፡ Bootstrap ክሳብ Bootstrap v4 ነቶም mixins ብውሽጢ ውሽጢ ምጥቃም ክቕጽል እዩ።

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

ዘይግሉጽነት

ንኹሎም ዳህሰስቲ ዘይንጹርነት ኣቐምጥ እሞ filterንIE8 ፋልባክ ሃብ።

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

ጽሑፍ መትሓዚ ቦታ

ኣብ ውሽጢ ነፍሲ ወከፍ ዓውዲ ንዝግበር ቁጽጽር ቅጥዒ ዓውዲ ምሃብ።

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

ዓምድታት

ኣብ ውሽጢ ሓደ ባእታ ብመንገዲ CSS ዓምድታት ምፍጣር።

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

ምዕባለታት (gradients)

ዝኾነ ክልተ ሕብሪ ብቐሊሉ ናብ ድሕረ ባይታ ምዕባለ ምቕያር። ዝያዳ ምዕቡል ውሰድ እሞ ኣንፈት ኣቐምጥ፣ ሰለስተ ሕብሪ ተጠቐም ወይ ራድያል ግራድየንት ተጠቐም። ብሓደ mixin ኩሉ ዘድልየካ ቅድመ-ጥብቆ ዘለዎ ስነ-ቓላት ትረክብ።

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

ብተወሳኺ ኩርናዕ ናይ ሓደ መደበኛ ክልተ ሕብሪ ዘለዎ፣ መስመራዊ ምዕባለ ክትገልጽ ትኽእል ኢኻ፤

#gradient > .directional(#333; #000; 45deg);

ባርበር-ስራይፕ ቅዲ ግራድየንት እንተደሊኻ፡ ንሱ እውን ቀሊል እዩ። ሓደ ሕብሪ ጥራይ ግለጽ እሞ ፍርቂ ብርሃን ዝህብ ጻዕዳ መስመር ክንድብሶ ኢና።

#gradient > .striped(#333; 45deg);

ነቲ ኣንቴ ኣቢልካ ኣብ ክንድኡ ሰለስተ ሕብሪ ተጠቐም። ቀዳማይ ሕብሪ፣ ካልኣይ ሕብሪ፣ ካልኣይ ሕብሪ ሕብሪ ደው ምባል (ሚእታዊ ዋጋ ከም 25%)፣ ሳልሳይ ሕብሪ ድማ በዞም ሚክሲናት ኣቐምጥ፤

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

ርእሲ ንላዕሊ! ንሓደ እዋን ንሓደ ደረጃ ምእላይ ዘድልየካ እንተኾይኑ፡ ዝኾነ ዝወሰኽካዮ IE-ፍሉይ ዝኾነ ምእላይካ ኣረጋግጽ filter። ከምኡ ክትገብር ትኽእል ኢኻ ነቲ .reset-filter()ሚክሲን ጎኒ ጎኒ ብምጥቃም background-image: none;።

ዩቲሊቲ ሚክሲናት

ዩቲሊቲ ሚክሲናት ብኻልእ መገዲ ዘይተኣሳሰሩ ናይ CSS ባህርያት ብምውህሃድ ንሓደ ፍሉይ ዕላማ ወይ ዕማም ዝዕወቱ ሚክሲናት እዮም።

ንጹር ምትዕርራይ

class="clearfix"ኣብ ዝኾነ ባእታ ምውሳኽ ረሲዕካ ኣብ ክንድኡ ኣድላዪ ኣብ .clearfix()ዝኾነሉ ሚክሲን ምውሳኽ። ካብ ኒኮላስ ጋላገር ዝመጸ ማይክሮ ክሊርፊክስ ይጥቀም ።

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

ልኡል ማእከል ምግባር

ዝኾነ ባእታ ኣብ ውሽጢ ወላዲኡ ብቕልጡፍ ማእከል ግበሮ። ይጠልብ widthወይ max-widthክቐርብ እዩ።

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

ሓገዝቲ ዓቐን ምግባር

መለክዒታት ናይ ሓደ ነገር ብቐሊሉ ምግላጽ።

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

ዓቐን ክቕይሩ ዝኽእሉ ናይ ጽሑፍ ቦታታት

ንዝኾነ textarea, ወይ ንዝኾነ ካልእ ባእታ ብቐሊሉ ናይ ዓቐን ምቕያር ኣማራጺታት ምውቃር። ነባሪ ናብ ንቡር ባህሪ መርበብ ሓበሬታ ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

ጽሑፍ ምቑራጽ

ጽሑፍ ብቐሊሉ ብኤሊፕሲስ ብሓደ ሚክሲን ምቑራጽ። ባእታ ክኸውን blockወይ inline-blockደረጃ ክኸውን ይጠልብ።

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

ምስልታት ረቲና

ክልተ ናይ ምስልን መንገድታትን ናይ @1x ናይ ምስሊ መለክዒታትን ግለጽ፣ ቡትስትራፕ ድማ @2x ናይ ሚድያ ሕቶ ክህብ እዩ። ብዙሓት ከተገልግሉ ዘለካ ምስልታት እንተሃልዮምኻ፡ ናትካ ናይ ረቲና ምስሊ CSS ብኢድካ ኣብ ሓደ ናይ ሚድያ ሕቶ ምጽሓፍ ኣብ ግምት ኣእቱ።

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

ሳስ ምጥቃም

Bootstrap ኣብ Less ዝተሃንጸ ክኸውን ከሎ ፡ ወግዓዊ Sass port ውን ኣለዎ ። ኣብ ፍሉይ መኽዘን GitHub ንሕዞን ብመቐየሪ ስክሪፕት ንዝመጽእ ምዕባለታት ንሕዞን።

እንታይ ተሓዊስዎ ኣሎ።

ወደብ ሳስ ፍሉይ ሪፖ ስለዘለዎን ቁሩብ ዝተፈላለየ ተዓዘብቲ ስለዘገልግልን፡ ትሕዝቶ ናይቲ ፕሮጀክት ካብቲ ቀንዲ ፕሮጀክት ቡትስትራፕ ኣዝዩ ይፍለ። እዚ ድማ እቲ ናይ ሳስ ወደብ ብዝተኻእለ መጠን ምስ ብዙሓት ኣብ ሳስ ዝተመስረቱ ስርዓታት ዝሰማማዕ ምዃኑ የረጋግጽ።

መንገዲ መግለፂ
lib/ ሩቢ ዕንቊ ኮድ (Sass configuration, Rails and Compass integrations)
tasks/ ስክሪፕት ቀያሪ (ንላዕሊ ዝወሓደ ናብ ሳስ ምቕያር)
test/ ናይ ምጥርናፍ ፈተናታት
templates/ ኮምፓስ ፓኬጅ ማኒፌስት
vendor/assets/ ሳስ፡ ጃቫስክሪፕትን ቅርጺ ፊደላትን ዝበሃሉ ፋይላት
Rakefile ውሽጣዊ ዕማማት፡ ከም ሬክን ምቕያርን።

ነዞም ፋይላት ብተግባር ንምርኣይ ኣብ መኽዘን GitHub ናይ Sass port ምብጻሕ ።

ምትካል

Bootstrap for Sass ከመይ ጌርካ ከም እትተክልን ከም እንጥቀመሉን ሓበሬታ ንምርካብ፡ ኣብ GitHub repository readme ተወከስ ። እቲ ዝበለጸ እዋናዊ ምንጪ ኮይኑ ምስ ረይልስ፡ ኮምፓስን መደበኛ ፕሮጀክትታት ሳስን ንኽትጥቀመሉ ዝሕግዝ ሓበሬታ ዘጠቓልል እዩ።

ቡትስትራፕ ን ሳስ