የፊደል አጻጻፍ

የአለምአቀፍ መቼቶች፣ አርእስቶች፣ የሰውነት ጽሁፍ፣ ዝርዝሮች እና ሌሎችንም ጨምሮ ለ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">በማንኛውም ኤችቲኤምኤል ዙሪያ ይሸፍኑ ።

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.

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

ፉስሴ ዳፒበስ፣ ቴልኡስ አክ ኩርሰስ ኮሞዶ፣ ቶርቶር ሞሪስ ኮንዲሜንተም ኒብ፣ ዩት ፌርሜንቱም ማሳ ጆስቶ ሲት አሜት ሪሱስ።

መክተቻ

የተከተተ ትርጉም ዝርዝር: አኔን ፖሱዌሬ፣ ቶርቶር ሴድ ኩርሰስ ፉጊያት፣ ኑንክ አውጉ ብ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>

ምላሽ ሰጪ የቅርጸ-ቁምፊ መጠኖች

ቡትስትራፕ v4.3 ምላሽ ሰጭ የቅርጸ-ቁምፊ መጠኖችን የማንቃት አማራጭ ያለው ሲሆን ይህም ጽሑፍ በመሣሪያ እና በመመልከቻ መጠኖች ላይ የበለጠ እንዲመዘን ያስችለዋል። RFS$enable-responsive-font-sizes የ Sass ተለዋዋጭን ወደ ቡት በመቀየር እና እንደገና በማጠናቀር ሊነቃ ይችላል true።

RFS ን ለመደገፍ ፣ መደበኛ ንብረታችንን ለመተካት የ Sass ድብልቅን እንጠቀማለን font-size። ምላሽ ሰጪ የቅርጸ-ቁምፊ መጠኖች ምላሽ ሰጪውን የመጠን ባህሪን ለማንቃት ከቅይጥ እና መመልከቻ ክፍሎች calc()ጋር ወደ ተግባራት ይሰበሰባሉ። remስለ RFS እና አወቃቀሩ ተጨማሪ በ GitHub ማከማቻው ላይ ይገኛል ።