in English

ପୁନ o ଚାଳନ କରନ୍ତୁ |

ପୁନ o ବୁଟ୍, ଗୋଟିଏ ଫାଇଲରେ ଉପାଦାନ-ନିର୍ଦ୍ଦିଷ୍ଟ CSS ପରିବର୍ତ୍ତନଗୁଡ଼ିକର ଏକ ସଂଗ୍ରହ, ଏକ ସୁସଜ୍ଜିତ, ସ୍ଥିର ଏବଂ ସରଳ ଭିତ୍ତିଭୂମି ଯୋଗାଇବା ପାଇଁ କିକଷ୍ଟାର୍ଟ ବୁଟଷ୍ଟ୍ରାପ୍ |

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

ଉପାୟ

ପୁନ element ବୁଟ ନର୍ମାଲାଇଜ୍ ଉପରେ ନିର୍ମିତ, କେବଳ HTML ଚୟନକର୍ତ୍ତା ବ୍ୟବହାର କରି କିଛି HTML ଶ elements ଳୀ ସହିତ ଅନେକ HTML ଉପାଦାନ ପ୍ରଦାନ କରିଥାଏ | ଅତିରିକ୍ତ ଷ୍ଟାଇଲ୍ କେବଳ କ୍ଲାସ୍ ସହିତ କରାଯାଇଥାଏ | ଉଦାହରଣ ସ୍ୱରୂପ, ଆମେ <table>ଏକ ସରଳ ବେସ୍ ଲାଇନ୍ ପାଇଁ କିଛି ଶ yles ଳୀକୁ ପୁନ bo ବୁଟ କରୁ ଏବଂ ପରେ ପ୍ରଦାନ .table, .table-borderedଏବଂ ଅଧିକ |

ପୁନ o ବୁଟରେ କ’ଣ ନବଲିଖନ କରାଯିବ ତାହା ବାଛିବା ପାଇଁ ଏଠାରେ ଆମର ନିର୍ଦ୍ଦେଶାବଳୀ ଏବଂ କାରଣଗୁଡ଼ିକ ଅଛି:

ମାପନୀୟ ଉପାଦାନ ବ୍ୟବଧାନ ପାଇଁ rems ପରିବର୍ତ୍ତେ s ବ୍ୟବହାର କରିବାକୁ କିଛି ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ଅଦ୍ୟତନ କରନ୍ତୁ |em
ଏଡ଼ାନ୍ତୁ margin-top| ଭର୍ଟିକାଲ୍ ମାର୍ଜିନଗୁଡିକ ନଷ୍ଟ ହୋଇପାରେ, ଅପ୍ରତ୍ୟାଶିତ ଫଳାଫଳ ଦେଇଥାଏ | ସବୁଠାରୁ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ କଥା ହେଉଛି, ଗୋଟିଏ ଦିଗ marginହେଉଛି ଏକ ସରଳ ମାନସିକ ମଡେଲ |
ଡିଭାଇସ୍ ଆକାରରେ ସହଜ ମାପିବା ପାଇଁ, ବ୍ଲକ୍ ଉପାଦାନଗୁଡିକ rems ପାଇଁ margins ବ୍ୟବହାର କରିବା ଉଚିତ୍ |
ଯେତେବେଳେ ସମ୍ଭବ fontବ୍ୟବହାର କରି ସମ୍ପର୍କିତ ଗୁଣଗୁଡିକର ଘୋଷଣାକୁ ସର୍ବନିମ୍ନ ରଖନ୍ତୁ |inherit

CSS ଭେରିଏବଲ୍ |

V5.2.0 ରେ ଯୋଡା ଯାଇଛି |

