in English

የፊደል አጻጻፍ

የአለምአቀፍ መቼቶች፣ አርእስቶች፣ የሰውነት ጽሁፍ፣ ዝርዝሮች እና ሌሎችንም ጨምሮ ለ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

ይህ መሪ አንቀጽ ነው። ከመደበኛ አንቀጾች ጎልቶ ይታያል።

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

ከላይ ባይታዩም፣ ለመጠቀም ነፃነት ይሰማዎ <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 ዙሪያ ይጠቅልሉ ።

በብሎክquote ኤለመንት ውስጥ የሚገኝ በጣም የታወቀ ጥቅስ።

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

ምንጭ መሰየም

<footer class="blockquote-footer">ምንጩን ለመለየት ያክሉ ። የምንጭ ሥራውን ስም በ ውስጥ ጠቅልለው <cite>

በብሎክquote ኤለመንት ውስጥ የሚገኝ በጣም የታወቀ ጥቅስ።

���ምንጭ ርዕስ ውስጥ ታዋቂ የሆነ ሰው
<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 አሰላለፍ ለመቀየር እንደ አስፈላጊነቱ የጽሑፍ መገልገያዎችን ይጠቀሙ።

በብሎክquote ኤለመንት ውስጥ የሚገኝ በጣም የታወቀ ጥቅስ።

በምንጭ ርዕስ ውስጥ ታዋቂ የሆነ ሰው
<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>

በብሎክquote ኤለመንት ውስጥ የሚገኝ በጣም የታወቀ ጥቅስ።

በምንጭ ርዕስ ውስጥ ታዋቂ የሆነ ሰው
<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ረዘም ላለ ጊዜ፣ ጽሑፉን በ ellipsis ለመቁረጥ እንደ አማራጭ አንድ ክፍል ማከል ይችላሉ ።

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

ለቃሉ ፍቺ.

እና አንዳንድ ተጨማሪ የቦታ ያዥ ትርጉም ጽሑፍ።

ሌላ ቃል
ይህ ትርጉም አጭር ነው, ስለዚህ ምንም ተጨማሪ አንቀጾች ወይም ሌላ ነገር የለም.
የተቆረጠ ቃል ተቆርጧል
ይህ ቦታ ጠባብ በሚሆንበት ጊዜ ጠቃሚ ሊሆን ይችላል. መጨረሻ ላይ ኤሊፕሲስን ይጨምራል.
መክተቻ
የተከተተ ትርጉም ዝርዝር
የፍቺ ዝርዝሮችን እንደወደዱ ሰምቻለሁ። በፍቺ ዝርዝርዎ ውስጥ የፍቺ ዝርዝር ላስቀምጥ።
<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 ተለዋዋጭን ወደ ቡት በመቀየር እና እንደገና በማጠናቀር ሊነቃ ይችላል true

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