ପରିଚୟ

JsDelivr ଏବଂ ଏକ ଟେମ୍ପଲେଟ୍ ଷ୍ଟାର୍ଟର୍ ପେଜ୍ ସହିତ ପ୍ରତିକ୍ରିୟାଶୀଳ, ମୋବାଇଲ୍-ପ୍ରଥମ ସାଇଟ୍ ଗଠନ ପାଇଁ ଦୁନିଆର ସବୁଠାରୁ ଲୋକପ୍ରିୟ framework ାଞ୍ଚା ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ଆରମ୍ଭ କରନ୍ତୁ |

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

ଶୀଘ୍ର ଆରମ୍ଭ

ତୁମର ପ୍ରୋଜେକ୍ଟରେ ଶୀଘ୍ର ବୁଟଷ୍ଟ୍ରାପ୍ ଯୋଡିବାକୁ ଚାହୁଁଛନ୍ତି କି? ଏକ ମୁକ୍ତ ମୁକ୍ତ ଉତ୍ସ CDN jsDelivr ବ୍ୟବହାର କରନ୍ତୁ | ଏକ ପ୍ୟାକେଜ୍ ମ୍ୟାନେଜର୍ ବ୍ୟବହାର କରି କିମ୍ବା ଉତ୍ସ ଫାଇଲଗୁଡ଼ିକୁ ଡାଉନଲୋଡ୍ କରିବା ଆବଶ୍ୟକ କରନ୍ତି କି? ଡାଉନଲୋଡ୍ ପୃଷ୍ଠାକୁ ଯାଆନ୍ତୁ |

CSS

ଆମର CSS ଲୋଡ୍ କରିବା ପାଇଁ ଅନ୍ୟ ସମସ୍ତ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ପୂର୍ବରୁ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ <link>କୁ କପି-ଲେପନ କରନ୍ତୁ |<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

ଆମର ଅନେକ ଉପାଦାନ କାର୍ଯ୍ୟ କରିବା ପାଇଁ ଜାଭାସ୍କ୍ରିପ୍ଟର ବ୍ୟବହାର ଆବଶ୍ୟକ କରେ | ନିର୍ଦ୍ଦିଷ୍ଟ ଭାବରେ, ସେମାନେ ଆମର ନିଜର ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ଏବଂ ପପର୍ ଆବଶ୍ୟକ କରନ୍ତି | ନିମ୍ନଲିଖିତ <script>ପୃଷ୍ଠାଗୁଡ଼ିକ ମଧ୍ୟରୁ ଗୋଟିଏକୁ ତୁମର ପୃଷ୍ଠାଗୁଡ଼ିକର ଶେଷରେ, ବନ୍ଦ ଟ୍ୟାଗ୍ ପୂର୍ବରୁ ରଖ , </body>ସେମାନଙ୍କୁ ସକ୍ଷମ କରିବାକୁ |

ବଣ୍ଡଲ୍ |

ଆମର ଦୁଇଟି ବଣ୍ଡଲ ମଧ୍ୟରୁ ଗୋଟିଏ ସହିତ ପ୍ରତ୍ୟେକ ବୁଟଷ୍ଟ୍ରାପ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ଏବଂ ନିର୍ଭରଶୀଳତା ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ | ଆମର ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭର ପାଇଁ ଉଭୟ bootstrap.bundle.jsଏବଂ ପପର୍bootstrap.bundle.min.js ଅନ୍ତର୍ଭୂକ୍ତ କରେ | ବୁଟଷ୍ଟ୍ରାପରେ କ’ଣ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି ସେ ସମ୍ବନ୍ଧରେ ଅଧିକ ସୂଚନା ପାଇଁ, ଦୟାକରି ଆମର ବିଷୟବସ୍ତୁ ବିଭାଗ ଦେଖନ୍ତୁ |

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

ପୃଥକ କରନ୍ତୁ |

ଯଦି ଆପଣ ପୃଥକ ସ୍କ୍ରିପ୍ଟ ସମାଧାନ ସହିତ ଯିବାକୁ ସ୍ଥିର କରନ୍ତି, ପପର୍ ପ୍ରଥମେ ଆସିବା ଉଚିତ (ଯଦି ଆପଣ ଟୁଲ୍ ଟିପ୍ସ କିମ୍ବା ପପୋଭର ବ୍ୟବହାର କରୁଛନ୍ତି), ଏବଂ ତା’ପରେ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ |

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

ମଡ୍ୟୁଲ୍

ଯଦି ଆପଣ ବ୍ୟବହାର କରନ୍ତି <script type="module">, ଦୟାକରି ଆମର ବୁଟଷ୍ଟ୍ରାପକୁ ଏକ ମଡ୍ୟୁଲ୍ ବିଭାଗ ଭାବରେ ବ୍ୟବହାର କରନ୍ତୁ |

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

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

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

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

ଷ୍ଟାର୍ଟର ଟେମ୍ପଲେଟ୍ |

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

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

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

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

HTML5 ଡକ୍ଟାଇପ୍ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ HTML5 ଡକ୍ଟାଇପ୍ ବ୍ୟବହାର ଆବଶ୍ୟକ କରେ | ଏହା ବିନା, ଆପଣ କିଛି କ fun ତୁକିଆ ଅସମ୍ପୂର୍ଣ୍ଣ ଷ୍ଟାଇଲିଂ ଦେଖିବେ, କିନ୍ତୁ ଏହାକୁ ଅନ୍ତର୍ଭୁକ୍ତ କରି କ any ଣସି ଯଥେଷ୍ଟ ହାଇକପ୍ ସୃଷ୍ଟି କରିବା ଉଚିତ୍ ନୁହେଁ |

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

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