ଉନ୍ନତ, ତୀବ୍ର, ଶକ୍ତିଶାଳୀ ୱେବ୍ ବିକାଶ ପାଇଁ ଆମର ଆଭିମୁଖ୍ୟ ଅନ୍ତର୍ଭୂକ୍ତ କରି ବୁଟଷ୍ଟ୍ରାପ୍ ର ଭିତ୍ତିଭୂମିର ମୁଖ୍ୟ ଖଣ୍ଡଗୁଡ଼ିକ ଉପରେ ଲୋଡାଉନ୍ ପାଆନ୍ତୁ |

HTML5 ଡକ୍ଟାଇପ୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ ନିର୍ଦ୍ଦିଷ୍ଟ HTML ଉପାଦାନ ଏବଂ CSS ଗୁଣଗୁଡିକର ବ୍ୟବହାର କରେ ଯାହା HTML5 ଡକ୍ଟାଇପ୍ ବ୍ୟବହାର ଆବଶ୍ୟକ କରେ | ତୁମର ସମସ୍ତ ପ୍ରକଳ୍ପର ଆରମ୍ଭରେ ଏହାକୁ ଅନ୍ତର୍ଭୁକ୍ତ କର |

<!DOCTYPE html>
<html lang="en">
  ...
</html>

ପ୍ରଥମେ ମୋବାଇଲ୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ 2 ସହିତ, the ାଞ୍ଚାର ମୁଖ୍ୟ ଦିଗଗୁଡ଼ିକ ପାଇଁ ଆମେ ଇଚ୍ଛାଧୀନ ମୋବାଇଲ୍ ବନ୍ଧୁତ୍ୱପୂର୍ଣ୍ଣ ଶ yles ଳୀ ଯୋଡିଛୁ | ବୁଟଷ୍ଟ୍ରାପ୍ With ସହିତ, ଆମେ ଆରମ୍ଭରୁ ମୋବାଇଲ୍ ଅନୁକୂଳ ହେବା ପାଇଁ ପ୍ରକଳ୍ପକୁ ପୁନ r ଲିଖନ କରିଛୁ | ବ mobile କଳ୍ପିକ ମୋବାଇଲ୍ ଶ yles ଳୀରେ ଯୋଗ କରିବା ପରିବର୍ତ୍ତେ, ସେଗୁଡିକ ମୂଳରେ ପାକ ହୋଇଯାଏ | ବାସ୍ତବରେ, ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରଥମେ ମୋବାଇଲ୍ ଅଟେ | ଅଲଗା ଫାଇଲ୍ ପରିବର୍ତ୍ତେ ସମଗ୍ର ଲାଇବ୍ରେରୀରେ ମୋବାଇଲ୍ ପ୍ରଥମ ଶ yles ଳୀ ମିଳିପାରିବ |

ସଠିକ୍ ରେଣ୍ଡରିଂ ଏବଂ ସ୍ପର୍ଶ ଜୁମିଙ୍ଗ୍ ନିଶ୍ଚିତ କରିବାକୁ , ଭ୍ୟୁପୋର୍ଟ ମେଟା ଟ୍ୟାଗ୍ ଆପଣଙ୍କ ସହିତ ଯୋଡନ୍ତୁ <head>|

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noଭ୍ୟୁପୋର୍ଟ ମେଟା ଟ୍ୟାଗରେ ଯୋଗ କରି ଆପଣ ମୋବାଇଲ୍ ଡିଭାଇସରେ ଜୁମିଙ୍ଗ୍ କ୍ଷମତାକୁ ଅକ୍ଷମ କରିପାରିବେ | ଏହା ଜୁମିଙ୍ଗକୁ ଅକ୍ଷମ କରିଥାଏ, ଅର୍ଥାତ୍ ଉପଭୋକ୍ତାମାନେ କେବଳ ସ୍କ୍ରୋଲ୍ କରିବାକୁ ସକ୍ଷମ ଅଟନ୍ତି, ଏବଂ ଫଳାଫଳଗୁଡିକ ଆପଣଙ୍କ ସାଇଟରେ ଏକ ଦେଶୀ ପ୍ରୟୋଗ ପରି ଟିକେ ଅଧିକ ଅନୁଭବ କରେ | ମୋଟ ଉପରେ, ଆମେ ପ୍ରତ୍ୟେକ ସାଇଟରେ ଏହାକୁ ସୁପାରିଶ କରୁନାହୁଁ, ତେଣୁ ସତର୍କତା ବ୍ୟବହାର କରନ୍ତୁ!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

ଟାଇପୋଗ୍ରାଫି ଏବଂ ଲିଙ୍କ୍ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ମ basic ଳିକ ଗ୍ଲୋବାଲ୍ ପ୍ରଦର୍ଶନ, ଟାଇପୋଗ୍ରାଫି ଏବଂ ଲିଙ୍କ୍ ଶ yles ଳୀ ସେଟ୍ କରେ | ନିର୍ଦ୍ଦିଷ୍ଟ ଭାବରେ, ଆମେ:

background-color: #fff;ଉପରେ ସେଟ୍ କରନ୍ତୁ |body
ଆମର ଟାଇପୋଗ୍ରାଫିକ୍ ଆଧାର ଭାବରେ ,, ଏବଂ ଗୁଣଗୁଡିକ @font-family-baseବ୍ୟବହାର @font-size-baseକରନ୍ତୁ |@line-height-base
ମାଧ୍ୟମରେ ଗ୍ଲୋବାଲ୍ ଲିଙ୍କ୍ ରଙ୍ଗ ସେଟ୍ କରନ୍ତୁ @link-colorଏବଂ କେବଳ ଲିଙ୍କ୍ ଅଣ୍ଡରଲାଇନ୍ ପ୍ରୟୋଗ କରନ୍ତୁ |:hover

ଏହି ଶ yles ଳୀଗୁଡିକ ଭିତରେ ମିଳିପାରିବ scaffolding.less|

Normalize.css

ଉନ୍ନତ କ୍ରସ୍-ବ୍ରାଉଜର୍ ରେଣ୍ଡରିଂ ପାଇଁ, ଆମେ Normalize.css ବ୍ୟବହାର କରୁ, ନିକୋଲାସ୍ ଗାଲାଗେର୍ ଏବଂ ଜୋନାଥନ୍ ନେଲ୍ ଙ୍କ ଦ୍ୱାରା ଏକ ପ୍ରୋଜେକ୍ଟ |

ପାତ୍ରଗୁଡିକ |

ସାଇଟ୍ ବିଷୟବସ୍ତୁ ଗୁଡ଼ାଇ ରଖିବା ଏବଂ ଆମର ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ରଖିବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଏକ ଧାରଣକାରୀ ଉପାଦାନ ଆବଶ୍ୟକ କରେ | ତୁମର ପ୍ରୋଜେକ୍ଟରେ ବ୍ୟବହାର କରିବାକୁ ତୁମେ ଦୁଇଟି ପାତ୍ର ମଧ୍ୟରୁ ଗୋଟିଏ ବାଛି ପାରିବ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ, paddingଅଧିକ ଏବଂ ଅଧିକ ହେତୁ, କ contain ଣସି ପାତ୍ର ମଧ୍ୟ ବସା ଯୋଗ୍ୟ ନୁହେଁ |

.containerଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ ସ୍ଥିର ଓସାର ପାତ୍ର ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ |

<div class="container">
  ...
</div>

.container-fluidତୁମର ଭ୍ୟୁପୋର୍ଟର ସମଗ୍ର ଓସାରକୁ ବିସ୍ତାର କରି ଏକ ପୂର୍ଣ୍ଣ ଓସାର ପାତ୍ର ପାଇଁ ବ୍ୟବହାର କର |

<div class="container-fluid">
  ...
</div>

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ, ମୋବାଇଲ୍ ପ୍ରଥମ ଫ୍ଲୁଇଡ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ ଯାହା ଡିଭାଇସ୍ କିମ୍ବା ଭ୍ୟୁପୋର୍ଟ ଆକାର ବ as ଼ିବା ସହିତ ଉପଯୁକ୍ତ ଭାବରେ 12 ସ୍ତମ୍ଭ ପର୍ଯ୍ୟନ୍ତ ମାପ କରିଥାଏ | ସହଜ ଲେଆଉଟ୍ ବିକଳ୍ପଗୁଡ଼ିକ ପାଇଁ ଏହା ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଶ୍ରେଣୀଗୁଡିକ, ଏବଂ ଅଧିକ ଅର୍ଥଗତ ଲେଆଉଟ୍ ସୃଷ୍ଟି ପାଇଁ ଶକ୍ତିଶାଳୀ ମିଶ୍ରଣ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |

ପରିଚୟ

ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ଗୁଡିକ ଧାଡି ଏବଂ ସ୍ତମ୍ଭର ଏକ ସିରିଜ୍ ମାଧ୍ୟମରେ ପୃଷ୍ଠା ଲେଆଉଟ୍ ସୃଷ୍ଟି କରିବା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ ଯାହାକି ତୁମର ବିଷୟବସ୍ତୁକୁ ରଖେ | ବୁଟଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ କିପରି କାମ କରେ ତାହା ଏଠାରେ ଅଛି:

ସଠିକ୍ ଆଲାଇନ୍ମେଣ୍ଟ୍ ଏବଂ ପ୍ୟାଡିଂ ପାଇଁ ଧାଡିଗୁଡିକ ଏକ .container(ସ୍ଥିର-ମୋଟେଇ) କିମ୍ବା (ପୂର୍ଣ୍ଣ-ମୋଟେଇ) ମଧ୍ୟରେ ରଖାଯିବା ଆବଶ୍ୟକ |.container-fluid
ସ୍ତମ୍ଭର ଭୂସମାନ୍ତର ଗୋଷ୍ଠୀ ସୃଷ୍ଟି କରିବାକୁ ଧାଡି ବ୍ୟବହାର କରନ୍ତୁ |
ବିଷୟବସ୍ତୁ ସ୍ତମ୍ଭ ମଧ୍ୟରେ ସ୍ଥାନିତ ହେବା ଉଚିତ, ଏବଂ କେବଳ ସ୍ତମ୍ଭଗୁଡ଼ିକ ଧାଡିର ତୁରନ୍ତ ସନ୍ତାନ ହୋଇପାରେ |
ଗ୍ରୀଡ୍ ଲେଆଉଟ୍ ପ୍ରସ୍ତୁତ କରିବା ପାଇଁ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ ଶ୍ରେଣୀଗୁଡିକ ପସନ୍ଦ .rowଏବଂ .col-xs-4ଉପଲବ୍ଧ | ଅଧିକ ଅର୍ଥଗତ ଲେଆଉଟ୍ ପାଇଁ କମ୍ ମିଶ୍ରଣ ମଧ୍ୟ ବ୍ୟବହାର କରାଯାଇପାରେ |
ସ୍ତମ୍ଭଗୁଡ଼ିକ ମାଧ୍ୟମରେ ଗୁଟର୍ (ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ ମଧ୍ୟରେ ଫାଙ୍କ) ସୃଷ୍ଟି କରେ padding| S ରେ ନେଗେଟିଭ୍ ମାର୍ଜିନ୍ ମାଧ୍ୟମରେ ପ୍ରଥମ ଏବଂ ଶେଷ ସ୍ତମ୍ଭ ପାଇଁ ସେହି ପ୍ୟାଡିଂ ଧାଡିରେ ଅଫସେଟ୍ .row|
ନେଗେଟିଭ୍ ମାର୍ଜିନ୍ ହେଉଛି ନିମ୍ନରେ ଥିବା ଉଦାହରଣଗୁଡ଼ିକ କାହିଁକି ପୁରୁଣା | ଏହା ଯେପରି ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ ମଧ୍ୟରେ ଥିବା ବିଷୟବସ୍ତୁ ଅଣ-ଗ୍ରୀଡ୍ ବିଷୟବସ୍ତୁ ସହିତ ଧାଡି ହୋଇ ରହିଥାଏ |
ଆପଣ ବିସ୍ତାର କରିବାକୁ ଚାହୁଁଥିବା ବାରଟି ଉପଲବ୍ଧ ସ୍ତମ୍ଭର ସଂଖ୍ୟା ନିର୍ଦ୍ଦିଷ୍ଟ କରି ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭଗୁଡ଼ିକ ସୃଷ୍ଟି ହୋଇଛି | ଉଦାହରଣ ସ୍ୱରୂପ, ତିନୋଟି ସମାନ ସ୍ତମ୍ଭ ତିନୋଟି ବ୍ୟବହାର କରିବ .col-xs-4|
ଯଦି ଗୋଟିଏ ଧାଡିରେ 12 ରୁ ଅଧିକ ସ୍ତମ୍ଭ ରଖାଯାଏ, ଅତିରିକ୍ତ ସ୍ତମ୍ଭର ପ୍ରତ୍ୟେକ ଗୋଷ୍ଠୀ, ଗୋଟିଏ ୟୁନିଟ୍ ଭାବରେ, ଏକ ନୂତନ ଧାଡିରେ ଗୁଡ଼ାଇ ହୋଇଯିବେ |
ସ୍କ୍ରିନ ଓସାର ସହିତ ବ୍ରେକପଏଣ୍ଟ ଆକାରଠାରୁ ଅଧିକ କିମ୍ବା ସମାନ ଥିବା ଉପକରଣଗୁଡ଼ିକରେ ଗ୍ରୀଡ୍ କ୍ଲାସ୍ ପ୍ରଯୁଜ୍ୟ, ଏବଂ ଛୋଟ ଡିଭାଇସ୍ ଉପରେ ଲକ୍ଷ୍ୟ ରଖାଯାଇଥିବା ଗ୍ରୀଡ୍ ଶ୍ରେଣୀଗୁଡ଼ିକୁ ନବଲିଖନ କରେ | ତେଣୁ, ଉଦାହରଣ ସ୍ୱରୂପ ଯେକ any ଣସି .col-md-*ଶ୍ରେଣୀକୁ ଏକ ଉପାଦାନରେ ପ୍ରୟୋଗ କରିବା କେବଳ ମଧ୍ୟମ ଉପକରଣରେ ଏହାର ଷ୍ଟାଇଲିଂ ଉପରେ ପ୍ରଭାବ ପକାଇବ ନାହିଁ କିନ୍ତୁ ଏକ .col-lg-*ଶ୍ରେଣୀ ଉପସ୍ଥିତ ନଥିଲେ ବଡ଼ ଉପକରଣରେ ମଧ୍ୟ ପ୍ରଭାବ ପକାଇବ |

ଏହି ସଂକେତଗୁଡ଼ିକୁ ତୁମର କୋଡ଼ରେ ପ୍ରୟୋଗ କରିବା ପାଇଁ ଉଦାହରଣଗୁଡିକ ଦେଖନ୍ତୁ |

ମିଡିଆ ପ୍ରଶ୍ନଗୁଡିକ |

ଆମର ଗ୍ରୀଡ୍ ସିଷ୍ଟମରେ କି ବ୍ରେକପଏଣ୍ଟ ସୃଷ୍ଟି କରିବାକୁ ଆମେ ଆମର କମ୍ ଫାଇଲଗୁଡିକରେ ନିମ୍ନ ମିଡିଆ ଜିଜ୍ଞାସା ବ୍ୟବହାର କରୁ |

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

ଆମେ ବେଳେବେଳେ ଏହି ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକରେ max-widthCSS କୁ ଏକ ସଂକୀର୍ଣ୍ଣ ଉପକରଣରେ ସୀମିତ କରିବାକୁ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ପାଇଁ ବିସ୍ତାର କରୁ |

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

ଗ୍ରୀଡ୍ ବିକଳ୍ପଗୁଡିକ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମର ଦିଗଗୁଡ଼ିକ କିପରି ଏକ ସହଜ ଟେବୁଲ୍ ସହିତ ଏକାଧିକ ଡିଭାଇସରେ କାର୍ଯ୍ୟ କରେ ଦେଖନ୍ତୁ |

	ଅତିରିକ୍ତ ଛୋଟ ଉପକରଣଗୁଡ଼ିକ ଫୋନ୍ (<768px)	ଛୋଟ ଉପକରଣଗୁଡ଼ିକ ଟାବଲେଟ୍ (≥768px)	ମଧ୍ୟମ ଉପକରଣଗୁଡ଼ିକ ଡେସ୍କଟପ୍ (≥992px)	ବଡ଼ ଉପକରଣଗୁଡ଼ିକ ଡେସ୍କଟପ୍ (≥1200px)
ଗ୍ରୀଡ୍ ଆଚରଣ \|	ସବୁ ସମୟରେ ଭୂସମାନ୍ତର \|	ଆରମ୍ଭ କରିବା ପାଇଁ ଭାଙ୍ଗିଗଲା, ବ୍ରେକପଏଣ୍ଟ ଉପରେ ଭୂସମାନ୍ତର \|
ପାତ୍ରର ମୋଟେଇ \|	କିଛି ନୁହେଁ (ଅଟୋ)	750px	970px	1170px
କ୍ଲାସ୍ ଉପସର୍ଗ \|	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# ସ୍ତମ୍ଭଗୁଡିକ	12
ସ୍ତମ୍ଭ ପ୍ରସ୍ଥ	ଅଟୋ \|	~ 62px	~ 81px	~ 97px
ଗୁଟର ମୋଟେଇ \|	30px (ସ୍ତମ୍ଭର ଉଭୟ ପାର୍ଶ୍ୱରେ 15px)
ନାଷ୍ଟେବଲ୍ \|	ହଁ
ଅଫସେଟ୍ \|	ହଁ
ସ୍ତମ୍ଭ ଅର୍ଡର \|	ହଁ

ଉଦାହରଣ: ଷ୍ଟାକ୍-ଟୁ-ଭୂସମାନ୍ତର |

ଗ୍ରୀଡ୍ ଶ୍ରେଣୀର ଏକକ ସେଟ୍ ବ୍ୟବହାର କରି .col-md-*, ଆପଣ ଏକ ମ basic ଳିକ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ସୃଷ୍ଟି କରିପାରିବେ ଯାହା ଡେସ୍କଟପ୍ (ମଧ୍ୟମ) ଉପକରଣଗୁଡ଼ିକରେ ଭୂସମାନ୍ତର ହେବା ପୂର୍ବରୁ ମୋବାଇଲ୍ ଡିଭାଇସ୍ ଏବଂ ଟ୍ୟାବଲେଟ୍ ଡିଭାଇସ୍ (ଅତିରିକ୍ତ ଛୋଟରୁ ଛୋଟ ପରିସର) ଉପରେ ଷ୍ଟାକ୍ ହୋଇ ଆରମ୍ଭ ହୋଇଥାଏ | ଯେକ any ଣସି ସ୍ଥାନରେ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ ରଖନ୍ତୁ .row|

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

ଉଦାହରଣ: ତରଳ ପାତ୍ର |

.containerଯେକ any ଣସି ସ୍ଥିର-ଓସାର ଗ୍ରୀଡ୍ ଲେଆଉଟ୍କୁ ଆପଣଙ୍କର ବାହ୍ୟ ସ୍ଥାନକୁ ପରିବର୍ତ୍ତନ କରି ଏକ ପୂର୍ଣ୍ଣ-ଓସାର ଲେଆଉଟ୍ ରେ ପରିଣତ କରନ୍ତୁ .container-fluid|

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

ଉଦାହରଣ: ମୋବାଇଲ୍ ଏବଂ ଡେସ୍କଟପ୍ |

ତୁମର ସ୍ତମ୍ଭଗୁଡିକ କେବଳ ଛୋଟ ଡିଭାଇସରେ ଷ୍ଟକ୍ କରିବାକୁ ଚାହୁଁନାହାଁନ୍ତି କି? .col-xs-* .col-md-*ଆପଣଙ୍କ ସ୍ତମ୍ଭରେ ଯୋଗ କରି ଅତିରିକ୍ତ ଛୋଟ ଏବଂ ମଧ୍ୟମ ଉପକରଣ ଗ୍ରୀଡ୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ | ଏହା କିପରି କାର୍ଯ୍ୟ କରେ ତାହାର ଏକ ଉତ୍ତମ ଧାରଣା ପାଇଁ ନିମ୍ନରେ ଥିବା ଉଦାହରଣ ଦେଖନ୍ତୁ |

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4 |

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

