Source

ଟାଇପୋଗ୍ରାଫି |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଟାଇପୋଗ୍ରାଫି ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣ, ଗ୍ଲୋବାଲ୍ ସେଟିଙ୍ଗ୍, ହେଡିଙ୍ଗ୍, ବଡି ଟେକ୍ସଟ୍, ତାଲିକା, ଏବଂ ଅଧିକ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |

ଗ୍ଲୋବାଲ୍ ସେଟିଙ୍ଗ୍ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ମ basic ଳିକ ଗ୍ଲୋବାଲ୍ ପ୍ରଦର୍ଶନ, ଟାଇପୋଗ୍ରାଫି ଏବଂ ଲିଙ୍କ୍ ଶ yles ଳୀ ସେଟ୍ କରେ | ଯେତେବେଳେ ଅଧିକ ନିୟନ୍ତ୍ରଣ ଆବଶ୍ୟକ ହୁଏ, ପାଠ୍ୟ ଉପଯୋଗୀ ଶ୍ରେଣୀଗୁଡ଼ିକୁ ଯାଞ୍ଚ କରନ୍ତୁ |

ଏକ ଦେଶୀ ଫଣ୍ଟ ଷ୍ଟାକfont-family ବ୍ୟବହାର କରନ୍ତୁ ଯାହା ପ୍ରତ୍ୟେକ OS ଏବଂ ଡିଭାଇସ୍ ପାଇଁ ସର୍ବୋତ୍ତମ ଚୟନ କରେ |
ଅଧିକ ଅନ୍ତର୍ଭୂକ୍ତ ଏବଂ ପ୍ରବେଶଯୋଗ୍ୟ ପ୍ରକାର ସ୍କେଲ ପାଇଁ, ଆମେ ବ୍ରାଉଜରର ଡିଫଲ୍ଟ ରୁଟ୍ font-size(ସାଧାରଣତ 16 16px) ଅନୁମାନ କରୁ ତେଣୁ ପରିଦର୍ଶକମାନେ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ସେମାନଙ୍କର ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟ କଷ୍ଟୋମାଇଜ୍ କରିପାରିବେ |
ଆମର ଟାଇପୋଗ୍ରାଫିକ୍ ବେସ୍ ଭାବରେ ପ୍ରୟୋଗ ହୋଇଥିବା ପରି $font-family-base, $font-size-baseଏବଂ ଗୁଣଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |$line-height-base<body>
ମାଧ୍ୟମରେ ଗ୍ଲୋବାଲ୍ ଲିଙ୍କ୍ ରଙ୍ଗ ସେଟ୍ କରନ୍ତୁ $link-colorଏବଂ କେବଳ ଲିଙ୍କ୍ ଅଣ୍ଡରଲାଇନ୍ ପ୍ରୟୋଗ କରନ୍ତୁ :hover|
( ଡିଫଲ୍ଟ ଭାବରେ) ରେ $body-bgସେଟ୍ କରିବାକୁ ବ୍ୟବହାର କରନ୍ତୁ |background-color<body>#fff

ଏହି ଶ yles ଳୀଗୁଡିକ ଭିତରେ ମିଳିପାରିବ _reboot.scss, ଏବଂ ଗ୍ଲୋବାଲ୍ ଭେରିଏବଲ୍ ଗୁଡିକ ବ୍ୟାଖ୍ୟା କରାଯାଇଛି _variables.scss| $font-size-baseସେଟ୍ କରିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ rem|

ଶିରୋନାମା

ସମସ୍ତ HTML ହେଡିଙ୍ଗ୍, <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>

ହେଡିଙ୍ଗ୍ କଷ୍ଟୋମାଇଜ୍

ବୁଟଷ୍ଟ୍ରାପ୍ from ରୁ ଛୋଟ ସେକେଣ୍ଡାରୀ ହେଡିଙ୍ଗ୍ ଟେକ୍ସଟ୍ ପୁନ re ନିର୍ମାଣ କରିବାକୁ ଅନ୍ତର୍ଭୁକ୍ତ ୟୁଟିଲିଟି କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ |

