ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ଆରମ୍ଭ କରନ୍ତୁ |
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ହେଉଛି ଏକ ଶକ୍ତିଶାଳୀ, ବ 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 କୁ ମଧ୍ୟ ଅନୁସରଣ କରିପାରିବେ |