in English

ታይፖግራፊ

ሰነዳትን ኣብነታትን ንቡትስትራፕ ታይፕግራፊ፡ ዓለማዊ ቅጥዕታት፡ ኣርእስታት፡ ኣካል ጽሑፍ፡ ዝርዝርን ካልእን ሓዊስካ።

ዓለማዊ ምድላዋት

ቡትስትራፕ መሰረታዊ ዓለማዊ ምርኢት፣ ታይፖግራፊን ቅዲታት ምትእስሳርን የቐምጥ። ዝያዳ ምቁጽጻር ኣብ ዘድልየሉ እዋን፡ ናይ ጽሑፍ ውጽኢታዊ ክፍልታት ርአ ።

  • ንነፍሲ ወከፍ ኦኤስን መሳርሒን ዝበለጸ ዝመርጽ ተወላዲ ቅርጺ ፊደላት ተጠቐም ።font-family
  • ንዝያዳ ንኹሉ ዝሓቁፍን ተበጻሒን ዓይነት ስኬል font-size፡ በጻሕቲ ከም ኣድላይነቱ ነባሪ ሱር መርበብ ሓበሬታኦም ንምምዕርራይ፡ ናይቲ መርበብ ሓበሬታ ነባሪ ሱር (ብተለምዶ 16px) ንጥቀም።
  • ነቲ $font-family-base, $font-size-base, ከምኡውን $line-height-baseባህርያት ከምቲ ኣብ <body>.
  • ዓለማዊ ሕብሪ መላግቦ ብመንገዲ $link-colorኣቐምጥን ኣብ ስርርዕ መላግቦ ጥራይ ኣተግብርን :hover
  • ኣብቲ ( ብነባሪ) $body-bga ንምቕማጥ ተጠቐም ።background-color<body>#fff

እዞም ቅዲታት ኣብ ውሽጢ ክርከቡ ይኽእሉ _reboot.scss፣ እቶም ዓለማዊ ተለዋዋጢ ረቛሒታት ድማ ኣብ _variables.scss. $font-size-baseኣብ ምእታውካ ኣረጋግጽ rem.

ኣርእስታት

ኩሎም ኣርእስታት ኤችቲኤምኤል፣ <h1>ብመንገዲ <h6>፣ ይርከቡ።

ኣርእስቲ ኣብነት
<h1></h1> h1. ቡትስትራፕ ዝብል ርእሲ
<h2></h2> h2. ቡትስትራፕ ዝብል ርእሲ
<h3></h3> h3. ቡትስትራፕ ዝብል ርእሲ
<h4></h4> h4. ቡትስትራፕ ዝብል ርእሲ
<h5></h5> h5. ቡትስትራፕ ዝብል ርእሲ
<h6></h6> h6. ቡትስትራፕ ዝብል ርእሲ
<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>

.h1ብመንገዲ .h6ክፍልታት እውን ይርከቡ፣ ንቅዲ ቅርጺ ቅርጺ ናይ ሓደ ርእሲ ክትሰማማዕ ምስ እትደሊ ግን ነቲ ተዛማዲ ኤችቲኤምኤል ባእታ ክትጥቀመሉ ኣብ ዘይትኽእለሉ እዋን።

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

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

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

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

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

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

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

ኣርእስታት ምምዕርራይ

ነቶም ዝተሓወሱ ናይ ዩቲሊቲ ክፍልታት ተጠቒምካ ነቲ ንእሽቶ ካልኣይ ደረጃ ርእሲ ጽሑፍ ካብ Bootstrap 3 ዳግማይ ምፍጣር።

ፋንሳዊ ኣርእስቲ ምርኢት ምስ ዝሃሰሰ ካልኣዊ ጽሑፍ

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

ኣርእስታት ኣርእዩ

ባህላዊ ናይ ርእሲ ባእታታት ኣብ ስጋ ትሕዝቶ ገጽካ ዝበለጸ ንኽሰርሑ ዝተዳለዉ እዮም። ፍሉይ ንኽኸውን ኣርእስቲ ኣብ ዘድልየካ እዋን፡ ኣርእስቲ ምርኢት ምጥቃም ኣብ ግምት ኣእቱ —ዝዓበየን ቁሩብ ዝያዳ ርእይቶ ዘለዎን ቅዲ ኣርእስቲ። ኣብ ኣእምሮኻ ምሓዝ እዞም ኣርእስታት ብነባሪ ምላሽ ዝህቡ ኣይኮኑን፣ ግን ምላሽ ዝህቡ ዓቐናት ቅርጺ ምኽፋት ይከኣል እዩ ።

ምርኢት 1
ምርኢት 2
ምርኢት 3
ምርኢት 4
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

ምራሕ

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

እዚ መሪሕ ሕጡበ ጽሑፍ እዩ። ካብ ስሩዕ ሕጡበ-ጽሑፋት ፍሉይ ዝገብሮ እዩ።

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

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

ቅዲ ንልሙዳት ውሽጣዊ መስመር HTML5 ባእታታት።

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

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

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

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

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

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

እዚ መስመር እዚ ከም ድሙቕ ጽሑፍ ተቐሪጹ።

እዚ መስመር እዚ ከም ሰያፍ ጽሑፍ ተቐሪጹ።

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.markከምኡ’ውን .smallክፍልታት’ውን ተመሳሳሊ ቅዲታት ንምትግባርን <mark>ከምኡ’ውን <small>እቶም መለለዪታት ዘምጽእዎ ዝኾነ ዘይተደልየ ትርጉማዊ ትርጉም ንምውጋድን ተዳልዮም ኣለዉ።

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

ናይ ጽሑፍ መገልገሊታት