ଫ୍ୟାନ୍ସି ଡିସପ୍ଲେ ହେଡିଙ୍ଗ୍ ଦୁର୍ବଳ ସେକେଣ୍ଡାରୀ ଟେକ୍ସଟ୍ ସହିତ |

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

ହେଡିଙ୍ଗ୍ ପ୍ରଦର୍ଶନ କରନ୍ତୁ |

ପାରମ୍ପାରିକ ହେଡିଙ୍ଗ୍ ଉପାଦାନଗୁଡିକ ତୁମର ପୃଷ୍ଠା ବିଷୟବସ୍ତୁର ମାଂସରେ ସର୍ବୋତ୍ତମ କାର୍ଯ୍ୟ କରିବାକୁ ଡିଜାଇନ୍ ହୋଇଛି | ଯେତେବେଳେ ଆପଣ ଛିଡା ହେବା ପାଇଁ ଏକ ହେଡିଙ୍ଗ୍ ଆବଶ୍ୟକ କରନ୍ତି, ଏକ ପ୍ରଦର୍ଶନୀ ହେଡିଙ୍ଗ୍ ବ୍ୟବହାର କରିବାକୁ ଚିନ୍ତା କରନ୍ତୁ - ଏକ ବୃହତ, ସାମାନ୍ୟ ଅଧିକ ମତାମତପ୍ରାପ୍ତ ହେଡିଙ୍ଗ୍ ଶ style ଳୀ |

ପ୍ରଦର୍ଶନ 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|

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor | Duis mollis, est non commodo luctus |

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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ସମାନ ଶ yles ଳୀଗୁଡିକ ପ୍ରୟୋଗ କରିବା ପାଇଁ ଶ୍ରେଣୀଗୁଡିକ ମଧ୍ୟ ଉପଲବ୍ଧ <mark>ଏବଂ <small>ଟ୍ୟାଗଗୁଡିକ ଆଣିଥିବା କ un ଣସି ଅବାଞ୍ଛିତ ଅର୍ଥଗତ ପ୍ରଭାବକୁ ଏଡାଇବା |

ଉପରୋକ୍ତ ଦେଖାଯାଇନଥିବାବେଳେ, HTML5 ରେ <b>ବ୍ୟବହାର କରିବାକୁ ମୁକ୍ତ ହୁଅନ୍ତୁ | ଶବ୍ଦ କିମ୍ବା ବାକ୍ୟାଂଶଗୁଡିକୁ ହାଇଲାଇଟ୍ କରିବା ପାଇଁ ଉଦ୍ଦିଷ୍ଟ ଯେତେବେଳେ ଅତିରିକ୍ତ ଗୁରୁତ୍ୱ ପ୍ରଦାନ ନକରି ଅଧିକାଂଶ ସମୟରେ ସ୍ୱର, ବ technical ଷୟିକ ଶବ୍ଦ ଇତ୍ୟାଦି ପାଇଁ |<i><b><i>

ପାଠ୍ୟ ଉପଯୋଗୀତା |

ଆମର ପାଠ୍ୟ ଉପଯୋଗୀତା ଏବଂ ରଙ୍ଗ ଉପଯୋଗୀତା ସହିତ ପାଠ୍ୟ ଆଲାଇନ୍ମେଣ୍ଟ, ରୂପାନ୍ତର, ଶ style ଳୀ, ଓଜନ, ଏବଂ ରଙ୍ଗ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

ସଂକ୍ଷିପ୍ତକରଣ

<abbr>ହୋଭରରେ ବିସ୍ତାରିତ ସଂସ୍କରଣ ଦେଖାଇବା ପାଇଁ ସଂକ୍ଷିପ୍ତକରଣ ଏବଂ ଆକ୍ଷରିକ ଶବ୍ଦ ପାଇଁ HTML ର ଉପାଦାନର ଷ୍ଟାଇଲାଇଜଡ୍ କାର୍ଯ୍ୟକାରିତା | ସଂକ୍ଷିପ୍ତକରଣଗୁଡ଼ିକର ଏକ ଡିଫଲ୍ଟ ଅଣ୍ଡରଲାଇନ୍ ଅଛି ଏବଂ ହୋଭର ଏବଂ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ଅତିରିକ୍ତ ପ୍ରସଙ୍ଗ ପ୍ରଦାନ କରିବାକୁ ଏକ ସାହାଯ୍ୟ କର୍ସର୍ ହାସଲ କରେ |

