የፊደል አጻጻፍ
የአለምአቀፍ መቼቶች፣ አርእስቶች፣ የሰውነት ጽሁፍ፣ ዝርዝሮች እና ሌሎችንም ጨምሮ ለBootstrap ታይፕግራፊ ሰነዶች እና ምሳሌዎች።
ዓለም አቀፍ ቅንብሮች
ቡትስትራፕ መሰረታዊ አለምአቀፋዊ ማሳያን፣ የፊደል አጻጻፍ እና የአገናኝ ስልቶችን ያዘጋጃል። ተጨማሪ ቁጥጥር በሚያስፈልግበት ጊዜ, የጽሑፍ መገልገያ ክፍሎችን ይመልከቱ .
- ለእያንዳንዱ ስርዓተ ክወና እና መሳሪያ ምርጡን የሚመርጥ ቤተኛ የቅርጸ-ቁምፊ ቁልል ይጠቀሙ ።
font-family
- ለበለጠ አካታች እና ተደራሽ አይነት ሚዛን፣
font-size
ጎብኚዎች እንደ አስፈላጊነቱ የአሳሽ ነባሪዎችን እንዲያበጁ የአሳሹን ነባሪ ስር (በተለይ 16 ፒክስል) እንጠቀማለን። $font-family-base
የ ፣፣$font-size-base
እና$line-height-base
ባህሪያትን እንደ የፊደል አጻጻፍ መሰረት ተጠቀም<body>
።- የአለምአቀፍ አገናኝ ቀለምን በ በኩል ያዘጋጁ
$link-color
። - በ ( በነባሪ) ላይ
$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>
የማሳያ ርዕሶች
ባህላዊ የርዕስ ክፍሎች በገጽዎ ይዘት ስጋ ውስጥ በተሻለ ሁኔታ እንዲሰሩ የተነደፉ ናቸው። ጎልቶ ለመታየት ርዕስ ሲፈልጉ የማሳያ አርዕስት መጠቀም ያስቡበት - ትልቅ፣ ትንሽ የበለጠ አስተያየት ያለው የአርእስት ዘይቤ።
<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
$display-font-sizes
የማሳያ ርእሶች በ Sass ካርታ እና በሁለት ተለዋዋጮች በኩል ተዋቅረዋል ፣ $display-font-weight
እና $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
መራ
በማከል አንድ አንቀጽ ጎልቶ እንዲታይ ያድርጉ .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>
እንደ የቅጂ መብት እና ህጋዊ ጽሑፍ ያሉ የጎን አስተያየቶችን እና ትንሽ ህትመትን ይወክላል።<s>
ከአሁን በኋላ ተዛማጅነት የሌላቸው ወይም ከአሁን በኋላ ትክክል ያልሆኑትን አካል ይወክላል።<u>
የውስጠ-መስመር ጽሑፍ ስንዝር ይወክላል ይህም ጽሑፋዊ ያልሆነ ማብራሪያ እንዳለው በሚያሳይ መንገድ መቅረብ አለበት።
ጽሑፍህን ቅጥ ማድረግ ከፈለክ በምትኩ የሚከተሉትን ክፍሎች መጠቀም አለብህ፡
.mark
ተመሳሳይ ቅጦችን ተግባራዊ ይሆናል<mark>
..small
ተመሳሳይ ቅጦችን ተግባራዊ ይሆናል<small>
..text-decoration-underline
ተመሳሳይ ቅጦችን ተግባራዊ ይሆናል<u>
..text-decoration-line-through
ተመሳሳይ ቅጦችን ተግባራዊ ይሆናል<s>
.
ከላይ ባይታይም፣ ለመጠቀም ነፃነት ይሰማህ <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>A well-known quote, contained in a blockquote element.</p>
</blockquote>
ምንጭ መሰየም
የኤችቲኤምኤል ዝርዝር መግለጫ የብሎክኬት መለያ ባህሪ ከውጪ እንዲቀመጥ ይፈልጋል <blockquote>
። ባህሪን በሚያቀርቡበት ጊዜ፣ የእርስዎን <blockquote>
በ a ያዙሩት <figure>
እና ከክፍል ጋር አንድ <figcaption>
ወይም የማገጃ ደረጃ ኤለመንት ይጠቀሙ (ለምሳሌ ፣ <p>
) .blockquote-footer
። እንዲሁም የምንጭ ሥራውን ስም መጠቅለልዎን ያረጋግጡ <cite>
።
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
አሰላለፍ
የእርስዎን blockquote አሰላለፍ ለመቀየር እንደ አስፈላጊነቱ የጽሑፍ መገልገያዎችን ይጠቀሙ።
<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
<figure class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
ዝርዝሮች
ቅጥ አልባ
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>
ምላሽ ሰጪ የቅርጸ-ቁምፊ መጠኖች
በ Bootstrap 5 ውስጥ፣ ምላሽ ሰጪ የቅርጸ-ቁምፊ መጠኖችን በነባሪነት አንቅተናል፣ ይህም ጽሑፍ በመሣሪያ እና የመመልከቻ መጠኖች ላይ የበለጠ እንዲመዘን ያስችለዋል። ይህ እንዴት እንደሚሰራ ለማወቅ የ RFS ገጽን ይመልከቱ።
ሳስ
ተለዋዋጮች
ርእሶች በመጠን እና ለክፍተት የተወሰኑ ተለዋዋጮች አሏቸው።
$headings-margin-bottom: $spacer * .5;
$headings-font-family: null;
$headings-font-style: null;
$headings-font-weight: 500;
$headings-line-height: 1.2;
$headings-color: null;
እዚህ እና በዳግም ማስነሳት ውስጥ የተሸፈኑት ልዩ ልዩ የአጻጻፍ ክፍሎች እንዲሁ ልዩ ተለዋዋጮች አሏቸው።
$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
$sub-sup-font-size: .75em;
$text-muted: $gray-600;
$initialism-font-size: $small-font-size;
$blockquote-margin-y: $spacer;
$blockquote-font-size: $font-size-base * 1.25;
$blockquote-footer-color: $gray-600;
$blockquote-footer-font-size: $small-font-size;
$hr-margin-y: $spacer;
$hr-color: inherit;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
ቅልቅል
ለታይፕግራፊ የወሰኑ ድብልቆች የሉም፣ ግን ቡትስትራፕ ምላሽ ሰጪ ቅርጸ-ቁምፊ መጠን (RFS) ይጠቀማል ።