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

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

ଏହି ପୃଷ୍ଠାରେ |

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

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

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

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>

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

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

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

html

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

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

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

ପ୍ରଦର୍ଶନ 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>ଉପାଦାନକୁ ପ୍ରତିନିଧିତ୍ୱ କରେ ଯାହା ଆଉ ପ୍ରାସଙ୍ଗିକ ନୁହେଁ କିମ୍ବା ଆଉ ସଠିକ୍ ନୁହେଁ |
ଇନଲାଇନ ପାଠ୍ୟର ଏକ ସ୍ପାନକୁ ପ୍ରତିନିଧିତ୍ୱ କରେ ଯାହା ଏକ ଉପାୟରେ ଉପସ୍ଥାପିତ ହେବା ଉଚିତ ଯାହା ସୂଚାଇଥାଏ ଯେ ଏହାର ଏକ ଅଣ-ପାଠ୍ୟ ଟିପ୍ପଣୀ ଅଛି |

ଯଦି ତୁମେ ତୁମର ପାଠ ଶ style ଳୀ କରିବାକୁ ଚାହୁଁଛ, ତୁମେ ଏହା ବଦଳରେ ନିମ୍ନ ଶ୍ରେଣୀଗୁଡ଼ିକ ବ୍ୟବହାର କରିବା ଉଚିତ:

.markସମାନ ଶ yles ଳୀ ପ୍ରୟୋଗ କରିବ |
.smallସମାନ ଶ yles ଳୀ ପ୍ରୟୋଗ କରିବ |
.text-decoration-underlineସମାନ ଶ yles ଳୀ ପ୍ରୟୋଗ କରିବ |
.text-decoration-line-throughସମାନ ଶ yles ଳୀ ପ୍ରୟୋଗ କରିବ <s>|

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

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

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

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

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

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

ଆକର୍ଷଣ

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 କୁ ଘୋଡ଼ାନ୍ତୁ |

ଏକ ଜଣାଶୁଣା ଉଦ୍ଧୃତି, ଏକ ବ୍ଲକ୍କୋଟ୍ ଉପାଦାନରେ ଅନ୍ତର୍ଭୁକ୍ତ |

html

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

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

HTML ସ୍ପେକ୍ ଆବଶ୍ୟକ କରେ ଯେ ବ୍ଲକ୍କୋଟ ଆଟ୍ରିବ୍ୟୁସନ୍ ବାହାରେ ରଖାଯିବ <blockquote>| ଗୁଣବତ୍ତା ପ୍ରଦାନ କରିବାବେଳେ, ତୁମକୁ ଏକରେ ଗୁଡ଼ାଇ ରଖ ଏବଂ ଶ୍ରେଣୀ ସହିତ ଏକ କିମ୍ବା ଏକ ବ୍ଲକ ସ୍ତରର ଉପାଦାନ ବ୍ୟବହାର <blockquote>କର (ଯଥା, ) | ଉତ୍ସ କାର୍ଯ୍ୟର ନାମକୁ ମଧ୍ୟ ଗୁଡ଼ାଇ ରଖିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |<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ଏବଂ ବାମ ମାର୍ଜିନ୍ ଅପସାରଣ କରନ୍ତୁ (କେବଳ ତୁରନ୍ତ ପିଲାମାନେ) | ଏହା କେବଳ ତୁରନ୍ତ ଶିଶୁ ତାଲିକା ଆଇଟମଗୁଡିକ ପାଇଁ ପ୍ରଯୁଜ୍ୟ , ଅର୍ଥାତ୍ ଆପଣଙ୍କୁ ଯେକ any ଣସି ନାଷ୍ଟେଡ୍ ତାଲିକା ପାଇଁ ଶ୍ରେଣୀ ଯୋଡିବାକୁ ପଡିବ |

