የፊደል አጻጻፍ

የአለምአቀፍ መቼቶች፣ አርእስቶች፣ የሰውነት ጽሁፍ፣ ዝርዝሮች እና ሌሎችንም ጨምሮ ለBootstrap ታይፕግራፊ ሰነዶች እና ምሳሌዎች።

ዓለም አቀፍ ቅንብሮች

ቡትስትራፕ መሰረታዊ አለምአቀፋዊ ማሳያን፣ የፊደል አጻጻፍ እና የአገናኝ ስልቶችን ያዘጋጃል። ተጨማሪ ቁጥጥር በሚያስፈልግበት ጊዜ, የጽሑፍ መገልገያ ክፍሎችን ይመልከቱ .

ለእያንዳንዱ ስርዓተ ክወና እና መሳሪያ ምርጡን የሚመርጥ ቤተኛ የቅርጸ-ቁምፊ ቁልል ይጠቀሙ ።font-family
font-sizeለበለጠ አካታች እና ተደራሽ አይነት ሚዛን፣ ጎብኚዎች እንደ አስፈላጊነቱ የአሳሽ ነባሪ ነባሪዎችን እንዲያበጁ የአሳሹን ነባሪ ስር (በተለይ 16 ፒክስል) እንገምታለን ።
$font-family-baseየ ፣፣ $font-size-baseእና $line-height-baseባህሪያትን እንደ የፊደል አጻጻፍ መሰረት ተጠቀም <body>።
የአለምአቀፍ ማገናኛ ቀለምን በ በኩል ያቀናብሩ $link-colorእና የአገናኝ መስመሮችን በ ላይ ብቻ ይተግብሩ :hover።
በ ( በነባሪ) ላይ $body-bgለማቀናበር ይጠቀሙ ።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እንዲሁ ይገኛሉ ፣ ምክንያቱም የርዕስ ቅርጸ-ቁምፊን ማዛመድ ሲፈልጉ ነገር ግን የተጎዳኘውን HTML አባል መጠቀም አይችሉም።

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።

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor። Duis mollis፣ est non commodo luctus።

<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>መለያዎቹ የሚያመጡትን ማንኛውንም ያልተፈለጉ የትርጉም አንድምታዎችን በማስወገድ ላይ ይገኛሉ።

ከላይ ባይታዩም፣ ለመጠቀም ነፃነት ይሰማዎ <b>እና <i>በHTML5። <b>ተጨማሪ አስፈላጊነትን ሳያስተላልፍ ቃላትን ወይም ሀረጎችን ለማጉላት ሲሆን <i>በአብዛኛው ለድምጽ, ቴክኒካዊ ቃላት, ወዘተ.

የጽሑፍ መገልገያዎች

በእኛ የጽሑፍ መገልገያ እና የቀለም መገልገያ የጽሑፍ አሰላለፍ፣ ቀይር፣ ዘይቤ፣ ክብደት እና ቀለም ቀይር ።

ምህጻረ ቃል

<abbr>የተዘረጋውን እትም በማንዣበብ ላይ ለማሳየት ለ ምህፃረ ቃል እና ምህፃረ ቃላት የኤችቲኤምኤል ኤለመንት በቅ�� መተግበር ። አጽሕሮተ ቃላት በማንዣበብ ላይ እና ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች ተጨማሪ አውድ ለማቅረብ ነባሪ መስመር አላቸው እና የእርዳታ ጠቋሚን ያገኛሉ።

.initialismበትንሹ ለትንሽ የቅርጸ-ቁምፊ መጠን ወደ ምህጻረ ቃል ያክሉ ።

attr

HTML

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

የብሎክ ጥቅሶች

በሰነድዎ ውስጥ ከሌላ ምንጭ የይዘት ብሎኮችን ለመጥቀስ። እንደ ጥቅስ <blockquote class="blockquote">በማንኛውም HTML ዙሪያ ይጠቅልሉ ።

Lorem ipsum dolor sit amet, 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">ምንጩን ለመለየት ያክሉ ። የምንጭ ሥራውን ስም በ ውስጥ ጠቅልለው <cite>።

Lorem ipsum dolor sit amet, 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>

አሰላለፍ

የእርስዎን blockquote አሰላለፍ ለመቀየር እንደ አስፈላጊነቱ የጽሑፍ መገልገያዎችን ይጠቀሙ።

Lorem ipsum dolor sit amet, 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>

Lorem ipsum dolor sit amet, 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በዝርዝር ንጥሎች (ወዲያውኑ ልጆች ብቻ) ነባሪውን እና የግራ ህዳግን ያስወግዱ ። ይህ በቅርብ ህፃናት ዝርዝር እቃዎች ላይ ብቻ ነው የሚሰራው ይህም ማለት ለማንኛውም የጎጆ ዝርዝሮች ክፍሉን መጨመር ያስፈልግዎታል.

Lorem ipsum dolor ሲት አሜት
Consectetur adipiscing elit
ኢንቲጀር molestie lorem at massa
ፋሲሊሲስ በፕሪቲየም ኒስላ አሊኬት
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor ሴም
- Ac tristique libero volutpat በ
Faucibus porta lacus fringilla vel
አኔን ሲት አሜት ኤራት ኑንክ
Eget porttitor lorem

<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.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<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ረዘም ላለ ጊዜ፣ ጽሑፉን በ ellipsis ለመቁረጥ እንደ አማራጭ አንድ ክፍል ማከል ይችላሉ ።

መግለጫ ዝርዝሮች

የመግለጫ ዝርዝር ቃላትን ለመወሰን ፍጹም ነው።

ኢዩስሞድ

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida እና eget metus።

ማሌሱዳ ፖርታ

Etiam porta sem malesuada magna mollis euismod.

የተቆረጠ ቃል ተቆርጧል

Fusce dapibus፣ tellus ac cursus commodo፣ tortor mauris condimentum nibh፣ ut fermentum massa justo sit amet risus።

መክተቻ

የተከተተ ትርጉም ዝርዝር: አኔን ፖሱዌሬ፣ ቶርቶር ሴድ ኩርሰስ ፉጊያት፣ ኑንክ አውጉ ብlandit ኑንክ።

<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 የሚያመለክተው በተከታታይ የሚዲያ መጠይቆች ውስጥ የስር ኤለመንትን በቀላሉ በማስተካከል ጽሑፍን እና ክፍሎችን ማመጣጠን ነው። Bootstrap ይህን ለእርስዎ አያደርግም, ነገር ግን ከፈለጉ ማከል ቀላል ነው.

በተግባር የሱ ምሳሌ እዚህ አለ። 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;
  }
}