ଉଦାହରଣ: ମୋବାଇଲ୍, ଟାବଲେଟ୍, ଡେସ୍କଟପ୍ |

.col-sm-*ଟ୍ୟାବଲେଟ୍ କ୍ଲାସ୍ ସହିତ ଅଧିକ ଗତିଶୀଳ ଏବଂ ଶକ୍ତିଶାଳୀ ଲେଆଉଟ୍ ସୃଷ୍ଟି କରି ପୂର୍ବ ଉଦାହରଣ ଉପରେ ନିର୍ମାଣ କରନ୍ତୁ |

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4 |

.col-xs-6 .col-sm-4 |

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

ଉଦାହରଣ: ସ୍ତମ୍ଭ ରାପିଙ୍ଗ୍ |

ଯଦି ଗୋଟିଏ ଧାଡିରେ 12 ରୁ ଅଧିକ ସ୍ତମ୍ଭ ରଖାଯାଏ, ଅତିରିକ୍ତ ସ୍ତମ୍ଭର ପ୍ରତ୍ୟେକ ଗୋଷ୍ଠୀ, ଗୋଟିଏ ୟୁନିଟ୍ ଭାବରେ, ଏକ ନୂତନ ଧାଡିରେ ଗୁଡ଼ାଇ ହୋଇଯିବେ |

.col-xs-9

.col-xs-4
9 + 4 = 13> 12 ପରଠାରୁ, ଏହି 4-ସ୍ତମ୍ଭ-ଚଉଡା ଡିଭ୍ ଏକ ସଂଲଗ୍ନକ ୟୁନିଟ୍ ଭାବରେ ଏକ ନୂତନ ଧାଡିରେ ଗୁଡ଼େଇ ହୋଇଯାଏ |

.col-xs-6
ପରବର୍ତ୍ତୀ ସ୍ତମ୍ଭଗୁଡ଼ିକ ନୂତନ ଧାଡ଼ିରେ ଚାଲିଥାଏ |

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

ପ୍ରତିକ୍ରିୟାଶୀଳ ସ୍ତମ୍ଭ ପୁନ ets ସେଟ୍ କରେ |

ଚାରୋଟି ପର୍ଯ୍ୟାୟ ଗ୍ରୀଡ୍ ଉପଲବ୍ଧ ସହିତ ଆପଣ ସେହି ସମସ୍ୟାଗୁଡିକୁ ଦ run ଡିବାକୁ ବାଧ୍ୟ ଅଟନ୍ତି ଯେଉଁଠାରେ, କିଛି ବ୍ରେକପଏଣ୍ଟରେ, ଆପଣଙ୍କର ସ୍ତମ୍ଭଗୁଡ଼ିକ ଅନ୍ୟଠାରୁ ଲମ୍ବା ହୋଇଥିବାରୁ ଠିକ୍ ଭାବରେ ସଫା ହୋଇନଥାଏ | .clearfixଏହାକୁ ସମାଧାନ କରିବାକୁ, a ଏବଂ ଆମର ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପଯୋଗୀ ଶ୍ରେଣୀର ଏକ ମିଶ୍ରଣ ବ୍ୟବହାର କରନ୍ତୁ |

.col-xs-6 .col-sm-3
ଆପଣଙ୍କର ଭ୍ୟୁପୋର୍ଟର ଆକାର ବଦଳାନ୍ତୁ କିମ୍ବା ଏକ ଉଦାହରଣ ପାଇଁ ଏହାକୁ ଆପଣଙ୍କ ଫୋନରେ ଯାଞ୍ଚ କରନ୍ତୁ |

.col-xs-6 .col-sm-3 |

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

ପ୍ରତିକ୍ରିୟାଶୀଳ ବ୍ରେକପଏଣ୍ଟରେ ସ୍ତମ୍ଭ କ୍ଲିଅର୍ ସହିତ, ଆପଣଙ୍କୁ ଅଫସେଟ୍, ପୁସ୍ କିମ୍ବା ଟାଣ ପୁନ res ସେଟ୍ କରିବାକୁ ପଡିପାରେ | ଗ୍ରୀଡ୍ ଉଦାହରଣରେ ଏହାକୁ କାର୍ଯ୍ୟରେ ଦେଖନ୍ତୁ |

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

ସ୍ତମ୍ଭଗୁଡିକ ଅଫସେଟ୍ କରିବା |

.col-md-offset-*କ୍ଲାସ୍ ବ୍ୟବହାର କରି ସ୍ତମ୍ଭଗୁଡ଼ିକୁ ଡାହାଣକୁ ଘୁଞ୍ଚାନ୍ତୁ | ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକ ସ୍ତମ୍ଭ ଦ୍ୱାରା ଏକ ସ୍ତମ୍ଭର ବାମ ମାର୍ଜିନ୍ ବୃଦ୍ଧି କରେ *| ଉଦାହରଣ ସ୍ୱରୂପ, ଚାରୋଟି ସ୍ତମ୍ଭ ଉପରେ .col-md-offset-4ଗତି କରେ |.col-md-4

.col-md-4

.col-md-4 .col-md-offset-4 |

.col-md-3 .col-md-offset-3 |

.col-md-6 .col-md-offset-3 |

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-*-offset-0କ୍ଲାସ୍ ସହିତ ଲୋୟର ଗ୍ରୀଡ୍ ସ୍ତରରୁ ଆପଣ ଅଫସେଟ୍କୁ ମଧ୍ୟ ନବଲିଖନ କରିପାରିବେ |

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

ବସା ସ୍ତମ୍ଭ

ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସହିତ ଆପଣଙ୍କର ବିଷୟବସ୍ତୁକୁ ବସା କରିବାକୁ, ଏକ ବିଦ୍ୟମାନ ସ୍ତମ୍ଭ ମଧ୍ୟରେ ଏକ ନୂତନ .rowଏବଂ ସ୍ତମ୍ଭର ସେଟ୍ ଯୋଡନ୍ତୁ | ନେଷ୍ଟେଡ୍ ଧାଡିଗୁଡିକ ସ୍ତମ୍ଭର ଏକ ସେଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ ଯାହାକି 12 କିମ୍ବା ତା’ଠାରୁ କମ୍ ଯୋଗ କରିଥାଏ (ଆପଣ ସମସ୍ତ 12 ଉପଲବ୍ଧ ସ୍ତମ୍ଭ ବ୍ୟବହାର କରିବା ଆବଶ୍ୟକ ନୁହେଁ) |.col-sm-*.col-sm-*

ସ୍ତର 1: .col-sm-9 |

ସ୍ତର 2: .col-xs-8 .col-sm-6 |

ସ୍ତର 2: .col-xs-4 .col-sm-6 |

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

ସ୍ତମ୍ଭ ଅର୍ଡର |

ଆମର ବିଲ୍ଟ-ଇନ୍ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭଗୁଡ଼ିକର କ୍ରମ .col-md-push-*ଏବଂ .col-md-pull-*ପରିବର୍ତ୍ତନକାରୀ ଶ୍ରେଣୀଗୁଡ଼ିକ ସହିତ ସହଜରେ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

.col-md-9 .col-md-push-3 |

.col-md-3 .col-md-pull-9 |

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

କମ୍ ମିଶ୍ରଣ ଏବଂ ଭେରିଏବଲ୍ |

ଦ୍ରୁତ ଲେଆଉଟ୍ ପାଇଁ ପ୍ରିବୁଲ୍ଟ୍ ଗ୍ରୀଡ୍ କ୍ଲାସ୍ ସହିତ , ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ତୁମର ସରଳ, ଅର୍ଥଗତ ଲେଆଉଟ୍ ଶୀଘ୍ର ସୃଷ୍ଟି କରିବା ପାଇଁ କମ୍ ଭେରିଏବଲ୍ ଏବଂ ମିକ୍ସିନ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |

ଭେରିଏବଲ୍ |

ଭେରିଏବଲ୍ ଗୁଡିକ ସ୍ତମ୍ଭ ସଂଖ୍ୟା, ଗୁଟର ମୋଟେଇ, ଏବଂ ମିଡିଆ ଜିଜ୍ଞାସା ପଏଣ୍ଟ ନିର୍ଣ୍ଣୟ କରେ ଯେଉଁଠାରେ ଭାସମାନ ସ୍ତମ୍ଭ ଆରମ୍ଭ ହେବ | ଉପରୋକ୍ତ ଡକ୍ୟୁମେଣ୍ଟ୍ ହୋଇଥିବା ଗ୍ରୀଡ୍ କ୍ଲାସ୍ ସୃଷ୍ଟି କରିବା ପାଇଁ ଏବଂ ନିମ୍ନରେ ତାଲିକାଭୁକ୍ତ କଷ୍ଟମ୍ ମିକ୍ସନ୍ସ ପାଇଁ ଆମେ ଏହାକୁ ବ୍ୟବହାର କରୁ |

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

ମିଶ୍ରଣ

ବ୍ୟକ୍ତିଗତ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭଗୁଡ଼ିକ ପାଇଁ ଅର୍ଥଗତ CSS ସୃଷ୍ଟି କରିବାକୁ ଗ୍ରୀଡ୍ ଭେରିଏବଲ୍ ସହିତ ମିଶି ମିକ୍ସନ୍ସ ବ୍ୟବହୃତ ହୁଏ |

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

ଉଦାହରଣ ବ୍ୟବହାର

ଆପଣ ନିଜ ନିଜ କଷ୍ଟମ୍ ମୂଲ୍ୟରେ ଭେରିଏବଲ୍ ଗୁଡିକୁ ରୂପାନ୍ତର କରିପାରିବେ, କିମ୍ବା କେବଳ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ସହିତ ମିକ୍ସିନ ବ୍ୟବହାର କରିପାରିବେ | ମଧ୍ୟରେ ଏକ ଫାଙ୍କ ସହିତ ଦୁଇଟି ସ୍ତମ୍ଭ ଲେଆଉଟ୍ ସୃଷ୍ଟି କରିବାକୁ ଡିଫଲ୍ଟ ସେଟିଂସମୂହ ବ୍ୟବହାର କରିବାର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି |

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

ଶିରୋନାମା

ସମସ୍ତ HTML ହେଡିଙ୍ଗ୍, <h1>ମାଧ୍ୟମରେ <h6>, ଉପଲବ୍ଧ | .h1କ୍ଲାସ୍ ମାଧ୍ୟମରେ .h6ମଧ୍ୟ ଉପଲବ୍ଧ, ଯେତେବେଳେ ଆପଣ ଏକ ହେଡିଙ୍ଗର ଫଣ୍ଟ୍ ଷ୍ଟାଇଲିଂ ସହିତ ମେଳ କରିବାକୁ ଚାହାଁନ୍ତି କିନ୍ତୁ ତଥାପି ଆପଣଙ୍କ ପାଠ୍ୟ ଇନଲାଇନରେ ପ୍ରଦର୍ଶିତ ହେବାକୁ ଚାହାଁନ୍ତି |

h1 ବୁଟଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ \|	ସେମିବୋଲ୍ଡ 36px
h2। ବୁଟଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ \|	ସେମିବୋଲ୍ଡ 30px
h3। ବୁଟଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ \|	ସେମିବୋଲ୍ଡ 24px
h4। ବୁଟଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ \|	ସେମିବୋଲ୍ଡ 18px
h5। ବୁଟଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ \|	ସେମିବୋଲ୍ଡ 14px
h6। ବୁଟଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ \|	ସେମିବୋଲ୍ଡ 12px

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

<small>ଏକ ଜେନେରିକ୍ ଟ୍ୟାଗ୍ କିମ୍ବା .smallଶ୍ରେଣୀ ସହିତ ଯେକ any ଣସି ହେଡିଙ୍ଗରେ ହାଲୁକା, ଦଳୀୟ ପାଠ୍ୟ ସୃଷ୍ଟି କରନ୍ତୁ |

h1 ସେକେଣ୍ଡାରୀ ଟେକ୍ସଟ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

h2। ସେକେଣ୍ଡାରୀ ଟେକ୍ସଟ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

h3। ସେକେଣ୍ଡାରୀ ଟେକ୍ସଟ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

h4। ସେକେଣ୍ଡାରୀ ଟେକ୍ସଟ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

h5। ସେକେଣ୍ଡାରୀ ଟେକ୍ସଟ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

h6। ସେକେଣ୍ଡାରୀ ଟେକ୍ସଟ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

ଶରୀର କପି |

1.428 ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଗ୍ଲୋବାଲ୍ ଡିଫଲ୍ଟ font-sizeହେଉଛି 14px | ଏହା ଏବଂ ସମସ୍ତ ପାରାଗ୍ରାଫ୍ ପାଇଁ ପ୍ରୟୋଗ କରାଯାଏ | ଏହା ସହିତ, (ପାରାଗ୍ରାଫ୍) ସେମାନଙ୍କର ଗଣିତ ରେଖା-ଉଚ୍ଚତାର ଏକ ନିମ୍ନ ମାର୍ଜିନ୍ ଗ୍ରହଣ କରେ (ଡିଫଲ୍ଟ ଭାବରେ 10px) |line-height<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridulus mus। Nullam id dolor id nibh ଅଲଟ୍ରିକସ୍ ଯାନବାହାନ |

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridulus mus। ଡୋନେକ୍ ଉଲାମକର୍ପର୍ ନୁଲା ନନ୍ ମେଟସ୍ ଆକ୍ଟର ଫ୍ରିଙ୍ଗିଲା | ଡୁଇସ୍ ମଲିସ୍, ଇଷ୍ଟ ନନ୍ କମୋଡୋ ଲକ୍ଟସ୍, ନିସି ଏରାଟ ପୋର୍ଟଟିଟର୍ ଲିଗୁଲା, ଇଜେଟ୍ ଲାସିନିଆ ଓଡିଓ ସେମ ନେକ୍ ଏଲିଟ୍ | ଡୋନେକ୍ ଉଲାମକର୍ପର୍ ନୁଲା ନନ୍ ମେଟସ୍ ଆକ୍ଟର ଫ୍ରିଙ୍ଗିଲା |

ମେକେନାସ୍ ସେଡ୍ ହୀର ଇଜେଟ୍ ରିସସ୍ ଭେରାଇସ୍ ବ୍ଲାଣ୍ଡିଟ୍ ଆମ୍ ନନ୍ ମ୍ୟାଗନା | Eget metus ରେ Donec id elit non mi porta gravida | ଡୁଇସ୍ ମଲିସ୍, ଇଷ୍ଟ ନନ୍ କମୋଡୋ ଲକ୍ଟସ୍, ନିସି ଏରାଟ ପୋର୍ଟଟିଟର୍ ଲିଗୁଲା, ଇଜେଟ୍ ଲାସିନିଆ ଓଡିଓ ସେମ ନେକ୍ ଏଲିଟ୍ |

<p>...</p>

ଲିଡ୍ ବଡି କପି |

ଯୋଗ କରି ଏକ ପାରାଗ୍ରାଫ୍ ଛିଡା କର .lead|

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

<p class="lead">...</p>

କମ୍ ସହିତ ନିର୍ମିତ |

ଟାଇପୋଗ୍ରାଫିକ୍ ସ୍କେଲ୍ ଭେରିଏବଲ୍.ଲେସ୍ ରେ ଦୁଇଟି କମ୍ ଭେରିଏବଲ୍ ଉପରେ @font-size-baseଆଧାରିତ @line-height-base| ପ୍ରଥମଟି ହେଉଛି ବେସ୍ ଫଣ୍ଟ୍ ସାଇଜ୍ ଏବଂ ଦ୍ୱିତୀୟଟି ହେଉଛି ବେସ୍ ଲାଇନ୍-ଉଚ୍ଚତା | ଆମର ଭେରିଏବଲ୍ ଏବଂ କିଛି ସରଳ ଗଣିତ ବ୍ୟବହାର କରି ଆମର ସମସ୍ତ ପ୍ରକାରର ମାର୍ଜିନ, ପ୍ୟାଡିଂ, ଏବଂ ଲାଇନ-ଉଚ୍ଚତା ସୃଷ୍ଟି କରିବାକୁ | ସେମାନଙ୍କୁ କଷ୍ଟମାଇଜ୍ କରନ୍ତୁ ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ଆଡାପ୍ଟସ୍ |

ପାଠ୍ୟ ଉପାଦାନଗୁଡ଼ିକୁ ଇନଲାଇନ କରନ୍ତୁ |

ଚିହ୍ନିତ ପାଠ

ଅନ୍ୟ ପ୍ରସଙ୍ଗରେ ଏହାର ପ୍ରାସଙ୍ଗିକତା ହେତୁ ପାଠ୍ୟର ଏକ ଚଲାଇବା ପାଇଁ, <mark>ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରନ୍ତୁ |

ଆପଣ ମାର୍କ ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରିପାରିବେ |ହାଇଲାଇଟ୍ କରନ୍ତୁ |ପାଠ

You can use the mark tag to <mark>highlight</mark> text.

ବିଲୋପିତ ପାଠ

ବିଲୋପ ହୋଇଥିବା ପାଠ୍ୟର ବ୍ଲକଗୁଡିକ ସୂଚାଇବା ପାଇଁ <del>ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରନ୍ତୁ |

~~ଟେକ୍ସଟ୍ ର ଏହି ଲାଇନ୍ ଡିଲିଟ୍ ହୋଇଥିବା ଟେକ୍ସଟ୍ ଭାବରେ ବ୍ୟବହାର କରାଯାଏ |~~

<del>This line of text is meant to be treated as deleted text.</del>

ଷ୍ଟ୍ରାଇକ୍ଥ୍ରୁ ପାଠ୍ୟ |

ପାଠ୍ୟର ବ୍ଲକଗୁଡିକ ସୂଚାଇବା ପାଇଁ ଯାହା ଆଉ ପ୍ରାସଙ୍ଗିକ ନୁହେଁ <s>ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରନ୍ତୁ |

~~ପାଠ୍ୟର ଏହି ଧାଡିଟି ଆଉ ସଠିକ୍ ଭାବରେ ବ୍ୟବହାର କରାଯିବା ପାଇଁ ଉଦ୍ଦିଷ୍ଟ |~~

<s>This line of text is meant to be treated as no longer accurate.</s>

ସନ୍ନିବେଶିତ ପାଠ |

ଡକ୍ୟୁମେଣ୍ଟରେ ଯୋଗକୁ ସୂଚାଇବା ପାଇଁ <ins>ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରନ୍ତୁ |

ପାଠ୍ୟର ଏହି ଧାଡ଼ିଟି ଡକ୍ୟୁମେଣ୍ଟ୍ ସହିତ ଏକ ଯୋଗ ଭାବରେ ବ୍ୟବହାର କରାଯିବା ପାଇଁ ଉଦ୍ଦିଷ୍ଟ |

<ins>This line of text is meant to be treated as an addition to the document.</ins>

ଅଣ୍ଡରଲାଇନ୍ ହୋଇଥିବା ପାଠ |

ଟେକ୍ସଟ୍ ଅଣ୍ଡରଲାଇନ୍ କରିବାକୁ <u>ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରନ୍ତୁ |

ଟେକ୍ସଟ୍ ର ଏହି ଲାଇନ୍ ଅଣ୍ଡରଲାଇନ୍ ପରି ରେଣ୍ଡର୍ ହେବ |

<u>This line of text will render as underlined</u>

ହାଲୁକା ଶ yles ଳୀ ସହିତ HTML ର ଡିଫଲ୍ଟ ଗୁରୁତ୍ୱ ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରନ୍ତୁ |

ଛୋଟ ପାଠ

