Source

ପରିଚୟ

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

ଶୀଘ୍ର ଆରମ୍ଭ

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

CSS

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

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

JS

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

ଆମେ jQuery ର ସ୍ଲିମ୍ ବିଲ୍ଡ ବ୍ୟବହାର କରୁ , କିନ୍ତୁ ପୂର୍ଣ୍ଣ ସଂସ୍କରଣ ମଧ୍ୟ ସମର୍ଥିତ |

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

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

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

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

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

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

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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, shrink-to-fit=no">

ଷ୍ଟାର୍ଟର ଟେମ୍ପଲେଟରେ ଆପଣ ଏହାର ଏକ ଉଦାହରଣ ଦେଖିପାରିବେ |

ବାକ୍ସ-ଆକାର

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 ବୁଟ୍ ବ୍ୟବହାର କରୁ |

ସମ୍ପ୍ରଦାୟ

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

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

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