టైపోగ్రఫీ
గ్లోబల్ సెట్టింగ్‌లు, హెడ్డింగ్‌లు, బాడీ టెక్స్ట్, జాబితాలు మరియు మరిన్నింటితో సహా బూట్స్ట్రాప్ టైపోగ్రఫీ కోసం డాక్యుమెంటేషన్ మరియు ఉదాహరణలు.
గ్లోబల్ సెట్టింగ్‌లు
బూట్స్ట్రాప్ ప్రాథమిక ప్రపంచ ప్రదర్శన, టైపోగ్రఫీ మరియు లింక్ శైలులను సెట్ చేస్తుంది. మరింత నియంత్రణ అవసరమైనప్పుడు, టెక్స్ట్యువల్ యుటిలిటీ తరగతులను తనిఖీ చేయండి .
- ప్రతి OS మరియు పరికరానికి ఉత్తమమైన వాటిని ఎంచుకునే స్థానిక ఫాంట్ స్టాక్‌ను ఉపయోగించండి .
font-family - మరింత సమగ్రమైన మరియు ప్రాప్యత చేయగల రకం స్కేల్ కోసం, మేము బ్రౌజర్ డిఫాల్ట్ రూట్‌ని
font-size(సాధారణంగా 16px) ఉపయోగిస్తాము కాబట్టి సందర్శకులు తమ బ్రౌజర్ డిఫాల్ట్‌లను అవసరమైన విధంగా అనుకూలీకరించవచ్చు. - మా టైపోగ్రాఫిక్ బేస్‌గా
$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>ద్వారా అన్ని 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. బూట్స్ట్రాప్ శీర్షిక
<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 నుండి చిన్న ద్వితీయ శీర్షిక వచనాన్ని పునఃసృష్టించడానికి చేర్చబడిన యుటిలిటీ తరగతులను ఉపయోగించండి.
ఫేడెడ్ సెకండరీ టెక్స్ట్‌తో ఫ్యాన్సీ డిస్‌ప్లే హెడింగ్
<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>హోవర్‌లో విస్తరించిన సంస్కరణను చూపించడానికి సంక్షిప్తాలు మరియు ఎక్రోనింస్ కోసం HTML మూలకం యొక్క శైలీకృత అమలు . సంక్షిప్తాలు డిఫాల్ట్ అండర్‌లైన్‌ను కలిగి ఉంటాయి మరియు హోవర్‌లో అదనపు సందర్భాన్ని అందించడానికి మరియు సహాయక సాంకేతికతల వినియోగదారులకు సహాయం కర్సర్‌ను పొందుతాయి.
.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 చుట్టూ చుట్టండి.
బ్లాక్‌కోట్ మూలకంలో ఉన్న ప్రసిద్ధ కోట్.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>మూలానికి పేరు పెట్టడం
<footer class="blockquote-footer">మూలాన్ని గుర్తించడానికి a జోడించండి . సోర్స్ వర్క్ పేరును లో వ్రాప్ చేయండి <cite>.
బ్లాక్‌కోట్ మూలకంలో ఉన్న ప్రసిద్ధ కోట్.
<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 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>బ్లాక్‌కోట్ మూలకంలో ఉన్న ప్రసిద్ధ కోట్.
<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సుదీర్ఘ నిబంధనల కోసం, మీరు ఎలిప్సిస్‌తో టెక్స్ట్‌ను కత్తిరించడానికి ఐచ్ఛికంగా తరగతిని జోడించవచ్చు .
- వివరణ జాబితాలు
- నిబంధనలను నిర్వచించడానికి వివరణ జాబితా సరైనది.
- పదం
-
పదానికి నిర్వచనం.
మరియు మరికొన్ని ప్లేస్‌హోల్డర్ డెఫినిషన్ టెక్స్ట్.
- మరొక పదం
- ఈ నిర్వచనం చిన్నది, కాబట్టి అదనపు పేరాలు లేదా ఏదైనా లేదు.
- కత్తిరించబడిన పదం కత్తిరించబడింది
- స్థలం గట్టిగా ఉన్నప్పుడు ఇది ఉపయోగపడుతుంది. చివరిలో దీర్ఘవృత్తాకారాన్ని జోడిస్తుంది.
- గూడు కట్టడం
-
- సమూహ నిర్వచనం జాబితా
- మీరు డెఫినిషన్ జాబితాలను ఇష్టపడతారని నేను విన్నాను. మీ డెఫినిషన్ లిస్ట్‌లో డెఫినిషన్ లిస్ట్‌ని ఉంచుతాను.
<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 నాటికి, బూట్స్ట్రాప్ ప్రతిస్పందించే ఫాంట్ పరిమాణాలను ప్రారంభించే ఎంపికను అందిస్తుంది, పరికరం మరియు వీక్షణపోర్ట్ పరిమాణాలలో వచనాన్ని మరింత సహజంగా స్కేల్ చేయడానికి అనుమతిస్తుంది. Sass వేరియబుల్‌ని మార్చడం ద్వారా మరియు బూట్‌స్ట్రాప్‌ని రీకంపైల్ చేయడం ద్వారా RFS ని ప్రారంభించవచ్చు.$enable-responsive-font-sizestrue
RFS కి మద్దతు ఇవ్వడానికి , మా సాధారణ font-sizeలక్షణాలను భర్తీ చేయడానికి మేము సాస్ మిక్సిన్‌ని ఉపయోగిస్తాము . ప్రతిస్పందించే స్కేలింగ్ ప్రవర్తనను ప్రారంభించడానికి ప్రతిస్పందించే ఫాంట్ పరిమాణాలు calc()మిక్స్ మరియు వ్యూపోర్ట్ యూనిట్‌లతో ఫంక్షన్‌లుగా కంపైల్ చేయబడతాయి . RFS మరియు దాని కాన్ఫిగరేషన్ remగురించి మరింత దాని GitHub రిపోజిటరీలో చూడవచ్చు .