టైపోగ్రఫీ

గ్లోబల్ సెట్టింగ్‌లు, హెడ్డింగ్‌లు, బాడీ టెక్స్ట్, జాబితాలు మరియు మరిన్నింటితో సహా బూట్‌స్ట్రాప్ టైపోగ్రఫీ కోసం డాక్యుమెంటేషన్ మరియు ఉదాహరణలు.

ఈ పేజీలో

గ్లోబల్ సెట్టింగ్‌లు

బూట్స్ట్రాప్ ప్రాథమిక ప్రపంచ ప్రదర్శన, టైపోగ్రఫీ మరియు లింక్ శైలులను సెట్ చేస్తుంది. మరింత నియంత్రణ అవసరమైనప్పుడు, టెక్స్ట్యువల్ యుటిలిటీ తరగతులను తనిఖీ చేయండి .

ప్రతి OS మరియు పరికరానికి ఉత్తమమైన వాటిని ఎంచుకునే స్థానిక ఫాంట్ స్టాక్‌ను ఉపయోగించండి .font-family
మరింత సమగ్రమైన మరియు ప్రాప్యత చేయగల రకం స్కేల్ కోసం, మేము బ్రౌజర్ డిఫాల్ట్ రూట్‌ని font-size(సాధారణంగా 16px) ఉపయోగిస్తాము కాబట్టి సందర్శకులు తమ బ్రౌజర్ డిఫాల్ట్‌లను అవసరమైన విధంగా అనుకూలీకరించవచ్చు.
మా టైపోగ్రాఫిక్ బేస్‌గా $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>ద్వారా అన్ని HTML శీర్షికలు <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. బూట్స్ట్రాప్ శీర్షిక

html

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

శీర్షికలను అనుకూలీకరించడం

బూట్‌స్ట్రాప్ 3 నుండి చిన్న ద్వితీయ శీర్షిక వచనాన్ని పునఃసృష్టించడానికి చేర్చబడిన యుటిలిటీ తరగతులను ఉపయోగించండి.

ఫేడెడ్ సెకండరీ టెక్స్ట్‌తో ఫ్యాన్సీ డిస్‌ప్లే హెడింగ్

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

హెడ్డింగ్‌లను ప్రదర్శించండి

సాంప్రదాయ శీర్షిక అంశాలు మీ పేజీ కంటెంట్‌లో ఉత్తమంగా పని చేసేలా రూపొందించబడ్డాయి. మీకు ప్రత్యేకంగా ఒక శీర్షిక అవసరం అయినప్పుడు, డిస్‌ప్లే హెడింగ్‌ని ఉపయోగించడాన్ని పరిగణించండి —పెద్ద, కొంచెం ఎక్కువ అభిప్రాయాలు కలిగిన శీర్షిక శైలి.

ప్రదర్శన 1

ప్రదర్శన 2

ప్రదర్శన 3

ప్రదర్శన 4

ప్రదర్శన 5

ప్రదర్శన 6

<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ప్రదర్శన శీర్షికలు సాస్ మ్యాప్ మరియు రెండు వేరియబుల్స్ ద్వారా కాన్ఫిగర్ చేయబడతాయి $display-font-weightమరియు $display-line-height.

ప్రదర్శన శీర్షికలు రెండు వేరియబుల్స్ ద్వారా అనుకూలీకరించబడతాయి $display-font-familyమరియు $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

దారి

జోడించడం ద్వారా పేరాను ప్రత్యేకంగా కనిపించేలా చేయండి .lead.

ఇది లీడ్ పేరా. ఇది సాధారణ పేరాగ్రాఫ్‌ల నుండి ప్రత్యేకంగా ఉంటుంది.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

ఇన్లైన్ టెక్స్ట్ ఎలిమెంట్స్

సాధారణ ఇన్‌లైన్ HTML5 మూలకాల కోసం స్టైలింగ్.

మీరు మార్క్ ట్యాగ్‌ని ఉపయోగించవచ్చుహైలైట్వచనం.

~~ఈ వచన పంక్తి తొలగించబడిన వచనంగా పరిగణించబడుతుంది.~~

~~వచనం యొక్క ఈ పంక్తి ఇకపై ఖచ్చితమైనది కాదని భావించబడుతుంది.~~