ናይ ጽሑፍ ኣሰላልፋ፣ ምቕያር፣ ቅዲ፣ ክብደትን ሕብርን ብናይ ጽሑፍ መሳለጥያታትናን ሕብራዊ መሳለጥያታትናን ምቕያር .

ኣሕጽሮተ ቃላት

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

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

attr

ኤችቲኤምኤል

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

ብሎክኮትስ

ኣብ ውሽጢ ሰነድካ ካብ ካልእ ምንጪ ንዝተረኽበ ብሎኮታት ትሕዝቶ ንምጥቃስ። <blockquote class="blockquote">ዝኾነ ኤችቲኤምኤል ከም ጥቕሲ ጠቕልሎ ።

ፍሉጥ ጥቕሲ፡ ኣብ ብሎክኮት ባእታ ዝሓዘ።

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

ንሓደ ምንጪ ምጽዋዕ

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

ፍሉጥ ጥቕሲ፡ ኣብ ብሎክኮት ባእታ ዝሓዘ።

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ
<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ኣሰላልፋ

ኣሰላልፋ ናይ ብሎክኮትካ ንምቕያር ከም ኣድላይነቱ ናይ ጽሑፍ መገልገሊታት ተጠቐም።

ፍሉጥ ጥቕሲ፡ ኣብ ብሎክኮት ባእታ ዝሓዘ።

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ
<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ፍሉጥ ጥቕሲ፡ ኣብ ብሎክኮት ባእታ ዝሓዘ።

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ
<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ዝርዝራት

ቅዲ ዘይብሉ

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

  • እዚ ዝርዝር እዩ።
  • ፍጹም ቅዲ ዘይብሉ ኮይኑ ይረአ።
  • ብመዋቕራዊ መዳይ ክሳብ ሕጂ ዝርዝር እዩ።
  • እዚ ቅዲ እዚ ግን ንቕጽበታዊ ውላድ ባእታታት ጥራይ እዩ ዝምልከት።
  • ዝተሰቕሉ ዝርዝር፤
    • በዚ ቅዲ እዚ ዘይጽለዉ እዮም።
    • ሕጂ ውን ጥይት ከርኢ እዩ።
    • ከምኡ’ውን ግቡእ ጸጋማይ ወሰን ኣለዎ።
  • እዚ ሕጂ እውን ኣብ ገሊኡ ዅነታት ጠቓሚ ኪኸውን ይኽእል እዩ።
<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

ኣብ መስመር

ናይ ሓደ ዝርዝር ጥይት ኣውጺእካ ገለ ብርሃን marginብውህደት ክልተ ክፍልታት ምልካይ፣ .list-inlineከምኡውን .list-inline-item.

  • እዚ ናይ ዝርዝር ኣቕሓ እዩ።
  • ካልእ ድማ።
  • ግን ኣብ መስመር እዮም ዝረኣዩ።
<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

መግለጺ ዝርዝር ኣሰላልፋ

ናይ ሽቦ ስርዓትና ኣቐዲሞም ዝተነጸሩ ክፍልታት (ወይ ትርጉማዊ ምትሕውዋስ) ብምጥቃም ቃላትን መግለጺታትን ብኣግማድ ኣሰላልፍዎም። .text-truncateንነዊሕ እዋን፡ ብኣማራጺ ነቲ ጽሑፍ ብኤሊፕሲስ ንምቑራጽ ክፍሊ ክትውስኽ ትኽእል ኢኻ ።

መግለጺ ዝርዝር
ዝርዝር መግለጺ ቃላት ንምግላጽ ፍጹም እዩ።
ቃል

ትርጉም ናይቲ ቃል።

ከምኡውን ገለ ተወሳኺ ናይ ቦታ ትርጉም ጽሑፍ።

ካልእ ቃል
እዚ ትርጉም ሓጺር ስለዝኾነ ተወሳኺ ሕጡበ-ጽሑፍ ወይ ዝኾነ ነገር የለን።
ዝተቖርጸ ቃል ይቑረጽ
እዚ ቦታ ጸቢብ ኣብ ዝኾነሉ እዋን ጠቓሚ ክኸውን ይኽእል። ኣብ መወዳእታ ኤሊፕሲስ ይውስኽ።
ምድቃል
ዝተሰነየ ዝርዝር ትርጉም
ዝርዝር ትርጉም ከም ዝፈትዉ ሰሚዐኩም ኣለኹ። ኣብ ውሽጢ ዝርዝር ትርጉምካ ዝርዝር ትርጉም ከቐምጥ።
<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

ምላሽ ዝህቡ ዓቐናት ቅርጺ ፊደላት

ካብ v4.3.0 ጀሚሩ፡ ቡትስትራፕ ምላሽ ዝህቡ ዓቐናት ቅርጺ ፊደላት ናይ ምኽኣል ኣማራጺ ሒዙ ይለኣኽ፡ ጽሑፍ ብዝያዳ ተፈጥሮኣዊ መንገዲ ኣብ መላእ ዓቐናት መሳርሒን ቪውፖርትን ክዓቢ የኽእሎ። RFS$enable-responsive-font-sizes ን Sass variable ናብ trueBootstrap ብምቕያርን ዳግማይ ብምጥርናፍን ክንክእል ንኽእል ።

RFS ንምድጋፍ ፡ ንቡር ባህርያትና ንምትካእ Sass mixin ንጥቀም font-size። ምላሽ ዝህቡ ዓቐናት ቅርጺ ፊደላት ናብ calc()ተግባራት ምስ ምትሕውዋስን remቪውፖርት ኣሃዱታትን ተጠርኒፎም ነቲ ምላሽ ዝህብ ናይ ምዕባይ ባህሪ ከኽእሉ እዮም። ብዛዕባ RFS ን ውቅርኡን ዝያዳ ኣብ መኽዘን GitHub ክትረኽቡ ትኽእሉ ኢኹም ።