ଇନଲାଇନ କିମ୍ବା ପାଠ୍ୟର ବ୍ଲକଗୁଡିକୁ ଡି-ଜୋର ଦେବା ପାଇଁ <small>, ପ୍ୟାରେଣ୍ଟର 85% ଆକାରରେ ଟେକ୍ସଟ୍ ସେଟ୍ କରିବାକୁ ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରନ୍ତୁ | font-sizeହେଡିଙ୍ଗ୍ ଉପାଦାନଗୁଡିକ ନଷ୍ଟ ହୋଇଥିବା ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ସେମାନଙ୍କର ଗ୍ରହଣ କରନ୍ତି <small>|

ଆପଣ ବ ly କଳ୍ପିକ ଭାବରେ ଯେକ .smallany ଣସି ସ୍ଥାନରେ ଏକ ଇନଲାଇନ ଉପାଦାନ ବ୍ୟବହାର କରିପାରିବେ <small>|

ପାଠ୍ୟର ଏହି ଧାଡିଟି ସୂକ୍ଷ୍ମ ମୁଦ୍ରଣ ପରି ବ୍ୟବହାର କରାଯିବା ପାଇଁ ଉଦ୍ଦିଷ୍ଟ |

<small>This line of text is meant to be treated as fine print.</small>

ବୋଲ୍ଡ |

ଏକ ଭାରୀ ଫଣ୍ଟ-ଓଜନ ସହିତ ପାଠ୍ୟର ଏକ ସ୍ନିପେଟ୍ ଉପରେ ଗୁରୁତ୍ୱ ଦେବା ପାଇଁ |

ପାଠ୍ୟର ନିମ୍ନଲିଖିତ ସ୍ନିପେଟ୍ ବୋଲ୍ଡ ଟେକ୍ସଟ୍ ଭାବରେ ଉପସ୍ଥାପିତ ହୋଇଛି |

<strong>rendered as bold text</strong>

ଇଟାଲିକ୍ |

ଇଟାଲିକ୍ ସହିତ ପାଠ୍ୟର ଏକ ସ୍ନିପେଟ୍ ଉପରେ ଗୁରୁତ୍ୱ ଦେବା ପାଇଁ |

ପାଠ୍ୟର ନିମ୍ନଲିଖିତ ସ୍ନିପେଟ୍ ଇଟାଲାଇଜଡ୍ ଟେକ୍ସଟ୍ ଭାବରେ ଉପସ୍ଥାପିତ ହୋଇଛି |

<em>rendered as italicized text</em>

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

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

ଶ୍ରେଣୀବଦ୍ଧ ଶ୍ରେଣୀଗୁଡିକ |

ଟେକ୍ସଟ୍ ଆଲାଇନ୍ମେଣ୍ଟ୍ କ୍ଲାସ୍ ସହିତ ଉପାଦାନଗୁଡ଼ିକୁ ସହଜରେ ରିଅଲ୍ କରନ୍ତୁ |

ବାମ ଆଲାଇନ୍ ଟେକ୍ସଟ୍ |

କେନ୍ଦ୍ର ଆଲାଇନ୍ ଟେକ୍ସଟ୍ |

ଡାହାଣ ଆଲାଇନ୍ ଟେକ୍ସଟ୍ |

ଯଥାର୍ଥ ପାଠ |

କ rap ଣସି ରାପ୍ ଟେକ୍ସଟ୍ ନାହିଁ |

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

ରୂପାନ୍ତର କ୍ଲାସ୍ |

ପାଠ୍ୟ କ୍ୟାପିଟାଲାଇଜେସନ୍ କ୍ଲାସ୍ ସହିତ ଉପାଦାନଗୁଡ଼ିକରେ ପାଠ୍ୟକୁ ରୂପାନ୍ତର କରନ୍ତୁ |

ଲୋୟର କେସ୍ ଟେକ୍ସଟ୍ |

ଅକ୍ଷରର ପାଠ

କ୍ୟାପିଟାଲାଇଜଡ୍ ଟେକ୍ସଟ୍ |

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

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

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

ମ Basic ଳିକ ସଂକ୍ଷିପ୍ତକରଣ |

ଗୁଣଧର୍ମର ଶବ୍ଦର ସଂକ୍ଷିପ୍ତ ହେଉଛି ଆକର୍ଷଣ |

<abbr title="attribute">attr</abbr>

ପ୍ରାରମ୍ଭିକତା

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

କଟା ରୁଟି ପରଠାରୁ HTML ହେଉଛି ସର୍ବୋତ୍ତମ ଜିନିଷ |

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

ଠିକଣା

ନିକଟତମ ପିତୃପୁରୁଷ କିମ୍ବା କାର୍ଯ୍ୟର ସମ୍ପୂର୍ଣ୍ଣ ଶରୀର ପାଇଁ ଯୋଗାଯୋଗ ସୂଚନା ଉପସ୍ଥାପନ କରନ୍ତୁ | ସମସ୍ତ ରେଖା ସହିତ ସମାପ୍ତ କରି ଫର୍ମାଟିଂ ସଂରକ୍ଷଣ କରନ୍ତୁ <br>|

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

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

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

ବ୍ଲକକୋଟସ୍ |

ତୁମର ଡକ୍ୟୁମେଣ୍ଟ୍ ଭିତରେ ଅନ୍ୟ ଉତ୍ସରୁ ବିଷୟବସ୍ତୁର ବ୍ଲକଗୁଡିକ ଉଦ୍ଧୃତ କରିବା ପାଇଁ |

ଡିଫଲ୍ଟ ବ୍ଲକକୋଟ |

କୋଟ ଭାବରେ ଯେକ HTML <blockquote>ଣସି HTML କୁ ଘୋଡ଼ାନ୍ତୁ | ସିଧାସଳଖ ଉଦ୍ଧୃତି ପାଇଁ, ଆମେ a କୁ ସୁପାରିଶ କରୁ <p>|

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

ବ୍ଲକକୋଟ୍ ବିକଳ୍ପଗୁଡିକ |

ଏକ ମାନାଙ୍କ ଉପରେ ସରଳ ପରିବର୍ତ୍ତନ ପାଇଁ ଶ Style ଳୀ ଏବଂ ବିଷୟବସ୍ତୁ ପରିବର୍ତ୍ତନ <blockquote>|

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

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

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

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ବ display କଳ୍ପିକ ପ୍ରଦର୍ଶନ

.blockquote-reverseଡାହାଣ-ଆଲାଇନ୍ ହୋଇଥିବା ବିଷୟବସ୍ତୁ ସହିତ ଏକ ବ୍ଲକକୋଟ ପାଇଁ ଯୋଡନ୍ତୁ |

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

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

<blockquote class="blockquote-reverse">
  ...
</blockquote>

ତାଲିକା |

ଅନିୟମିତ |

ଆଇଟମଗୁଡିକର ଏକ ତାଲିକା ଯେଉଁଥିରେ କ୍ରମ ସ୍ପଷ୍ଟ ଭାବରେ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ନୁହେଁ |

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

<ul>
  <li>...</li>
</ul>

ଅର୍ଡର |

ଆଇଟମଗୁଡିକର ଏକ ତାଲିକା ଯେଉଁଥିରେ କ୍ରମ ସ୍ପଷ୍ଟ ଭାବରେ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ |

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

<ol>
  <li>...</li>
</ol>

ଅଣସଂରକ୍ଷିତ |

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

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

<ul class="list-unstyled">
  <li>...</li>
</ul>

କ୍ରମରେ

ସମସ୍ତ ତାଲିକା ଆଇଟମ୍ ଗୁଡିକ ଗୋଟିଏ ଲାଇନରେ display: inline-block;ଏବଂ କିଛି ହାଲୁକା ପ୍ୟାଡିଂ ସହିତ ରଖନ୍ତୁ |

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

<ul class="list-inline">
  <li>...</li>
</ul>

ବର୍ଣ୍ଣନା

ସେମାନଙ୍କର ସଂପୃକ୍ତ ବର୍ଣ୍ଣନା ସହିତ ଶବ୍ଦର ଏକ ତାଲିକା |

ବର୍ଣ୍ଣନା ତାଲିକା |: ସର୍ତ୍ତାବଳୀ ବ୍ୟାଖ୍ୟା କରିବା ପାଇଁ ଏକ ବର୍ଣ୍ଣନା ତାଲିକା ଉପଯୁକ୍ତ |
ଇଉଜିମୋଡ୍ |: ଭେଷ୍ଟିବୁଲମ୍ 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 |

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

ଭୂସମାନ୍ତର ବର୍ଣ୍ଣନା

<dl>ପାର୍ଶ୍ୱରେ ଧାଡିରେ ଶବ୍ଦ ଏବଂ ବର୍ଣ୍ଣନା ପ୍ରସ୍ତୁତ କରନ୍ତୁ | ଡିଫଲ୍ଟ <dl>s ପରି ଷ୍ଟାକ୍ ଅଫ୍ ଆରମ୍ଭ ହୁଏ, କିନ୍ତୁ ଯେତେବେଳେ ନାଭବାର୍ ବିସ୍ତାର ହୁଏ, ତେବେ ଏଗୁଡିକ କର |

ବର୍ଣ୍ଣନା ତାଲିକା |: ସର୍ତ୍ତାବଳୀ ବ୍ୟାଖ୍ୟା କରିବା ପାଇଁ ଏକ ବର୍ଣ୍ଣନା ତାଲିକା ଉପଯୁକ୍ତ |
ଇଉଜିମୋଡ୍ |: ଭେଷ୍ଟିବୁଲମ୍ 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 |
Felis euismod semper eget lacinia |: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus |

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

ଅଟୋ-ଟ୍ରଙ୍କିଙ୍ଗ୍ |

ଭୂସମାନ୍ତର ବର୍ଣ୍ଣନା ତାଲିକାଗୁଡ଼ିକ ଶବ୍ଦଗୁଡ଼ିକୁ ଛୋଟ କରିଦେବ ଯାହା ବାମ ସ୍ତମ୍ଭ ସହିତ ଫିଟ୍ ହେବା ପାଇଁ ବହୁତ ଲମ୍ବା ଅଟେ text-overflow| ସଂକୀର୍ଣ୍ଣ ଦୃଶ୍ୟଗୁଡ଼ିକରେ, ସେମାନେ ଡିଫଲ୍ଟ ଷ୍ଟାକ୍ ହୋଇଥିବା ଲେଆଉଟ୍ ରେ ପରିବର୍ତ୍ତନ କରିବେ |

କ୍ରମରେ

ସହିତ କୋଡ୍ ର ଇନଲାଇନ୍ ସ୍ନିପେଟ୍ ଗୁଡ଼ାଇ ଦିଅ <code>|

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

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

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

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

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

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>

ମ Basic ଳିକ ବ୍ଲକ

<pre>ଏକାଧିକ ଧାଡି କୋଡ୍ ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ | ସଠିକ୍ ରେଣ୍ଡରିଂ ପାଇଁ କୋଡରେ ଥିବା ଯେକ ang ଣସି କୋଣ ବ୍ରାକେଟ୍ ରୁ ରକ୍ଷା ପାଇବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

<p> ଏଠାରେ ନମୁନା ପାଠ ... </p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

ଆପଣ ବ ally କଳ୍ପିକ ଭାବରେ .pre-scrollableଶ୍ରେଣୀ ଯୋଡିପାରନ୍ତି, ଯାହାକି ସର୍ବାଧିକ 350px ର ଉଚ୍ଚତା ସେଟ୍ କରିବ ଏବଂ ଏକ y-axis ସ୍କ୍ରୋଲ୍ ବାର୍ ପ୍ରଦାନ କରିବ |

ଭେରିଏବଲ୍ |

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

y = m x + b

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

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

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

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

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

ମ Basic ଳିକ ଉଦାହରଣ |

ମ basic ଳିକ ଶ yl ଳୀ ପାଇଁ - ହାଲୁକା ପ୍ୟାଡିଂ ଏବଂ କେବଳ ଭୂସମାନ୍ତର ବିଭାଜନକାରୀ - ଯେକ .tableany ଣସିରେ ବେସ୍ କ୍ଲାସ୍ ଯୋଡନ୍ତୁ <table>| ଏହା ଅତ୍ୟନ୍ତ ଅନାବଶ୍ୟକ ମନେହୁଏ, କିନ୍ତୁ କ୍ୟାଲେଣ୍ଡର ଏବଂ ଡେଟ୍ ପିକର୍ ପରି ଅନ୍ୟ ପ୍ଲଗଇନ୍ ପାଇଁ ଟେବୁଲଗୁଡିକର ବ୍ୟାପକ ବ୍ୟବହାରକୁ ଦୃଷ୍ଟିରେ ରଖି ଆମେ ଆମର କଷ୍ଟମ୍ ଟେବୁଲ୍ ଶ yles ଳୀକୁ ପୃଥକ କରିବାକୁ ଚୟନ କରିଛୁ |

ବ table କଳ୍ପିକ ଟେବୁଲ୍ କ୍ୟାପସନ୍ |
#	ପ୍ରଥମ ନାମ	ଶେଷ ନାମ	ଉପଯୋଗକର୍ତ୍ତା ନାମ
୧	ମାର୍କ	Otto	@ ମିଡୋ
୨	ଯାକୁବ	ଥର୍ନଟନ୍ \|	@ ଫାଟ
3	ଲ୍ୟାରି \|	ପକ୍ଷୀ	@ ଟ୍ୱିଟର

<table class="table">
  ...
</table>

ଧାଡି ଧାଡିଗୁଡିକ |

.table-stripedଭିତରେ ଥିବା ଯେକ table ଣସି ଟେବୁଲ୍ ଧାଡିରେ ଜେବ୍ରା-ଷ୍ଟ୍ରିପିଂ ଯୋଡିବାକୁ ବ୍ୟବହାର କରନ୍ତୁ <tbody>|

କ୍ରସ୍ ବ୍ରାଉଜର୍ ସୁସଙ୍ଗତତା |

ଷ୍ଟ୍ରାଇଡ୍ ଟେବୁଲଗୁଡିକ CSS ଚୟନକର୍ତ୍ତା ମାଧ୍ୟମରେ ଷ୍ଟାଇଲ୍ :nth-childହୋଇଛି, ଯାହା ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 8 ରେ ଉପଲବ୍ଧ ନାହିଁ |

#	ପ୍ରଥମ ନାମ	ଶେଷ ନାମ	ଉପଯୋଗକର୍ତ୍ତା ନାମ
୧	ମାର୍କ	Otto	@ ମିଡୋ
୨	ଯାକୁବ	ଥର୍ନଟନ୍ \|	@ ଫାଟ
3	ଲ୍ୟାରି \|	ପକ୍ଷୀ	@ ଟ୍ୱିଟର

<table class="table table-striped">
  ...
</table>

ସୀମାନ୍ତ ଟେବୁଲ୍ |

.table-borderedଟେବୁଲ୍ ଏବଂ କକ୍ଷଗୁଡ଼ିକର ସମସ୍ତ ପାର୍ଶ୍ୱରେ ସୀମା ପାଇଁ ଯୋଡନ୍ତୁ |

#	ପ୍ରଥମ ନାମ	ଶେଷ ନାମ	ଉପଯୋଗକର୍ତ୍ତା ନାମ
୧	ମାର୍କ	Otto	@ ମିଡୋ
୨	ଯାକୁବ	ଥର୍ନଟନ୍ \|	@ ଫାଟ
3	ଲ୍ୟାରି \|	ପକ୍ଷୀ	@ ଟ୍ୱିଟର

<table class="table table-bordered">
  ...
</table>

ଧାଡିଗୁଡିକ

.table-hoverA ମଧ୍ୟରେ ଟେବୁଲ୍ ଧାଡିରେ ଏକ ହୋଭର ସ୍ଥିତି ସକ୍ଷମ କରିବାକୁ ଯୋଡନ୍ତୁ <tbody>|

#	ପ୍ରଥମ ନାମ	ଶେଷ ନାମ	ଉପଯୋଗକର୍ତ୍ତା ନାମ
୧	ମାର୍କ	Otto	@ ମିଡୋ
୨	ଯାକୁବ	ଥର୍ନଟନ୍ \|	@ ଫାଟ
3	ଲ୍ୟାରି \|	ପକ୍ଷୀ	@ ଟ୍ୱିଟର

<table class="table table-hover">
  ...
</table>

ଘନୀଭୂତ ଟେବୁଲ୍ |

.table-condensedସେଲ୍ ପ୍ୟାଡିଂକୁ ଅଧା କରି ଟେବୁଲ୍ଗୁଡ଼ିକୁ ଅଧିକ କମ୍ପାକ୍ଟ କରିବାକୁ ଯୋଡନ୍ତୁ |

#	ପ୍ରଥମ ନାମ	ଶେଷ ନାମ	ଉପଯୋଗକର୍ତ୍ତା ନାମ
୧	ମାର୍କ	Otto	@ ମିଡୋ
୨	ଯାକୁବ	ଥର୍ନଟନ୍ \|	@ ଫାଟ
3	ଲ୍ୟାରି ଦି ବାର୍ଡ \|		@ ଟ୍ୱିଟର

<table class="table table-condensed">
  ...
</table>

ବିଷୟବସ୍ତୁ ଶ୍ରେଣୀଗୁଡିକ |

ଟେବୁଲ୍ ଧାଡି କିମ୍ବା ବ୍ୟକ୍ତିଗତ କକ୍ଷକୁ ରଙ୍ଗ ଦେବା ପାଇଁ ପ୍ରସଙ୍ଗ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ |

କ୍ଲାସ୍	ବର୍ଣ୍ଣନା
`.active`	ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଧାଡି କିମ୍ବା କକ୍ଷରେ ହୋଭର ରଙ୍ଗ ପ୍ରୟୋଗ କରେ \|
`.success`	ଏକ ସଫଳ କିମ୍ବା ସକରାତ୍ମକ କାର୍ଯ୍ୟକୁ ସୂଚିତ କରେ \|
`.info`	ଏକ ନିରପେକ୍ଷ ସୂଚନାପୂର୍ଣ୍ଣ ପରିବର୍ତ୍ତନ କିମ୍ବା କାର୍ଯ୍ୟକୁ ସୂଚିତ କରେ \|
`.warning`	ଏକ ଚେତାବନୀ ସୂଚାଇଥାଏ ଯାହା ଧ୍ୟାନ ଆବଶ୍ୟକ କରିପାରନ୍ତି \|
`.danger`	ଏକ ବିପଜ୍ଜନକ କିମ୍ବା ସମ୍ଭାବ୍ୟ ନକାରାତ୍ମକ କାର୍ଯ୍ୟକୁ ସୂଚାଇଥାଏ \|

#	ସ୍ତମ୍ଭ ଶିରୋନାମା \|	ସ୍ତମ୍ଭ ଶିରୋନାମା \|	ସ୍ତମ୍ଭ ଶିରୋନାମା \|
୧	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ
୨	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ
3	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ
4	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ
5	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ
6	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ
7	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ
8	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ
9	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ	ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |

ଏକ ଟେବୁଲ୍ ଧାଡି କିମ୍ବା ବ୍ୟକ୍ତିଗତ କକ୍ଷରେ ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ସୁନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ସ୍ପଷ୍ଟ ଅଟେ (ସମ୍ପୃକ୍ତ ଟେବୁଲ୍ ଧାଡି / କକ୍ଷରେ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .sr-onlyଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |

ପ୍ରତିକ୍ରିୟାଶୀଳ ସାରଣୀଗୁଡ଼ିକ |

ଛୋଟ ଡିଭାଇସରେ (768px ତଳେ) ଭୂସମାନ୍ତର ସ୍କ୍ରୋଲ୍ କରିବା ପାଇଁ ଯେକ any ଣସି .tableଗୁଡ଼ିକୁ ଗୁଡ଼ାଇ ପ୍ରତିକ୍ରିୟାଶୀଳ ସାରଣୀ ସୃଷ୍ଟି କରନ୍ତୁ | .table-responsive768px ଚଉଡା ଠାରୁ ବଡ କିଛି ଦେଖିବାବେଳେ, ଆପଣ ଏହି ସାରଣୀଗୁଡ଼ିକରେ କ difference ଣସି ପାର୍ଥକ୍ୟ ଦେଖିବେ ନାହିଁ |

ଭର୍ଟିକାଲ୍ କ୍ଲିପିଂ / ଟ୍ରଙ୍କେସନ୍ |

ପ୍ରତିକ୍ରିୟାଶୀଳ ସାରଣୀଗୁଡ଼ିକ ବ୍ୟବହାର କରେ overflow-y: hidden, ଯାହା ଟେବୁଲର ତଳ କିମ୍ବା ଉପର ଧାରକୁ ଯାଇଥିବା ଯେକ content ଣସି ବିଷୟବସ୍ତୁକୁ ବନ୍ଦ କରିଦିଏ | ବିଶେଷ ଭାବରେ, ଏହା ଡ୍ରପଡାଉନ୍ ମେନୁ ଏବଂ ଅନ୍ୟ ତୃତୀୟ-ପକ୍ଷ ୱିଜେଟ୍ଗୁଡ଼ିକୁ କ୍ଲିପ୍ କରିପାରେ |

ଫାୟାରଫକ୍ସ ଏବଂ ଫିଲ୍ଡସେଟ୍ |

ଫାୟାରଫକ୍ସର କିଛି ଅଶୁଭ ଫିଲ୍ଡସେଟ୍ ଷ୍ଟାଇଲିଂ widthଅଛି ଯାହା ପ୍ରତିକ୍ରିୟାଶୀଳ ଟେବୁଲରେ ବାଧା ସୃଷ୍ଟି କରିଥାଏ | ଫାୟାରଫକ୍ସ-ନିର୍ଦ୍ଦିଷ୍ଟ ହ୍ୟାକ୍ ବିନା ଏହାକୁ ଓଭରବ୍ରିଡ୍ କରାଯାଇପାରିବ ନାହିଁ ଯାହାକୁ ଆମେ ବୁଟଷ୍ଟ୍ରାପରେ ପ୍ରଦାନ କରୁନାହୁଁ :

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

ଅଧିକ ସୂଚନା ପାଇଁ, ଏହି ଷ୍ଟାକ ଓଭରଫ୍ଲୋ ଉତ୍ତର ପ read ନ୍ତୁ |

#	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|
୧	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|
୨	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|
3	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|

#	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|
୧	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|
୨	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|
3	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ମ Basic ଳିକ ଉଦାହରଣ |

ବ୍ୟକ୍ତିଗତ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ସ୍ୱୟଂଚାଳିତ ଭାବରେ କିଛି ଗ୍ଲୋବାଲ୍ ଷ୍ଟାଇଲ୍ ଗ୍ରହଣ କରେ | ସମସ୍ତ ପାଠ୍ୟ <input>, <textarea>ଏବଂ <select>ଉପାଦାନଗୁଡିକ ଡିଫଲ୍ଟ ଭାବରେ .form-controlସେଟ୍ ହୋଇଛି | ସର୍ବୋଚ୍ଚ ବ୍ୟବଧାନ ପାଇଁ width: 100%;ଲେବଲ୍ ଏବଂ ନିୟନ୍ତ୍ରଣ ଗୁଡ଼ାଇ ରଖନ୍ତୁ |.form-group

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ଫର୍ମ ଗୋଷ୍ଠୀଗୁଡ଼ିକୁ ଇନପୁଟ୍ ଗୋଷ୍ଠୀ ସହିତ ମିଶ୍ରଣ କରନ୍ତୁ ନାହିଁ |

ଫର୍ମ ଗ୍ରୁପ୍ଗୁଡ଼ିକୁ ସିଧାସଳଖ ଇନପୁଟ୍ ଗ୍ରୁପ୍ ସହିତ ମିଶ୍ରଣ କରନ୍ତୁ ନାହିଁ | ଏହା ପରିବର୍ତ୍ତେ, ଫର୍ମ ଗ୍ରୁପ୍ ଭିତରେ ଇନପୁଟ୍ ଗ୍ରୁପ୍ କୁ ବସା କର |

ଇନଲାଇନ ଫର୍ମ |

ବାମ-ଆଲାଇନ୍ ଏବଂ ଇନଲାଇନ-ବ୍ଲକ୍ ନିୟନ୍ତ୍ରଣ .form-inlineପାଇଁ ତୁମର ଫର୍ମରେ ଯୋଗ କର (ଯାହା କ a ଣସି ହେବା ଆବଶ୍ୟକ ନୁହେଁ) | ଏହା କେବଳ ଭ୍ୟୁପୋର୍ଟ୍ ମଧ୍ୟରେ ଥିବା ଫର୍ମଗୁଡିକ ପାଇଁ ପ୍ରଯୁଜ୍ୟ ଯାହା ଅତି କମରେ 768px ଚଉଡା |<form>

କଷ୍ଟମ୍ ଓସାର ଆବଶ୍ୟକ କରିପାରନ୍ତି |

width: 100%;ବୁଟଷ୍ଟ୍ରାପରେ ଡିଫଲ୍ଟ ଭାବରେ ଇନପୁଟ୍ ଏବଂ ସିଲେକ୍ଟ ପ୍ରୟୋଗ ହୋଇଛି | ଇନଲାଇନ ଫର୍ମ ମଧ୍ୟରେ, ଆମେ ପୁନ res ସେଟ୍ କରୁ ଯେ width: auto;ଏକାଧିକ ନିୟନ୍ତ୍ରଣ ସମାନ ଧାଡିରେ ରହିପାରିବ | ଆପଣଙ୍କର ଲେଆଉଟ୍ ଉପରେ ନିର୍ଭର କରି, ଅତିରିକ୍ତ କଷ୍ଟମ୍ ଓସାର ଆବଶ୍ୟକ ହୋଇପାରେ |

ସର୍ବଦା ଲେବଲ୍ ଯୋଡନ୍ତୁ |

ଯଦି ଆପଣ ପ୍ରତ୍ୟେକ ଇନପୁଟ୍ ପାଇଁ ଏକ ଲେବଲ୍ ଅନ୍ତର୍ଭୂକ୍ତ ନକରନ୍ତି ତେବେ ସ୍କ୍ରିନ୍ ପାଠକମାନେ ଆପଣଙ୍କର ଫର୍ମରେ ଅସୁବିଧାର ସମ୍ମୁଖୀନ ହେବେ | ଏହି ଇନଲାଇନ ଫର୍ମଗୁଡିକ ପାଇଁ, ଆପଣ .sr-onlyଶ୍ରେଣୀ ବ୍ୟବହାର କରି ଲେବଲ୍ ଲୁଚାଇ ପାରିବେ | ସହାୟକ ଟେକ୍ନୋଲୋଜି ପାଇଁ ଏକ ଲେବଲ୍ ପ୍ରଦାନ କରିବାର ଆହୁରି ବିକଳ୍ପ ପଦ୍ଧତି ଅଛି, ଯେପରିକି aria-label, aria-labelledbyକିମ୍ବା titleଗୁଣ | ଯଦି ଏଥିରୁ କ none ଣସିଟି ଉପସ୍ଥିତ ନଥାଏ, ସ୍କ୍ରିନ୍ ପାଠକମାନେ ଯଦି ଉପସ୍ଥିତ ଥାଆନ୍ତି, ଗୁଣ ବ୍ୟବହାର କରିବାକୁ ବ୍ୟବହାର କରିପାରନ୍ତି placeholder, କିନ୍ତୁ ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ placeholderଅନ୍ୟ ଲେବେଲିଂ ପଦ୍ଧତିଗୁଡିକ ପାଇଁ ଏକ ବଦଳ ଭାବରେ ବ୍ୟବହାର କରିବାକୁ ପରାମର୍ଶ ଦିଆଯାଇନଥାଏ |

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

ଭୂସମାନ୍ତର ଫର୍ମ |

ଫର୍ମରେ ଯୋଗ କରି ଏକ ଭୂସମାନ୍ତର ଲେଆଉଟ୍ ରେ ଲେବଲ୍ ଏବଂ ଫର୍ମ ନିୟନ୍ତ୍ରଣର ଗୋଷ୍ଠୀକୁ ଆଲାଇନ୍ କରିବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପର ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ .form-horizontal(ଯାହା ଏକ ହେବା ଆବଶ୍ୟକ ନୁହେଁ <form>) | ଏହା କରିବା ଦ୍ୱାରା ଗ୍ରୀଡ୍ ଧାଡି ପରି ଆଚରଣ କରିବା ପାଇଁ s ପରିବର୍ତ୍ତନ .form-groupହୁଏ, ତେଣୁ କ need ଣସି ଆବଶ୍ୟକତା ନାହିଁ .row|

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

ସମର୍ଥିତ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକ |

ଷ୍ଟାଣ୍ଡାର୍ଡ ଫର୍ମ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକର ଉଦାହରଣ ଏକ ଉଦାହରଣ ଫର୍ମ ଲେଆଉଟ୍ ରେ ସମର୍ଥିତ |

ଇନପୁଟ୍

ଅଧିକାଂଶ ସାଧାରଣ ଫର୍ମ ନିୟନ୍ତ୍ରଣ, ପାଠ୍ୟ-ଆଧାରିତ ଇନପୁଟ୍ କ୍ଷେତ୍ର | ସମସ୍ତ HTML5 ପ୍ରକାରଗୁଡିକ ପାଇଁ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ textକରେ : ,,,,,,,,,,,, _ _ _ _ _ _passworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor

ଘୋଷଣା ଘୋଷଣା ଟାଇପ୍ କରନ୍ତୁ |

typeଯଦି ସେଗୁଡିକ ସଠିକ୍ ଭାବରେ ଘୋଷିତ ହୁଏ ତେବେ ଇନପୁଟ୍ଗୁଡ଼ିକ ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ ଷ୍ଟାଇଲ୍ ହେବ |

<input type="text" class="form-control" placeholder="Text input">

ଗୋଷ୍ଠୀଗୁଡିକ ଇନପୁଟ୍ କରନ୍ତୁ |

ଯେକ any ଣସି ପାଠ୍ୟ ଆଧାରିତ ପୂର୍ବରୁ ଏବଂ / କିମ୍ବା ପରେ ଇଣ୍ଟିଗ୍ରେଟେଡ୍ ଟେକ୍ସଟ୍ କିମ୍ବା ବଟନ୍ ଯୋଡିବାକୁ <input>, ଇନପୁଟ୍ ଗ୍ରୁପ୍ ଉପାଦାନ ଯାଞ୍ଚ କରନ୍ତୁ |

ଟେକ୍ସଟେରିଆ |

ଫର୍ମ ନିୟନ୍ତ୍ରଣ ଯାହା ପାଠ୍ୟର ଏକାଧିକ ଧାଡିକୁ ସମର୍ଥନ କରେ | rowsଆବଶ୍ୟକ ଅନୁଯାୟୀ ଗୁଣ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

<textarea class="form-control" rows="3"></textarea>

ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ |

ଚେକ୍ ବକ୍ସଗୁଡିକ ଏକ ତାଲିକାରେ ଗୋଟିଏ କିମ୍ବା ଅନେକ ବିକଳ୍ପ ବାଛିବା ପାଇଁ, ଯେତେବେଳେ କି ରେଡିଓଗୁଡ଼ିକ ଅନେକଙ୍କ ମଧ୍ୟରୁ ଗୋଟିଏ ବିକଳ୍ପ ବାଛିବା ପାଇଁ |

ଅକ୍ଷମ ହୋଇଥିବା ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ସମର୍ଥିତ, କିନ୍ତୁ ପିତାମାତାଙ୍କ ହୋଭରରେ ଏକ "ଅନୁମତିପ୍ରାପ୍ତ ନୁହେଁ" କର୍ସର୍ ପ୍ରଦାନ କରିବାକୁ <label>, ଆପଣଙ୍କୁ ପିତାମାତା , କିମ୍ବା , ସହିତ .disabledଶ୍ରେଣୀ ଯୋଡିବାକୁ ପଡିବ |.radio.radio-inline.checkbox.checkbox-inline

ଡିଫଲ୍ଟ (ଷ୍ଟାକ୍ଡ୍)

ବିକଳ୍ପଟି ହେଉଛି ଏହା ଏବଂ ତାହା - ଏହା କାହିଁକି ଉତ୍ତମ ତାହା ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

ବିକଳ୍ପ ଦୁଇଟି ଅକ୍ଷମ ହୋଇଛି |

ଅପ୍ସନ୍ ଦୁଇଟି ଅନ୍ୟ କିଛି ହୋଇପାରେ ଏବଂ ଏହାକୁ ଚୟନ କରିବା ଦ୍ one ାରା ବିକଳ୍ପଟି ଡିଲିଟ୍ ହେବ |

ବିକଳ୍ପ ତିନୋଟି ଅକ୍ଷମ ହୋଇଛି |

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

ଇନଲାଇନ୍ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ |

ସମାନ ଧାଡିରେ ଦେଖାଯାଉଥିବା ନିୟନ୍ତ୍ରଣ ପାଇଁ ଚେକ୍ ବକ୍ସ କିମ୍ବା ରେଡିଓର ଏକ କ୍ରମରେ .checkbox-inlineକିମ୍ବା ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |.radio-inline

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

ଲେବଲ୍ ପାଠ୍ୟ ବିନା ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ |

ଯଦି ଆପଣଙ୍କର ଭିତରେ କ text ଣସି ଟେକ୍ସଟ୍ ନଥାଏ <label>, ତେବେ ଆପଣ ଆଶା କରିଥିବା ପରି ଇନପୁଟ୍ ସ୍ଥାନିତ ହୋଇଛି | ସମ୍ପ୍ରତି କେବଳ ଅଣ-ଇନଲାଇନ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓରେ କାମ କରେ | ସହାୟକ ଟେକ୍ନୋଲୋଜି ପାଇଁ ତଥାପି କିଛି ଲେବଲ୍ ପ୍ରଦାନ କରିବାକୁ ମନେରଖ (ଉଦାହରଣ ସ୍ୱରୂପ, ବ୍ୟବହାର aria-label) |

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

ଚୟନ କରେ |

border-radiusଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଅନେକ ଦେଶୀ ଚୟନ ମେନୁଗୁଡ଼ିକ - ଯଥା ସଫାରି ଏବଂ କ୍ରୋମ୍ରେ - ଗୋଲାକାର କୋଣ ଅଛି ଯାହା ଗୁଣ ମାଧ୍ୟମରେ ପରିବର୍ତ୍ତନ କରାଯାଇପାରିବ ନାହିଁ |

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select>ଆଟ୍ରିବ୍ୟୁଟ୍ ସହିତ କଣ୍ଟ୍ରୋଲ୍ ପାଇଁ multiple, ଡିଫଲ୍ଟ ଭାବରେ ଏକାଧିକ ଅପ୍ସନ୍ ଦେଖାଯାଏ |

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

ସ୍ଥିର ନିୟନ୍ତ୍ରଣ |

ଯେତେବେଳେ ତୁମେ ଏକ ଫର୍ମ ମଧ୍ୟରେ ଏକ ଫର୍ମ ଲେବଲ୍ ପାଖରେ ସାଧା ପାଠ୍ୟ ରଖିବା ଆବଶ୍ୟକ କରେ, a .form-control-staticଉପରେ ଶ୍ରେଣୀ ବ୍ୟବହାର କର <p>|

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

ସ୍ଥିତିକୁ ଧ୍ୟାନ ଦିଅନ୍ତୁ |

ଆମେ outlineକିଛି ଫର୍ମ ନିୟନ୍ତ୍ରଣରେ ଡିଫଲ୍ଟ ଶ yles ଳୀ ଅପସାରଣ କରୁ ଏବଂ box-shadowଏହା ପାଇଁ ଏକ ସ୍ଥାନରେ ପ୍ରୟୋଗ କରୁ :focus|

ଡେମୋ `:focus`ଷ୍ଟେଟ୍ |

:focusA ରେ ରାଜ୍ୟ ପ୍ରଦର୍ଶନ କରିବାକୁ ଉପରୋକ୍ତ ଉଦାହରଣ ଇନପୁଟ୍ ଆମର ଡକ୍ୟୁମେଣ୍ଟେସନ୍ରେ କଷ୍ଟମ୍ ଷ୍ଟାଇଲ୍ ବ୍ୟବହାର କରେ .form-control|

ଅକ୍ଷମ ଅବସ୍ଥା |

disabledଉପଭୋକ୍ତା ପାରସ୍ପରିକ କାର୍ଯ୍ୟକଳାପକୁ ରୋକିବା ପାଇଁ ଏକ ଇନପୁଟ୍ ଉପରେ ବୁଲିଅନ୍ ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ | ଅକ୍ଷମ ଇନପୁଟ୍ ଗୁଡିକ ହାଲୁକା ଦେଖାଯାଏ ଏବଂ ଏକ not-allowedକର୍ସର୍ ଯୋଗ କରେ |

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

ଅକ୍ଷମ ଫିଲ୍ଡସେଟଗୁଡିକ |

ଏକାସାଙ୍ଗରେ ସମସ୍ତ ନିୟନ୍ତ୍ରଣକୁ ଅକ୍ଷମ କରିବା ପାଇଁ disabledଗୁଣଧର୍ମକୁ ଯୋଡନ୍ତୁ |<fieldset><fieldset>

ଲିଙ୍କ୍ କାର୍ଯ୍ୟକାରିତା ବିଷୟରେ ସାବଧାନ |`<a>`

ଡିଫଲ୍ଟ ଭାବରେ, ବ୍ରାଉଜର୍ ଗୁଡିକ ସମସ୍ତ ଦେଶୀ ଫର୍ମ କଣ୍ଟ୍ରୋଲ୍ ( ଏବଂ ଉପାଦାନଗୁଡିକ) କୁ ଅକ୍ଷମ ଭାବରେ ବ୍ୟବହାର କରିବେ <input>, ଉଭୟ କୀବୋର୍ଡ୍ ଏବଂ ମାଉସ୍ ପାରସ୍ପରିକ କାର୍ଯ୍ୟକୁ ପ୍ରତିରୋଧ କରିବେ | ଯଦିଓ, ଯଦି ଆପଣଙ୍କର ଫର୍ମରେ ଉପାଦାନଗୁଡିକ ମଧ୍ୟ ଅନ୍ତର୍ଭୂକ୍ତ ହୁଏ, ତେବେ ସେମାନଙ୍କୁ କେବଳ ଏକ ଶ style ଳୀ ଦିଆଯିବ | ବଟନ୍ ପାଇଁ ଅକ୍ଷମ ଅବସ୍ଥା ବିଷୟରେ ବିଭାଗରେ ସୂଚିତ କରାଯାଇଛି (ଏବଂ ବିଶେଷ ଭାବରେ ଆଙ୍କର୍ ଉପାଦାନଗୁଡିକ ପାଇଁ ଉପ-ବିଭାଗରେ), ଏହି CSS ସମ୍ପତ୍ତି ଏପର୍ଯ୍ୟନ୍ତ ମାନକ ହୋଇନାହିଁ ଏବଂ ଅପେରା 18 ଏବଂ ତଦୁର୍ଦ୍ଧ୍ୱରେ, କିମ୍ବା ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 11 ରେ ସମ୍ପୂର୍ଣ୍ଣ ଭାବରେ ସମର୍ଥିତ ନୁହେଁ, ଏବଂ ଜିତିଲା | କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କୁ ଏହି ଲିଙ୍କଗୁଡିକ ଧ୍ୟାନ ଦେବାକୁ କିମ୍ବା ସକ୍ରିୟ କରିବାକୁ ବାରଣ କରିବ ନାହିଁ | ତେଣୁ ସୁରକ୍ଷିତ ରହିବାକୁ, ଏହିପରି ଲିଙ୍କଗୁଡ଼ିକୁ ଅକ୍ଷମ କରିବାକୁ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରନ୍ତୁ |<select><button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

କ୍ରସ୍ ବ୍ରାଉଜର୍ ସୁସଙ୍ଗତତା |

ଯେତେବେଳେ ବୁଟଷ୍ଟ୍ରାପ୍ ସମସ୍ତ ବ୍ରାଉଜରରେ ଏହି ଶ yles ଳୀଗୁଡିକ ପ୍ରୟୋଗ କରିବ, ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 11 ଏବଂ ନିମ୍ନରେ disableda ଉପରେ ଥିବା ଗୁଣକୁ ସମ୍ପୂର୍ଣ୍ଣ ସମର୍ଥନ କରେ ନାହିଁ <fieldset>| ଏହି ବ୍ରାଉଜର୍ ଗୁଡିକରେ ଫିଲ୍ଡସେଟ୍ ଅକ୍ଷମ କରିବାକୁ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରନ୍ତୁ |

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

ପଠନୀୟ ଅବସ୍ଥା |

readonlyଇନପୁଟ୍ ର ମୂଲ୍ୟ ପରିବର୍ତ୍ତନକୁ ରୋକିବା ପାଇଁ ଏକ ଇନପୁଟ୍ ଉପରେ ବୁଲିଅନ୍ ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ | କେବଳ ପଠନୀୟ ଇନପୁଟଗୁଡ଼ିକ ହାଲୁକା ଦେଖାଯାଏ (ଠିକ୍ ଅକ୍ଷମ ଇନପୁଟ୍ ପରି), କିନ୍ତୁ ମାନକ କର୍ସର୍ ବଜାୟ ରଖନ୍ତୁ |

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

ସାହାଯ୍ୟ ପାଠ

ଫର୍ମ ନିୟନ୍ତ୍ରଣ ପାଇଁ ବ୍ଲକ ସ୍ତର ସହାୟତା ପାଠ୍ୟ |

ଫର୍ମ ନିୟନ୍ତ୍ରଣ ସହିତ ସାହାଯ୍ୟ ପାଠ୍ୟକୁ ଯୋଡିବା |

aria-describedbyଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର ସହିତ ଜଡିତ ଫର୍ମ କଣ୍ଟ୍ରୋଲ୍ ସହିତ ହେଲପ୍ ଟେକ୍ସଟ୍ ସ୍ପଷ୍ଟ ଭାବରେ ଜଡିତ ହେବା ଉଚିତ | ଏହା ନିଶ୍ଚିତ କରିବ ଯେ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ - ଯେତେବେଳେ ଉପଭୋକ୍ତା ନିୟନ୍ତ୍ରଣରେ ପ୍ରବେଶ କରନ୍ତି କିମ୍ବା ପ୍ରବେଶ କରନ୍ତି ଏହି ସହାୟତା ପାଠ୍ୟ ଘୋଷଣା କରିବେ |

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

ବ id ଧତା ଦର୍ଶାଏ |

ଫର୍ମ ନିୟନ୍ତ୍ରଣରେ ତ୍ରୁଟି, ଚେତାବନୀ, ଏବଂ ସଫଳତା ଅବସ୍ଥା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ବ valid ଧତା ଶ yles ଳୀ ଅନ୍ତର୍ଭୂକ୍ତ କରେ | ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନକୁ ବ୍ୟବହାର, ଯୋଡିବା .has-warning, .has-errorକିମ୍ବା ବ୍ୟବହାର କରିବା | .has-successଯେକ Any ଣସି .control-label, .form-controlଏବଂ .help-blockସେହି ଉପାଦାନ ମଧ୍ୟରେ ବ valid ଧତା ଶ yles ଳୀ ଗ୍ରହଣ କରିବ |

ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ଏବଂ କଲର୍ ବ୍ଲାଇଣ୍ଡ ବ୍ୟବହାରକାରୀଙ୍କୁ ବ valid ଧତା ଅବସ୍ଥା ପହଞ୍ଚାଇବା |

ଏକ ଫର୍ମ ନିୟନ୍ତ୍ରଣର ସ୍ଥିତିକୁ ସୂଚାଇବା ପାଇଁ ଏହି ବ valid ଧତା ଶ yles ଳୀଗୁଡିକ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍, ରଙ୍ଗ-ଆଧାରିତ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ - କିମ୍ବା କଲର୍ ବ୍ଲାଇଣ୍ଡ ବ୍ୟବହାରକାରୀଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ |

ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରାଜ୍ୟର ଏକ ବିକଳ୍ପ ସୂଚକ ମଧ୍ୟ ପ୍ରଦାନ କରାଯାଇଛି | ଉଦାହରଣ ସ୍ .ରୁପ, ଆପଣ ଫର୍ମ କଣ୍ଟ୍ରୋଲର ପାଠ୍ୟରେ ରାଜ୍ୟ ବିଷୟରେ ଏକ ସୂଚନା ଅନ୍ତର୍ଭୂକ୍ତ କରିପାରିବେ <label>(ନିମ୍ନ କୋଡ୍ ଉଦାହରଣରେ ଯେପରି), ଏକ ଗ୍ଲାଇଫିକନ୍.sr-only ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ ( ଶ୍ରେଣୀ ବ୍ୟବହାର କରି ଉପଯୁକ୍ତ ବିକଳ୍ପ ପାଠ୍ୟ ସହିତ - ଗ୍ଲାଇଫିକନ୍ ଉଦାହରଣ ଦେଖନ୍ତୁ ), କିମ୍ବା ଏକ ପ୍ରଦାନ କରି | ଅତିରିକ୍ତ ସହାୟତା ପାଠ୍ୟ ବ୍ଲକ ନିର୍ଦ୍ଦିଷ୍ଟ ଭାବରେ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ, ଅବ alid ଧ ଫର୍ମ ନିୟନ୍ତ୍ରଣଗୁଡିକ ମଧ୍ୟ ଏକ aria-invalid="true"ଗୁଣ ବଣ୍ଟନ କରାଯାଇପାରେ |

ସଫଳତା ସହିତ ଇନପୁଟ୍ | ହେଲପ୍ ଟେକ୍ସଟ୍ ର ଏକ ବ୍ଲକ୍ ଯାହା ଏକ ନୂତନ ରେଖା ଉପରେ ଭାଙ୍ଗିଯାଏ ଏବଂ ଗୋଟିଏ ଲାଇନ୍ ବାହାରେ ବିସ୍ତାର ହୋଇପାରେ |

ଚେତାବନୀ ସହିତ ଇନପୁଟ୍ |

ତ୍ରୁଟି ସହିତ ଇନପୁଟ୍ |

ସଫଳତା ସହିତ ଚେକ୍ ବକ୍ସ |

ଚେତାବନୀ ସହିତ ଚେକ୍ ବକ୍ସ |

ତ୍ରୁଟି ସହିତ ଚେକ୍ ବକ୍ସ |

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

ବ al କଳ୍ପିକ ଆଇକନ୍ ସହିତ |

.has-feedbackଆପଣ ଏବଂ ସଠିକ୍ ଆଇକନ୍ ସହିତ ଯୋଗ ସହିତ ଇଚ୍ଛାଧୀନ ମତାମତ ଆଇକନ୍ ମଧ୍ୟ ଯୋଡିପାରିବେ |

ଫିଡବ୍ୟାକ୍ ଆଇକନ୍ଗୁଡ଼ିକ କେବଳ ପାଠ୍ୟ <input class="form-control">ଉପାଦାନଗୁଡ଼ିକ ସହିତ କାମ କରେ |

ଆଇକନ୍, ଲେବଲ୍, ଏବଂ ଇନପୁଟ୍ ଗୋଷ୍ଠୀ |

ଫିଡବ୍ୟାକ୍ ଆଇକନ୍ ଗୁଡିକର ମାନୁଆଲ୍ ପୋଜିସନ୍ ବିନା ଲେବଲ୍ ବିନା ଇନପୁଟ୍ ଏବଂ ଡାହାଣରେ ଏକ ଆଡ-ଅନ୍ ସହିତ ଇନପୁଟ୍ ଗୋଷ୍ଠୀ ପାଇଁ ଆବଶ୍ୟକ | ଆକ୍ସେସିବିଲିଟି କାରଣରୁ ସମସ୍ତ ଇନପୁଟ୍ ପାଇଁ ଲେବଲ୍ ପ୍ରଦାନ କରିବାକୁ ତୁମେ ଦୃ strongly ଭାବରେ ଉତ୍ସାହିତ | ଯଦି ଆପଣ ଲେବଲ୍ ପ୍ରଦର୍ଶିତ ହେବାକୁ ରୋକିବାକୁ ଚାହାଁନ୍ତି, ସେମାନଙ୍କୁ .sr-onlyଶ୍ରେଣୀ ସହିତ ଲୁଚାନ୍ତୁ | ଯଦି ଆପଣ ଲେବଲ୍ ବିନା କରିବାକୁ ପଡିବ, topଫିଡବ୍ୟାକ୍ ଆଇକନ୍ ର ମୂଲ୍ୟ ଆଡଜଷ୍ଟ କରନ୍ତୁ | ଇନପୁଟ୍ ଗୋଷ୍ଠୀ ପାଇଁ, rightଆପଣଙ୍କର ଆଡୋନର ମୋଟେଇ ଉପରେ ନିର୍ଭର କରି ମୂଲ୍ୟକୁ ଏକ ଉପଯୁକ୍ତ ପିକ୍ସେଲ ମୂଲ୍ୟରେ ସଜାଡନ୍ତୁ |

ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଆଇକନ୍ ର ଅର୍ଥ ପହଞ୍ଚାଇବା |

ନିଶ୍ଚିତ କରିବାକୁ ଯେ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା - ଯେପରିକି ସ୍କ୍ରିନ୍ ପାଠକ - ଏକ ଆଇକନ୍ ର ଅର୍ଥ ସଠିକ୍ ଭାବରେ ପହଞ୍ଚାଇଥାଏ, ଅତିରିକ୍ତ ଲୁକ୍କାୟିତ ପାଠ୍ୟ .sr-onlyଶ୍ରେଣୀ ସହିତ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯିବା ଉଚିତ ଏବଂ ଏହା ବ୍ୟବହାର ସହିତ ଜଡିତ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ସହିତ ସ୍ପଷ୍ଟ ଭାବରେ ଜଡିତ ହେବା ଉଚିତ aria-describedby| ବ ly କଳ୍ପିକ ଭାବରେ, ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ଅର୍ଥ (ଉଦାହରଣ ସ୍ୱରୂପ, ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ପାଠ୍ୟ ପ୍ରବେଶ କ୍ଷେତ୍ର ପାଇଁ ଏକ ଚେତାବନୀ ଅଛି) ଅନ୍ୟ କେତେକ ରୂପରେ ପ୍ରସାରିତ ହୋଇଛି, ଯେପରିକି <label>ଫର୍ମ ନିୟନ୍ତ୍ରଣ ସହିତ ଜଡିତ ପ୍ରକୃତ ପାଠ୍ୟକୁ ପରିବର୍ତ୍ତନ କରିବା |

ଯଦିଓ ନିମ୍ନଲିଖିତ ଉଦାହରଣଗୁଡ଼ିକ ପୂର୍ବରୁ ପାଠ୍ୟରେ ନିଜସ୍ୱ ଫର୍ମ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକର ବ valid ଧତା ସ୍ଥିତିକୁ ଉଲ୍ଲେଖ କରିସାରିଛନ୍ତି <label>, ଉପରୋକ୍ତ କ techni ଶଳ ( .sr-onlyପାଠ୍ୟ ବ୍ୟବହାର ଏବଂ aria-describedby) ଦୃଷ୍ଟାନ୍ତମୂଳକ ଉଦ୍ଦେଶ୍ୟରେ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି |

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

ଭୂସମାନ୍ତର ଏବଂ ଇନଲାଇନ ଫର୍ମରେ ଇଚ୍ଛାଧୀନ ଆଇକନ୍ |

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

ଲୁକ୍କାୟିତ `.sr-only`ଲେବଲ୍ ସହିତ ବ tion କଳ୍ପିକ ଆଇକନ୍ |

ଯଦି ଆପଣ .sr-onlyଏକ ଫର୍ମ ନିୟନ୍ତ୍ରଣର ଲୁଚାଇବା ପାଇଁ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତି <label>(ଅନ୍ୟ ଲେବେଲିଂ ବିକଳ୍ପ ବ୍ୟବହାର କରିବା ପରିବର୍ତ୍ତେ, aria-labelଆଟ୍ରିବ୍ୟୁଟ୍), ବୁଟଷ୍ଟ୍ରାପ୍ ଯୋଡାଯିବା ପରେ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଆଇକନ୍ ର ସ୍ଥିତିକୁ ସଜାଡିବ |

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

ନିୟନ୍ତ୍ରଣ ଆକାର

ପରି ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରି ଉଚ୍ଚତା ସେଟ୍ କରନ୍ତୁ .input-lg, ଏବଂ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରି ଓସାର ସେଟ୍ କରନ୍ତୁ .col-lg-*|

ଉଚ୍ଚତା ଆକାର

ଲମ୍ବା କିମ୍ବା କ୍ଷୁଦ୍ର ଫର୍ମ ନିୟନ୍ତ୍ରଣ ସୃଷ୍ଟି କରନ୍ତୁ ଯାହା ବଟନ୍ ଆକାର ସହିତ ମେଳ ହୁଏ |

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

ଭୂସମାନ୍ତର ଫର୍ମ ଗୋଷ୍ଠୀ ଆକାର |

.form-horizontalଯୋଡିବା .form-group-lgକିମ୍ବା ଭିତରେ ଶୀଘ୍ର ଆକାର ଲେବଲ୍ ଏବଂ ଫର୍ମ ନିୟନ୍ତ୍ରଣ .form-group-sm|

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

ସ୍ତମ୍ଭ ଆକାର

ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭରେ, କିମ୍ବା ଯେକ custom ଣସି କଷ୍ଟମ୍ ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନରେ ଇନପୁଟ୍ ଗୁଡ଼ାଇ ଦିଅନ୍ତୁ, ସହଜରେ ଇଚ୍ଛିତ ପ୍ରସ୍ଥକୁ କାର୍ଯ୍ୟକାରୀ କରିବାକୁ |

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

ବଟନ୍ ଟ୍ୟାଗ୍ |

ଏକ ଉପରେ ବଟନ୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ |<a>ଏକ , <button>କିମ୍ବା <input>ଉପାଦାନ

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

ପ୍ରସଙ୍ଗ-ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ୟବହାର |

<a>ଯେତେବେଳେ ବଟନ୍ କ୍ଲାସ୍ ଏବଂ ଉପାଦାନଗୁଡିକ ବ୍ୟବହାର କରାଯାଇପାରିବ <button>, କେବଳ <button>ଆମର ନାଭ୍ ଏବଂ ନାଭବାର୍ ଉପାଦାନଗୁଡ଼ିକ ମଧ୍ୟରେ ଉପାଦାନଗୁଡ଼ିକ ସମର୍ଥିତ |

ବଟନ୍ ଭାବରେ କାର୍ଯ୍ୟ କରୁଥିବା ଲିଙ୍କ୍ |

ଯଦି <a>ଉପାଦାନଗୁଡିକ ବଟନ୍ ଭାବରେ କାର୍ଯ୍ୟ କରିବା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ - ସାମ୍ପ୍ରତିକ ପୃଷ୍ଠା ମଧ୍ୟରେ ଅନ୍ୟ ଏକ ଡକ୍ୟୁମେଣ୍ଟ୍ କିମ୍ବା ବିଭାଗକୁ ନେଭିଗେଟ୍ କରିବା ପରିବର୍ତ୍ତେ ଇନ୍-ପେଜ୍ କାର୍ଯ୍ୟକାରିତାକୁ ଟ୍ରିଗର୍ କରିବା - ସେମାନଙ୍କୁ ମଧ୍ୟ ଏକ ଉପଯୁକ୍ତ ଦିଆଯିବା ଉଚିତ role="button"|

କ୍ରସ୍ ବ୍ରାଉଜର୍ ରେଣ୍ଡରିଂ |

ଏକ ସର୍ବୋତ୍ତମ ଅଭ୍ୟାସ ଭାବରେ, ଆମେ ଯେତେବେଳେ ସମ୍ଭବ ଉପାଦାନ ବ୍ୟବହାର କରିବାକୁ ସୁପାରିଶ କରୁ |<button> କ୍ରସ୍ ବ୍ରାଉଜର୍ ରେଣ୍ଡରିଂ ସହିତ ମେଳ ଖାଇବାକୁ ନିଶ୍ଚିତ କରିବା ପାଇଁ

ଅନ୍ୟ ଜିନିଷଗୁଡିକ ମଧ୍ୟରେ, ଫାୟାରଫକ୍ସ <30 ରେ ଏକ ତ୍ରୁଟି ଅଛି ଯାହା ଆମକୁ-ଆଧାରିତ ବଟନ୍ ସେଟିଂ କରିବାରେ ବାରଣ କରିଥାଏ , ଯାହା ଫାୟାରଫକ୍ସରେ line-heightଥିବା <input>ଅନ୍ୟ ବଟନଗୁଡ଼ିକର ଉଚ୍ଚତା ସହିତ ମେଳ ଖାଉ ନାହିଁ |

ବିକଳ୍ପଗୁଡ଼ିକ

ଶୀଘ୍ର ଏକ ଷ୍ଟାଇଲ୍ ବଟନ୍ ସୃଷ୍ଟି କରିବାକୁ ଉପଲବ୍ଧ ବଟନ୍ ଶ୍ରେଣୀର ଯେକ any ଣସି ବ୍ୟବହାର କରନ୍ତୁ |

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |

ଏକ ବଟନ୍ ରେ ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ହୋଇଥିବା ସୂଚନା ନିଜେ ବିଷୟବସ୍ତୁରୁ ସ୍ପଷ୍ଟ (ବଟନ୍ ର ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .sr-onlyଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |

ଆକାରଗୁଡିକ |

ବଡ଼ କିମ୍ବା ଛୋଟ ବଟନ୍ କଳ୍ପନା? ଯୋଡନ୍ତୁ .btn-lg, .btn-smକିମ୍ବା .btn-xsଅତିରିକ୍ତ ଆକାର ପାଇଁ |

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

ଯୋଗକରି ବ୍ଲକ ସ୍ତରର ବଟନ୍ଗୁଡ଼ିକ ସୃଷ୍ଟି କରନ୍ତୁ - ଯାହା ଏକ ପିତାମାତାଙ୍କର ସମ୍ପୂର୍ଣ୍ଣ ଓସାରକୁ ବିସ୍ତାର କରେ .btn-block|

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

ସକ୍ରିୟ ଅବସ୍ଥା |

ସକ୍ରିୟ ଥିବାବେଳେ ବଟନ୍ଗୁଡ଼ିକ ଦବାଇ ଦେଖାଯିବ (ଏକ ଗା er ଼ ପୃଷ୍ଠଭୂମି, ଗା er ଼ ସୀମା, ଏବଂ ଇନ୍ସେଟ୍ ଛାୟା ସହିତ) | ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ <button>, ଏହା ମାଧ୍ୟମରେ କରାଯାଇଥାଏ :active| ଉପାଦାନଗୁଡିକ ପାଇଁ <a>, ଏହା ସହିତ କରାଯାଇଛି .active| ତଥାପି, ଆପଣ s .activeରେ ବ୍ୟବହାର କରିପାରିବେ <button>(ଏବଂ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ |aria-pressed="true" ସକ୍ରିୟ ରାଜ୍ୟକୁ ପ୍ରୋଗ୍ରାମିକ୍ ଭାବରେ ନକଲ କରିବା ଆବଶ୍ୟକ କରନ୍ତି ତେବେ ଆପଣ

ବଟନ୍ ଉପାଦାନ |

ଯୋଡିବା ଆବଶ୍ୟକ ନାହିଁ :activeଯେହେତୁ ଏହା ଏକ ଛଦ୍ମ-ଶ୍ରେଣୀ, କିନ୍ତୁ ଯଦି ତୁମେ ସମାନ ରୂପକୁ ବାଧ୍ୟ କରିବାକୁ ପଡିବ, ଆଗକୁ ଯାଅ .active|

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

ଆଙ୍କର୍ ଉପାଦାନ |

ବଟନ୍ ଗୁଡିକରେ .activeକ୍ଲାସ୍ ଯୋଡନ୍ତୁ |<a>

ପ୍ରାଥମିକ ଲିଙ୍କ୍ | ଲିଙ୍କ୍ |

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

ଅକ୍ଷମ ଅବସ୍ଥା |

ବଟନ୍ଗୁଡ଼ିକୁ ସେଗୁଡିକୁ ଫେଡ୍ କରି ଅଣସଂଗଠିତ ଦେଖାନ୍ତୁ opacity|

ବଟନ୍ ଉପାଦାନ |

ବଟନ୍ ରେ disabledଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ |<button>

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

କ୍ରସ୍ ବ୍ରାଉଜର୍ ସୁସଙ୍ଗତତା |

ଯଦି ଆପଣ disabledଆଟ୍ରିବ୍ୟୁଟ୍ କୁ ଏକ <button>, ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 9 ଏବଂ ନିମ୍ନରେ ଯୋଗ କରନ୍ତି, ଏକ ଖରାପ ପାଠ୍ୟ-ଛାୟା ସହିତ ପାଠ୍ୟ ଧୂସର ରଙ୍ଗ ଦେବ ଯାହାକୁ ଆମେ ଠିକ୍ କରିପାରିବୁ ନାହିଁ |

ଆଙ୍କର୍ ଉପାଦାନ |

ବଟନ୍ ଗୁଡିକରେ .disabledକ୍ଲାସ୍ ଯୋଡନ୍ତୁ |<a>

ପ୍ରାଥମିକ ଲିଙ୍କ୍ | ଲିଙ୍କ୍ |

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

ଆମେ .disabledଏଠାରେ ଏକ ୟୁଟିଲିଟି କ୍ଲାସ୍ ଭାବରେ ବ୍ୟବହାର କରୁ, ସାଧାରଣ .activeଶ୍ରେଣୀ ପରି, ତେଣୁ କ pref ଣସି ଉପସର୍ଗ ଆବଶ୍ୟକ ନାହିଁ |

ଲିଙ୍କ୍ କାର୍ଯ୍ୟକାରିତା ସଚେତନତା |

pointer-events: noneS ର ଲିଙ୍କ୍ କାର୍ଯ୍ୟକାରିତାକୁ ଅକ୍ଷମ କରିବାକୁ ଚେଷ୍ଟା କରିବାକୁ ଏହି ଶ୍ରେଣୀ ବ୍ୟବହାର କରେ , କିନ୍ତୁ ସେହି CSS ସମ୍ପତ୍ତି ଏପର୍ଯ୍ୟନ୍ତ ମାନକ ହୋଇନାହିଁ ଏବଂ ଅପେରା 18 ଏବଂ ତଦୁର୍ଦ୍ଧ <a>, କିମ୍ବା ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 11 ରେ ସମ୍ପୂର୍ଣ୍ଣ ଭାବରେ ସମର୍ଥିତ ନୁହେଁ | pointer-events: noneନାଭିଗେସନ୍ ଅସୁରକ୍ଷିତ, ଅର୍ଥାତ୍ ଦୃଶ୍ୟମାନ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀ ଏବଂ ସହାୟକ ଟେକ୍ନୋଲୋଜିର ଉପଭୋକ୍ତାମାନେ ଏହି ଲିଙ୍କଗୁଡ଼ିକୁ ସକ୍ରିୟ କରିବାକୁ ସକ୍ଷମ ହେବେ | ତେଣୁ ସୁରକ୍ଷିତ ରହିବାକୁ, ଏହିପରି ଲିଙ୍କଗୁଡ଼ିକୁ ଅକ୍ଷମ କରିବାକୁ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରନ୍ତୁ |

ପ୍ରତିକ୍ରିୟାଶୀଳ ଚିତ୍ର |

.img-responsiveବୁଟ୍ ଷ୍ଟ୍ରାପ୍ in ରେ ଥିବା ପ୍ରତିଛବିଗୁଡିକ ଶ୍ରେଣୀର ଯୋଗ ଦ୍ୱାରା ପ୍ରତିକ୍ରିୟାଶୀଳ-ବନ୍ଧୁତ୍ୱପୂର୍ଣ୍ଣ ହୋଇପାରିବ | ଏହା ପ୍ରଯୁଜ୍ୟ max-width: 100%;, height: auto;ଏବଂ display: block;ପ୍ରତିଛବି ପାଇଁ ଯାହା ଦ୍ the ାରା ଏହା ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନକୁ ସୁନ୍ଦର ଭାବରେ ମାପ କରିଥାଏ |

ଚିତ୍ରଗୁଡ଼ିକୁ କେନ୍ଦ୍ର କରିବାକୁ, ଯାହା .img-responsiveଶ୍ରେଣୀ ବ୍ୟବହାର କରେ, ତାହା .center-blockବଦଳରେ ବ୍ୟବହାର କର .text-center| ବ୍ୟବହାର ବିଷୟରେ ଅଧିକ ବିବରଣୀ ପାଇଁ ହେଲପର କ୍ଲାସ୍ ବିଭାଗ ଦେଖନ୍ତୁ.center-block |

SVG ପ୍ରତିଛବି ଏବଂ IE 8-10 |

ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 8-10 ରେ, SVG ପ୍ରତିଛବିଗୁଡ଼ିକ .img-responsiveଅନୁପଯୁକ୍ତ ଆକାରର | ଏହାକୁ ଠିକ କରିବା ପାଇଁ, width: 100% \9;ଆବଶ୍ୟକ ସ୍ଥଳେ ଯୋଗ କରନ୍ତୁ | ବୁଟଷ୍ଟ୍ରାପ୍ ଏହାକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ପ୍ରୟୋଗ କରେ ନାହିଁ କାରଣ ଏହା ଅନ୍ୟ ପ୍ରତିଛବି ଫର୍ମାଟରେ ଜଟିଳତା ସୃଷ୍ଟି କରେ |

<img src="..." class="img-responsive" alt="Responsive image">

ପ୍ରତିଛବି ଆକୃତି |

<img>ଯେକ any ଣସି ପ୍ରୋଜେକ୍ଟରେ ସହଜରେ ପ୍ରତିଛବି ଶ style ଳୀ କରିବାକୁ ଏକ ଉପାଦାନରେ କ୍ଲାସ୍ ଯୋଡନ୍ତୁ |

କ୍ରସ୍ ବ୍ରାଉଜର୍ ସୁସଙ୍ଗତତା |

ମନେରଖନ୍ତୁ ଯେ ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର 8 ଗୋଲାକାର କୋଣ ପାଇଁ ସମର୍ଥନ ଅଭାବ |

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

ପ୍ରସଙ୍ଗ ରଙ୍ଗ |

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

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh।

Nullam id dolor id nibh ultricies vehicula ut id elit।

Duis mollis, est non commodo luctus, nisi erat porttitor ligula |

ମେକେନାସ୍ ସେଡ୍ ହୀର ଇଜେଟ୍ ରିସସ୍ ଭେରାଇସ୍ ବ୍ଲାଣ୍ଡିଟ୍ ଆମ୍ ନନ୍ ମ୍ୟାଗନା |

Etiam porta sem maleuada magna mollis euismod |

ଡୋନେକ୍ ଉଲାମକର୍ପର୍ ନୁଲା ନନ୍ ମେଟସ୍ ଆକ୍ଟର ଫ୍ରିଙ୍ଗିଲା |

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

ନିର୍ଦ୍ଦିଷ୍ଟତା ସହିତ କାରବାର |

ବେଳେବେଳେ ଅନ୍ୟ ଚୟନକର୍ତ୍ତାଙ୍କ ନିର୍ଦ୍ଦିଷ୍ଟତା ହେତୁ ଗୁରୁତ୍ୱ କ୍ଲାସ୍ ପ୍ରୟୋଗ ହୋଇପାରିବ ନାହିଁ | <span>ଅଧିକାଂଶ କ୍ଷେତ୍ରରେ, ଏକ ପାଠ୍ୟ ସହିତ କ୍ଲାସ୍ ସହିତ ତୁମର ପାଠକୁ ଗୁଡ଼ାଇବା ପାଇଁ ଏକ ପର୍ଯ୍ୟାପ୍ତ କାର୍ଯ୍ୟଧାରା |

ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |

ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ସ୍ପଷ୍ଟ ଅଟେ (ପ୍ରସଙ୍ଗଗତ ରଙ୍ଗ କେବଳ ଅର୍ଥକୁ ଦୃ rein କରିବା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ ଯାହା ପୂର୍ବରୁ ପାଠ୍ୟ / ମାର୍କଅପ୍ ରେ ଉପସ୍ଥିତ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଥାଏ, ଯେପରିକି .sr-onlyଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ | ।

ପ୍ରସଙ୍ଗ ପୃଷ୍ଠଭୂମି

ବିଷୟବସ୍ତୁ ପାଠ୍ୟ ରଙ୍ଗ ଶ୍ରେଣୀ ପରି, ଯେକ any ଣସି ପ୍ରସଙ୍ଗ ଶ୍ରେଣୀରେ ଏକ ଉପାଦାନର ପୃଷ୍ଠଭୂମି ସହଜରେ ସେଟ୍ କରନ୍ତୁ | ଟେକ୍ସଟ୍ କ୍ଲାସ୍ ପରି ଆଙ୍କର୍ ଉପାଦାନଗୁଡ଼ିକ ହୋଭର୍ ଉପରେ ଅନ୍ଧାର ହୋଇଯିବ |

Nullam id dolor id nibh ultricies vehicula ut id elit।

Duis mollis, est non commodo luctus, nisi erat porttitor ligula |

ମେକେନାସ୍ ସେଡ୍ ହୀର ଇଜେଟ୍ ରିସସ୍ ଭେରାଇସ୍ ବ୍ଲାଣ୍ଡିଟ୍ ଆମ୍ ନନ୍ ମ୍ୟାଗନା |

Etiam porta sem maleuada magna mollis euismod |

ଡୋନେକ୍ ଉଲାମକର୍ପର୍ ନୁଲା ନନ୍ ମେଟସ୍ ଆକ୍ଟର ଫ୍ରିଙ୍ଗିଲା |

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

ନିର୍ଦ୍ଦିଷ୍ଟତା ସହିତ କାରବାର |

ବେଳେବେଳେ ଅନ୍ୟ ଚୟନକର୍ତ୍ତାଙ୍କ ନିର୍ଦ୍ଦିଷ୍ଟତା ହେତୁ ପ୍ରସଙ୍ଗଗତ ପୃଷ୍ଠଭୂମି ଶ୍ରେଣୀଗୁଡିକ ପ୍ରୟୋଗ ହୋଇପାରିବ ନାହିଁ | <div>କେତେକ କ୍ଷେତ୍ରରେ, ତୁମର ଉପାଦାନର ବିଷୟବସ୍ତୁକୁ ଶ୍ରେଣୀ ସହିତ ଗୁଡ଼ାଇବା ପାଇଁ ଏକ ପର୍ଯ୍ୟାପ୍ତ କାର୍ଯ୍ୟଧାରା |

ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |

ପ୍ରସଙ୍ଗଗତ ରଙ୍ଗ ପରି , ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ମାଧ୍ୟମରେ ଦିଆଯାଇଥିବା ଯେକ meaning ଣସି ଅର୍ଥ ମଧ୍ୟ ଏକ ଫର୍ମାଟରେ ପହଂଚିଥାଏ ଯାହା କେବଳ ଉପସ୍ଥାପନା ନୁହେଁ |

ଆଇକନ୍ ବନ୍ଦ କରନ୍ତୁ |

ମୋଡାଲ୍ ଏବଂ ଆଲର୍ଟ ପରି ବିଷୟବସ୍ତୁକୁ ଖାରଜ କରିବା ପାଇଁ ଜେନେରିକ୍ କ୍ଲୋଜ୍ ଆଇକନ୍ ବ୍ୟବହାର କରନ୍ତୁ |

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

କାରେଟସ୍ |

ଡ୍ରପଡାଉନ୍ କାର୍ଯ୍ୟକାରିତା ଏବଂ ଦିଗ ସୂଚାଇବା ପାଇଁ କ୍ୟାରେଟ୍ ବ୍ୟବହାର କରନ୍ତୁ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଡିଫଲ୍ଟ କ୍ୟାରେଟ୍ ଡ୍ରପ୍ଅପ୍ ମେନୁଗୁଡ଼ିକରେ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଓଲଟା ହେବ |

<span class="caret"></span>

ଶୀଘ୍ର ଭାସମାନ |

ଏକ ଶ୍ରେଣୀ ସହିତ ବାମ କିମ୍ବା ଡାହାଣକୁ ଏକ ଉପାଦାନ ଭାସନ୍ତୁ | !importantନିର୍ଦ୍ଦିଷ୍ଟତା ସମସ୍ୟାକୁ ଏଡାଇବା ପାଇଁ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି | କ୍ଲାସ୍ ଗୁଡିକ ମିଶ୍ରଣ ଭାବରେ ମଧ୍ୟ ବ୍ୟବହାର କରାଯାଇପାରେ |

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

କେନ୍ଦ୍ର ବିଷୟବସ୍ତୁ ବ୍ଲକଗୁଡିକ |

display: blockମାଧ୍ୟମରେ ଏବଂ କେନ୍ଦ୍ରକୁ ଏକ ଉପାଦାନ ସେଟ୍ କରନ୍ତୁ margin| ଏକ ମିଶ୍ରଣ ଏବଂ ଶ୍ରେଣୀ ଭାବରେ ଉପଲବ୍ଧ |

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

କ୍ଲିୟରଫିକ୍ସ |

ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନରେfloat ଯୋଗ କରି ସହଜରେ ସଫା କରନ୍ତୁ | ନିକୋଲାସ୍ ଗାଲାଗେର୍ ଦ୍ୱାରା ଲୋକପ୍ରିୟ ହୋଇଥିବା ମାଇକ୍ରୋ କ୍ଲିୟରଫିକ୍ସକୁ ବ୍ୟବହାର କରେ | ଏକ ମିଶ୍ରଣ ଭାବରେ ମଧ୍ୟ ବ୍ୟବହାର କରାଯାଇପାରିବ |.clearfix

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

ବିଷୟବସ୍ତୁ ଦେଖାଇବା ଏବଂ ଲୁଚାଇବା |

ଏକ ଉପାଦାନକୁ ଦର୍ଶାଇବାକୁ କିମ୍ବା ଲୁଚାଇବାକୁ ବାଧ୍ୟ କର ( ସ୍କ୍ରିନ୍ ପାଠକମାନଙ୍କ ପାଇଁ ଅନ୍ତର୍ଭୂକ୍ତ କରି) .showଏବଂ .hiddenଶ୍ରେଣୀର ବ୍ୟବହାର ସହିତ | ଏହି ଶ୍ରେଣୀଗୁଡିକ !importantନିର୍ଦ୍ଦିଷ୍ଟ ଭାସମାନକୁ ଏଡାଇବା ପାଇଁ ବ୍ୟବହାର କରନ୍ତି, ଯେପରି ଶୀଘ୍ର ଭାସମାନ | ସେଗୁଡ଼ିକ କେବଳ ବ୍ଲକ ସ୍ତର ଟୋଗଲିଂ ପାଇଁ ଉପଲବ୍ଧ | ସେଗୁଡିକ ମିଶ୍ରଣ ଭାବରେ ମଧ୍ୟ ବ୍ୟବହାର କରାଯାଇପାରେ |

.hideଉପଲବ୍ଧ, କିନ୍ତୁ ଏହା ସର୍ବଦା ସ୍କ୍ରିନ୍ ପାଠକମାନଙ୍କୁ ପ୍ରଭାବିତ କରେ ନାହିଁ ଏବଂ v3.0.1 ପରି ପୁରୁଣା ଅଟେ | ବ୍ୟବହାର କରନ୍ତୁ .hiddenକିମ୍ବା .sr-onlyଏହା ପରିବର୍ତ୍ତେ |

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

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

ସ୍କ୍ରିନ୍ ରିଡର୍ ଏବଂ କୀବୋର୍ଡ୍ ନେଭିଗେସନ୍ ବିଷୟବସ୍ତୁ |

ସ୍କ୍ରିନ୍ ରିଡର୍ ବ୍ୟତୀତ ସମସ୍ତ ଡିଭାଇସରେ ଏକ ଉପାଦାନ ଲୁଚାନ୍ତୁ .sr-only| ଉପାଦାନକୁ ପୁନର୍ବାର ଦେଖାଇବା .sr-onlyସହିତ ମିଶାନ୍ତୁ ଯେତେବେଳେ ଏହା ଧ୍ୟାନ ଦିଆଯାଏ (ଉଦାହରଣ ସ୍ୱରୂପ କେବଳ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀ ଦ୍ୱାରା) | ଅଭିଗମ୍ୟତା ସର୍ବୋତ୍ତମ ଅଭ୍ୟାସଗୁଡିକ.sr-only-focusable ଅନୁସରଣ କରିବା ପାଇଁ ଆବଶ୍ୟକ | ମିଶ୍ରଣ ଭାବରେ ମଧ୍ୟ ବ୍ୟବହାର କରାଯାଇପାରିବ |

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

ପ୍ରତିଛବି ପ୍ରତିସ୍ଥାପନ

.text-hideଏକ ଉପାଦାନର ପାଠ୍ୟ ବିଷୟବସ୍ତୁକୁ ପୃଷ୍ଠଭୂମି ପ୍ରତିଛବି ସହିତ ବଦଳାଇବାରେ ସାହାଯ୍ୟ କରିବାକୁ ଶ୍ରେଣୀ କିମ୍ବା ମିକ୍ସିନ ବ୍ୟବହାର କରନ୍ତୁ |

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

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

ଏହାକୁ ସୀମିତ ଆଧାରରେ ବ୍ୟବହାର କରିବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ ଏବଂ ସମାନ ସାଇଟର ସମ୍ପୂର୍ଣ୍ଣ ଭିନ୍ନ ସଂସ୍କରଣ ସୃଷ୍ଟି ନକରିବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ | ଏହା ପରିବର୍ତ୍ତେ, ପ୍ରତ୍ୟେକ ଉପକରଣର ଉପସ୍ଥାପନାକୁ ପୂର୍ଣ୍ଣ କରିବା ପାଇଁ ସେମାନଙ୍କୁ ବ୍ୟବହାର କରନ୍ତୁ |

ଉପଲବ୍ଧ କ୍ଲାସ୍ |

ଭ୍ୟୁପୋର୍ଟ ବ୍ରେକପଏଣ୍ଟଗୁଡିକରେ ବିଷୟବସ୍ତୁ ଟୋଗଲ୍ କରିବା ପାଇଁ ଉପଲବ୍ଧ ଶ୍ରେଣୀର ଏକକ କିମ୍ବା ମିଶ୍ରଣ ବ୍ୟବହାର କରନ୍ତୁ |

	ଅତିରିକ୍ତ ଛୋଟ ଉପକରଣଗୁଡ଼ିକ \|ଫୋନ୍ (<768px)	ଛୋଟ ଉପକରଣଗୁଡ଼ିକ \|ଟାବଲେଟ୍ (≥768px)	ମଧ୍ୟମ ଉପକରଣଗୁଡ଼ିକ \|ଡେସ୍କଟପ୍ (≥992px)	ବଡ଼ ଉପକରଣଗୁଡ଼ିକ \|ଡେସ୍କଟପ୍ (≥1200px)
`.visible-xs-*`	ଦୃଶ୍ୟମାନ \|	ଲୁକ୍କାୟିତ \|	ଲୁକ୍କାୟିତ \|	ଲୁକ୍କାୟିତ \|
`.visible-sm-*`	ଲୁକ୍କାୟିତ \|	ଦୃଶ୍ୟମାନ \|	ଲୁକ୍କାୟିତ \|	ଲୁକ୍କାୟିତ \|
`.visible-md-*`	ଲୁକ୍କାୟିତ \|	ଲୁକ୍କାୟିତ \|	ଦୃଶ୍ୟମାନ \|	ଲୁକ୍କାୟିତ \|
`.visible-lg-*`	ଲୁକ୍କାୟିତ \|	ଲୁକ୍କାୟିତ \|	ଲୁକ୍କାୟିତ \|	ଦୃଶ୍ୟମାନ \|
`.hidden-xs`	ଲୁକ୍କାୟିତ \|	ଦୃଶ୍ୟମାନ \|	ଦୃଶ୍ୟମାନ \|	ଦୃଶ୍ୟମାନ \|
`.hidden-sm`	ଦୃଶ୍ୟମାନ \|	ଲୁକ୍କାୟିତ \|	ଦୃଶ୍ୟମାନ \|	ଦୃଶ୍ୟମାନ \|
`.hidden-md`	ଦୃଶ୍ୟମାନ \|	ଦୃଶ୍ୟମାନ \|	ଲୁକ୍କାୟିତ \|	ଦୃଶ୍ୟମାନ \|
`.hidden-lg`	ଦୃଶ୍ୟମାନ \|	ଦୃଶ୍ୟମାନ \|	ଦୃଶ୍ୟମାନ \|	ଲୁକ୍କାୟିତ \|

V3.2.0 ପରି, .visible-*-*ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ ଶ୍ରେଣୀଗୁଡ଼ିକ ତିନୋଟି ଭିନ୍ନତାରେ ଆସିଥାଏ, displayନିମ୍ନରେ ତାଲିକାଭୁକ୍ତ ପ୍ରତ୍ୟେକ CSS ସମ୍ପତ୍ତି ମୂଲ୍ୟ ପାଇଁ ଗୋଟିଏ |

ଶ୍ରେଣୀର ଗୋଷ୍ଠୀ \|	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

ତେଣୁ, ଅତିରିକ୍ତ ଛୋଟ ( xs) ପରଦାଗୁଡ଼ିକ ପାଇଁ, ଉପଲବ୍ଧ .visible-*-*ଶ୍ରେଣୀଗୁଡ଼ିକ ହେଉଛି: .visible-xs-block,, .visible-xs-inlineଏବଂ .visible-xs-inline-block।

କ୍ଲାସ୍ .visible-xs,, ଏବଂ ମଧ୍ୟ ବିଦ୍ୟମାନ, କିନ୍ତୁ .visible-smv3.2.0 ପରି ପୁରୁଣା ହୋଇଛି | ଟୋଗଲ୍ -ସମ୍ବନ୍ଧୀୟ ଉପାଦାନଗୁଡିକ ପାଇଁ ଅତିରିକ୍ତ ବିଶେଷ କେସ୍ ବ୍ୟତୀତ ସେଗୁଡିକ ପ୍ରାୟ ସମାନ |.visible-md.visible-lg.visible-*-block<table>

କ୍ଲାସ୍ ପ୍ରିଣ୍ଟ୍ କରନ୍ତୁ |

ନିୟମିତ ପ୍ରତିକ୍ରିୟାଶୀଳ ଶ୍ରେଣୀ ପରି, ମୁଦ୍ରଣ ପାଇଁ ବିଷୟବସ୍ତୁ ଟୋଗଲ୍ କରିବା ପାଇଁ ଏହାକୁ ବ୍ୟବହାର କର |

କ୍ଲାସ୍	ବ୍ରାଉଜର୍	ମୁଦ୍ରଣ
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	ଲୁକ୍କାୟିତ \|	ଦୃଶ୍ୟମାନ \|
`.hidden-print`	ଦୃଶ୍ୟମାନ \|	ଲୁକ୍କାୟିତ \|

କ୍ଲାସ୍ .visible-printମଧ୍ୟ ବିଦ୍ୟମାନ ଅଛି କିନ୍ତୁ v3.2.0 ପରି ପୁରୁଣା ହୋଇଛି | ସମ୍ବନ୍ଧିତ ଉପାଦାନଗୁଡ଼ିକ .visible-print-blockପାଇଁ ଅତିରିକ୍ତ ବିଶେଷ ମାମଲା ବ୍ୟତୀତ ଏହା ପ୍ରାୟ ସମାନ |<table>

ପରୀକ୍ଷା ମାମଲା

ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପଯୋଗୀତା ଶ୍ରେଣୀଗୁଡିକ ପରୀକ୍ଷା କରିବାକୁ ଆପଣଙ୍କର ବ୍ରାଉଜର୍ ର ଆକାର ପରିବର୍ତ୍ତନ କରନ୍ତୁ କିମ୍ବା ବିଭିନ୍ନ ଉପକରଣରେ ଲୋଡ୍ କରନ୍ତୁ |

ଉପରେ ଦୃଶ୍ୟମାନ ...

ସବୁଜ ଚେକମାର୍କ ସୂଚାଇଥାଏ ଯେ ତୁମର ସାମ୍ପ୍ରତିକ ଦୃଶ୍ୟରେ ଉପାଦାନ ଦୃଶ୍ୟମାନ ହେଉଛି |

ଅତିରିକ୍ତ ଛୋଟ | X- ଛୋଟ ଉପରେ ଦୃଶ୍ୟମାନ |

ଛୋଟ Small ଛୋଟ ଉପରେ ଦୃଶ୍ୟମାନ |

ମଧ୍ୟମ Medium ମଧ୍ୟମ ଉପରେ ଦୃଶ୍ୟମାନ |

ବଡ଼ Large ବଡ଼ ଉପରେ ଦୃଶ୍ୟମାନ |

ଅତିରିକ୍ତ ଛୋଟ ଏବଂ ଛୋଟ | X- ଛୋଟ ଏବଂ ଛୋଟ ଉପରେ ଦୃଶ୍ୟମାନ |

ମଧ୍ୟମ ଏବଂ ବଡ଼ Medium ମଧ୍ୟମ ଏବଂ ବଡ଼ ଉପରେ ଦୃଶ୍ୟମାନ |

ଅତିରିକ୍ତ ଛୋଟ ଏବଂ ମଧ୍ୟମ | X x- ଛୋଟ ଏବଂ ମଧ୍ୟମ ଉପରେ ଦୃଶ୍ୟମାନ |

ଛୋଟ ଏବଂ ବଡ Small ଛୋଟ ଏବଂ ବଡ଼ ଉପରେ ଦୃଶ୍ୟମାନ |

ଅତିରିକ୍ତ ଛୋଟ ଏବଂ ବଡ | X x- ଛୋଟ ଏବଂ ବଡ଼ ଉପରେ ଦୃଶ୍ୟମାନ |

ଛୋଟ ଏବଂ ମଧ୍ୟମ Small ଛୋଟ ଏବଂ ମଧ୍ୟମ ଉପରେ ଦୃଶ୍ୟମାନ |

ଲୁକ୍କାୟିତ ...

ଏଠାରେ, ସବୁଜ ଚେକମାର୍କଗୁଡିକ ମଧ୍ୟ ସୂଚାଇଥାଏ ଯେ ଉପାଦାନଟି ତୁମର ସାମ୍ପ୍ରତିକ ଦୃଶ୍ୟରେ ଲୁକ୍କାୟିତ |

ଅତିରିକ୍ତ ଛୋଟ | X- ଛୋଟ ଉପରେ ଲୁକ୍କାୟିତ |

ଛୋଟ Small ଛୋଟ ଉପରେ ଲୁକ୍କାୟିତ |

ମଧ୍ୟମ Medium ମଧ୍ୟମ ଉପରେ ଲୁକ୍କାୟିତ |

ବଡ଼ ବଡ଼ ଉପରେ ଲୁକ୍କାୟିତ |

ଅତିରିକ୍ତ ଛୋଟ ଏବଂ ଛୋଟ | X- ଛୋଟ ଏବଂ ଛୋଟ ଉପରେ ଲୁକ୍କାୟିତ |

ମଧ୍ୟମ ଏବଂ ବଡ଼ Medium ମଧ୍ୟମ ଏବଂ ବଡ଼ ଉପରେ ଲୁକ୍କାୟିତ |

ଅତିରିକ୍ତ ଛୋଟ ଏବଂ ମଧ୍ୟମ | X x- ଛୋଟ ଏବଂ ମଧ୍ୟମ ଉପରେ ଲୁକ୍କାୟିତ |

ଛୋଟ ଏବଂ ବଡ Small ଛୋଟ ଏବଂ ବଡ଼ ଉପରେ ଲୁକ୍କାୟିତ |

ଅତିରିକ୍ତ ଛୋଟ ଏବଂ ବଡ | X x- ଛୋଟ ଏବଂ ବଡ଼ ଉପରେ ଲୁକ୍କାୟିତ |

ଛୋଟ ଏବଂ ମଧ୍ୟମ Small ଛୋଟ ଏବଂ ମଧ୍ୟମ ଉପରେ ଲୁକ୍କାୟିତ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର CSS କମ୍ ଉପରେ ନିର୍ମିତ ହୋଇଛି, CSS ସଂକଳନ ପାଇଁ ଭେରିଏବଲ୍, ମିକ୍ସିନ ଏବଂ ଫଙ୍କସନ୍ ଭଳି ଅତିରିକ୍ତ କାର୍ଯ୍ୟକାରିତା ସହିତ ଏକ ପ୍ରିପ୍ରୋସେସର୍ | ଉତ୍ସଗୁଡିକ ବ୍ୟବହାର କରିବାକୁ ଚାହୁଁଥିବା ବ୍ୟକ୍ତିମାନେ ଆମର ସଂକଳିତ CSS ଫାଇଲଗୁଡ଼ିକ ପରିବର୍ତ୍ତେ କମ୍ ଫାଇଲ୍ ବ୍ୟବହାର କରିପାରିବେ, ଆମେ the ାଞ୍ଚାରେ ବ୍ୟବହାର କରୁଥିବା ଅନେକ ଭେରିଏବଲ୍ ଏବଂ ମିକ୍ସିନ ବ୍ୟବହାର କରିପାରିବେ |

ଗ୍ରୀଡ୍ ଭେରିଏବଲ୍ ଏବଂ ମିକ୍ସନ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ବିଭାଗରେ ଅନ୍ତର୍ଭୁକ୍ତ |

ବୁଟଷ୍ଟ୍ରାପ୍ ସଂକଳନ କରିବା |

ଅତିକମରେ ଦୁଇଟି ଉପାୟରେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର କରାଯାଇପାରିବ: ସଙ୍କଳିତ CSS ସହିତ କିମ୍ବା ଉତ୍ସ କମ୍ ଫାଇଲ୍ ସହିତ | କମ୍ ଫାଇଲଗୁଡିକ ସଂକଳନ କରିବାକୁ , ଆବଶ୍ୟକୀୟ ନିର୍ଦ୍ଦେଶଗୁଡ଼ିକୁ ଚଲାଇବା ପାଇଁ କିପରି ଆପଣଙ୍କର ବିକାଶ ପରିବେଶକୁ ସେଟଅପ୍ କରିବେ ସେ ବିଷୟରେ ପ୍ରାରମ୍ଭ ବିଭାଗ ସହିତ ପରାମର୍ଶ କରନ୍ତୁ |

ତୃତୀୟ ପକ୍ଷ ସଂକଳନ ଉପକରଣଗୁଡ଼ିକ ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ କାମ କରିପାରେ, କିନ୍ତୁ ସେଗୁଡିକ ଆମର ମୂଳ ଦଳ ଦ୍ୱାରା ସମର୍ଥିତ ନୁହେଁ |

ଭେରିଏବଲ୍ |

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

ରଙ୍ଗଗୁଡିକ |

ଦୁଇଟି ରଙ୍ଗ ସ୍କିମର ସହଜରେ ବ୍ୟବହାର କରନ୍ତୁ: ଗ୍ରେସ୍କେଲ୍ ଏବଂ ଅର୍ଥଗତ | ଗ୍ରେସ୍କେଲ୍ ରଙ୍ଗଗୁଡିକ ସାଧାରଣତ used ବ୍ୟବହୃତ କଳା ରଙ୍ଗର ଛାଇଗୁଡିକ ପାଇଁ ଶୀଘ୍ର ପ୍ରବେଶ ପ୍ରଦାନ କରିଥାଏ ଯେତେବେଳେ ଅର୍ଥଗତ ବିଷୟବସ୍ତୁ ମୂଲ୍ୟଗୁଡିକ ପାଇଁ ନ୍ୟସ୍ତ ହୋଇଥିବା ବିଭିନ୍ନ ରଙ୍ଗ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

ଏହି ରଙ୍ଗ ଭେରିଏବଲ୍ ମଧ୍ୟରୁ ଯେକ any ଣସି ବ୍ୟବହାର କରନ୍ତୁ କିମ୍ବା ସେଗୁଡିକୁ ଆପଣଙ୍କ ପ୍ରୋଜେକ୍ଟ ପାଇଁ ଅଧିକ ଅର୍ଥପୂର୍ଣ୍ଣ ଭେରିଏବଲ୍ ରେ ପୁନ ass ନ୍ୟସ୍ତ କରନ୍ତୁ |

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

ସ୍କାଫୋଲ୍ଡିଂ |

ତୁମର ସାଇଟର କଙ୍କାଳର ମୁଖ୍ୟ ଉପାଦାନଗୁଡ଼ିକୁ ଶୀଘ୍ର କଷ୍ଟମାଇଜ୍ କରିବା ପାଇଁ ମୁଠାଏ ଭେରିଏବଲ୍ |

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

ଲିଙ୍କ୍

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

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ @link-hover-colorସ୍ୱୟଂଚାଳିତ ଭାବରେ ସଠିକ୍ ହୋଭର ରଙ୍ଗ ସୃଷ୍ଟି କରିବାକୁ ଏକ ଫଙ୍କସନ୍, କମ୍ ଠାରୁ ଅନ୍ୟ ଏକ ଚମତ୍କାର ଉପକରଣ ବ୍ୟବହାର କରେ | ଆପଣ ବ୍ୟବହାର କରିପାରିବେ darken,, ଏବଂ ।lightensaturatedesaturate

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

ତୁମର ଟାଇପ୍ଫେସ୍, ପାଠ୍ୟ ଆକାର, ଅଗ୍ରଣୀ, ଏବଂ କିଛି ଶୀଘ୍ର ଭେରିଏବଲ୍ ସହିତ ସହଜରେ ସେଟ୍ କର | ସହଜ ଟାଇପୋଗ୍ରାଫିକ୍ ମିଶ୍ରଣ ଯୋଗାଇବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଏଗୁଡିକର ବ୍ୟବହାର କରେ |

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

ଚିତ୍ରସଂକେତ

ତୁମର ଆଇକନ୍ ଗୁଡିକର ଅବସ୍ଥାନ ଏବଂ ଫାଇଲନାମ କଷ୍ଟୋମାଇଜ୍ କରିବା ପାଇଁ ଦୁଇଟି ଶୀଘ୍ର ଭେରିଏବଲ୍ |

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

ଉପାଦାନଗୁଡ଼ିକ |

ବୁଟଷ୍ଟ୍ରାପରେ ଥିବା ଉପାଦାନଗୁଡ଼ିକ ସାଧାରଣ ମୂଲ୍ୟ ସେଟିଂ ପାଇଁ କିଛି ଡିଫଲ୍ଟ ଭେରିଏବଲ୍ ବ୍ୟବହାର କରନ୍ତି | ଏଠାରେ ସାଧାରଣତ used ବ୍ୟବହୃତ ହୁଏ |

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

ବିକ୍ରେତା ମିଶ୍ରଣ

ଆପଣଙ୍କର ସଂକଳିତ CSS ରେ ସମସ୍ତ ପ୍ରାସଙ୍ଗିକ ବିକ୍ରେତା ଉପସର୍ଗକୁ ଅନ୍ତର୍ଭୁକ୍ତ କରି ଏକାଧିକ ବ୍ରାଉଜରକୁ ସମର୍ଥନ କରିବାରେ ଭେଣ୍ଡର ମିକ୍ସିନ୍ ହେଉଛି ମିଶ୍ରଣ |

ବାକ୍ସ-ଆକାର

ଗୋଟିଏ ଉପାଦାନ ସହିତ ଆପଣଙ୍କର ଉପାଦାନଗୁଡ଼ିକର ବାକ୍ସ ମଡେଲକୁ ପୁନ Res ସେଟ୍ କରନ୍ତୁ | ପ୍ରସଙ୍ଗ ପାଇଁ, ମୋଜିଲା ଠାରୁ ଏହି ସହାୟକ ପ୍ରବନ୍ଧ ଦେଖନ୍ତୁ |

ଅଟୋପ୍ରେଫିକ୍ସର୍ ର ପରିଚୟ ସହିତ ମିଶ୍ରଣ v3.2.0 ପରି ପୁରୁଣା ହୋଇଛି | ପଛୁଆ-ସୁସଙ୍ଗତତା ବଞ୍ଚାଇବା ପାଇଁ, ବୁଟଷ୍ଟ୍ରାପ୍ ବୁଟ୍ଷ୍ଟ୍ରାପ୍ v4 ପର୍ଯ୍ୟନ୍ତ ଆଭ୍ୟନ୍ତରୀଣ ଭାବରେ ମିକ୍ସିନ ବ୍ୟବହାର ଜାରି ରଖିବ |

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

ଗୋଲାକାର କୋଣ |

ଆଜି ସମସ୍ତ ଆଧୁନିକ ବ୍ରାଉଜର୍ ଅଣ-ଉପସର୍ଗିତ border-radiusସମ୍ପତ୍ତିକୁ ସମର୍ଥନ କରେ | ଏହିପରି, କ mix ଣସି .border-radius()ମିଶ୍ରଣ ନାହିଁ, କିନ୍ତୁ ବୁଟଷ୍ଟ୍ରାପ୍ ଏକ ବସ୍ତୁର ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ପାର୍ଶ୍ୱରେ ଦୁଇଟି କୋଣକୁ ଶୀଘ୍ର ଗୋଲେଇବା ପାଇଁ ସର୍ଟକଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

ବାକ୍ସ (ଡ୍ରପ୍) ଛାୟା |

ଯଦି ଆପଣଙ୍କର ଟାର୍ଗେଟ୍ ଦର୍ଶକ ସର୍ବଶେଷ ଏବଂ ସର୍ବଶ୍ରେଷ୍ଠ ବ୍ରାଉଜର୍ ଏବଂ ଡିଭାଇସ୍ ବ୍ୟବହାର କରୁଛନ୍ତି, ତେବେ କେବଳ box-shadowସମ୍ପତ୍ତି ବ୍ୟବହାର କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ | ଯଦି ଆପଣ ପୁରାତନ ଆଣ୍ଡ୍ରଏଡ୍ (ପ୍ରି- v4) ଏବଂ ଆଇଓଏସ୍ ଡିଭାଇସ୍ (ପ୍ରି- iOS 5) ପାଇଁ ସମର୍ଥନ ଆବଶ୍ୟକ କରନ୍ତି, ଆବଶ୍ୟକୀୟ ଉପସର୍ଗ ଉଠାଇବା ପାଇଁ ପୁରୁଣା ମିଶ୍ରଣ ବ୍ୟବହାର କରନ୍ତୁ |-webkit

ମିଶ୍ରଣ v3.1.0 ପରି ପୁରୁଣା ହୋଇଛି , ଯେହେତୁ ବୁଟଷ୍ଟ୍ରାପ୍ ଆନୁଷ୍ଠାନିକ ଭାବରେ ପୁରୁଣା ପ୍ଲାଟଫର୍ମଗୁଡିକୁ ସମର୍ଥନ କରେ ନାହିଁ ଯାହା ମାନକ ସମ୍ପତ୍ତିକୁ ସମର୍ଥନ କରେ ନାହିଁ | ପଛୁଆ-ସୁସଙ୍ଗତତା ବଞ୍ଚାଇବା ପାଇଁ, ବୁଟଷ୍ଟ୍ରାପ୍ ବୁଟ୍ଷ୍ଟ୍ରାପ୍ v4 ପର୍ଯ୍ୟନ୍ତ ଆଭ୍ୟନ୍ତରୀଣ ଭାବରେ ମିକ୍ସିନ ବ୍ୟବହାର ଜାରି ରଖିବ |

ତୁମର ବାକ୍ସ ଛାୟାରେ ରଙ୍ଗ ବ୍ୟବହାର କରିବାକୁ ନିଶ୍ଚିତ ହୁଅ rgba(), ତେଣୁ ସେମାନେ ପୃଷ୍ଠଭୂମି ସହିତ ଯଥାସମ୍ଭବ ମିଶ୍ରିତ ହୁଅନ୍ତି |

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

ପରିବର୍ତ୍ତନ

ନମନୀୟତା ପାଇଁ ଏକାଧିକ ମିଶ୍ରଣ | ସମସ୍ତ ସଂକ୍ରମଣ ସୂଚନାକୁ ଗୋଟିଏ ସହିତ ସେଟ୍ କରନ୍ତୁ, କିମ୍ବା ଆବଶ୍ୟକ ଅନୁଯାୟୀ ଏକ ପୃଥକ ବିଳମ୍ବ ଏବଂ ଅବଧି ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ |

ଅଟୋପ୍ରେଫିକ୍ସର୍ ର ପରିଚୟ ସହିତ ମିଶ୍ରଣଗୁଡିକ v3.2.0 ପରି ପୁରୁଣା ହୋଇଛି | ପଛୁଆ-ସୁସଙ୍ଗତତା ବଞ୍ଚାଇବା ପାଇଁ, ବୁଟଷ୍ଟ୍ରାପ୍ ବୁଟ୍ଷ୍ଟ୍ରାପ୍ v4 ପର୍ଯ୍ୟନ୍ତ ଆଭ୍ୟନ୍ତରୀଣ ଭାବରେ ମିଶ୍ରଣ ବ୍ୟବହାର କରିବା ଜାରି ରଖିବ |

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

ପରିବର୍ତ୍ତନ

ଯେକ any ଣସି ବସ୍ତୁକୁ ଘୂର୍ଣ୍ଣନ, ମାପ, ଅନୁବାଦ (ଘୁଞ୍ଚାଇବା), କିମ୍ବା ସ୍କେୱ୍ |

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

ଆନିମେସନ୍ |

ଗୋଟିଏ ଘୋଷଣାରେ CSS3 ର ସମସ୍ତ ଆନିମେସନ୍ ଗୁଣ ଏବଂ ବ୍ୟକ୍ତିଗତ ଗୁଣ ପାଇଁ ଅନ୍ୟ ମିଶ୍ରଣ ବ୍ୟବହାର କରିବା ପାଇଁ ଗୋଟିଏ ମିଶ୍ରଣ |

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

ସ୍ୱଚ୍ଛତା |

ସମସ୍ତ ବ୍ରାଉଜର୍ ପାଇଁ ସ୍ୱଚ୍ଛତା ସେଟ୍ କରନ୍ତୁ ଏବଂ filterIE8 ପାଇଁ ଏକ ଫଲବ୍ୟାକ୍ ପ୍ରଦାନ କରନ୍ତୁ |

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

ସ୍ଥାନଧାରୀ ପାଠ

ପ୍ରତ୍ୟେକ କ୍ଷେତ୍ର ମଧ୍ୟରେ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ପାଇଁ ପ୍ରସଙ୍ଗ ପ୍ରଦାନ କରନ୍ତୁ |

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

ସ୍ତମ୍ଭଗୁଡିକ

ଗୋଟିଏ ଉପାଦାନ ମଧ୍ୟରେ CSS ମାଧ୍ୟମରେ ସ୍ତମ୍ଭ ସୃଷ୍ଟି କରନ୍ତୁ |

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

ଗ୍ରେଡିଏଣ୍ଟ୍

ସହଜରେ ଯେକ any ଣସି ଦୁଇଟି ରଙ୍ଗକୁ ପୃଷ୍ଠଭୂମି ଗ୍ରେଡିଏଣ୍ଟରେ ପରିଣତ କରନ୍ତୁ | ଅଧିକ ଉନ୍ନତ ହୁଅନ୍ତୁ ଏବଂ ଏକ ଦିଗ ସ୍ଥିର କରନ୍ତୁ, ତିନୋଟି ରଙ୍ଗ ବ୍ୟବହାର କରନ୍ତୁ, କିମ୍ବା ରେଡିଆଲ୍ ଗ୍ରେଡିଏଣ୍ଟ୍ ବ୍ୟବହାର କରନ୍ତୁ | ଗୋଟିଏ ମିଶ୍ରଣ ସହିତ ତୁମେ ଆବଶ୍ୟକ କରୁଥିବା ସମସ୍ତ ଉପସର୍ଗ ବାକ୍ୟବିନ୍ୟାସ ପାଇବ |

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

ଆପଣ ଏକ ମାନକ ଦୁଇ ରଙ୍ଗର କୋଣକୁ ମଧ୍ୟ ନିର୍ଦ୍ଦିଷ୍ଟ କରିପାରିବେ, ର line ଖ୍ୟ ଗ୍ରେଡିଏଣ୍ଟ୍:

#gradient > .directional(#333; #000; 45deg);

ଯଦି ତୁମେ ଏକ ବାର୍-ଷ୍ଟ୍ରାଇପ୍ ଷ୍ଟାଇଲ୍ ଗ୍ରେଡିଏଣ୍ଟ୍ ଆବଶ୍ୟକ କରେ, ତାହା ମଧ୍ୟ ସହଜ | କେବଳ ଗୋଟିଏ ରଙ୍ଗ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ ଏବଂ ଆମେ ଏକ ସ୍ୱଚ୍ଛ ଧଳା ରଙ୍ଗର ଓଭରଲେଟ୍ କରିବୁ |

#gradient > .striped(#333; 45deg);

ଆଣ୍ଟେ ଅପ୍ କରନ୍ତୁ ଏବଂ ଏହା ବଦଳରେ ତିନୋଟି ରଙ୍ଗ ବ୍ୟବହାର କରନ୍ତୁ | ପ୍ରଥମ ରଙ୍ଗ, ଦ୍ୱିତୀୟ ରଙ୍ଗ, ଦ୍ୱିତୀୟ ରଙ୍ଗର ରଙ୍ଗ ଷ୍ଟପ୍ (25% ପରି ଶତକଡ଼ା ମୂଲ୍ୟ) ଏବଂ ଏହି ମିଶ୍ରଣ ସହିତ ତୃତୀୟ ରଙ୍ଗ ସେଟ୍ କରନ୍ତୁ:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

ମୁଣ୍ଡ ଉପରକୁ! ଯଦି ତୁମେ କେବେ ଗ୍ରେଡିଏଣ୍ଟ୍ ଅପସାରଣ କରିବାକୁ ପଡିବ, filterତୁମେ ଯୋଡିଥିବା IE- ନିର୍ଦ୍ଦିଷ୍ଟକୁ ଅପସାରଣ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅ | .reset-filter()ଆପଣ ମିକ୍ସିନ୍ ବ୍ୟବହାର କରି ତାହା କରିପାରିବେ background-image: none;|

ଉପଯୋଗୀତା ମିଶ୍ରଣ |

ୟୁଟିଲିଟି ମିକ୍ସିନଗୁଡିକ ହେଉଛି ମିଶ୍ରଣ ଯାହାକି ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଲକ୍ଷ୍ୟ କିମ୍ବା କାର୍ଯ୍ୟ ହାସଲ କରିବାକୁ ଅନ୍ୟ ସମ୍ବନ୍ଧୀୟ CSS ଗୁଣଗୁଡ଼ିକୁ ଏକତ୍ର କରିଥାଏ |

କ୍ଲିୟରଫିକ୍ସ |

class="clearfix"ଯେକ any ଣସି ଉପାଦାନରେ ଯୋଗ କରିବାକୁ ଭୁଲିଯାଅ ଏବଂ ଏହା ବଦଳରେ .clearfix()ଉପଯୁକ୍ତ ସ୍ଥାନରେ ମିଶ୍ରଣ ଯୋଗ କର | ନିକୋଲାସ୍ ଗାଲାଗେର୍ ଠାରୁ ମାଇକ୍ରୋ କ୍ଲିୟରଫିକ୍ସ ବ୍ୟବହାର କରନ୍ତି |

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

ଭୂସମାନ୍ତର କେନ୍ଦ୍ର

ଏହାର ପିତାମାତା ମଧ୍ୟରେ ଯେକ element ଣସି ଉପାଦାନକୁ ଶୀଘ୍ର କେନ୍ଦ୍ର କରନ୍ତୁ | ଆବଶ୍ୟକ widthକିମ୍ବା max-widthସେଟ୍ ହେବା ଆବଶ୍ୟକ |

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

ସାହାଯ୍ୟକାରୀ ଆକାର

ଏକ ବସ୍ତୁର ଆକାରକୁ ଅଧିକ ସହଜରେ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ |

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

ରିଜାଇଜେବଲ୍ ଟେକ୍ସଟେରିଆସ୍ |

ଯେକ any ଣସି ଟେକ୍ସଟେରିଆ, କିମ୍ବା ଅନ୍ୟ କ element ଣସି ଉପାଦାନ ପାଇଁ ଆକାରର ବିକଳ୍ପଗୁଡ଼ିକୁ ସହଜରେ ବିନ୍ୟାସ କରନ୍ତୁ | ସାଧାରଣ ବ୍ରାଉଜର୍ ଆଚରଣରେ ଡିଫଲ୍ଟ ( both) |

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

ପାଠ୍ୟ କାଟିବା |

ଗୋଟିଏ ମିକ୍ସିନ୍ ସହିତ ଏକ ଏଲିପ୍ସିସ୍ ସହିତ ସହଜରେ ଟେକ୍ସଟ୍ କାଟିଦିଅ | ଉପାଦାନ ହେବା blockକିମ୍ବା inline-blockସ୍ତର ଆବଶ୍ୟକ କରେ |

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

ରେଟିନା ପ୍ରତିଛବିଗୁଡିକ |

ଦୁଇଟି ପ୍ରତିଛବି ପଥ ଏବଂ @ 1x ପ୍ରତିଛବି ପରିମାଣ ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ, ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ଏକ @ 2x ମିଡିଆ ଜିଜ୍ଞାସା ପ୍ରଦାନ କରିବ | ଯଦି ଆପଣଙ୍କର ସେବା କରିବାକୁ ଅନେକ ଚିତ୍ର ଅଛି, ତେବେ ଆପଣଙ୍କର ରେଟିନା ପ୍ରତିଛବି CSS କୁ ଏକକ ମିଡିଆ ଜିଜ୍ଞାସାରେ ମାନୁଆଲୀ ଲେଖିବାକୁ ଚିନ୍ତା କରନ୍ତୁ |

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ କମ୍ ଉପରେ ନିର୍ମିତ ହୋଇଥିବାବେଳେ ଏହାର ଏକ ଅଫିସିଆଲ୍ ସାସ୍ ପୋର୍ଟ ମଧ୍ୟ ଅଛି | ଆମେ ଏହାକୁ ଏକ ପୃଥକ GitHub ସଂଗ୍ରହାଳୟରେ ରକ୍ଷଣାବେକ୍ଷଣ କରୁ ଏବଂ ଏକ ରୂପାନ୍ତର ସ୍କ୍ରିପ୍ଟ ସହିତ ଅଦ୍ୟତନଗୁଡିକ ପରିଚାଳନା କରୁ |

କ’ଣ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି |

ଯେହେତୁ ସାସ୍ ପୋର୍ଟର ଏକ ଅଲଗା ରେପୋ ଅଛି ଏବଂ ଟିକିଏ ଭିନ୍ନ ଦର୍ଶକଙ୍କୁ ସେବା କରେ, ପ୍ରକଳ୍ପର ବିଷୟବସ୍ତୁ ମୁଖ୍ୟ ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରୋଜେକ୍ଟଠାରୁ ବହୁତ ଭିନ୍ନ | ଏହା ନିଶ୍ଚିତ କରେ ଯେ ସାସ୍ ପୋର୍ଟ ଯଥାସମ୍ଭବ ସାସ୍-ଆଧାରିତ ସିଷ୍ଟମ୍ ସହିତ ସୁସଙ୍ଗତ ଅଟେ |

ପଥ	ବର୍ଣ୍ଣନା
`lib/`	ରୁବି ରତ୍ନ କୋଡ୍ (ସାସ୍ ବିନ୍ୟାସକରଣ, ରେଲ୍ ଏବଂ କମ୍ପାସ୍ ଏକୀକରଣ)
`tasks/`	କନଭର୍ଟର ସ୍କ୍ରିପ୍ଟଗୁଡ଼ିକ (ଅପଷ୍ଟ୍ରିମ୍ କମ୍ ସାସ୍କୁ ଟର୍ନିଂ) \|
`test/`	ସଂକଳନ ପରୀକ୍ଷା
`templates/`	କମ୍ପାସ୍ ପ୍ୟାକେଜ୍ ମନିଫେଷ୍ଟ୍ \|
`vendor/assets/`	ସାସ୍, ଜାଭାସ୍କ୍ରିପ୍ଟ, ଏବଂ ଫଣ୍ଟ୍ ଫାଇଲ୍ \|
`Rakefile`	ଆଭ୍ୟନ୍ତରୀଣ କାର୍ଯ୍ୟ, ଯେପରିକି ରେକ୍ ଏବଂ ରୂପାନ୍ତର \|

ଏହି ଫାଇଲଗୁଡ଼ିକୁ କାର୍ଯ୍ୟରେ ଦେଖିବା ପାଇଁ ସାସ୍ ପୋର୍��ର GitHub ସଂଗ୍ରହାଳୟ ପରିଦର୍ଶନ କରନ୍ତୁ |

ସ୍ଥାପନ

ସାସ୍ ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ କିପରି ସଂସ୍ଥାପନ ଏବଂ ବ୍ୟବହାର କରାଯିବ ସେ ସମ୍ବନ୍ଧରେ ସୂଚନା ପାଇଁ, GitHub ରେପୋଜିଟୋରୀ ରିଡମେ ପରାମର୍ଶ କରନ୍ତୁ | ଏହା ସବୁଠାରୁ ଅତ୍ୟାଧୁନିକ ଉତ୍ସ ଏବଂ ରେଲ୍ସ, କମ୍ପାସ୍ ଏବଂ ଷ୍ଟାଣ୍ଡାର୍ଡ ସାସ୍ ପ୍ରୋଜେକ୍ଟ ସହିତ ବ୍ୟବହାର ପାଇଁ ସୂଚନା ଅନ୍ତର୍ଭୁକ୍ତ କରେ |

ସାସ୍ ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

#	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|
୧	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|
୨	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|
3	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|

#	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|	ଟେବୁଲ୍ ହେଡିଙ୍ଗ୍ \|
୧	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|
୨	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|
3	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|	ଟେବୁଲ୍ ସେଲ୍ \|

CSS

ସମୀକ୍ଷା

HTML5 ଡକ୍ଟାଇପ୍ |

ପ୍ରଥମେ ମୋବାଇଲ୍ |

ଟାଇପୋଗ୍ରାଫି ଏବଂ ଲିଙ୍କ୍ |

Normalize.css

ପାତ୍ରଗୁଡିକ |

ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ |

ପରିଚୟ

ମିଡିଆ ପ୍ରଶ୍ନଗୁଡିକ |

ଗ୍ରୀଡ୍ ବିକଳ୍ପଗୁଡିକ |

ଉଦାହରଣ: ଷ୍ଟାକ୍-ଟୁ-ଭୂସମାନ୍ତର |

ଉଦାହରଣ: ତରଳ ପାତ୍ର |

ଉଦାହରଣ: ମୋବାଇଲ୍ ଏବଂ ଡେସ୍କଟପ୍ |

ଉଦାହରଣ: ମୋବାଇଲ୍, ଟାବଲେଟ୍, ଡେସ୍କଟପ୍ |

ଉଦାହରଣ: ସ୍ତମ୍ଭ ରାପିଙ୍ଗ୍ |

ପ୍ରତିକ୍ରିୟାଶୀଳ ସ୍ତମ୍ଭ ପୁନ ets ସେଟ୍ କରେ |

ସ୍ତମ୍ଭଗୁଡିକ ଅଫସେଟ୍ କରିବା |

ବସା ସ୍ତମ୍ଭ

ସ୍ତମ୍ଭ ଅର୍ଡର |

କମ୍ ମିଶ୍ରଣ ଏବଂ ଭେରିଏବଲ୍ |

ଭେରିଏବଲ୍ |

ମିଶ୍ରଣ

ଉଦାହରଣ ବ୍ୟବହାର

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

ଶିରୋନାମା

h1 ବୁଟଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ |

h2। ବୁଟଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ |

h3। ବୁଟଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ |

h4। ବୁଟଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ |

h5। ବୁଟଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ |

h6। ବୁଟଷ୍ଟ୍ରାପ୍ ହେଡିଙ୍ଗ୍ |

h1 ସେକେଣ୍ଡାରୀ ଟେକ୍ସଟ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

h2। ସେକେଣ୍ଡାରୀ ଟେକ୍ସଟ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

h3। ସେକେଣ୍ଡାରୀ ଟେକ୍ସଟ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

h4। ସେକେଣ୍ଡାରୀ ଟେକ୍ସଟ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

h5। ସେକେଣ୍ଡାରୀ ଟେକ୍ସଟ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

h6। ସେକେଣ୍ଡାରୀ ଟେକ୍ସଟ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

ଶରୀର କପି |

ଲିଡ୍ ବଡି କପି |

କମ୍ ସହିତ ନିର୍ମିତ |

ପାଠ୍ୟ ଉପାଦାନଗୁଡ଼ିକୁ ଇନଲାଇନ କରନ୍ତୁ |

ଚିହ୍ନିତ ପାଠ

ବିଲୋପିତ ପାଠ

ଷ୍ଟ୍ରାଇକ୍ଥ୍ରୁ ପାଠ୍ୟ |

ସନ୍ନିବେଶିତ ପାଠ |

ଅଣ୍ଡରଲାଇନ୍ ହୋଇଥିବା ପାଠ |

ଛୋଟ ପାଠ

ବୋଲ୍ଡ |

ଇଟାଲିକ୍ |

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

ଶ୍ରେଣୀବଦ୍ଧ ଶ୍ରେଣୀଗୁଡିକ |

ରୂପାନ୍ତର କ୍ଲାସ୍ |

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

ମ Basic ଳିକ ସଂକ୍ଷିପ୍ତକରଣ |

ପ୍ରାରମ୍ଭିକତା

ଠିକଣା

ବ୍ଲକକୋଟସ୍ |

ଡିଫଲ୍ଟ ବ୍ଲକକୋଟ |

ବ୍ଲକକୋଟ୍ ବିକଳ୍ପଗୁଡିକ |

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

ବ display କଳ୍ପିକ ପ୍ରଦର୍ଶନ

ତାଲିକା |

ଅନିୟମିତ |

ଅର୍ଡର |

ଅଣସଂରକ୍ଷିତ |

କ୍ରମରେ

ବର୍ଣ୍ଣନା

ଭୂସମାନ୍ତର ବର୍ଣ୍ଣନା

ଅଟୋ-ଟ୍ରଙ୍କିଙ୍ଗ୍ |

କୋଡ୍

କ୍ରମରେ

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

ମ Basic ଳିକ ବ୍ଲକ

ଭେରିଏବଲ୍ |

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

ଟେବୁଲ୍ |

ମ Basic ଳିକ ଉଦାହରଣ |

ଧାଡି ଧାଡିଗୁଡିକ |

କ୍ରସ୍ ବ୍ରାଉଜର୍ ସୁସଙ୍ଗତତା |

ଡେମୋ `:focus`ଷ୍ଟେଟ୍ |

ଲିଙ୍କ୍ କାର୍ଯ୍ୟକାରିତା ବିଷୟରେ ସାବଧାନ |`<a>`

ଲୁକ୍କାୟିତ `.sr-only`ଲେବଲ୍ ସହିତ ବ tion କଳ୍ପିକ ଆଇକନ୍ |