ఈ టెక్స్ట్ లైన్ పత్రానికి అదనంగా పరిగణించబడుతుంది.

ఈ వచన పంక్తి అండర్‌లైన్ చేసిన విధంగా రెండర్ అవుతుంది.

ఈ టెక్స్ట్ లైన్ ఫైన్ ప్రింట్‌గా పరిగణించబడుతుంది.

ఈ లైన్ బోల్డ్ టెక్స్ట్‌గా రెండర్ చేయబడింది.

ఈ పంక్తి ఇటాలిక్ వచనంగా రెండర్ చేయబడింది.

html

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

ఆ ట్యాగ్‌లు సెమాంటిక్ ప్రయోజనం కోసం ఉపయోగించబడాలని జాగ్రత్త వహించండి:

సూచన లేదా సంజ్ఞామానం ప్రయోజనాల కోసం గుర్తించబడిన లేదా హైలైట్ చేయబడిన వచనాన్ని సూచిస్తుంది.
కాపీరైట్ మరియు చట్టపరమైన వచనం వంటి సైడ్-కామెంట్‌లు మరియు చిన్న ముద్రణను సూచిస్తుంది.
<s>ఇకపై సంబంధిత లేదా ఇకపై ఖచ్చితమైనది లేని మూలకాన్ని సూచిస్తుంది.
ఇన్‌లైన్ టెక్స్ట్ యొక్క పరిధిని సూచిస్తుంది, ఇది వచనం కాని ఉల్లేఖనాన్ని కలిగి ఉందని సూచించే విధంగా రెండర్ చేయాలి.

మీరు మీ వచనాన్ని స్టైల్ చేయాలనుకుంటే, బదులుగా మీరు క్రింది తరగతులను ఉపయోగించాలి:

.markవలె అదే శైలులను వర్తింపజేస్తుంది .
.smallవలె అదే శైలులను వర్తింపజేస్తుంది .
.text-decoration-underlineవలె అదే శైలులను వర్తింపజేస్తుంది .
.text-decoration-line-throughవలె అదే శైలులను వర్తింపజేస్తుంది <s>.

పైన చూపబడనప్పటికీ , HTML5లో ఉపయోగించడానికి సంకోచించకండి . అదనపు ప్రాముఖ్యతను తెలియజేయకుండా పదాలు లేదా పదబంధాలను హైలైట్ చేయడానికి ఉద్దేశించబడింది, అయితే ఇది ఎక్కువగా వాయిస్, సాంకేతిక పదాలు మొదలైన వాటి కోసం.

టెక్స్ట్ యుటిలిటీస్

మా టెక్స్ట్ యుటిలిటీస్ మరియు కలర్ యుటిలిటీలతో టెక్స్ట్ అలైన్‌మెంట్, ట్రాన్స్‌ఫార్మ్, స్టైల్, వెయిట్, లైన్-ఎత్తు, డెకరేషన్ మరియు కలర్‌ని మార్చండి .

సంక్షిప్తాలు

<abbr>హోవర్‌లో విస్తరించిన సంస్కరణను చూపించడానికి సంక్షిప్తాలు మరియు ఎక్రోనింస్ కోసం HTML మూలకం యొక్క శైలీకృత అమలు . సంక్షిప్తాలు డిఫాల్ట్ అండర్‌లైన్‌ను కలిగి ఉంటాయి మరియు హోవర్‌లో అదనపు సందర్భాన్ని అందించడానికి మరియు సహాయక సాంకేతికతల వినియోగదారులకు సహాయం కర్సర్‌ను పొందుతాయి.

.initialismకొంచెం చిన్న ఫాంట్-సైజ్ కోసం సంక్షిప్తీకరణకు జోడించండి .

attr

HTML

html

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

బ్లాక్‌కోట్‌లు

మీ డాక్యుమెంట్‌లోని మరొక మూలం నుండి కంటెంట్ బ్లాక్‌లను కోట్ చేయడం కోసం. కోట్‌గా <blockquote class="blockquote">ఏదైనా HTML చుట్టూ చుట్టండి.

బ్లాక్‌కోట్ ఎలిమెంట్‌లో ఉన్న ప్రసిద్ధ కోట్.

html

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

మూలానికి పేరు పెట్టడం