V5.1.1 ସହିତ, ଆମେ ଆମର @importସମସ୍ତ CSS ବଣ୍ଡଲ୍ ( ଅନ୍ତର୍ଭୂକ୍ତ bootstrap.cssକରି bootstrap-reboot.css, ଏବଂ bootstrap-grid.css) ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ଆମର ଆବଶ୍ୟକୀୟ s ମାନକ କରିଛୁ _root.scss| :rootସେହି ବଣ୍ଡଲରେ କେତେଗୁଡ଼ିଏ ବ୍ୟବହୃତ ହେଉନା କାହିଁକି, ଏହା ସମସ୍ତ ବଣ୍ଡଲରେ ସ୍ତରୀୟ CSS ଭେରିଏବଲ୍ ଯୋଡିଥାଏ | ପରିଶେଷରେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ 5 ଅଧିକ CSS ଭେରିଏବଲ୍ ଦେଖିବା ସହିତ ଜାରି ରଖିବ , ସାସ୍କୁ ସର୍ବଦା ପୁନ omp ସଂକଳନ କରିବାର ଆବଶ୍ୟକତା ବିନା ଅଧିକ ରିଅଲ୍ ଟାଇମ୍ କଷ୍ଟମାଇଜେସନ୍ ପ୍ରଦାନ କରିବାକୁ | ଆମର ପନ୍ଥା ହେଉଛି ଆମର ଉତ୍ସ ସାସ୍ ଭେରିଏବଲ୍ ନେବା ଏବଂ ସେମାନଙ୍କୁ CSS ଭେରିଏବଲ୍ ରେ ରୂପାନ୍ତର କରିବା | ସେହି ଉପାୟରେ, ଯଦିଓ ଆପଣ CSS ଭେରିଏବଲ୍ ବ୍ୟବହାର କରନ୍ତି ନାହିଁ, ତଥାପି ଆପଣଙ୍କ ପାଖରେ ସାସ୍ ର ସମସ୍ତ ଶକ୍ତି ଅଛି | ଏହା ଏପର୍ଯ୍ୟନ୍ତ ଅଗ୍ରଗତି କରୁଛି ଏବଂ ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ କାର୍ଯ୍ୟକାରୀ କରିବାକୁ ସମୟ ଲାଗିବ |

ଉଦାହରଣ ସ୍ୱରୂପ, :rootସାଧାରଣ ଶ yles ଳୀ ପାଇଁ ଏହି CSS ଭେରିଏବଲ୍ ଗୁଡିକୁ ବିଚାର କରନ୍ତୁ <body>:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

ଅଭ୍ୟାସରେ, ସେହି ଭେରିଏବଲ୍ ଗୁଡିକ ପୁନ Reb ବୁଟ୍ ରେ ପ୍ରୟୋଗ କରାଯାଏ:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

ଯାହା ଆପଣଙ୍କୁ ରିଅଲ୍-ଟାଇମ୍ କଷ୍ଟୋମାଇଜେସନ୍ କରିବାକୁ ଅନୁମତି ଦିଏ ଯଦିଓ ଆପଣ ପସନ୍ଦ କରନ୍ତି:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

ପୃଷ୍ଠା ଡିଫଲ୍ଟ |

ଉନ୍ନତ ପୃଷ୍ଠା-ଡିଫଲ୍ଟ ପ୍ରଦାନ କରିବାକୁ ଏବଂ ଉପାଦାନଗୁଡିକ ଅଦ୍ୟତନ କରାଯାଇଥାଏ <html>| <body>ଅଧିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଭାବରେ:

ସର୍ବଭାରତୀୟ box-sizingସ୍ତରରେ ପ୍ରତ୍ୟେକ ଉପାଦାନ ଉପରେ ସେଟ୍ ହୋଇଛି - *::beforeଏବଂ ଅନ୍ତର୍ଭୂକ୍ତ *::afterକରି border-box| ଏହା ସୁନିଶ୍ଚିତ କରେ ଯେ ପ୍ୟାଡିଂ କିମ୍ବା ସୀମା ହେତୁ ଉପାଦାନର ଘୋଷିତ ମୋଟେଇ କେବେବି ଅତିକ୍ରମ କରିବ ନାହିଁ |
- ଉପରେ କ base ଣସି ଆଧାର font-sizeଘୋଷିତ ହୋଇନାହିଁ <html>, କିନ୍ତୁ 16pxଅନୁମାନ କରାଯାଏ (ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟ) | ବ୍ୟବହାରକାରୀଙ୍କ ପସନ୍ଦକୁ ସମ୍ମାନ ଦେବା ଏବଂ ଅଧିକ ସୁଗମ ଆଭିମୁଖ୍ୟ ସୁନିଶ୍ଚିତ କରିବା ସମୟରେ ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକ ମାଧ୍ୟମରେ ସହଜ ପ୍ରତିକ୍ରିୟାଶୀଳ ପ୍ରକାର-ସ୍କେଲିଂ ପାଇଁ font-size: 1remପ୍ରୟୋଗ କରାଯାଏ | <body>ଭେରିଏବଲ୍ ପରିବର୍ତ୍ତନ କରି ଏହି ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟକୁ ନବଲିଖନ କରାଯାଇପାରିବ $font-size-root|
ଏହା ମଧ୍ୟ <body>ଏକ ଗ୍ଲୋବାଲ୍ font-family,, ଏବଂ । ଫଣ୍ଟ ଅସଙ୍ଗତିକୁ ରୋକିବା ପାଇଁ ଏହା ପରେ କିଛି ଫର୍ମ ଉପାଦାନ ଦ୍ୱାରା ଉତ୍ତରାଧିକାରୀ |font-weightline-heightcolor
ନିରାପତ୍ତା ପାଇଁ , ଡିଫଲ୍ଟ ଭାବରେ <body>ଏକ ଘୋଷିତ ହୋଇଛି |background-color#fff

