ଟାଇପୋଗ୍ରାଫି |
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଟାଇପୋଗ୍ରାଫି ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣ, ଗ୍ଲୋବାଲ୍ ସେଟିଙ୍ଗ୍, ହେଡିଙ୍ଗ୍, ବଡି ଟେକ୍ସଟ୍, ତାଲିକା, ଏବଂ ଅଧିକ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |
ଗ୍ଲୋବାଲ୍ ସେଟିଙ୍ଗ୍ |
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ମ 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। ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ |
<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 ଳୀ |
<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-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
ଲିଡ୍ |
ଯୋଗ କରି ଏକ ପାରାଗ୍ରାଫ୍ ଛିଡା କର .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>
କପିରାଇଟ୍ ଏବଂ ଆଇନଗତ ପାଠ୍ୟ ପରି ପାର୍ଶ୍ୱ ମନ୍ତବ୍ୟ ଏବଂ ଛୋଟ ମୁଦ୍ରଣକୁ ପ୍ରତିନିଧିତ୍ୱ କରେ |<s>
ଉପାଦାନକୁ ପ୍ରତିନିଧିତ୍ୱ କରେ ଯାହା ଆଉ ପ୍ରାସଙ୍ଗିକ ନୁହେଁ କିମ୍ବା ଆଉ ସଠିକ୍ ନୁହେଁ |<u>
ଇନଲାଇନ ପାଠ୍ୟର ଏକ ସ୍ପାନକୁ ପ୍ରତିନିଧିତ୍ୱ କରେ ଯାହା ଏକ ଉପାୟରେ ଉପସ୍ଥାପିତ ହେବା ଉଚିତ ଯାହା ସୂଚାଇଥାଏ ଯେ ଏଥିରେ ଏକ ଅଣ-ପାଠ୍ୟ ଟିପ୍ପଣୀ ଅଛି |
ଯଦି ତୁମେ ତୁମର ପାଠ ଶ style ଳୀ କରିବାକୁ ଚାହୁଁଛ, ତୁମେ ଏହା ବଦଳରେ ନିମ୍ନ ଶ୍ରେଣୀଗୁଡ଼ିକ ବ୍ୟବହାର କରିବା ଉଚିତ:
.mark
ସମାନ ଶ yles ଳୀ ପ୍ରୟୋଗ କରିବ<mark>
|.small
ସମାନ ଶ yles ଳୀ ପ୍ରୟୋଗ କରିବ<small>
|.text-decoration-underline
ସମାନ ଶ yles ଳୀ ପ୍ରୟୋଗ କରିବ<u>
|.text-decoration-line-through
ସମାନ ଶ yles ଳୀ ପ୍ରୟୋଗ କରିବ<s>
|
ଉପରୋକ୍ତ ଦେଖାଯାଇନଥିବାବେଳେ, 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>A well-known quote, contained in a blockquote element.</p>
</blockquote>
ଏକ ଉତ୍ସ ନାମକରଣ |
HTML ସ୍ପେକ୍ ଆବଶ୍ୟକ କରେ ଯେ ବ୍ଲକ୍କୋଟ ଆଟ୍ରିବ୍ୟୁସନ୍ ବାହାରେ ରଖାଯିବ <blockquote>
| ଗୁଣବତ୍ତା ପ୍ରଦାନ କରିବାବେଳେ, ତୁମକୁ ଏକରେ ଗୁଡ଼ାଇ ରଖ ଏବଂ ଶ୍ରେଣୀ ସହିତ ଏକ କିମ୍ବା ଏକ ବ୍ଲକ ସ୍ତରର ଉପାଦାନ ବ୍ୟବହାର <blockquote>
କର (ଯଥା, ) | ଉତ୍ସ କାର୍ଯ୍ୟର ନାମକୁ ମଧ୍ୟ ଗୁଡ଼ାଇ ରଖିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |<figure>
<figcaption>
<p>
.blockquote-footer
<cite>
<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>
ଶ୍ରେଣୀବଦ୍ଧତା |
ତୁମର ବ୍ଲକକୋଟର ଆଲାଇନ୍ମେଣ୍ଟ ପରିବର୍ତ୍ତନ କରିବାକୁ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ପାଠ୍ୟ ଉପଯୋଗିତା ବ୍ୟବହାର କର |
<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>
<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 ଳୀ ଦ୍ୱାରା ପ୍ରଭାବିତ ନୁହେଁ |
- ତଥାପି ଏକ ବୁଲେଟ୍ ଦେଖାଇବ |
- ଏବଂ ଉପଯୁକ୍ତ ବାମ ମାର୍ଜିନ୍ ଅଛି |
- କେତେକ ପରିସ୍ଥିତିରେ ଏହା ଏପର୍ଯ୍ୟନ୍ତ ଉପଯୋଗୀ ହୋଇପାରେ |
<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
ବ ally କଳ୍ପିକ ଭାବରେ ଏକ ଏଲିପ୍ସିସ୍ ସହିତ ପାଠ୍ୟକୁ ଛେଦନ କରିବାକୁ ଏକ ଶ୍ରେଣୀ ଯୋଡିପାରିବେ |
- ବର୍ଣ୍ଣନା ତାଲିକା |
- ସର୍ତ୍ତାବଳୀ ବ୍ୟାଖ୍ୟା କରିବା ପାଇଁ ଏକ ବର୍ଣ୍ଣନା ତାଲିକା ଉପଯୁକ୍ତ |
- ଅବଧି
-
ଶବ୍ଦ ପାଇଁ ସଂଜ୍ଞା
ଏବଂ ଆଉ କିଛି ପ୍ଲେସହୋଲ୍ଡର୍ ସଂଜ୍ଞା ପାଠ୍ୟ |
- ଅନ୍ୟ ଏକ ଶବ୍ଦ |
- ଏହି ପରିଭାଷା ଛୋଟ, ତେଣୁ କ extra ଣସି ଅତିରିକ୍ତ ଅନୁଚ୍ଛେଦ କିମ୍ବା କିଛି ନାହିଁ |
- ଛୋଟ ଶବ୍ଦଟି ଛୋଟ ହୋଇଛି |
- ସ୍ଥାନ କଠିନ ହେଲେ ଏହା ଉପଯୋଗୀ ହୋଇପାରେ | ଶେଷରେ ଏକ ଏଲିପ୍ସିସ୍ ଯୋଗ କରେ |
- ବସା ବାନ୍ଧିବା |
-
- ନଷ୍ଟ ହୋଇଥିବା ସଂଜ୍ଞା ତାଲିକା |
- ମୁଁ ଶୁଣିଛି ତୁମକୁ ସଂଜ୍ଞା ତାଲିକା ପସନ୍ଦ କରେ | ତୁମ ସଂଜ୍ଞା ତାଲିକା ଭିତରେ ମୋତେ ଏକ ସଂଜ୍ଞା ତାଲିକା ରଖିବାକୁ ଦିଅ |
<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;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
ମିକ୍ସନ୍ସ |
ଟାଇପୋଗ୍ରାଫି ପାଇଁ କ dedicated ଣସି ଉତ୍ସର୍ଗୀକୃତ ମିଶ୍ରଣ ନାହିଁ, କିନ୍ତୁ ବୁଟଷ୍ଟ୍ରାପ୍ ରେସପନ୍ସିଭ୍ ଫଣ୍ଟ୍ ସାଇଜିଂ (RFS) ବ୍ୟବହାର କରେ |