ପରିଚୟ

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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

ପୃଥକ କରନ୍ତୁ |

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 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 ଚାଳନ କରନ୍ତୁ |

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

Read and subscribe to The Official Bootstrap Blog.
Chat with fellow Bootstrappers in IRC. On the irc.libera.chat server, in the #bootstrap channel.
Implementation help may be found at Stack Overflow (tagged bootstrap-5).
Developers should use the keyword bootstrap on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

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