ଦେଶୀ ଫଣ୍ଟ ଷ୍ଟାକ |

ପ୍ରତ୍ୟେକ ଡିଭାଇସ୍ ଏବଂ OS ରେ ସର୍ବୋତ୍କୃଷ୍ଟ ଟେକ୍ସଟ୍ ରେଣ୍ଡରିଂ ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଏକ “ଦେଶୀ ଫଣ୍ଟ୍ ଷ୍ଟାକ” କିମ୍ବା “ସିଷ୍ଟମ୍ ଫଣ୍ଟ୍ ଷ୍ଟାକ” ବ୍ୟବହାର କରେ | ପରଦାରେ ଉନ୍ନତ ରେଣ୍ଡରିଂ, ଭେରିଏବଲ୍ ଫଣ୍ଟ୍ ସପୋର୍ଟ ଏବଂ ଅଧିକ ସହିତ ଏହି ସିଷ୍ଟମ୍ ଫଣ୍ଟଗୁଡିକ ଆଜିର ଡିଭାଇସ୍ କୁ ଧ୍ୟାନରେ ରଖି ଡିଜାଇନ୍ କରାଯାଇଛି | ଏହି ସ୍ମାଶିଂ ମ୍ୟାଗେଜିନ ପ୍ରବନ୍ଧରେ ଦେଶୀ ଫଣ୍ଟ ଷ୍ଟାକ ବିଷୟରେ ଅଧିକ ପ .଼ନ୍ତୁ |

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଫଣ୍ଟ୍ ଷ୍ଟାକରେ ଇମୋଜି ଫଣ୍ଟ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଅନେକ ସାଧାରଣ ପ୍ରତୀକ / ଡିଙ୍ଗବଟ୍ ୟୁନିକୋଡ୍ ବର୍ଣ୍ଣଗୁଡିକ ବହୁ ରଙ୍ଗର ପିକ୍ଟୋଗ୍ରାଫ୍ ଭାବରେ ଉପସ୍ଥାପିତ ହେବ | ବ୍ରାଉଜର୍ / ପ୍ଲାଟଫର୍ମର ଦେଶୀ ଇମୋଜି ଫଣ୍ଟରେ ବ୍ୟବହୃତ ଶ style ଳୀ ଉପରେ ନିର୍ଭର କରି ସେମାନଙ୍କର ରୂପ ଭିନ୍ନ ହେବ, ଏବଂ ସେମାନେ କ CS ଣସି CSS ଶ yles ଳୀ ଦ୍ୱାରା ପ୍ରଭାବିତ ହେବେ ନାହିଁ color|

ଏହା ବୁଟଷ୍ଟ୍ରାପରେ ସମଗ୍ର ବିଶ୍ୱରେ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଉତ୍ତରାଧିକାରୀ ଭାବରେ font-familyପ୍ରୟୋଗ କରାଯାଏ | <body>ଗ୍ଲୋବାଲ୍ ସୁଇଚ୍ କରିବାକୁ , ବୁଟଷ୍ଟ୍ରାପ୍ font-familyଅପଡେଟ୍ ଏବଂ ପୁନ omp କମ୍ପାଇଲ୍ କରନ୍ତୁ |$font-family-base

ଶିରୋନାମା ଏବଂ ଅନୁଚ୍ଛେଦ |

ସମସ୍ତ ହେଡିଙ୍ଗ୍ ଉପାଦାନଗୁଡିକ - ଯଥା, <h1>- ଏବଂ <p>ସେଗୁଡିକ ଅପସାରଣ କରିବାକୁ ପୁନ res ସେଟ୍ ହୋଇଛି margin-top| ସହଜ ବ୍ୟବଧାନ ପାଇଁ ହେଡିଙ୍ଗ୍ margin-bottom: .5remଯୋଡିଛି ଏବଂ ପାରାଗ୍ରାଫ୍ |margin-bottom: 1rem

