ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ଆରମ୍ଭ କରନ୍ତୁ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଉଛି ଏକ ଶକ୍ତିଶାଳୀ, ବ feature ଶିଷ୍ଟ୍ୟ-ପ୍ୟାକ୍ ହୋଇଥିବା ଫ୍ରଣ୍ଟେଣ୍ଡ୍ ଟୁଲ୍କିଟ୍ | ପ୍ରୋଟୋଟାଇପ୍ ଠାରୁ ଉତ୍ପାଦନ ପର୍ଯ୍ୟନ୍ତ କିଛି ମିନିଟ୍ ମଧ୍ୟରେ କିଛି ନିର୍ମାଣ କରନ୍ତୁ |

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

ଶୀଘ୍ର ଆରମ୍ଭ

କ build ଣସି ବିଲ୍ଡ ଷ୍ଟେପ୍ ଆବଶ୍ୟକ ନକରି CDN ମାଧ୍ୟମରେ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ପାଦନ-ପ୍ରସ୍ତୁତ CSS ଏବଂ JavaScript ଅନ୍ତର୍ଭୁକ୍ତ କରି ଆରମ୍ଭ କରନ୍ତୁ | ଏହି ବୁଟଷ୍ଟ୍ରାପ୍ କୋଡ୍ ପେନ୍ ଡେମୋ ସହିତ ଏହାକୁ ଅଭ୍ୟାସରେ ଦେଖନ୍ତୁ |