HTML స్పెక్‌కి బ్లాక్‌కోట్ అట్రిబ్యూషన్ వెలుపల ఉంచడం అవసరం <blockquote>. అట్రిబ్యూషన్‌ను అందించేటప్పుడు, మీని <blockquote>a లో చుట్టండి మరియు తరగతితో <figure>ఒక <figcaption>లేదా బ్లాక్ స్థాయి మూలకాన్ని (ఉదా, ) ఉపయోగించండి .blockquote-footer. సోర్స్ వర్క్ పేరును కూడా వ్రాప్ చేయాలని నిర్ధారించుకోండి <cite>.

బ్లాక్‌కోట్ ఎలిమెంట్‌లో ఉన్న ప్రసిద్ధ కోట్.

html

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

అమరిక

మీ బ్లాక్‌కోట్ యొక్క అమరికను మార్చడానికి అవసరమైన టెక్స్ట్ యుటిలిటీలను ఉపయోగించండి.

బ్లాక్‌కోట్ ఎలిమెంట్‌లో ఉన్న ప్రసిద్ధ కోట్.

html

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

బ్లాక్‌కోట్ ఎలిమెంట్‌లో ఉన్న ప్రసిద్ధ కోట్.

html

<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మరియు ఎడమ మార్జిన్‌ను తీసివేయండి (తక్షణమే పిల్లలు మాత్రమే). ఇది తక్షణ పిల్లల జాబితా ఐటెమ్‌లకు మాత్రమే వర్తిస్తుంది , అంటే మీరు ఏదైనా సమూహ జాబితాల కోసం తరగతిని కూడా జోడించాలి.

ఇది జాబితా.
ఇది పూర్తిగా అన్‌స్టైల్‌గా కనిపిస్తుంది.
నిర్మాణాత్మకంగా, ఇది ఇప్పటికీ జాబితా.
అయితే, ఈ శైలి తక్షణ పిల్లల అంశాలకు మాత్రమే వర్తిస్తుంది.
సమూహ జాబితాలు:
- ఈ శైలి ద్వారా ప్రభావితం కాదు
- ఇంకా బుల్లెట్ చూపిస్తారు
- మరియు తగిన ఎడమ మార్జిన్ కలిగి ఉండాలి
ఇది ఇప్పటికీ కొన్ని పరిస్థితులలో ఉపయోగపడుతుంది.

html

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

ఇది జాబితా అంశం.
మరియు మరొకటి.
కానీ అవి ఇన్‌లైన్‌లో ప్రదర్శించబడతాయి.

html

<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సుదీర్ఘ నిబంధనల కోసం, మీరు ఎలిప్సిస్‌తో టెక్స్ట్‌ను కత్తిరించడానికి ఐచ్ఛికంగా తరగతిని జోడించవచ్చు .

వివరణ జాబితాలు

నిబంధనలను నిర్వచించడానికి వివరణ జాబితా సరైనది.

పదం

పదానికి నిర్వచనం.

మరియు మరికొన్ని ప్లేస్‌హోల్డర్ డెఫినిషన్ టెక్స్ట్.

మరొక పదం

ఈ నిర్వచనం చిన్నది, కాబట్టి అదనపు పేరాలు లేదా ఏదైనా లేదు.

కత్తిరించబడిన పదం కత్తిరించబడింది

స్థలం గట్టిగా ఉన్నప్పుడు ఇది ఉపయోగపడుతుంది. చివరిలో దీర్ఘవృత్తాకారాన్ని జోడిస్తుంది.

గూడు కట్టడం

సమూహ నిర్వచనం జాబితా: మీరు డెఫినిషన్ జాబితాలను ఇష్టపడతారని నేను విన్నాను. మీ డెఫినిషన్ లిస్ట్‌లో డెఫినిషన్ లిస్ట్ పెట్టనివ్వండి.

html

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

ప్రతిస్పందించే ఫాంట్ పరిమాణాలు

బూట్‌స్ట్రాప్ 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;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

మిక్సిన్స్

టైపోగ్రఫీ కోసం ప్రత్యేకమైన మిక్సిన్‌లు లేవు, కానీ బూట్‌స్ట్రాప్ రెస్పాన్సివ్ ఫాంట్ సైజింగ్ (RFS) ని ఉపయోగిస్తుంది .