ଶୀର୍ଷଲେଖ	ଉଦାହରଣ \|
`<h1></h1>`	h1 ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ \|
`<h2></h2>`	h2। ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ \|
`<h3></h3>`	h3। ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ \|
`<h4></h4>`	h4। ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ \|
`<h5></h5>`	h5। ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ \|
`<h6></h6>`	h6। ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ \|

ଭୂସମାନ୍ତର ନିୟମ |

ଉପାଦାନକୁ <hr>ସରଳୀକୃତ କରାଯାଇଛି | ବ୍ରାଉଜର୍ ଡିଫଲ୍ଟ ପରି, <hr>s ମାଧ୍ୟମରେ ଷ୍ଟାଇଲ୍ border-topହୋଇଛି, ଏକ ଡିଫଲ୍ଟ ଅଛି opacity: .25, ଏବଂ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ସେଗୁଡିକର ଉତ୍ତରାଧିକାରୀ , ପିତାମାତାଙ୍କ ଦ୍ୱାରା କେବେ ସେଟ୍ border-colorହୋଇଛି color| colorସେଗୁଡିକ ପାଠ୍ୟ, ସୀମା, ଏବଂ ସ୍ୱଚ୍ଛତା ଉପଯୋଗୀତା ସହିତ ପରିବର୍ତ୍ତିତ ହୋଇପାରିବ |

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

ତାଲିକା |

ସମସ୍ତ ତାଲିକାଗୁଡ଼ିକ <ul>,, <ol>ଏବଂ, ଏବଂ <dl>ସେମାନଙ୍କର margin-topଅପସାରିତ ହୋଇଛି ଏବଂ a margin-bottom: 1rem। ନେଷ୍ଟେଡ୍ ତାଲିକାଗୁଡ଼ିକରେ ନାହିଁ margin-bottom| ଆମେ padding-leftଅନ୍ <ul>ଏବଂ <ol>ଉପାଦାନଗୁଡିକ ମଧ୍ୟ ପୁନ res ସେଟ୍ କରିଛୁ |

ସମସ୍ତ ତାଲିକାଗୁଡ଼ିକର ଟପ୍ ମାର୍ଜିନ୍ ଅପସାରିତ ହୋଇଛି |
ଏବଂ ସେମାନଙ୍କର ତଳ ମାର୍ଜିନ୍ ସ୍ୱାଭାବିକ ହେଲା |
ନେଷ୍ଟେଡ୍ ତାଲିକାଗୁଡ଼ିକର କ bottom ଣସି ତଳ ମାର୍ଜିନ୍ ନାହିଁ |
- ଏହି ଉପାୟରେ ସେମାନଙ୍କର ଅଧିକ ରୂପ ଦେଖାଯାଏ |
- ବିଶେଷକରି ଯେତେବେଳେ ଅଧିକ ତାଲିକା ଆଇଟମ୍ ଦ୍ୱାରା ଅନୁସରଣ କରାଯାଏ |
ବାମ ପ୍ୟାଡିଂ ମଧ୍ୟ ପୁନ res ସେଟ୍ ହୋଇଛି |

ଏଠାରେ ଏକ ଅର୍ଡର ତାଲିକା ଅଛି |
କିଛି ତାଲିକା ଆଇଟମ୍ ସହିତ |
ଏହାର ସମାନ ସାମଗ୍ରିକ ଦୃଶ୍ୟ ଅଛି |
ପୂର୍ବ ଅବ୍ୟବହୃତ ତାଲିକା ଭାବରେ |

ସରଳ ଶ yl ଳୀ, ସ୍ୱଚ୍ଛ ହାଇରାର୍କି ଏବଂ ଉନ୍ନତ ବ୍ୟବଧାନ ପାଇଁ, ବର୍ଣ୍ଣନା ତାଲିକାଗୁଡ଼ିକ ଅଦ୍ୟତନ ହୋଇଛି margin| <dd>କୁ ପୁନ res ସେଟ୍ margin-leftକରନ୍ତୁ 0ଏବଂ ଯୋଡନ୍ତୁ margin-bottom: .5rem| <dt>s ବୋଲ୍ଡ ହୋଇଛି |

