ታይፖግራፊ

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

ዓለማዊ ምድላዋት

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

ንነፍሲ ወከፍ ኦኤስን መሳርሒን ዝበለጸ ዝመርጽ ተወላዲ ቅርጺ ፊደላት ተጠቐም ።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">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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">ዝኾነ ኤችቲኤምኤል ከም ጥቕሲ ጠቕልሎ ።

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

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

ምንጪ ምጽዋዕ

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

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

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ኣሰላልፋ

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

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

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ዝርዝራት

ቅዲ ዘይብሉ

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

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

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

ኣብ መስመር

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

ሎረም ኢፕሱም
ፋሰለስ ኢያኩሊስ ዝበሃል እዩ።
ኑላ ቮሉትፓት።

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

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

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

መግለጺ ዝርዝር

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

ዩይስሞድ

ቬስቲቡሉም ኢድ ሊጉላ ፖርታ ፌሊስ ዩስሞድ ሴምፐር ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት.

Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus.

ማሌሱዋዳ ፖርታ

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

ዝተቖርጸ ቃል ይቑረጽ

ፉስ ዳፒቡስ፡ ቴሉስ ኣክ ከርሱስ ኮሞዶ፡ ቶርቶር ማውሪስ ኮንዲመንቱም ኒብህ፡ ኡት ፈርመንቱም ማሳ ጁስቶ ኮፍ ኣሜት ሪሱስ።

ምድቃል

ዝተሰነየ ዝርዝር ትርጉም: Aenean posuere, tortor sed cursus feugiat, ኑክ ኦጉ ብላንዲት ኑክ.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

ምላሽ ዝህብ ታይፖግራፊ

ምላሽ ዝህብ ታይፖግራፊfont-size ንጽሑፍን ኣካላትን ኣብ ውሽጢ ተኸታታሊ ናይ ሚድያ ሕቶታት ናይቲ ሱር ባእታ ብምትዕርራይ ጥራይ ምዕባይ የመልክት ። ቡትስትራፕ ከምዚ ኣይገብረልካን እዩ፡ እንተድኣ ኣድልዩካ ግን ክትውስኾ ብመጠኑ ቀሊል እዩ።

ኣብነት ናይዚ ብተግባር እንሆ። font-sizeዝደለኻዮ ናይ sን ናይ ሚድያ ሕቶታትን ምረጽ ።

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}