ଏହା ଏକ ତାଲିକା |
ଏହା ସଂପୂର୍ଣ୍ଣ ଅଣସଂରକ୍ଷିତ ଦେଖାଯାଏ |
ଗଠନମୂଳକ ଭାବରେ, ଏହା ଏପର୍ଯ୍ୟନ୍ତ ଏକ ତାଲିକା |
ତଥାପି, ଏହି ଶ style ଳୀ କେବଳ ତୁରନ୍ତ ଶିଶୁ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ପ୍ରଯୁଜ୍ୟ |
ନଷ୍ଟ ହୋଇଥିବା ତାଲିକା:
- ଏହି ଶ 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ବ ally କଳ୍ପିକ ଭାବରେ ଏକ ଏଲିପ୍ସିସ୍ ସହିତ ପାଠ୍ୟକୁ ଛେଦନ କରିବାକୁ ଏକ ଶ୍ରେଣୀ ଯୋଡିପାରିବେ |

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

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

ଅବଧି

ଶବ୍ଦ ପାଇଁ ସଂଜ୍ଞା

ଏବଂ ଆଉ କିଛି ପ୍ଲେସହୋଲ୍ଡର୍ ସଂଜ୍ଞା ପାଠ୍ୟ |

ଅନ୍ୟ ଏକ ଶବ୍ଦ |

ଏହି ପରିଭାଷା ଛୋଟ, ତେଣୁ କ extra ଣସି ଅତିରିକ୍ତ ଅନୁଚ୍ଛେଦ କିମ୍ବା କିଛି ନାହିଁ |

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

ସ୍ଥାନ କଠିନ ହେଲେ ଏହା ଉପଯୋଗୀ ହୋଇପାରେ | ଶେଷରେ ଏକ ଏଲିପ୍ସିସ୍ ଯୋଗ କରେ |

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

ନଷ୍ଟ ହୋଇଥିବା ସଂଜ୍ଞା ତାଲିକା |: ମୁଁ ଶୁଣିଛି ତୁମକୁ ସଂଜ୍ଞା ତାଲିକା ପସନ୍ଦ କରେ | ତୁମ ସଂଜ୍ଞା ତାଲିକା ଭିତରେ ମୋତେ ଏକ ସଂଜ୍ଞା ତାଲିକା ରଖିବାକୁ ଦିଅ |

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>

ପ୍ରତିକ୍ରିୟାଶୀଳ ଫଣ୍ଟ ଆକାର |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ In ରେ, ଆମେ ଡିଫଲ୍ଟ ଭାବରେ ପ୍ରତିକ୍ରିୟାଶୀଳ ଫଣ୍ଟ୍ ସାଇଜ୍ ସକ୍ଷମ କରିଛୁ, ଟେକ୍ସଟ୍ କୁ ଡିଭାଇସ୍ ଏବଂ ଭ୍ୟୁପୋର୍ଟ ସାଇଜ୍ ମଧ୍ୟରେ ଅଧିକ ସ୍ natural ାଭାବିକ ଭାବରେ ସ୍କେଲ କରିବାକୁ ଅନୁମତି ଦିଏ | ଏହା କିପରି କାମ କରେ ଜାଣିବା ପାଇଁ 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;

ବିଭିନ୍ନ ପ୍ରକାରର ଟାଇପୋଗ୍ରାଫି ଉପାଦାନଗୁଡ଼ିକ ଏଠାରେ ଏବଂ ପୁନ o ବୁଟ୍ ରେ ମଧ୍ୟ ଉତ୍ସର୍ଗୀକୃତ ଭେରିଏବଲ୍ ଅଛି |

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

ମିକ୍ସନ୍ସ |

ଟାଇପୋଗ୍ରାଫି ପାଇଁ କ dedicated ଣସି ଉତ୍ସର୍ଗୀକୃତ ମିଶ୍ରଣ ନାହିଁ, କିନ୍ତୁ ବୁଟଷ୍ଟ୍ରାପ୍ ରେସପନ୍ସିଭ୍ ଫଣ୍ଟ୍ ସାଇଜିଂ (RFS) ବ୍ୟବହାର କରେ |