ବର୍ଣ୍ଣନା ତାଲିକା |: ସର୍ତ୍ତାବଳୀ ବ୍ୟାଖ୍ୟା କରିବା ପାଇଁ ଏକ ବର୍ଣ୍ଣନା ତାଲିକା ଉପଯୁକ୍ତ |
ଅବଧି: ଶବ୍ଦ ପାଇଁ ସଂଜ୍ଞା; ସମାନ ଶବ୍ଦ ପାଇଁ ଦ୍ୱିତୀୟ ସଂଜ୍ଞା |
ଅନ୍ୟ ଏକ ଶବ୍ଦ |: ଏହି ଅନ୍ୟ ଶବ୍ଦ ପାଇଁ ସଂଜ୍ଞା

ଇନଲାଇନ୍ କୋଡ୍ |

ସହିତ କୋଡ୍ ର ଇନଲାଇନ୍ ସ୍ନିପେଟ୍ ଗୁଡ଼ାଇ ଦିଅ <code>| HTML ଆଙ୍ଗଲ୍ ବ୍ରାକେଟ୍ ରୁ ରକ୍ଷା ପାଇବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

ଉଦାହରଣ ସ୍ୱରୂପ, <section>ଇନଲାଇନ ଭାବରେ ଗୁଡ଼େଇ ହେବା ଉଚିତ |

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

କୋଡ୍ ବ୍ଲକଗୁଡିକ

<pre>ଏକାଧିକ ଧାଡି କୋଡ୍ ପାଇଁ s ବ୍ୟବହାର କରନ୍ତୁ | ପୁନର୍ବାର, ସଠିକ୍ ରେଣ୍ଡରିଂ ପାଇଁ କୋଡ୍ ରେ ଯେକ ang ଣସି ଆଙ୍ଗଲ୍ ବ୍ରାକେଟ୍ ରୁ ରକ୍ଷା ପାଇବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ | ଏହାର ଅପସାରଣ ଏବଂ ଏହାର ପାଇଁ ୟୁନିଟ୍ ବ୍ୟବହାର <pre>କରିବାକୁ ଉପାଦାନ ପୁନ res ସେଟ୍ ହୋଇଛି |margin-topremmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

ଭେରିଏବଲ୍ |

ଭେରିଏବଲ୍ ସୂଚାଇବା ପାଇଁ <var>ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରନ୍ତୁ |

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ଉପଯୋଗକର୍ତ୍ତା ଇନପୁଟ୍ |

<kbd>ସାଧାରଣତ keyboard କୀବୋର୍ଡ୍ ମାଧ୍ୟମରେ ପ୍ରବିଷ୍ଟ ହୋଇଥିବା ଇନପୁଟ୍ ସୂଚାଇବା ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ |

ଡିରେକ୍ଟୋରୀଗୁଡିକ ସୁଇଚ୍ କରିବାକୁ, ଡିରେକ୍ଟୋରୀର cdନାମ ଅନୁସରଣ କରି ଟାଇପ୍ କରନ୍ତୁ |
ସେଟିଂସମୂହ ସଂପାଦନ କରିବାକୁ, ଦବାନ୍ତୁ | ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

ନମୁନା ଆଉଟପୁଟ୍

ଏକ ପ୍ରୋଗ୍ରାମରୁ ନମୁନା ଆଉଟପୁଟ୍ ସୂଚାଇବା ପାଇଁ <samp>ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରନ୍ତୁ |

ଏହି ପାଠ୍ୟକୁ ଏକ କମ୍ପ୍ୟୁଟର ପ୍ରୋଗ୍ରାମରୁ ନମୁନା ଆଉଟପୁଟ୍ ଭାବରେ ବ୍ୟବହାର କରାଯିବା ପାଇଁ ଉଦ୍ଦିଷ୍ଟ |

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

ଟେବୁଲ୍ |

ଟେବୁଲଗୁଡିକ ଶ style ଳୀରେ ସାମାନ୍ୟ ଆଡଜଷ୍ଟ ହୋଇଛି <caption>, ସୀମା ଭୁଶୁଡ଼ିବା, ଏବଂ text-alignସମଗ୍ର ସ୍ଥିରତାକୁ ସୁନିଶ୍ଚିତ କରେ | ସୀମା, ପ୍ୟାଡିଂ, ଏବଂ ଅଧିକ ପାଇଁ ଅତିରିକ୍ତ ପରିବର୍ତ୍ତନ ଶ୍ରେଣୀ ସହିତ.table ଆସେ |

ଏହା ଏକ ଉଦାହରଣ ସାରଣୀ, ଏବଂ ବିଷୟବସ୍ତୁକୁ ବର୍ଣ୍ଣନା କରିବା ପାଇଁ ଏହା ଏହାର କ୍ୟାପସନ୍ |
ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|
ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|
ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|
ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