.initialismଟିକିଏ ଛୋଟ ଫଣ୍ଟ-ସାଇଜ୍ ପାଇଁ ଏକ ସଂକ୍ଷିପ୍ତରେ ଯୋଡନ୍ତୁ |

ଆକର୍ଷଣ

HTML

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

ବ୍ଲକକୋଟସ୍ |

ତୁମର ଡକ୍ୟୁମେଣ୍ଟ୍ ଭିତରେ ଅନ୍ୟ ଉତ୍ସରୁ ବିଷୟବସ୍ତୁର ବ୍ଲକଗୁଡିକ ଉଦ୍ଧୃତ କରିବା ପାଇଁ | କୋଟ ଭାବରେ ଯେକ HTML <blockquote class="blockquote">ଣସି HTML କୁ ଘୋଡ଼ାନ୍ତୁ |

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ଆମ୍, କନସେକ୍ଟେଟର୍ ଆଡିପିସିଙ୍ଗ୍ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ ପୋଜୁରେ ଏକ ଆଣ୍ଟେ ଏରାଟ କରନ୍ତୁ |

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

ଏକ ଉତ୍ସ ନାମକରଣ |

<footer class="blockquote-footer">ଉତ୍ସ ଚିହ୍ନଟ ପାଇଁ ଏକ ଯୋଗକର | ଉତ୍ସ କାର୍ଯ୍ୟର ନାମକୁ ଗୁଡ଼ାଇ ରଖ <cite>|

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ଆମ୍, କନସେକ୍ଟେଟର୍ ଆଡିପିସିଙ୍ଗ୍ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ ପୋଜୁରେ ଏକ ଆଣ୍ଟେ ଏରାଟ କରନ୍ତୁ |

ଉତ୍ସ ଆଖ୍ୟାରେ କେହି ଜଣେ ପ୍ରସିଦ୍ଧ |

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ତାଲିକା |

ଅଣସଂରକ୍ଷିତ |

ତାଲିକା ଆଇଟମଗୁଡିକରେ ଡିଫଲ୍ଟ list-styleଏବଂ ବାମ ମାର୍ଜିନ୍ ଅପସାରଣ କରନ୍ତୁ (କେବଳ ତୁରନ୍ତ ପିଲାମାନେ) | ଏହା କେବଳ ତୁରନ୍ତ ଶିଶୁ ତାଲିକା ଆଇଟମଗୁଡିକ ପାଇଁ ପ୍ରଯୁଜ୍ୟ , ଅର୍ଥାତ୍ ଯେକ any ଣସି ନାଷ୍ଟେଡ୍ ତାଲିକା ପାଇଁ ଆପଣଙ୍କୁ ଶ୍ରେଣୀ ଯୋଡିବାକୁ ପଡିବ |

ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍ |
କନସେକ୍ଟୁର ଆଡିପିସିଂ ଏଲିଟ୍ |
ମାସା ରେ ଇଣ୍ଟିଜର୍ ମୋଲେଷ୍ଟି ଲୋରେମ୍ |
ପ୍ରିଟିୟମ୍ ନିସଲ୍ ଆଲିକେଟ୍ ରେ ଫାସିଲିସ୍ |
Nulla volutpat aliquam velit |
- ଫାସେଲସ୍ ଆଇକୁଲିସ୍ ନେକ୍ |
- ପୁରସ୍ ସୋଡାଲ୍ ଅଲଟ୍ରିକସ୍ |
- ଭେଷ୍ଟିବୁଲମ୍ ଲୋରାଇଟ୍ ପୋର୍ଟିଟର୍ ସେମ୍ |
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel |
ଏନିନ୍ ସିଟ୍ ଆମେଟ୍ ଏରାଟ୍ ନନ୍କ୍ |
ପୋର୍ଟିଟର୍ ଲୋରେମ୍ ଇଗେଟ୍ କରନ୍ତୁ |

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

କ୍ରମରେ