index.htmlତୁମର ପ୍ରୋଜେକ୍ଟ ରୁଟରେ ଏକ ନୂଆ ଫାଇଲ୍ ସୃଷ୍ଟି କର | ମୋବାଇଲ୍ ଡିଭାଇସରେ ସଠିକ୍ ପ୍ରତିକ୍ରିୟାଶୀଳ ଆଚରଣ<meta name="viewport"> ପାଇଁ ଟ୍ୟାଗ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ |
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```

ବୁଟଷ୍ଟ୍ରାପ୍ ର CSS ଏବଂ JS ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ | ବନ୍ଦ ହେବା ପୂର୍ବରୁ ଆମର CSS ପାଇଁ ଟ୍ୟାଗ୍, ଏବଂ <link>ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ବଣ୍ଡଲ୍ ପାଇଁ ଟ୍ୟାପ୍ ରଖନ୍ତୁ (ଡ୍ରପ୍ ଡାଉନ୍, ପପର୍ସ ଏବଂ ଟୁଲ୍ ଟିପ୍ସ ପାଇଁ ପପର୍ ଅନ୍ତର୍ଭୂକ୍ତ କରି) | ଆମର CDN ଲିଙ୍କ୍ ବିଷୟରେ ଅଧିକ ଜାଣନ୍ତୁ |<head><script></body>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

ଆପଣ ପପର୍ ଏବଂ ଆମର JS କୁ ପୃଥକ ଭାବରେ ଅନ୍ତର୍ଭୁକ୍ତ କରିପାରିବେ | ଯଦି ଆପଣ ଡ୍ରପଡାଉନ୍, ପପୋଭର, କିମ୍ବା ଟୁଲ୍ ଟିପ୍ସ ବ୍ୟବହାର କରିବାକୁ ଯୋଜନା କରୁନାହାଁନ୍ତି, ପପର୍ ଅନ୍ତର୍ଭୂକ୍ତ ନକରି କିଛି କିଲୋବାଇଟ୍ ସଞ୍ଚୟ କରନ୍ତୁ |

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

ନମସ୍କାର ବିଶ୍ୱବାସି! ତୁମର ବୁଟଷ୍ଟ୍ରେଡ୍ ପେଜ୍ ଦେଖିବାକୁ ତୁମର ପସନ୍ଦର ବ୍ରାଉଜରରେ ପେଜ୍ ଖୋଲ | ବର୍ତ୍ତମାନ ଆପଣ ନିଜର ଲେଆଉଟ୍ ସୃଷ୍ଟି କରି, ଦଶହରା ଉପାଦାନ ଯୋଡି ଏବଂ ଆମର ସରକାରୀ ଉଦାହରଣ ବ୍ୟବହାର କରି ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ନିର୍ମାଣ ଆରମ୍ଭ କରିପାରିବେ |

CDN ଲିଙ୍କ୍ |

ରେଫରେନ୍ସ ଭାବରେ, ଏଠାରେ ଆମର ପ୍ରାଥମିକ CDN ଲିଙ୍କ୍ ଅଛି |

ବର୍ଣ୍ଣନା	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

ବିଷୟବସ୍ତୁ ପୃଷ୍ଠାରେ ତାଲିକାଭୁକ୍ତ ଆମର ଅତିରିକ୍ତ ବିଲ୍ଡଗୁଡିକ ଆଣିବା ପାଇଁ ଆପଣ CDN କୁ ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବେ |

ପରବର୍ତ୍ତୀ ପଦକ୍ଷେପଗୁଡିକ

ବୁଟଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର କରୁଥିବା କିଛି ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ବିଶ୍ୱ ପରିବେଶ ସେଟିଂସମୂହ ବିଷୟରେ ଟିକିଏ ଅଧିକ ପ .଼ନ୍ତୁ |
ଆମର ବିଷୟବସ୍ତୁ ବିଭାଗରେ ବୁଟଷ୍ଟ୍ରାପରେ କ’ଣ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି ଏବଂ ନିମ୍ନରେ ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କରୁଥିବା ଉପାଦାନଗୁଡ଼ିକର ତାଲିକା ବିଷୟରେ ପ Read ନ୍ତୁ |
ଟିକିଏ ଅଧିକ ଶକ୍ତି ଦରକାର? ପ୍ୟାକେଜ୍ ମ୍ୟାନେଜର୍ ମାଧ୍ୟମରେ ଉତ୍ସ ଫାଇଲଗୁଡ଼ିକୁ ଅନ୍ତର୍ଭୁକ୍ତ କରି ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ନିର୍ମାଣ କରିବାକୁ ଚିନ୍ତା କର |
ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ଏକ ମଡ୍ୟୁଲ୍ ଭାବରେ ବ୍ୟବହାର କରିବାକୁ <script type="module">ଚାହୁଁଛନ୍ତି କି? ଦୟାକରି ଆମର ବୁଟଷ୍ଟ୍ରାପ୍ କୁ ଏକ ମଡ୍ୟୁଲ୍ ବିଭାଗ ଭାବରେ ବ୍ୟବହାର କରନ୍ତୁ |

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

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

ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କରୁଥିବା ଉପାଦାନଗୁଡିକ ଦେଖାନ୍ତୁ |

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

ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ଗ୍ଲୋବାଲ୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ ହାତଗଣତି ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ବିଶ୍ୱସ୍ତରୀୟ ଶ yles ଳୀ ଏବଂ ସେଟିଂସମୂହକୁ ନିୟୋଜିତ କରିଥାଏ, ଯାହାକି କ୍ରସ୍ ବ୍ରାଉଜର୍ ଶ yles ଳୀର ସ୍ ization ାଭାବିକତା ପାଇଁ ପ୍ରାୟ ସ୍ୱତନ୍ତ୍ର ଭାବରେ ପ୍ରସ୍ତୁତ | ଚାଲ ଭିତରକୁ ଯିବା |

HTML5 ଡକ୍ଟାଇପ୍ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ HTML5 ଡକ୍ଟାଇପ୍ ବ୍ୟବହାର ଆବଶ୍ୟକ କରେ | ଏହା ବିନା, ଆପଣ କିଛି ମଜାଳିଆ ଏବଂ ଅସମ୍ପୂର୍ଣ୍ଣ ଷ୍ଟାଇଲ୍ ଦେଖିବେ |

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

ପ୍ରତିକ୍ରିୟାଶୀଳ ମେଟା ଟ୍ୟାଗ୍ |

ପ୍ରଥମେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ମୋବାଇଲ୍ ବିକଶିତ ହୋଇଛି, ଏକ ରଣନୀତି ଯେଉଁଥିରେ ଆମେ ପ୍ରଥମେ ମୋବାଇଲ୍ ଡିଭାଇସ୍ ପାଇଁ କୋଡ୍ ଅପ୍ଟିମାଇଜ୍ କରୁ ଏବଂ ତା’ପରେ CSS ମିଡିଆ ଜିଜ୍ଞାସା ବ୍ୟବହାର କରି ଉପାଦାନଗୁଡ଼ିକୁ ମାପଚୁପ କରିଥାଉ | ସମସ୍ତ ଡିଭାଇସ୍ ପାଇଁ ସଠିକ୍ ରେଣ୍ଡରିଂ ଏବଂ ସ୍ପର୍ଶ ଜୁମିଙ୍ଗ୍ ନିଶ୍ଚିତ କରିବାକୁ, ଆପଣଙ୍କ ନିକଟରେ ପ୍ରତିକ୍ରିୟାଶୀଳ ଭ୍ୟୁପୋର୍ଟ ମେଟା ଟ୍ୟାଗ୍ ଯୋଡନ୍ତୁ <head>|

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

ଆପଣ ଶୀଘ୍ର ଆରମ୍ଭରେ କାର୍ଯ୍ୟରେ ଏହାର ଏକ ଉଦାହରଣ ଦେଖିପାରିବେ |

ବାକ୍ସ-ଆକାର

CSS ରେ ଅଧିକ ସରଳ ଆକାର ପାଇଁ, ଆମେ ବିଶ୍ global ର box-sizingମୂଲ୍ୟକୁ ପରିବର୍ତ୍ତନ content-boxକରୁ border-box| ଏହା ସୁନିଶ୍ଚିତ paddingକରେ ଯେ ଏକ ଉପାଦାନର ଅନ୍ତିମ ଗଣିତ ମୋଟେଇକୁ ପ୍ରଭାବିତ କରେ ନାହିଁ, କିନ୍ତୁ ଏହା ଗୁଗୁଲ୍ ମ୍ୟାପ୍ ଏବଂ ଗୁଗୁଲ୍ କଷ୍ଟମ୍ ସର୍ଚ୍ଚ ଇଞ୍ଜିନ୍ ପରି କିଛି ତୃତୀୟ-ପକ୍ଷ ସଫ୍ଟୱେର୍ ସହିତ ସମସ୍ୟା ସୃଷ୍ଟି କରିପାରେ |

ବିରଳ ଅବସରରେ ଆପଣ ଏହାକୁ ଅତିକ୍ରମ କରିବାକୁ ଆବଶ୍ୟକ କରନ୍ତି, ନିମ୍ନଲିଖିତ ପରି କିଛି ବ୍ୟବହାର କରନ୍ତୁ:

.selector-for-some-widget {
  box-sizing: content-box;
}

ଉପରୋକ୍ତ ସ୍ନିପେଟ୍ ସହିତ, ନେଷ୍ଟେଡ୍ ଉପାଦାନଗୁଡିକ - ମାଧ୍ୟମରେ ଉତ୍ପାଦିତ ବିଷୟବସ୍ତୁକୁ ଅନ୍ତର୍ଭୂକ୍ତ କରି ::beforeଏବଂ ସମସ୍ତେ ଏଥିପାଇଁ ::afterନିର୍ଦ୍ଦିଷ୍ଟ ଉତ୍ତରାଧିକାରୀ ହେବେ |box-sizing.selector-for-some-widget

ବକ୍ସ ମଡେଲ ଏବଂ CSS କ icks ଶଳରେ ଆକାର ବିଷୟରେ ଅଧିକ ଜାଣନ୍ତୁ |

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

ଉନ୍ନତ କ୍ରସ୍-ବ୍ରାଉଜର୍ ରେଣ୍ଡରିଂ ପାଇଁ, ଆମେ ସାଧାରଣ HTML ଉପାଦାନଗୁଡ଼ିକୁ ସାମାନ୍ୟ ଅଧିକ ମତାମତପ୍ରାପ୍ତ ପୁନ ets ପ୍ରଦାନ କରୁଥିବାବେଳେ ବ୍ରାଉଜର୍ ଏବଂ ଡିଭାଇସ୍ ମଧ୍ୟରେ ଅସଙ୍ଗତିକୁ ସଂଶୋଧନ କରିବା ପାଇଁ ପୁନ o ବୁଟ୍ ବ୍ୟବହାର କରୁ |

ସମ୍ପ୍ରଦାୟ

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ବିକାଶ ଉପରେ ଅଦ୍ୟତନ ରୁହ ଏବଂ ଏହି ସାହାଯ୍ୟକାରୀ ଉତ୍ସଗୁଡ଼ିକ ସହିତ ସମ୍ପ୍ରଦାୟକୁ ପହଞ୍ଚ |

ଅଫିସିଆଲ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ବ୍ଲଗ୍ ପ Read ଏବଂ ସବସ୍କ୍ରାଇବ କରନ୍ତୁ |
ଆମର GitHub ଆଲୋଚନାକୁ ପଚାର ଏବଂ ଅନୁସନ୍ଧାନ କର |
IRC ରେ ସାଥୀ ବୁଟଷ୍ଟ୍ରାପର୍ମାନଙ୍କ ସହିତ ଚାଟ୍ କରନ୍ତୁ | irc.libera.chatସର୍ଭରରେ, ଚ୍ୟାନେଲରେ #bootstrap|
bootstrap-5ଷ୍ଟାକ ଓଭରଫ୍ଲୋ (ଟ୍ୟାଗଡ୍ ) ରେ ନିୟୋଜନ ସହାୟତା ମିଳିପାରେ |
ବିକାଶକାରୀମାନେ ପ୍ୟାକେଜଗୁଡ଼ିକରେ କୀୱାର୍ଡ ବ୍ୟବହାର କରିବା ଉଚିତ ଯାହାକି npm କିମ୍ବା ସର୍ବାଧିକ ଆବିଷ୍କାର ପାଇଁ ସମାନ ବିତରଣ ଯନ୍ତ୍ର bootstrapମାଧ୍ୟମରେ ବଣ୍ଟନ କରିବା ସମୟରେ ବୁଟଷ୍ଟ୍ରାପର କାର୍ଯ୍ୟକାରିତାକୁ ରୂପାନ୍ତର କରିଥାଏ କିମ୍ବା ଯୋଗ କରିଥାଏ |

ଅତ୍ୟାଧୁନିକ ଗପସପ ଏବଂ ଚମତ୍କାର ମ୍ୟୁଜିକ୍ ଭିଡିଓ ପାଇଁ ଆପଣ ଟ୍ୱିଟରରେ @getbootstrap କୁ ମଧ୍ୟ ଅନୁସରଣ କରିପାରିବେ |