ଫର୍ମଗୁଡିକ

ସରଳ ଆଧାର ଶ yles ଳୀ ପାଇଁ ବିଭିନ୍ନ ଫର୍ମ ଉପାଦାନଗୁଡିକ ପୁନ bo ବୁଟ କରାଯାଇଛି | ଏଠାରେ କେତେକ ଉଲ୍ଲେଖନୀୟ ପରିବର୍ତ୍ତନ ଅଛି:

<fieldset>s ର କ borders ଣସି ସୀମା, ପ୍ୟାଡିଂ, କିମ୍ବା ମାର୍ଜିନ୍ ନାହିଁ ତେଣୁ ସେଗୁଡିକ ବ୍ୟକ୍ତିଗତ ଇନପୁଟ୍ କିମ୍ବା ଇନପୁଟ୍ ଗୋଷ୍ଠୀ ପାଇଁ ସହଜରେ ରାପର୍ ଭାବରେ ବ୍ୟବହାର କରାଯାଇପାରିବ |
<legend>s, ଫିଲ୍ଡସେଟ୍ ପରି, ଏକ ପ୍ରକାରର ହେଡିଙ୍ଗ୍ ଭାବରେ ପ୍ରଦର୍ଶିତ ହେବା ପାଇଁ ପୁନ y ଚାଳିତ ହୋଇଛି |
<label>s ପ୍ରୟୋଗ display: inline-blockକରିବାକୁ ଅନୁମତି ଦେବାକୁ ସେଟ୍ ହୋଇଛି |margin
<input>s, <select>s, <textarea>s, ଏବଂ <button>s ଗୁଡିକ ସାଧାରଣତ Normal ନର୍ମାଲାଇଜ୍ ଦ୍ୱାରା ସମ୍ବୋଧିତ ହୁଏ, କିନ୍ତୁ ପୁନ o ବୁଟ୍ ସେମାନଙ୍କର marginଏବଂ ସେଟ୍ଗୁଡ଼ିକୁ line-height: inheritମଧ୍ୟ ଅପସାରଣ କରେ |
<textarea>s ଗୁଡିକ କେବଳ ଭୂଲମ୍ବ ଭାବରେ ରିଜାଇଜେବଲ୍ ହେବା ପାଇଁ ପରିବର୍ତ୍ତିତ ହୋଇଛି ଯେହେତୁ ଭୂସମାନ୍ତର ଆକାର ଆକାର ପ୍ରାୟତ ““ ବ୍ରେକ୍ ”ପୃଷ୍ଠା ଲେଆଉଟ୍ |
<button>s ଏବଂ <input>ବଟନ୍ ଉପାଦାନଗୁଡ଼ିକ cursor: pointerକେବେ ଅଛି :not(:disabled)|

ଏହି ପରିବର୍ତ୍ତନଗୁଡିକ, ଏବଂ ଅଧିକ, ନିମ୍ନରେ ପ୍ରଦର୍ଶିତ ହୋଇଛି |

ଉଦାହରଣ କିମ୍ବଦନ୍ତୀ |

ଉଦାହରଣ ଇନପୁଟ୍

ଉଦାହରଣ ଇମେଲ୍ |

ଉଦାହରଣ ଟେଲିଫୋନ୍ |

ଉଦାହରଣ url

ଉଦାହରଣ ସଂଖ୍ୟା

ଉଦାହରଣ ସନ୍ଧାନ |

ଉଦାହରଣ ପରିସର

ଉଦାହରଣ ଫାଇଲ୍ ଇନପୁଟ୍ |

ଉଦାହରଣ ଚୟନ କରନ୍ତୁ |

ଏହି ଚେକ୍ ବକ୍ସ ଯାଞ୍ଚ କରନ୍ତୁ |

ବିକଳ୍ପ ହେଉଛି ଏହା ଏବଂ ତାହା | ବିକଳ୍ପ ଦୁଇଟି ହେଉଛି ଅନ୍ୟ କିଛି ଯାହାକି ଏହି କଳ୍ପନା ଫର୍ମ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକର ଗୁଡ଼ିକୁ ପ୍ରଦର୍ଶନ କରିବାକୁ ସୁପର ଲମ୍ବା ଅଟେ | ବିକଳ୍ପ ତିନୋଟି ଅକ୍ଷମ ହୋଇଛି |

ଟେକ୍ସଟେରିଆର ଉଦାହରଣ |

