ପରିଚୟ
JsDelivr ଏବଂ ଏକ ଟେମ୍ପଲେଟ୍ ଷ୍ଟାର୍ଟର୍ ପେଜ୍ ସହିତ ପ୍ରତିକ୍ରିୟାଶୀଳ, ମୋବାଇଲ୍-ପ୍ରଥମ ସାଇଟ୍ ଗଠନ ପାଇଁ ଦୁନିଆର ସବୁଠାରୁ ଲୋକପ୍ରିୟ framework ାଞ୍ଚା ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ଆରମ୍ଭ କରନ୍ତୁ |
ଶୀଘ୍ର ଆରମ୍ଭ
ତୁମର ପ୍ରୋଜେକ୍ଟରେ ଶୀଘ୍ର ବୁଟଷ୍ଟ୍ରାପ୍ ଯୋଡିବାକୁ ଚାହୁଁଛନ୍ତି କି? ଏକ ମୁକ୍ତ ମୁକ୍ତ ଉତ୍ସ CDN jsDelivr ବ୍ୟବହାର କରନ୍ତୁ | ଏକ ପ୍ୟାକେଜ୍ ମ୍ୟାନେଜର୍ ବ୍ୟବହାର କରି କିମ୍ବା ଉତ୍ସ ଫାଇଲଗୁଡ଼ିକୁ ଡାଉନଲୋଡ୍ କରିବା ଆବଶ୍ୟକ କରନ୍ତି କି? ଡାଉନଲୋଡ୍ ପୃଷ୍ଠାକୁ ଯାଆନ୍ତୁ |
CSS
ଆମର CSS ଲୋଡ୍ କରିବା ପାଇଁ ଅନ୍ୟ ସମସ୍ତ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ପୂର୍ବରୁ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ <link>କୁ କପି-ଲେପନ କରନ୍ତୁ |<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
JS
ଆମର ଅନେକ ଉପାଦାନ କାର୍ଯ୍ୟ କରିବା ପାଇଁ ଜାଭାସ୍କ୍ରିପ୍ଟର ବ୍ୟବହାର ଆବଶ୍ୟକ କରେ | ନିର୍ଦ୍ଦିଷ୍ଟ ଭାବରେ, ସେମାନେ jQuery , Popper , ଏବଂ ଆମର ନିଜର ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ଆବଶ୍ୟକ କରନ୍ତି | ଆମେ jQuery ର ସ୍ଲିମ୍ ବିଲ୍ଡ ବ୍ୟବହାର କରୁ , କିନ୍ତୁ ପୂର୍ଣ୍ଣ ସଂସ୍କରଣ ମଧ୍ୟ ସମର୍ଥିତ |
ନିମ୍ନଲିଖିତ <script>ପୃଷ୍ଠାଗୁଡ଼ିକ ମଧ୍ୟରୁ ଗୋଟିଏକୁ ତୁମର ପୃଷ୍ଠାଗୁଡ଼ିକର ଶେଷରେ, ବନ୍ଦ ଟ୍ୟାଗ୍ ପୂର୍ବରୁ ରଖ , </body>ସେମାନଙ୍କୁ ସକ୍ଷମ କରିବାକୁ | jQuery ପ୍ରଥମେ ଆସିବା ଉଚିତ, ତାପରେ ପପର୍, ଏବଂ ତାପରେ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ |
ବଣ୍ଡଲ୍ |
ଆମର ଦୁଇଟି ବଣ୍ଡଲ ମଧ୍ୟରୁ ଗୋଟିଏ ସହିତ ପ୍ରତ୍ୟେକ ବୁଟଷ୍ଟ୍ରାପ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ | bootstrap.bundle.jsଆମର ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭର ପାଇଁ ପପର୍bootstrap.bundle.min.js ଅନ୍ତର୍ଭୂକ୍ତ କରେ, କିନ୍ତୁ jQuery ନୁହେଁ | ପ୍ରଥମେ jQuery ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ, ତାପରେ ଏକ ବୁଟଷ୍ଟ୍ରାପ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ବଣ୍ଡଲ୍ | ବୁଟଷ୍ଟ୍ରାପରେ କ’ଣ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି ସେ ସମ୍ବନ୍ଧରେ ଅଧିକ ସୂଚନା ପାଇଁ, ଦୟାକରି ଆମର ବିଷୟବସ୍ତୁ ବିଭାଗ ଦେଖନ୍ତୁ |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
ପୃଥକ କରନ୍ତୁ |
ଯଦି ଆପଣ ପୃଥକ ସ୍କ୍ରିପ୍ଟ ସମାଧାନ ସହିତ ଯିବାକୁ ସ୍ଥିର କରନ୍ତି, ପପର୍ ପ୍ରଥମେ ଆସିବା ଉଚିତ (ଯଦି ଆପଣ ଟୁଲ୍ ଟିପ୍ସ କିମ୍ବା ପପୋଭର ବ୍ୟବହାର କରୁଛନ୍ତି), ଏବଂ ତା’ପରେ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
ଉପାଦାନଗୁଡ଼ିକ |
କ urious ତୁହଳପ୍ରଦ କେଉଁ ଉପାଦାନଗୁଡ଼ିକ ସ୍ପଷ୍ଟ ଭାବରେ jQuery, ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ, ଏବଂ ପପର୍ ଆବଶ୍ୟକ କରେ? ନିମ୍ନରେ ଶୋ ଉପାଦାନଗୁଡିକ ଲିଙ୍କ୍ କ୍ଲିକ୍ କରନ୍ତୁ | ଯଦି ଆପଣ ପୃଷ୍ଠା ଗଠନ ବିଷୟରେ ନିଶ୍ଚିତ ନୁହଁନ୍ତି, ଏକ ଉଦାହରଣ ପୃଷ୍ଠା ଟେମ୍ପଲେଟ୍ ପାଇଁ ପ 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, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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 ବୁଟ୍ ବ୍ୟବହାର କରୁ |
ସମ୍ପ୍ରଦାୟ
ବୁଟଷ୍ଟ୍ରାପ୍ ର ବିକାଶ ଉପରେ ଅଦ୍ୟତନ ରୁହ ଏବଂ ଏହି ସାହାଯ୍ୟକାରୀ ଉତ୍ସଗୁଡ଼ିକ ସହିତ ସମ୍ପ୍ରଦାୟକୁ ପହଞ୍ଚ |
- ଅଫିସିଆଲ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ବ୍ଲଗ୍ ପ Read ଏବଂ ସବସ୍କ୍ରାଇବ କରନ୍ତୁ |
- IRC ରେ ସାଥୀ ବୁଟଷ୍ଟ୍ରାପର୍ମାନଙ୍କ ସହିତ ଚାଟ୍ କରନ୍ତୁ |
irc.libera.chatସର୍ଭରରେ, ଚ୍ୟାନେଲରେ#bootstrap| bootstrap-4ଷ୍ଟାକ ଓଭରଫ୍ଲୋ (ଟ୍ୟାଗଡ୍ ) ରେ ନିୟୋଜନ ସହାୟତା ମିଳିପାରେ |- ବିକାଶକାରୀମାନେ ପ୍ୟାକେଜଗୁଡ଼ିକରେ କୀୱାର୍ଡ ବ୍ୟବହାର କରିବା ଉଚିତ ଯାହାକି npm କିମ୍ବା ସର୍ବାଧିକ ଆବିଷ୍କାର ପାଇଁ ସମାନ ବିତରଣ ଯନ୍ତ୍ର
bootstrapମାଧ୍ୟମରେ ବଣ୍ଟନ କରିବା ସମୟରେ ବୁଟଷ୍ଟ୍ରାପର କାର୍ଯ୍ୟକାରିତାକୁ ରୂପାନ୍ତର କରିଥାଏ କିମ୍ବା ଯୋଗ କରିଥାଏ |
ଅତ୍ୟାଧୁନିକ ଗପସପ ଏବଂ ଚମତ୍କାର ମ୍ୟୁଜିକ୍ ଭିଡିଓ ପାଇଁ ଆପଣ ଟ୍ୱିଟରରେ @getbootstrap କୁ ମଧ୍ୟ ଅନୁସରଣ କରିପାରିବେ |
CSP ଏବଂ ଏମ୍ବେଡ୍ ହୋଇଥିବା SVG ଗୁଡିକ |
ଅନେକ ବୁଟଷ୍ଟ୍ରାପ୍ ଉପାଦାନଗୁଡ଼ିକ ଆମର CSS ରେ ଏମ୍ବେଡ୍ ହୋଇଥିବା SVG ଗୁଡ଼ିକୁ ବ୍ରାଉଜର୍ ଏବଂ ଡିଭାଇସ୍ ମଧ୍ୟରେ କ୍ରମାଗତ ଏବଂ ସହଜରେ ଷ୍ଟାଇଲ୍ ଉପାଦାନଗୁଡ଼ିକୁ ଅନ୍ତର୍ଭୁକ୍ତ କରେ | ଅଧିକ କଠୋର CSP ସଂରଚନା ସହିତ ସଂସ୍ଥାଗୁଡ଼ିକ ପାଇଁ , ଆମେ ଆମର ଏମ୍ବେଡ୍ ହୋଇଥିବା SVG ଗୁଡ଼ିକର ସମସ୍ତ ଉଦାହରଣକୁ ଡକ୍ୟୁମେଣ୍ଟ୍ କରିଛୁ (ଯାହା ମାଧ୍ୟମରେ ପ୍ରୟୋଗ କରାଯାଏ background-image) ତେଣୁ ଆପଣ ଆପଣଙ୍କର ବିକଳ୍ପଗୁଡ଼ିକୁ ଅଧିକ ପୁଙ୍ଖାନୁପୁଙ୍ଖ ସମୀକ୍ଷା କରିପାରିବେ |
- ବନ୍ଦ ବଟନ୍ (ଆଲର୍ଟ ଏବଂ ମୋଡାଲରେ ବ୍ୟବହୃତ)
- କଷ୍ଟମ୍ ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ବଟନ୍ |
- ଫର୍ମ ସୁଇଚ୍ |
- ବ valid ଧତା ଆଇକନ୍ ଗଠନ କରନ୍ତୁ |
- କଷ୍ଟମ୍ ସିଲେକ୍ଟ ମେନୁଗୁଡିକ |
- କାରୁସେଲ ନିୟନ୍ତ୍ରଣ |
- ନାଭବାର୍ ଟୋଗଲ୍ ବଟନ୍ |
ସମ୍ପ୍ରଦାୟ ବାର୍ତ୍ତାଳାପ ଉପରେ ଆଧାର କରି , ଆପଣଙ୍କର ନିଜ କୋଡବେସରେ ଏହାର ସମାଧାନ ପାଇଁ କିଛି ବିକଳ୍ପ ହେଉଛି URL ଗୁଡିକ ସ୍ଥାନୀୟ ଭାବରେ ହୋଷ୍ଟ ହୋଇଥିବା ସମ୍ପତ୍ତି ସହିତ ବଦଳାଇବା, ପ୍ରତିଛବିଗୁଡ଼ିକୁ ଅପସାରଣ କରିବା ଏବଂ ଇନଲାଇନ ଚିତ୍ର ବ୍ୟବହାର କରିବା (ସମସ୍ତ ଉପାଦାନରେ ସମ୍ଭବ ନୁହେଁ) ଏବଂ ଆପଣଙ୍କର CSP ପରିବର୍ତ୍ତନ କରିବା | ଆମର ସୁପାରିଶ ହେଉଛି ତୁମର ସୁରକ୍ଷା ନୀତିକୁ ଯତ୍ନର ସହ ସମୀକ୍ଷା କରିବା ଏବଂ ଆବଶ୍ୟକ ହେଲେ ଆଗକୁ ଏକ ସର୍ବୋତ୍ତମ ପଥ ସ୍ଥିର କରିବା |