బ్రౌసర్ 5 టెక్స్ట్/ఫార్మటింగ్

Bootstrap 5 默认设置

Bootstrap 5 默认 font-size 为 1rem(默认为 16px),line-height 为 1.5。

此外,所有 <p> 元素都设置了 margin-top: 0margin-bottom: 1rem (默认为 16px)。

<h1> - <h6>

Bootstrap 5 把 HTML 标题(<h1><h6>)的样式设置为有更粗的 font-weight 以及响应式的 font-size。

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

如果需要,您还可以在其他元素上使用 .h1.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>

స్వయంగా ప్రయత్నించండి

display 标题

display 标题用于比普通标题更突出(更大的 font-size 和更细的 font-weight),有六个类可供选择:.display-1.display-6

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

<small>

在 Bootstrap 5 中,HTML <small> 元素(和 .small 用于在任何标题中创建较小的辅助文本:

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

Bootstrap 5 将使用黄色背景颜色和一些内边距来设置 .mark 的样式:

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

Bootstrap 5 将 HTML 元素的样式设置为底部带有虚线边框,悬停时带有问号的光标:

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

<blockquote>

ఇతర మూలాల నుండి ప్రతిపాదనలను ఉపయోగించడానికి ఉపయోగించండి .blockquote క్లాస్ ను జోడించండి <blockquote>పేరు నిర్వహించడానికి ఉపయోగించండి, ఉదాహరణకు “ప్రపంచ ప్రకృతి నిధి వెబ్ సైట్ నుండి వచ్చినది”, .blockquote-footer క్లాస్:

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

<dl>

Bootstrap 5 HTML ను ఈ విధంగా స్టైల్స్ చేస్తుంది: <dl> ఎలమెంట్ స్టైల్స్:

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

<code>

Bootstrap 5 HTML ను ఈ విధంగా స్టైల్స్ చేస్తుంది: <code> ఎలమెంట్ స్టైల్స్:

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

<kbd>

Bootstrap 5 HTML ను ఈ విధంగా స్టైల్స్ చేస్తుంది: <kbd> ఎలమెంట్ స్టైల్స్:

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

<pre>

Bootstrap 5 HTML ను ఈ విధంగా స్టైల్స్ చేస్తుంది: <pre> ఎలమెంట్ స్టైల్స్:

ఉదాహరణ

స్వయంగా ప్రయత్నించండి

మరిన్ని ప్రింటింగ్ క్లాస్లు

క్రింది Bootstrap 5 క్లాస్లను HTML ఎలమెంట్ స్టైల్స్ కు జోడించవచ్చు:

క్లాస్ వర్ణన ఉదాహరణ
.lead ప్రకటనలను కనబడే చేస్తుంది. ప్రయత్నించండి
.text-left వచనాలను ఎడమ జతగా చూపిస్తుంది. ప్రయత్నించండి
.text-break పొడవైన వచనాలు మార్గం నాశనం చేయకుండా చూపిస్తుంది. ప్రయత్నించండి
.text-center మధ్యన జతగా చూపిస్తుంది. ప్రయత్నించండి
.text-decoration-none లింకులలో క్రింది గుర్తింపులను తొలగిస్తుంది. ప్రయత్నించండి
.text-end వచనాలను కుడి జతగా చూపిస్తుంది. ప్రయత్నించండి
.text-nowrap వచనాలను పరిమితం చేస్తుంది. ప్రయత్నించండి
.text-lowercase చిన్న వచనాలను నిర్ధారిస్తుంది. ప్రయత్నించండి
.text-uppercase పెద్ద వచనాలను నిర్ధారిస్తుంది. ప్రయత్నించండి
.text-capitalize పెద్ద వచనాలను నిర్ధారిస్తుంది. ప్రయత్నించండి
.initialism <abbr> ఎలమెంట్ లోని వచనాన్ని తక్కువ ఫంట్ లో చూపిస్తుంది. ప్రయత్నించండి
.list-unstyled జాబితా అంశాల మూల జాబితా స్టైల్స్ మరియు ఎడమ బాహ్య మార్గం తొలగించండి (ఈ <ul> మరియు <ol> కు ఉపయోగపడుతుంది).
ఈ క్లాస్ కేవలం ప్రత్యక్ష ఉపజాబితా అంశాలకు ఉపయోగపడుతుంది.
ఏదైనా నిరంతర జాబితాలో మూల జాబితా స్టైల్స్ తొలగించడానికి కూడా ఈ రకం ను నిర్మాణం చేయండి.
ప్రయత్నించండి
.list-inline అన్ని జాబితా అంశాలను ఒక వరుసలో ఉంచండి.
ప్రతి <li> ఎలమెంట్ పై .list-inline-item తో కలిసి ఉపయోగించండి.
ప్రయత్నించండి