ଉଦାହରଣ ତାରିଖ

ଉଦାହରଣ ସମୟ

ଉଦାହରଣ ପାସୱାର୍ଡ |

ଉଦାହରଣ ଡାଟାଇଟ୍-ଲୋକାଲ୍ |

ଉଦାହରଣ ସପ୍ତାହ

ଉଦାହରଣ ମାସ

ଉଦାହରଣ ରଙ୍ଗ

ଉଦାହରଣ ଆଉଟପୁଟ୍ 100

ତାରିଖ ଏବଂ ରଙ୍ଗ ଇନପୁଟ୍ ସମର୍ଥନ |

ମନେରଖନ୍ତୁ ତାରିଖ ଇନପୁଟଗୁଡିକ ସମସ୍ତ ବ୍ରାଉଜର୍ ଦ୍ୱାରା ସମ୍ପୂର୍ଣ୍ଣ ଭାବରେ ସମର୍ଥିତ ନୁହେଁ , ଯଥା ସଫାରି |

ବଟନ୍ ଉପରେ ସୂଚକ |

role="button"ଡିଫଲ୍ଟ କର୍ସର୍ କୁ ପରିବର୍ତ୍ତନ କରିବା ପାଇଁ ପୁନ o ବୁଟ୍ ଏକ ଉନ୍ନତି ଅନ୍ତର୍ଭୂକ୍ତ କରେ pointer| ଉପାଦାନଗୁଡିକ ଇଣ୍ଟରାକ୍ଟିଭ୍ ବୋଲି ସୂଚାଇବାରେ ସାହାଯ୍ୟ କରିବାକୁ ଏହି ଗୁଣକୁ ଉପାଦାନଗୁଡ଼ିକରେ ଯୋଡନ୍ତୁ | ଏହି ଭୂମିକା <button>ଉପାଦାନଗୁଡିକ ପାଇଁ ଆବଶ୍ୟକ ନୁହେଁ, ଯାହା ସେମାନଙ୍କର ନିଜସ୍ୱ cursorପରିବର୍ତ୍ତନ ପାଇଥାଏ |

ଅଣ-ବଟନ୍ ଉପାଦାନ ବଟନ୍ |

html

<span role="button" tabindex="0">Non-button element button</span>

ବିଭିନ୍ନ ଉପାଦାନଗୁଡିକ |

ଠିକଣା

ବ୍ରାଉଜରକୁ ଡିଫଲ୍ଟରୁ <address>ପୁନ res ସେଟ୍ କରିବାକୁ ଉପାଦାନକୁ ଅଦ୍ୟତନ କରାଯାଇଛି | ବର୍ତ୍ତମାନ ମଧ୍ୟ ଉତ୍ତରାଧିକାରୀ ଅଟେ, ଏବଂ ଯୋଗ କରାଯାଇଛି | s ନିକଟତମ ପିତୃପୁରୁଷ (କିମ୍ବା କାର୍ଯ୍ୟର ଏକ ସମ୍ପୂର୍ଣ୍ଣ ଶରୀର) ପାଇଁ ଯୋଗାଯୋଗ ସୂଚନା ଉପସ୍ଥାପନ କରିବା ପାଇଁ | ରେଖା ସହିତ ଶେଷ କରି ଫର୍ମାଟିଂ ସଂରକ୍ଷଣ କରନ୍ତୁ |font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

ଟ୍ୱିଟର, Inc.
1355 ମାର୍କେଟ ଷ୍ଟ, ସୁଟ୍ 900
ସାନ ଫ୍ରାନ୍ସିସ୍କୋ, CA 94103
ପି: (123) 456-7890 |

ପୂର୍ଣ୍ଣ ନାମ
[email protected]

ବ୍ଲକକୋଟ |

ବ୍ଲକ୍କୋଟଗୁଡିକରେ ଡିଫଲ୍ଟ marginହେଉଛି 1em 40px, ତେଣୁ ଆମେ 0 0 1remଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକ ସହିତ ଅଧିକ ସୁସଙ୍ଗତ କିଛି ପାଇଁ ଏହାକୁ ପୁନ res ସେଟ୍ କରୁ |

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

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

ଇନଲାଇନ୍ ଉପାଦାନଗୁଡିକ |

ଏହାକୁ ପାରାଗ୍ରାଫ୍ ଟେକ୍ସଟ୍ ମଧ୍ୟରେ ଛିଡା କରିବା ପାଇଁ <abbr>ଉପାଦାନ ମ basic ଳିକ ଶ yl ଳୀ ଗ୍ରହଣ କରେ |