marginଏକ ତାଲିକାର ବୁଲେଟ୍ ଅପସାରଣ କରନ୍ତୁ ଏବଂ ଦୁଇଟି ଶ୍ରେଣୀର ମିଶ୍ରଣ ସହିତ କିଛି ଆଲୋକ ପ୍ରୟୋଗ କରନ୍ତୁ , .list-inlineଏବଂ .list-inline-item|

ଲୋରେମ୍ ଇପ୍ସମ୍ |
ଫାସେଲସ୍ ଆଇକୁଲିସ୍ |
ନୁଲା ଭଲ୍ୟୁଟପାଟ |

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

ବର୍ଣ୍ଣନା ତାଲିକା ଶ୍ରେଣୀବଦ୍ଧତା |

ଆମର ଗ୍ରୀଡ୍ ସିଷ୍ଟମର ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଶ୍ରେଣୀଗୁଡିକ (କିମ୍ବା ଅର୍ଥଗତ ମିଶ୍ରଣ) ବ୍ୟବହାର କରି ଭୂସମାନ୍ତର ଭାବରେ ଶବ୍ଦ ଏବଂ ବର୍ଣ୍ଣନାଗୁଡିକ ଆଲାଇନ୍ କରନ୍ତୁ | ଅଧିକ ସମୟ ପାଇଁ, ଆପଣ .text-truncateବ ally କଳ୍ପିକ ଭାବରେ ଏକ ଏଲିପ୍ସିସ୍ ସହିତ ପାଠ୍ୟକୁ ଛେଦନ କରିବାକୁ ଏକ ଶ୍ରେଣୀ ଯୋଡିପାରିବେ |

ବର୍ଣ୍ଣନା ତାଲିକା |

ସର୍ତ୍ତାବଳୀ ବ୍ୟାଖ୍ୟା କରିବା ପାଇଁ ଏକ ବର୍ଣ୍ଣନା ତାଲିକା ଉପଯୁକ୍ତ |

ଇଉଜିମୋଡ୍ |

ଭେଷ୍ଟିବୁଲମ୍ id ligula porta felis euismod semper eget lacinia odio sem nec elit।

Eget metus ରେ Donec id elit non mi porta gravida |

ମାଲେସୁଆଡା ପୋର୍ଟା |

Etiam porta sem maleuada magna mollis euismod |

ଛୋଟ ଶବ୍ଦଟି ଛୋଟ ହୋଇଛି |

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus |

ବସା ବାନ୍ଧିବା |

ନଷ୍ଟ ହୋଇଥିବା ସଂଜ୍ଞା ତାଲିକା |: ଏନିନ୍ ପୋଜୁରେର୍, ଟର୍ଟର୍ ସେଡ୍ କର୍ସସ୍ ଫେଗୁଏଟ୍, ନନ୍କ୍ ଆଗୁ ବ୍ଲାଣ୍ଡିଟ୍ ନନ୍କ୍ |

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

ପ୍ରତିକ୍ରିୟାଶୀଳ ଟାଇପୋଗ୍ରାଫି |

ପ୍ରତିକ୍ରିୟାଶୀଳ ଟାଇପୋଗ୍ରାଫିfont-size କେବଳ ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକର ଏକ କ୍ରମରେ ମୂଳ ଉପାଦାନର ଆଡଜଷ୍ଟ କରି ଟେକ୍ସଟ୍ ଏବଂ ଉପାଦାନଗୁଡ଼ିକୁ ମାପିବା କୁ ବୁ .ାଏ | ବୁଟଷ୍ଟ୍ରାପ୍ ଆପଣଙ୍କ ପାଇଁ ଏହା କରେ ନାହିଁ, କିନ୍ତୁ ଯଦି ଆପଣ ଏହା ଆବଶ୍ୟକ କରନ୍ତି ତେବେ ଯୋଡିବା ପ୍ରାୟତ easy ସହଜ |

ଅଭ୍ୟାସରେ ଏହାର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି | font-sizeଆପଣ ଚାହୁଁଥିବା s ଏବଂ ମିଡିଆ ପ୍ରଶ୍ନଗୁଡିକ ବାଛନ୍ତୁ |

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}