HTML ସଂକ୍ଷିପ୍ତ ଉପାଦାନ |

ସାରାଂଶ

cursorସାରାଂଶ ଉପରେ ଡିଫଲ୍ଟ ହେଉଛି text, ତେଣୁ ଆମେ pointerଏହାକୁ ପୁନ res ସେଟ୍ କରୁ ଯେ ଏହା ଉପରେ କ୍ଲିକ୍ କରି ଉପାଦାନ ସହିତ ଯୋଗାଯୋଗ ହୋଇପାରିବ |

କିଛି ବିବରଣୀ

ବିବରଣୀ ବିଷୟରେ ଅଧିକ ସୂଚନା |

ଏପରିକି ଅଧିକ ବିବରଣୀ |

ସବିଶେଷ ବିବରଣୀ ବିଷୟରେ ଏଠାରେ ଅଧିକ ବିବରଣୀ ଅଛି |

HTML5 `[hidden]`ଗୁଣ

HTML5 ନାମକ ଏକ ନୂତନ ଗ୍ଲୋବାଲ୍ ଆଟ୍ରିବ୍ୟୁଟ୍[hidden]display: none ଯୋଡିଥାଏ, ଯାହା ଡିଫଲ୍ଟ ଭାବରେ ଷ୍ଟାଇଲ୍ ହୋଇଥାଏ | PureCSS ରୁ ଏକ ଧାରଣା owing ଣ , ଆମେ ଏହି ଡିଫଲ୍ଟରେ ଉନ୍ନତି କରି ଏହାକୁ ଅଜାଣତରେ ନବଲିଖନ [hidden] { display: none !important; }କରିବାରେ ସାହାଯ୍ୟ କରିବା |display

<input type="text" hidden>

jQuery ଅସଙ୍ଗତି |

[hidden]$(...).hide()jQuery ଏବଂ $(...).show()ପଦ୍ଧତି ସହିତ ସୁସଙ୍ଗତ ନୁହେଁ | ତେଣୁ, ଆମେ ଉପାଦାନଗୁଡ଼ିକର [hidden]ପରିଚାଳନା ପାଇଁ ଅନ୍ୟାନ୍ୟ କ ques ଶଳକୁ ବିଶେଷ ଭାବରେ ସମର୍ଥନ କରୁନାହୁଁ |display

କେବଳ ଏକ ଉପାଦାନର ଦୃଶ୍ୟତାକୁ ଟୋଗଲ୍ କରିବାକୁ, ଏହାର ଅର୍ଥ displayପରିବର୍ତ୍ତିତ ହୋଇନାହିଁ ଏବଂ ଉପାଦାନଟି ଡକ୍ୟୁମେଣ୍ଟ୍ ର ପ୍ରବାହକୁ ପ୍ରଭାବିତ କରିପାରେ, ଏହା ବଦଳରେ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ.invisible |

ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|
ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|
ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|
ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|

ପୁନ o ଚାଳନ କରନ୍ତୁ |

ଉପାୟ

CSS ଭେରିଏବଲ୍ |

ପୃଷ୍ଠା ଡିଫଲ୍ଟ |

ଦେଶୀ ଫଣ୍ଟ ଷ୍ଟାକ |

ଶିରୋନାମା ଏବଂ ଅନୁଚ୍ଛେଦ |

ଭୂସମାନ୍ତର ନିୟମ |

ତାଲିକା |

ଇନଲାଇନ୍ କୋଡ୍ |

କୋଡ୍ ବ୍ଲକଗୁଡିକ

ଭେରିଏବଲ୍ |

ଉପଯୋଗକର୍ତ୍ତା ଇନପୁଟ୍ |

ନମୁନା ଆଉଟପୁଟ୍

ଟେବୁଲ୍ |

ଫର୍ମଗୁଡିକ

ତାରିଖ ଏବଂ ରଙ୍ଗ ଇନପୁଟ୍ ସମର୍ଥନ |

ବଟନ୍ ଉପରେ ସୂଚକ |

ବିଭିନ୍ନ ଉପାଦାନଗୁଡିକ |

ଠିକଣା

ବ୍ଲକକୋଟ |

ଇନଲାଇନ୍ ଉପାଦାନଗୁଡିକ |

ସାରାଂଶ

HTML5 [hidden]ଗୁଣ

jQuery ଅସଙ୍ଗତି |

HTML5 `[hidden]`ଗୁଣ