ଡାଉନଲୋଡ୍ କରନ୍ତୁ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ (ସମ୍ପ୍ରତି v3.4.1) ଶୀଘ୍ର ଆରମ୍ଭ କରିବା ପାଇଁ କିଛି ସହଜ ଉପାୟ ଅଛି, ପ୍ରତ୍ୟେକଟି ଏକ ଭିନ୍ନ କ ill ଶଳ ସ୍ତରକୁ ଆକର୍ଷିତ କରେ ଏବଂ ବ୍ୟବହାର ମାମଲା | ତୁମର ନିର୍ଦ୍ଦିଷ୍ଟ ଆବଶ୍ୟକତା କ’ଣ ତାହା ଦେଖିବା ପାଇଁ ପ Read ଼ |

jsDelivr

JsDelivr ରେ ଥିବା ଲୋକମାନେ ଦୟାକରି ବୁଟଷ୍ଟ୍ରାପ୍ ର CSS ଏବଂ JavaScript ପାଇଁ CDN ସମର୍ଥନ ପ୍ରଦାନ କରନ୍ତି | କେବଳ ଏହି jsDelivr ଲିଙ୍କଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Bower ସହିତ ସଂସ୍ଥାପନ କରନ୍ତୁ |

ଆପଣ ବୋଉର ବ୍ୟବହାର କରି ବୁଟଷ୍ଟ୍ରାପ୍ ର କମ୍, CSS, ଜାଭାସ୍କ୍ରିପ୍ଟ, ଏବଂ ଫଣ୍ଟ ସଂସ୍ଥାପନ ଏବଂ ପରିଚାଳନା କରିପାରିବେ :

bower install bootstrap

Npm ସହିତ ସଂସ୍ଥାପନ କରନ୍ତୁ |

ଆପଣ npm ବ୍ୟବହାର କରି ବୁଟଷ୍ଟ୍ରାପ୍ ମଧ୍ୟ ସଂସ୍ଥାପନ କରିପାରିବେ :

npm install bootstrap@3

require('bootstrap')ବୁଟଷ୍ଟ୍ରାପର ସମସ୍ତ jQuery ପ୍ଲଗଇନଗୁଡ଼ିକୁ jQuery ବସ୍ତୁ ଉପରେ ଲୋଡ୍ କରିବ | ମଡ୍ୟୁଲ୍ ନିଜେ bootstrapକିଛି ରପ୍ତାନି କରେ ନାହିଁ | /js/*.jsପ୍ୟାକେଜ୍ ର ଶୀର୍ଷ ସ୍ତରୀୟ ଡିରେକ୍ଟୋରୀରେ ଥିବା ଫାଇଲଗୁଡ଼ିକୁ ଲୋଡ୍ କରି ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ ର jQuery ପ୍ଲଗଇନ୍ ମାନୁଆଲ ଭାବରେ ଲୋଡ୍ କରିପାରିବେ |

package.jsonନିମ୍ନଲିଖିତ କିଗୁଡ଼ିକ ତଳେ ବୁଟଷ୍ଟ୍ରାପ୍ କିଛି ଅତିରିକ୍ତ ମେଟାଡାଟା ଧାରଣ କରିଥାଏ :

• less- ବୁଟଷ୍ଟ୍ରାପ୍ ର ମୁଖ୍ୟ କମ୍ ଉତ୍ସ ଫାଇଲ୍ ପାଇଁ ପଥ |
• style- ବୁଟଷ୍ଟ୍ରାପ୍ ର ଅଣ-ମାଇନିଫାଏଡ୍ CSS ପାଇଁ ପଥ ଯାହା ଡିଫଲ୍ଟ ସେଟିଂସମୂହ ବ୍ୟବହାର କରି ସଂକଳିତ ହୋଇଛି (କ custom ଣସି କଷ୍ଟମାଇଜେସନ୍ ନାହିଁ) |

ରଚନା ସହିତ ସଂସ୍ଥାପନ କରନ୍ତୁ |

ଆପଣ କମ୍ପୋଜର ବ୍ୟବହାର କରି ବୁଟଷ୍ଟ୍ରାପର କମ୍, CSS, ଜାଭାସ୍କ୍ରିପ୍ଟ, ଏବଂ ଫଣ୍ଟ ସଂସ୍ଥାପନ ଏବଂ ପରିଚାଳନା କରିପାରିବେ :

composer require twbs/bootstrap

କମ୍ / ସାସ୍ ପାଇଁ ଅଟୋଫ୍ରେଫିକ୍ସର୍ ଆବଶ୍ୟକ |

CSS ବିକ୍ରେତା ଉପସର୍ଗ ସହିତ ମୁକାବିଲା କରିବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ଅଟୋଫ୍ରେଫିକ୍ସର୍ ବ୍ୟବହାର କରେ | ଯଦି ଆପଣ ଏହାର କମ୍ / ସାସ୍ ଉତ୍ସରୁ ବୁଟଷ୍ଟ୍ରାପ୍ ସଂକଳନ କରୁଛନ୍ତି ଏବଂ ଆମର ଗ୍ରାଣ୍ଟଫାଇଲ୍ ବ୍ୟବହାର କରୁନାହାଁନ୍ତି, ତେବେ ଆପଣଙ୍କୁ ଅଟୋଫ୍ରେଫିକ୍ସର୍ କୁ ନିଜ ନିର୍ମାଣ ପ୍ରକ୍ରିୟାରେ ଏକତ୍ର କରିବାକୁ ପଡିବ | ଯଦି ଆପଣ ପୂର୍ବ ବୁଟଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର କରୁଛନ୍ତି କିମ୍ବା ଆମର ଗ୍ରାଣ୍ଟଫାଇଲ୍ ବ୍ୟବହାର କରୁଛନ୍ତି, ତେବେ ଆପଣଙ୍କୁ ଏଥିପାଇଁ ଚିନ୍ତା କରିବାର ଆବଶ୍ୟକତା ନାହିଁ କାରଣ ଅଟୋଫ୍ରେଫିକ୍ସର୍ ଆମର ଗ୍ରାଣ୍ଟଫାଇଲରେ ଏକୀଭୂତ ହୋଇସାରିଛି |

ଯାହା ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଦୁଇଟି ଫର୍ମରେ ଡାଉନଲୋଡ୍ ଯୋଗ୍ୟ, ଯେଉଁଥିରେ ଆପଣ ନିମ୍ନଲିଖିତ ଡିରେକ୍ଟୋରୀ ଏବଂ ଫାଇଲଗୁଡ଼ିକୁ ପାଇବେ, ଯୁକ୍ତିଯୁକ୍ତ ଭାବରେ ସାଧାରଣ ଉତ୍ସଗୁଡ଼ିକୁ ଗ୍ରୁପ୍ କରି ଉଭୟ ସଂକଳିତ ଏବଂ କ୍ଷୁଦ୍ର ପରିବର୍ତ୍ତନ ପ୍ରଦାନ କରିବେ |

ପୂର୍ବ ବୁଟଷ୍ଟ୍ରାପ୍ |

ଥରେ ଡାଉନଲୋଡ୍ ହୋଇଗଲେ, (ସଙ୍କଳିତ) ବୁଟଷ୍ଟ୍ରାପ୍ ର ଗଠନ ଦେଖିବାକୁ ସଙ୍କୋଚିତ ଫୋଲ୍ଡରକୁ ଅନ୍ଜାଇପ୍ କରନ୍ତୁ | ଆପଣ ଏହିପରି କିଛି ଦେଖିବେ:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ଏହା ହେଉଛି ସବୁଠାରୁ ମ basic ଳିକ ଫର୍ମ: ପ୍ରାୟ ଯେକ web ଣସି ୱେବ୍ ପ୍ରୋଜେକ୍ଟରେ ଶୀଘ୍ର ଡ୍ରପ୍ ଇନ୍ ବ୍ୟବହାର ପାଇଁ ସଠିକ୍ ଫାଇଲ୍ | ଆମେ ସଙ୍କଳିତ CSS ଏବଂ JS ( bootstrap.*), ଏବଂ ସଂକଳିତ ଏବଂ କ୍ଷୁଦ୍ର CSS ଏବଂ JS ( bootstrap.min.*) ପ୍ରଦାନ କରୁ | ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ରାଉଜରର ବିକାଶକାରୀ ଉପକରଣଗୁଡ଼ିକ ସହିତ ବ୍ୟବହାର ପାଇଁ CSS ଉତ୍ସ ମାନଚିତ୍ର ( bootstrap.*.map) ଉପଲବ୍ଧ | ବ ly କଳ୍ପିକ ବୁଟଷ୍ଟ୍ରାପ୍ ଥିମ୍ ପରି ଗ୍ଲାଇଫିକନ୍ସରୁ ଫଣ୍ଟଗୁଡିକ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି |

ବୁଟଷ୍ଟ୍ରାପ୍ ଉତ୍ସ କୋଡ୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ ଉତ୍ସ କୋଡ୍ ଡାଉନଲୋଡ୍ ଉତ୍ସ କମ୍, ଜାଭାସ୍କ୍ରିପ୍ଟ, ଏବଂ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ସହିତ ପୂର୍ବ କମ୍ପାଇଲ୍ CSS, ଜାଭାସ୍କ୍ରିପ୍ଟ, ଏବଂ ଫଣ୍ଟ ସମ୍ପତ୍ତି ଅନ୍ତର୍ଭୂକ୍ତ କରେ | ଅଧିକ ନିର୍ଦ୍ଦିଷ୍ଟ ଭାବରେ, ଏହା ନିମ୍ନଲିଖିତ ଏବଂ ଅଧିକ ଅନ୍ତର୍ଭୁକ୍ତ କରେ:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/ଆମର CSS , JS, js/ଏବଂ ଆଇକନ୍ ଫଣ୍ଟଗୁଡିକ ପାଇଁ fonts/ଯଥାକ୍ରମେ ଉତ୍ସ କୋଡ୍ ଅଟେ | ଉପରୋକ୍ତ dist/ପୂର୍ବ ଡାଉନଲୋଡ୍ ବିଭାଗରେ ତାଲିକାଭୁକ୍ତ ସମସ୍ତ ଫୋଲ୍ଡର୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ | ଆମର ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର ପାଇଁ docs/ଫୋଲ୍ଡର୍ ଉତ୍ସ କୋଡ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ | examples/ଏହା ବାହାରେ, ଅନ୍ୟ କ included ଣସି ଅନ୍ତର୍ଭୁକ୍ତ ଫାଇଲ୍ ପ୍ୟାକେଜ୍, ଲାଇସେନ୍ସ ସୂଚନା ଏବଂ ବିକାଶ ପାଇଁ ସମର୍ଥନ ପ୍ରଦାନ କରିଥାଏ |

CSS ଏବଂ JavaScript ସଂକଳନ କରିବା |

ଫ୍ରେମୱାର୍କ ସହିତ କାମ କରିବା ପାଇଁ ସୁବିଧାଜନକ ପଦ୍ଧତି ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ଏହାର ନିର୍ମାଣ ସିଷ୍ଟମ୍ ପାଇଁ ଗ୍ରଣ୍ଟ ବ୍ୟବହାର କରେ | ଆମେ କିପରି ଆମର କୋଡ୍ ସଂକଳନ, ପରୀକ୍ଷା ଚଲାଇବା, ଏବଂ ଅଧିକ |

ଗ୍ରାଣ୍ଟ ସଂସ୍ଥାପନ କରୁଛି |

ଗ୍ରାଣ୍ଟ ସଂସ୍ଥାପନ କରିବାକୁ, ଆପଣଙ୍କୁ ପ୍ରଥମେ node.js ଡାଉନଲୋଡ୍ ଏବଂ ସଂସ୍ଥାପନ କରିବାକୁ ପଡିବ (ଯାହା npm ଅନ୍ତର୍ଭୂକ୍ତ କରେ) | npm ନୋଡ୍ ପ୍ୟାକେଜ୍ ମଡ୍ୟୁଲ୍ ପାଇଁ ଛିଡା ହୋଇଛି ଏବଂ node.js ମାଧ୍ୟମରେ ବିକାଶ ନିର୍ଭରଶୀଳତା ପରିଚାଳନା କରିବାର ଏକ ଉପାୟ |

1. grunt-cliସହିତ ସର୍ବଭାରତୀୟ ସ୍ତରରେ ସଂସ୍ଥାପନ କରନ୍ତୁ npm install -g grunt-cli|
2. /bootstrap/ରୁଟ୍ ଡିରେକ୍ଟୋରୀକୁ ନେଭିଗେଟ୍ କରନ୍ତୁ , ତାପରେ ଚଲାନ୍ତୁ npm install| npm ଫାଇଲକୁ ଦେଖିବ package.jsonଏବଂ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ସେଠାରେ ତାଲିକାଭୁକ୍ତ ଆବଶ୍ୟକୀୟ ସ୍ଥାନୀୟ ନିର୍ଭରଶୀଳ ସଂସ୍ଥାପନ କରିବ |

ସମାପ୍ତ ହେବା ପରେ, ଆପଣ କମାଣ୍ଡ୍ ଲାଇନ୍ ରୁ ପ୍ରଦତ୍ତ ବିଭିନ୍ନ ଗ୍ରାଣ୍ଟ କମାଣ୍ଡ୍ ଚଲାଇବାକୁ ସମର୍ଥ ହେବେ |

ଉପଲବ୍ଧ Grunt ନିର୍ଦ୍ଦେଶଗୁଡ଼ିକ |

grunt dist(କେବଳ CSS ଏବଂ JavaScript ସଙ୍କଳନ କରନ୍ତୁ)

ସଙ୍କଳିତ /dist/ଏବଂ କ୍ଷୁଦ୍ର CSS ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ ଫାଇଲଗୁଡ଼ିକ ସହିତ ଡିରେକ୍ଟୋରୀକୁ ପୁନ ener ନିର୍ମାଣ କରେ | ଏକ ବୁଟଷ୍ଟ୍ରାପ୍ ଉପଭୋକ୍ତା ଭାବରେ, ଏହା ସାଧାରଣତ you ଆପଣ ଚାହୁଁଥିବା ନିର୍ଦ୍ଦେଶ |

grunt watch(ଦେଖନ୍ତୁ)

କମ୍ ଉତ୍ସ ଫାଇଲଗୁଡ଼ିକୁ ଦେଖେ ଏବଂ ଯେତେବେଳେ ତୁମେ ଏକ ପରିବର୍ତ୍ତନ ସଞ୍ଚୟ କର, ସ୍ୱୟଂଚାଳିତ ଭାବରେ ସେଗୁଡ଼ିକୁ CSS ରେ ପୁନ omp କମ୍ପାଇଲ୍ କରେ |

grunt test(ପରୀକ୍ଷା ଚଲାନ୍ତୁ)

JSHint ଚଲାଇଥାଏ ଏବଂ କର୍ମାଙ୍କୁ ଧନ୍ୟବାଦ ଦେଇ ପ୍ରକୃତ ବ୍ରାଉଜରରେ QUnit ପରୀକ୍ଷା ଚଲାଇଥାଏ |

grunt docs(ଡକସ୍ ସମ୍ପତ୍ତିଗୁଡିକ ନିର୍ମାଣ ଏବଂ ପରୀକ୍ଷା କରନ୍ତୁ)

CSS, ଜାଭାସ୍କ୍ରିପ୍ଟ, ଏବଂ ଅନ୍ୟାନ୍ୟ ସମ୍ପତ୍ତି ନିର୍ମାଣ ଏବଂ ପରୀକ୍ଷଣ କରେ ଯାହା ସ୍ଥାନୀୟ ଭାବରେ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଚଲାଇବା ସମୟରେ ବ୍ୟବହୃତ ହୁଏ bundle exec jekyll serve|

grunt(ସଂପୂର୍ଣ୍ଣ ଭାବରେ ସବୁକିଛି ନିର୍ମାଣ କରନ୍ତୁ ଏବଂ ପରୀକ୍ଷା ଚଲାନ୍ତୁ)

CSS ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟକୁ ସଂକଳନ ଏବଂ କ୍ଷୁଦ୍ର କରିଥାଏ, ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ୱେବସାଇଟ୍ ନିର୍ମାଣ କରେ, ଡକସ୍ ବିରୁଦ୍ଧରେ HTML5 ବ valid ଧତାକୁ ଚଲାଇଥାଏ, କଷ୍ଟମାଇଜର୍ ସମ୍ପତ୍ତି ପୁନ reg ନିର୍ମାଣ କରେ | ଜେକିଲ୍ ଆବଶ୍ୟକ କରେ | ସାଧାରଣତ only କେବଳ ଯଦି ଆପଣ ନିଜେ ବୁଟଷ୍ଟ୍ରାପ୍ ଉପରେ ହ୍ୟାକ୍ କରନ୍ତି |

ସମସ୍ୟା ନିବାଋଣ

ନିର୍ଭରଶୀଳତା ସଂସ୍ଥାପନ କିମ୍ବା ଗ୍ରାଣ୍ଟ କମାଣ୍ଡ ଚଲାଇବାରେ ଯଦି ଆପଣ ଅସୁବିଧାର ସମ୍ମୁଖୀନ ହୁଅନ୍ତି, ତେବେ ପ୍ରଥମେ /node_modules/npm ଦ୍ୱାରା ସୃଷ୍ଟି ହୋଇଥିବା ଡିରେକ୍ଟୋରୀକୁ ଡିଲିଟ୍ କରନ୍ତୁ | ତାପରେ, ପୁନର୍ବାର ଚଲାନ୍ତୁ npm install|

ମ Basic ଳିକ ଟେମ୍ପଲେଟ୍ |

ଏହି ମ basic ଳିକ HTML ଟେମ୍ପଲେଟ୍ ସହିତ ଆରମ୍ଭ କରନ୍ତୁ, କିମ୍ବା ଏହି ଉଦାହରଣଗୁଡ଼ିକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ | ଆମେ ଆଶା କରୁଛୁ ଆପଣ ଆମର ଟେମ୍ପଲେଟ୍ ଏବଂ ଉଦାହରଣଗୁଡିକ କଷ୍ଟୋମାଇଜ୍ କରିବେ, ସେଗୁଡିକୁ ଆପଣଙ୍କର ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ଅନୁକୂଳ କରିବେ |

ସର୍ବନିମ୍ନ ବୁଟଷ୍ଟ୍ରାପ୍ ଡକ୍ୟୁମେଣ୍ଟ୍ ସହିତ କାମ ଆରମ୍ଭ କରିବା ପାଇଁ ନିମ୍ନରେ HTML କପି କରନ୍ତୁ |

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

ଉଦାହରଣଗୁଡିକ

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଅନେକ ଉପାଦାନ ସହିତ ଉପରୋକ୍ତ ମ basic ଳିକ ଟେମ୍ପଲେଟ୍ ଉପରେ ନିର୍ମାଣ କରନ୍ତୁ | ଆପଣଙ୍କ ବ୍ୟକ୍ତିଗତ ପ୍ରୋଜେକ୍ଟର ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ବୁଟଷ୍ଟ୍ରାପ୍ କଷ୍ଟୋମାଇଜ୍ ଏବଂ ଆଡାପ୍ଟ୍ କରିବାକୁ ଆମେ ଆପଣଙ୍କୁ ଉତ୍ସାହିତ କରୁ |

ବୁଟଷ୍ଟ୍ରାପ ରେପୋଜିଟୋରୀ ଡାଉନଲୋଡ୍ କରି ନିମ୍ନରେ ଥିବା ପ୍ରତ୍ୟେକ ଉଦାହରଣ ପାଇଁ ଉତ୍ସ କୋଡ୍ ପାଆନ୍ତୁ | docs/examples/ଉଦାହରଣଗୁଡିକ ଡିରେକ୍ଟୋରୀରେ ମିଳିପାରିବ |

The ାଞ୍ଚା ବ୍ୟବହାର କରି |

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

ମ ics ଳିକ ବ୍ୟତୀତ ଆଉ କିଛି ନୁହେଁ: ଏକ ପାତ୍ର ସହିତ CSS ଏବଂ JavaScript ସଂକଳିତ |

ବୁଟଷ୍ଟ୍ରାପ୍ ଥିମ୍ |

ଏକ ଭିଜୁଆଲ୍ ବର୍ଦ୍ଧିତ ଅଭିଜ୍ଞତା ପାଇଁ ଇଚ୍ଛାଧୀନ ବୁଟଷ୍ଟ୍ରାପ୍ ଥିମ୍ ଲୋଡ୍ କରନ୍ତୁ |

ଗ୍ରୀଡ୍

ସମସ୍ତ ଚାରି ସ୍ତର, ବସା, ଏବଂ ଅଧିକ ସହିତ ଗ୍ରୀଡ୍ ଲେଆଉଟ୍ ର ଏକାଧିକ ଉଦାହରଣ |

ଜମ୍ବୋଟ୍ରନ୍ |

ଏକ ନାଭବାର୍ ଏବଂ କିଛି ମ basic ଳିକ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ ସହିତ ଜମ୍ବୋଟ୍ରନ୍ ଚାରିପାଖରେ ନିର୍ମାଣ କରନ୍ତୁ |

ସଂକୀର୍ଣ୍ଣ ଜମ୍ବୋଟ୍ରନ୍ |

ଡିଫଲ୍ଟ ପାତ୍ର ଏବଂ ଜମ୍ବୋଟ୍ରନ୍ ସଂକୀର୍ଣ୍ଣ କରି ଏକ ଅଧିକ କଷ୍ଟମ୍ ପୃଷ୍ଠା ନିର୍ମାଣ କରନ୍ତୁ |

କାର୍ଯ୍ୟରେ ନାଭବାର୍ |

ନାଭବାର୍ |

ସୁପର ମ basic ଳିକ ଟେମ୍ପଲେଟ୍ ଯାହା କିଛି ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁ ସହିତ ନାଭବାର୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |

ଷ୍ଟାଟିକ୍ ଟପ୍ ନାଭବାର୍ |

କିଛି ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁ ସହିତ ଏକ ଷ୍ଟାଟିକ୍ ଟପ୍ ନାଭବାର୍ ସହିତ ସୁପର ମ basic ଳିକ ଟେମ୍ପଲେଟ୍ |

ସ୍ଥିର ନାଭବାର୍ |

କିଛି ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁ ସହିତ ଏକ ସ୍ଥିର ଟପ୍ ନାଭବାର୍ ସହିତ ସୁପର ମ basic ଳିକ ଟେମ୍ପଲେଟ୍ |

କଷ୍ଟମ୍ ଉପାଦାନଗୁଡ଼ିକ |

ଆଚ୍ଛାଦନ କରନ୍ତୁ |

ସରଳ ଏବଂ ସୁନ୍ଦର ମୂଳପୃଷ୍ଠା ନିର୍ମାଣ ପାଇଁ ଏକ ପୃଷ୍ଠାର ଟେମ୍ପଲେଟ୍ |

କାରୁସେଲ |

ନାଭବାର୍ ଏବଂ କାରୁସେଲ୍ କଷ୍ଟୋମାଇଜ୍ କରନ୍ତୁ, ତାପରେ କିଛି ନୂତନ ଉପାଦାନ ଯୋଗ କରନ୍ତୁ |

ବ୍ଲଗ୍

କଷ୍ଟମ୍ ନେଭିଗେସନ୍, ହେଡର୍, ଏବଂ ଟାଇପ୍ ସହିତ ସରଳ ଦୁଇ ସ୍ତମ୍ଭ ବ୍ଲଗ୍ ଲେଆଉଟ୍ |

ଡ୍ୟାସବୋର୍ଡ |

ସ୍ଥିର ପାର୍ଶ୍ୱ ଦଣ୍ଡିକା ଏବଂ ନାଭବାର ସହିତ ଏକ ଆଡମିନି ଡ୍ୟାସବୋର୍ଡ ପାଇଁ ମ Basic ଳିକ ସଂରଚନା |

ସାଇନ୍-ଇନ୍ ପୃଷ୍ଠା |

ଫର୍ମରେ ଏକ ସରଳ ଚିହ୍ନ ପାଇଁ କଷ୍ଟମ୍ ଫର୍ମ ଲେଆଉଟ୍ ଏବଂ ଡିଜାଇନ୍ |

ଯଥାର୍ଥ ନାଭ |

ଯଥାର୍ଥ ଲିଙ୍କ୍ ସହିତ ଏକ କଷ୍ଟମ୍ ନାଭବାର୍ ସୃଷ୍ଟି କରନ୍ତୁ | ମୁଣ୍ଡ ଉପରକୁ! ସଫାରି ବନ୍ଧୁତ୍ୱପୂର୍ଣ୍ଣ ନୁହେଁ |

ଷ୍ଟିକି ଫୁଟର୍ |

ବିଷୟବସ୍ତୁ ଏହାଠାରୁ ଛୋଟ ହେଲେ ଭ୍ୟୁପୋର୍ଟର ତଳ ଭାଗରେ ଏକ ଫୁଟର୍ ସଂଲଗ୍ନ କରନ୍ତୁ |

ନାଭବାର୍ ସହିତ ଷ୍ଟିକି ଫୁଟର୍ |

ଉପରେ ଏକ ସ୍ଥିର ନାଭବାର୍ ସହିତ ଭ୍ୟୁପୋର୍ଟର ତଳ ଭାଗରେ ଏକ ଫୁଟର୍ ସଂଲଗ୍ନ କରନ୍ତୁ |

ପରୀକ୍ଷଣ |

ଅଣ-ପ୍ରତିକ୍ରିୟାଶୀଳ ବୁଟଷ୍ଟ୍ରାପ୍ |

ଆମର ଡକସ୍ ପ୍ରତି ବୁଟଷ୍ଟ୍ରାପ୍ ର ପ୍ରତିକ୍ରିୟାକୁ ସହଜରେ ଅକ୍ଷମ କରନ୍ତୁ |

ଅଫ୍ କାନଭାସ୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ବ୍ୟବହାର ପାଇଁ ଏକ ଟୋଗଲ୍ ଯୋଗ୍ୟ ଅଫ୍ କାନଭାସ୍ ନେଭିଗେସନ୍ ମେନୁ ନିର୍ମାଣ କରନ୍ତୁ |

ସାଧନଗୁଡ଼ିକ |

ବୁଟଲିଣ୍ଟ |

ବୁଟଲିଣ୍ଟ ହେଉଛି ଅଫିସିଆଲ୍ ବୁଟଷ୍ଟ୍ରାପ୍ HTML ଲିନଟର ଟୁଲ୍ | ଏହା ସ୍ୱୟଂଚାଳିତ ଭାବରେ ୱେବପୃଷ୍ଠାରେ ଅନେକ ସାଧାରଣ HTML ତ୍ରୁଟି ଯାଞ୍ଚ କରେ ଯାହା ବୁଟଷ୍ଟ୍ରାପକୁ ଏକ “ଭାନିଲା” ଉପାୟରେ ବ୍ୟବହାର କରୁଛି | ଭାନିଲା ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉପାଦାନ / ୱିଜେଟ୍ କିଛି ସଂରଚନା ସହିତ ଅନୁରୂପ DOM ର ଅଂଶ ଆବଶ୍ୟକ କରେ | ବୁଟଲିଣ୍ଟ ଯାଞ୍ଚ କରେ ଯେ ବୁଟଷ୍ଟ୍ରାପ ଉପାଦାନଗୁଡ଼ିକର ଉଦାହରଣଗୁଡ଼ିକ ସଠିକ୍ ଭାବରେ ସଂରକ୍ଷିତ HTML ଅଛି | ଆପଣଙ୍କର ବୁଟଷ୍ଟ୍ରାପ୍ ୱେବ୍ ଡେଭଲପମେଣ୍ଟ ଟୁଲ୍ ଚେନ୍ରେ ବୁଟଲିଣ୍ଟ ଯୋଡିବାକୁ ଚିନ୍ତା କରନ୍ତୁ ଯାହା ଦ୍ the ାରା କ mistakes ଣସି ସାଧାରଣ ତ୍ରୁଟି ଆପଣଙ୍କ ପ୍ରକଳ୍ପର ବିକାଶକୁ ମନ୍ଥର କରିବ ନାହିଁ |

ସମ୍ପ୍ରଦାୟ

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

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

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

ପ୍ରତିକ୍ରିୟାଶୀଳତାକୁ ଅକ୍ଷମ କରନ୍ତୁ |

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

ପୃଷ୍ଠା ପ୍ରତିକ୍ରିୟାଶୀଳତାକୁ ଅକ୍ଷମ କରିବାକୁ ପଦକ୍ଷେପ |

1. CSS ଡକସ୍<meta> ରେ ଉଲ୍ଲେଖ କରାଯାଇଥିବା ଭ୍ୟୁପୋର୍ଟକୁ ଛାଡ଼ିଦିଅ |
2. ପ୍ରତ୍ୟେକ ଓସାର ସହିତ ପ୍ରତ୍ୟେକ ଗ୍ରୀଡ୍ ସ୍ତର ପାଇଁ widthଅନ୍ ଉପରେ ନବଲିଖନ କରନ୍ତୁ , ଉଦାହରଣ ସ୍ୱରୂପ ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ଏହା ଡିଫଲ୍ଟ ବୁଟଷ୍ଟ୍ରାପ୍ CSS ପରେ ଆସେ | ଆପଣ ବ ally କଳ୍ପିକ ଭାବରେ ମିଡିଆ ଜିଜ୍ଞାସା କିମ୍ବା କିଛି ଚୟନକର୍ତ୍ତା-ଫୁ ସହିତ ଏଡ଼ାଇ ପାରିବେ |.containerwidth: 970px !important;!important
3. ଯଦି ନାଭବାର୍ ବ୍ୟବହାର କରୁଛନ୍ତି, ସମସ୍ତ ନାଭବାର୍ ଭୁଶୁଡ଼ିବା ଏବଂ ଆଚରଣ ବିସ୍ତାର କରିବା ଅପସାରଣ କରନ୍ତୁ |
4. ଗ୍ରୀଡ୍ ଲେଆଉଟ୍ .col-xs-*ପାଇଁ, ମଧ୍ୟମ / ବଡ଼ମାନଙ୍କ ସହିତ, କିମ୍ବା ସ୍ଥାନରେ କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ | ବ୍ୟସ୍ତ ହୁଅନ୍ତୁ ନାହିଁ, ଅତିରିକ୍ତ ରିଜୋଲ୍ୟୁସନ୍ ପାଇଁ ଅତିରିକ୍ତ ଛୋଟ ଡିଭାଇସ୍ ଗ୍ରୀଡ୍ ମାପକାଠି |

IE8 ପାଇଁ ତୁମେ ତଥାପି Respond.js ଆବଶ୍ୟକ କରିବ (ଯେହେତୁ ଆମର ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକ ସେଠାରେ ଅଛି ଏବଂ ପ୍ରକ୍ରିୟାକରଣ ଆବଶ୍ୟକ) | ଏହା ବୁଟଷ୍ଟ୍ରାପର “ମୋବାଇଲ୍ ସାଇଟ୍” ଦିଗଗୁଡ଼ିକୁ ଅକ୍ଷମ କରିଥାଏ |

ପ୍ରତିକ୍ରିୟାଶୀଳତା ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ଟେମ୍ପଲେଟ୍ |

ଆମେ ଏହି ପଦକ୍ଷେପଗୁଡ଼ିକୁ ଏକ ଉଦାହରଣରେ ପ୍ରୟୋଗ କରିଛୁ | କାର୍ଯ୍ୟକାରୀ ହୋଇଥିବା ନିର୍ଦ୍ଦିଷ୍ଟ ପରିବର୍ତ୍ତନଗୁଡିକ ଦେଖିବାକୁ ଏହାର ଉତ୍ସ କୋଡ୍ ପ Read ନ୍ତୁ |

ପ୍ରତିକ୍ରିୟାଶୀଳ ଉଦାହରଣ ଦେଖନ୍ତୁ |

ବ୍ରାଉଜର୍ ଏବଂ ଡିଭାଇସ୍ ସମର୍ଥନ |

ଅତ୍ୟାଧୁନିକ ଡେସ୍କଟପ୍ ଏବଂ ମୋବାଇଲ୍ ବ୍ରାଉଜର୍ରେ ସର୍ବୋତ୍ତମ କାର୍ଯ୍ୟ କରିବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ନିର୍ମିତ, ଅର୍ଥାତ୍ ପୁରାତନ ବ୍ରାଉଜର୍ଗୁଡ଼ିକ ଭିନ୍ନ ଭାବରେ ଷ୍ଟାଇଲ୍ ପ୍ରଦର୍ଶନ କରିପାରନ୍ତି, ଯଦିଓ ସମ୍ପୂର୍ଣ୍ଣ କାର୍ଯ୍ୟକ୍ଷମ, କିଛି ଉପାଦାନଗୁଡ଼ିକର ରେଣ୍ଡରିଂ |

ସମର୍ଥିତ ବ୍ରାଉଜର୍ |

ନିର୍ଦ୍ଦିଷ୍ଟ ଭାବରେ, ଆମେ ନିମ୍ନ ବ୍ରାଉଜର୍ ଏବଂ ପ୍ଲାଟଫର୍ମଗୁଡିକର ସର୍ବଶେଷ ସଂସ୍କରଣକୁ ସମର୍ଥନ କରୁ |

ବିକଳ୍ପ ବ୍ରାଉଜର୍ ଯାହା ୱେବ୍ କିଟ୍, ବ୍ଲିଙ୍କ୍, କିମ୍ବା ଗେକୋର ସର୍ବଶେଷ ସଂସ୍କରଣ ବ୍ୟବହାର କରେ, ସିଧାସଳଖ କିମ୍ବା ପ୍ଲାଟଫର୍ମର ୱେବ୍ ଭ୍ୟୁ API ମାଧ୍ୟମରେ ହେଉ, ସ୍ପଷ୍ଟ ଭାବରେ ସମର୍ଥିତ ନୁହେଁ | ଯଦିଓ, ବୁଟଷ୍ଟ୍ରାପ୍ (ଅଧିକାଂଶ କ୍ଷେତ୍ରରେ) ଏହି ବ୍ରାଉଜର୍ ଗୁଡିକରେ ସଠିକ୍ ଭାବରେ ପ୍ରଦର୍ଶନ ଏବଂ କାର୍ଯ୍ୟ କରିବା ଉଚିତ୍ | ଅଧିକ ନିର୍ଦ୍ଦିଷ୍ଟ ସମର୍ଥନ ସୂଚନା ନିମ୍ନରେ ପ୍ରଦାନ କରାଯାଇଛି |

ମୋବାଇଲ୍ ଡିଭାଇସ୍ |

ସାଧାରଣତ speaking କହିବାକୁ ଗଲେ, ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରତ୍ୟେକ ପ୍ରମୁଖ ପ୍ଲାଟଫର୍ମର ଡିଫଲ୍ଟ ବ୍ରାଉଜର୍ଗୁଡ଼ିକର ସର୍ବଶେଷ ସଂସ୍କରଣକୁ ସମର୍ଥନ କରେ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ପ୍ରକ୍ସି ବ୍ରାଉଜର୍ (ଯେପରିକି ଅପେରା ମିନି, ଅପେରା ମୋବାଇଲର ଟର୍ବୋ ମୋଡ୍, ୟୁସି ବ୍ରାଉଜର ମିନି, ଆମାଜନ ସିଲ୍କ) ସମର୍ଥିତ ନୁହେଁ |

ଡେସ୍କଟପ୍ ବ୍ରାଉଜର୍ |

ସେହିଭଳି, ଅଧିକାଂଶ ଡେସ୍କଟପ୍ ବ୍ରାଉଜରର ସର୍ବଶେଷ ସଂସ୍କରଣ ସମର୍ଥିତ |

ୱିଣ୍ଡୋଜ୍ ରେ, ଆମେ ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 8-11 କୁ ସମର୍ଥନ କରୁ |

ଫାୟାରଫକ୍ସ ପାଇଁ, ଅତ୍ୟାଧୁନିକ ସାଧାରଣ ସ୍ଥିର ପ୍ରକାଶନ ସହିତ, ଆମେ ଫାୟାରଫକ୍ସର ସର୍ବଶେଷ ବିସ୍ତାରିତ ସମର୍ଥନ ପ୍ରକାଶନ (ESR) ସଂସ୍କରଣକୁ ମଧ୍ୟ ସମର୍ଥନ କରୁ |

ଅଣଆନୁଷ୍ଠାନିକ ଭାବରେ, ବୁଟଷ୍ଟ୍ରାପ୍ ଲିନକ୍ସ ପାଇଁ କ୍ରୋମିୟମ୍ ଏବଂ କ୍ରୋମ୍, ଲିନକ୍ସ ପାଇଁ ଫାୟାରଫକ୍ସ, ଏବଂ ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର 7, ଏବଂ ମାଇକ୍ରୋସଫ୍ଟ ଏଜ୍ ଭଳି ଯଥେଷ୍ଟ ଆଚରଣ କରିବା ଉଚିତ, ଯଦିଓ ସେଗୁଡିକ ସରକାରୀ ଭାବରେ ସମର୍ଥିତ ନୁହେଁ |

କିଛି ବ୍ରାଉଜର୍ ବଗ୍ ର ଏକ ତାଲିକା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସହିତ ମୁକାବିଲା କରିବାକୁ ପଡିବ, ଆମର ୱାଲ୍ ଅଫ୍ ବ୍ରାଉଜର୍ ବଗ୍ ଦେଖନ୍ତୁ |

ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 8 ଏବଂ 9 |

ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 8 ଏବଂ 9 ମଧ୍ୟ ସମର୍ଥିତ, ତଥାପି, ଦୟାକରି ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ କିଛି CSS3 ଗୁଣ ଏବଂ HTML5 ଉପାଦାନଗୁଡିକ ଏହି ବ୍ରାଉଜର୍ ଦ୍ୱାରା ସମ୍ପୂର୍ଣ୍ଣ ଭାବରେ ସମର୍ଥିତ ନୁହେଁ | ଏହା ସହିତ, ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 8 ମିଡିଆ ଜିଜ୍ଞାସା ସମର୍ଥନ ସକ୍ଷମ କରିବାକୁ Respond.js ର ବ୍ୟବହାର ଆବଶ୍ୟକ କରେ |

ପରିଦର୍ଶନ ମୁଁ ବ୍ୟବହାର କରିପାରିବି ... CSS3 ଏବଂ HTML5 ବ features ଶିଷ୍ଟ୍ୟଗୁଡିକର ବ୍ରାଉଜର୍ ସମର୍ଥନ ବିଷୟରେ ବିବରଣୀ ପାଇଁ |

ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 8 ଏବଂ Respond.js |

ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 8 ପାଇଁ ଆପଣଙ୍କର ବିକାଶ ଏବଂ ଉତ୍ପାଦନ ପରିବେଶରେ Respond.js ବ୍ୟବହାର କରିବାବେଳେ ନିମ୍ନଲିଖିତ ଗୁମ୍ଫାଗୁଡ଼ିକରୁ ସାବଧାନ ରୁହନ୍ତୁ |

Respond.js ଏବଂ କ୍ରସ୍-ଡୋମେନ୍ CSS |

ଏକ ଭିନ୍ନ (ସବ୍) ଡୋମେନରେ ହୋଷ୍ଟ ହୋଇଥିବା CSS ସହିତ Respond.js ବ୍ୟବହାର କରିବା (ଉଦାହରଣ ସ୍ୱରୂପ, ଏକ CDN ରେ) କିଛି ଅତିରିକ୍ତ ସେଟଅପ୍ ଆବଶ୍ୟକ କରେ | ବିବରଣୀ ପାଇଁ Respond.js ଡକସ୍ ଦେଖନ୍ତୁ |

Respond.js ଏବଂfile://

ବ୍ରାଉଜର୍ ସୁରକ୍ଷା ନିୟମ ହେତୁ, Respond.js file://ପ୍ରୋଟୋକଲ୍ ମାଧ୍ୟମରେ ଦେଖାଯାଇଥିବା ପୃଷ୍ଠାଗୁଡ଼ିକ ସହିତ କାମ କରେ ନାହିଁ (ଯେପରିକି ଏକ ସ୍ଥାନୀୟ HTML ଫାଇଲ୍ ଖୋଲିବା ସମୟରେ) | IE8 ରେ ପ୍ରତିକ୍ରିୟାଶୀଳ ବ features ଶିଷ୍ଟ୍ୟଗୁଡିକ ପରୀକ୍ଷା କରିବାକୁ, HTTP (S) ଉପରେ ଆପଣଙ୍କର ପୃଷ୍ଠାଗୁଡ଼ିକୁ ଦେଖନ୍ତୁ | ବିବରଣୀ ପାଇଁ Respond.js ଡକସ୍ ଦେଖନ୍ତୁ |

Respond.js ଏବଂ@import

Respond.js CSS ସହିତ କାମ କରେ ନାହିଁ ଯାହା ମାଧ୍ୟମରେ ସୂଚିତ @import| ବିଶେଷ ଭାବରେ, କିଛି ଡ୍ରପାଲ୍ ବିନ୍ୟାସକରଣ ବ୍ୟବହାର କରିବାକୁ ଜଣାଶୁଣା @import| ବିବରଣୀ ପାଇଁ Respond.js ଡକସ୍ ଦେଖନ୍ତୁ |

ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 8 ଏବଂ ବକ୍ସ-ସାଇଜ୍ |

ସହିତ , କିମ୍ବା , box-sizing: border-box;ସହିତ ମିଳିତ ହେଲେ IE8 ସମ୍ପୂର୍ଣ୍ଣ ସମର୍ଥନ କରେ ନାହିଁ | ସେହି କାରଣ ପାଇଁ, v3.0.1 ପରି, ଆମେ ଆଉ s ରେ ବ୍ୟବହାର କରୁନାହୁଁ |min-widthmax-widthmin-heightmax-heightmax-width.container

ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 8 ଏବଂ @ ଫଣ୍ଟ୍-ଫେସ୍ |

@font-faceଯେତେବେଳେ ମିଳିତ ହୁଏ IE8 ସହିତ କିଛି ସମସ୍ୟା ଥାଏ :before| ବୁଟଷ୍ଟ୍ରାପ୍ ଏହାର ଗ୍ଲାଇଫିକନ୍ ସହିତ ସେହି ମିଶ୍ରଣକୁ ବ୍ୟବହାର କରେ | ଯଦି ଏକ ପୃଷ୍ଠା କ୍ୟାଚ୍ ହୋଇଛି, ଏବଂ ୱିଣ୍ଡୋ ଉପରେ ମାଉସ୍ ବିନା ଲୋଡ୍ ହୋଇଛି (ଅର୍ଥାତ୍ ସତେଜ ବଟନ୍ ଦବାନ୍ତୁ କିମ୍ବା ଏକ ଇଫ୍ରେମରେ କିଛି ଲୋଡ୍ କରନ୍ତୁ) ତେବେ ଫଣ୍ଟ ଲୋଡ୍ ହେବା ପୂର୍ବରୁ ପୃଷ୍ଠାଟି ପ୍ରଦର୍ଶିତ ହୁଏ | ପେଜ୍ (ଶରୀର) ଉପରେ ଘୁଞ୍ଚିବା ଦ୍ the ାରା କିଛି ଆଇକନ୍ ଦେଖାଯିବ ଏବଂ ଅବଶିଷ୍ଟ ଆଇକନ୍ ଉପରେ ଚଲାଇବା ମଧ୍ୟ ସେହିମାନଙ୍କୁ ଦେଖାଇବ | ବିବରଣୀ ପାଇଁ ଇସୁ # 13863 ଦେଖନ୍ତୁ |

IE ସୁସଙ୍ଗତ ମୋଡ୍ |

ପୁରୁଣା ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର ସୁସଙ୍ଗତ ମୋଡ୍ ରେ ବୁଟଷ୍ଟ୍ରାପ୍ ସମର୍ଥିତ ନୁହେଁ | ନିଶ୍ଚିତ କରିବାକୁ ଯେ ଆପଣ IE ପାଇଁ ସର୍ବଶେଷ ରେଣ୍ଡରିଂ ମୋଡ୍ ବ୍ୟବହାର କରୁଛନ୍ତି, <meta>ଆପଣଙ୍କ ପୃଷ୍ଠାରେ ଉପଯୁକ୍ତ ଟ୍ୟାଗ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

ତ୍ରୁଟି ନିବାରଣ ଉପକରଣଗୁଡ଼ିକୁ ଖୋଲି ଡକ୍ୟୁମେଣ୍ଟ୍ ମୋଡ୍ ନିଶ୍ଚିତ କରନ୍ତୁ: F12“ଡକ୍ୟୁମେଣ୍ଟ୍ ମୋଡ୍” ଦବାନ୍ତୁ ଏବଂ ଯାଞ୍ଚ କରନ୍ତୁ |

ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରରର ପ୍ରତ୍ୟେକ ସମର୍ଥିତ ସଂସ୍କରଣରେ ସର୍ବୋତ୍ତମ ରେଣ୍ଡରିଂ ସୁନିଶ୍ଚିତ କରିବାକୁ ଏହି ଟ୍ୟାଗ୍ ବୁଟଷ୍ଟ୍ରାପ୍ ର ସମସ୍ତ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣରେ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି |

ଅଧିକ ସୂଚନା ପାଇଁ ଏହି StackOverflow ପ୍ରଶ୍ନ ଦେଖନ୍ତୁ |

ୱିଣ୍ଡୋଜ୍ 8 ଏବଂ ୱିଣ୍ଡୋଜ୍ ଫୋନ୍ 8 ରେ ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 10 |

ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 10 ଡିଭାଇସ୍ ଓସାରକୁ ଭ୍ୟୁପୋର୍ଟ ପ୍ରସ୍ଥରୁ ଭିନ୍ନ କରେ ନାହିଁ , ଏବଂ ଏହିପରି ବୁଟଷ୍ଟ୍ରାପ୍ ର CSS ରେ ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକୁ ସଠିକ୍ ଭାବରେ ପ୍ରୟୋଗ କରେ ନାହିଁ | ସାଧାରଣତ you ଆପଣ ଏହାକୁ ଠିକ୍ କରିବାକୁ CSS ର ଏକ ଶୀଘ୍ର ସ୍ନିପେଟ୍ ଯୋଗ କରିବେ:

@-ms-viewport       { width: device-width; }

ତଥାପି, ଅପଡେଟ୍ 3 (ଛଡା GDR3) ଠାରୁ ପୁରୁଣା ୱିଣ୍ଡୋଜ୍ ଫୋନ୍ 8 ସଂସ୍କରଣ ଚଳାଉଥିବା ଡିଭାଇସ୍ ପାଇଁ ଏହା କାମ କରେ ନାହିଁ , କାରଣ ଏହା ଏହିପରି ଉପକରଣଗୁଡ଼ିକୁ ସଂକୀର୍ଣ୍ଣ “ଫୋନ୍” ଦୃଶ୍ୟ ପରିବର୍ତ୍ତେ ଏକ ଡେସ୍କଟପ୍ ଦୃଶ୍ୟ ଦେଖାଇଥାଏ | ଏହାର ସମାଧାନ ପାଇଁ, ବଗ୍ ଚାରିପାଖରେ କାମ କରିବା ପାଇଁ ଆପଣଙ୍କୁ ନିମ୍ନଲିଖିତ CSS ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ପଡିବ |

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

ଅଧିକ ସୂଚନା ଏବଂ ବ୍ୟବହାର ନିର୍ଦ୍ଦେଶାବଳୀ ପାଇଁ, ୱିଣ୍ଡୋଜ୍ ଫୋନ୍ 8 ଏବଂ ଡିଭାଇସ୍-ଓସାର ପ read ନ୍ତୁ |

ଏକ ହେଡ୍ ଅପ୍ ଭାବରେ, ଆମେ ଏହାକୁ ବୁଟଷ୍ଟ୍ରାପ୍ ର ସମସ୍ତ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଏକ ପ୍ରଦର୍ଶନ ଭାବରେ ଉଦାହରଣରେ ଅନ୍ତର୍ଭୁକ୍ତ କରୁ |

ସଫାରି ଶତକଡା ଗୋଲାକାର |

.col-*-1OS X ପାଇଁ v7.1 ପୂର୍ବରୁ ସଫାରିର ସଂସ୍କରଣର ରେଣ୍ଡରିଂ ଇଞ୍ଜିନ୍ ଏବଂ iOS v8.0 ପାଇଁ ସଫାରି ଆମ ଗ୍ରୀଡ୍ ଶ୍ରେଣୀରେ ବ୍ୟବହୃତ ଦଶମିକ ସ୍ଥାନ ସଂଖ୍ୟାରେ କିଛି ଅସୁବିଧା ଭୋଗୁଥିଲା | ତେଣୁ ଯଦି ଆପଣଙ୍କର 12 ଟି ବ୍ୟକ୍ତିଗତ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ ଅଛି, ଆପଣ ଲକ୍ଷ୍ୟ କରିବେ ଯେ ଅନ୍ୟ ସ୍ତମ୍ଭଗୁଡ଼ିକ ତୁଳନାରେ ସେଗୁଡ଼ିକ ସ୍ୱଳ୍ପ ଆସିଛି | ସଫାରି / ଆଇଓଏସ୍ ଅପଗ୍ରେଡ୍ କରିବା ବ୍ୟତୀତ, ୱାର୍କଆଉଟ୍ ପାଇଁ ଆପଣଙ୍କର କିଛି ବିକଳ୍ପ ଅଛି:

• .pull-rightହାର୍ଡ-ଡାହାଣ ଆଲାଇନ୍ମେଣ୍ଟ ପାଇବାକୁ ଆପଣଙ୍କର ଶେଷ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭରେ ଯୋଡନ୍ତୁ |
• ସଫାରି ପାଇଁ ଉପଯୁକ୍ତ ରାଉଣ୍ଡିଂ ପାଇବା ପାଇଁ ଆପଣଙ୍କର ଶତ ପ୍ରତିଶତକୁ ହସ୍ତକୃତ କରନ୍ତୁ (ପ୍ରଥମ ବିକଳ୍ପ ଅପେକ୍ଷା ଅଧିକ କଷ୍ଟକର)

ମୋଡାଲ୍, ନାଭାର୍, ଏବଂ ଭର୍ଚୁଆଲ୍ କୀବୋର୍ଡ୍ |

ଓଭରଫ୍ଲୋ ଏବଂ ସ୍କ୍ରୋଲିଂ |

overflow: hiddenଉପାଦାନ ପାଇଁ ସମର୍ଥନ <body>iOS ଏବଂ ଆଣ୍ଡ୍ରଏଡରେ ସୀମିତ ଅଟେ | ସେହି ଉଦ୍ଦେଶ୍ୟରେ, ଯେତେବେଳେ ଆପଣ ସେହି ଉପକରଣଗୁଡ଼ିକର ବ୍ରାଉଜରରେ ଏକ ମୋଡାଲର ଉପର କିମ୍ବା ତଳ ଅତୀତକୁ ସ୍କ୍ରୋଲ୍ କରନ୍ତି, <body>ବିଷୟବସ୍ତୁ ସ୍କ୍ରୋଲ୍ କରିବା ଆରମ୍ଭ କରିବ | Chrome ବଗ୍ # 175502 (Chrome v40 ରେ ସ୍ଥିର ହୋଇଛି) ଏବଂ ୱେବ୍ କିଟ୍ ବଗ୍ # 153852 ଦେଖନ୍ତୁ |

iOS ପାଠ୍ୟ କ୍ଷେତ୍ର ଏବଂ ସ୍କ୍ରୋଲିଂ |

IOS 9.3 ପରି, ଯେତେବେଳେ ଏକ ମୋଡାଲ୍ ଖୋଲା ଅଛି, ଯଦି ଏକ ସ୍କ୍ରୋଲ୍ ଅଙ୍ଗଭଙ୍ଗୀର ପ୍ରାରମ୍ଭିକ ସ୍ପର୍ଶ ଏକ ପାଠ୍ୟର ସୀମା ମଧ୍ୟରେ ଅଛି |<input>IOS 9.3 ଅନୁଯାୟୀ, ଯେତେବେଳେ ଏକ ମୋଡାଲ୍ ଖୋଲା ଅଛି, ଯଦି ଏକ ସ୍କ୍ରୋଲ୍ ଅଙ୍ଗଭଙ୍ଗୀର ପ୍ରାରମ୍ଭିକ ସ୍ପର୍ଶ ଏକ ପାଠ୍ୟ କିମ୍ବା a<textarea> , ମୋଡାଲ୍ ତଳେ ଥିବା <body>ବିଷୟବସ୍ତୁ ମୋଡାଲ୍ ପରିବର୍ତ୍ତେ ସ୍କ୍ରୋଲ୍ ହେବ | ୱେବ୍ କିଟ୍ ବଗ୍ # 153856 ଦେଖନ୍ତୁ |

ଭର୍ଚୁଆଲ୍ କୀବୋର୍ଡ୍ |

ଆହୁରି ମଧ୍ୟ, ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଯଦି ଆପଣ ଏକ ସ୍ଥିର ନାଭବାର୍ ବ୍ୟବହାର କରୁଛନ୍ତି କିମ୍ବା ଏକ ମୋଡାଲ୍ ମଧ୍ୟରେ ଇନପୁଟ୍ ବ୍ୟବହାର କରୁଛନ୍ତି, ତେବେ iOS ରେ ଏକ ରେଣ୍ଡରିଂ ବଗ୍ ଅଛି ଯାହା ଭର୍ଚୁଆଲ୍ କୀବୋର୍ଡ୍ ଟ୍ରିଗର୍ ହେବାବେଳେ ସ୍ଥିର ଉପାଦାନଗୁଡ଼ିକର ସ୍ଥିତିକୁ ଅପଡେଟ୍ କରେ ନାହିଁ | ଏହା ପାଇଁ କିଛି ୱାର୍କଆଉଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ ତୁମର ଉପାଦାନକୁ ରୂପାନ୍ତର କରିବା position: absoluteକିମ୍ବା ପୋଜିସନ୍ କୁ ମାନୁଆଲୀ ସଂଶୋଧନ କରିବାକୁ ଚେଷ୍ଟା କରିବା ପାଇଁ ଫୋକସରେ ଏକ ଟାଇମର୍ ଆହ୍ .ାନ କରିବା | ଏହା ବୁଟଷ୍ଟ୍ରାପ୍ ଦ୍ୱାରା ପରିଚାଳିତ ହୁଏ ନାହିଁ, ତେଣୁ ଆପଣଙ୍କ ଅନୁପ୍ରୟୋଗ ପାଇଁ କେଉଁ ସମାଧାନ ସର୍ବୋତ୍ତମ ତାହା ସ୍ଥିର କରିବା ଆପଣଙ୍କ ଉପରେ ନିର୍ଭର କରେ |

ନାଭବାର୍ ଡ୍ରପ୍ ଡାଉନ୍ |

.dropdown-backdropZ- ସୂଚକାଙ୍କ ଜଟିଳତା ହେତୁ ନାଭରେ iOS ରେ ଉପାଦାନ ବ୍ୟବହୃତ ହୁଏ ନାହିଁ | ଏହିପରି, ନାଭବାରରେ ଡ୍ରପଡାଉନ୍ ବନ୍ଦ କରିବାକୁ, ଆପଣଙ୍କୁ ସିଧାସଳଖ ଡ୍ରପଡାଉନ୍ ଉପାଦାନ (କିମ୍ବା ଅନ୍ୟ କ element ଣସି ଉପାଦାନ କ୍ଲିକ୍ କରିବାକୁ ପଡିବ ଯାହାକି iOS ରେ ଏକ କ୍ଲିକ୍ ଇଭେଣ୍ଟକୁ ଅଗ୍ନି ଦେବ | ) କ୍ଲିକ୍ କରିବାକୁ ପଡିବ |

ବ୍ରାଉଜର୍ ଜୁମିଙ୍ଗ୍ |

ପେଜ୍ ଜୁମିଙ୍ଗ୍ ଅବଶ୍ୟ ବୁଟଷ୍ଟ୍ରାପ୍ ଏବଂ ବାକି ୱେବରେ କିଛି ଉପାଦାନରେ କଳାକୃତି ଉପସ୍ଥାପନ କରିଥାଏ | ସମସ୍ୟା ଉପରେ ନିର୍ଭର କରି, ଆମେ ଏହାକୁ ସମାଧାନ କରିବାକୁ ସକ୍ଷମ ହୋଇପାରିବା (ପ୍ରଥମେ ଖୋଜ ଏବଂ ପରେ ଆବଶ୍ୟକ ହେଲେ ଏକ ସମସ୍ୟା ଖୋଲନ୍ତୁ) | ତଥାପି, ଆମେ ଏଗୁଡିକୁ ଅଣଦେଖା କରିବାକୁ ପ୍ରବୃତ୍ତି କରୁ କାରଣ ସେମାନଙ୍କର ପ୍ରାୟତ ha ହ୍ୟାକି ୱାର୍କଆଉଟ୍ ବ୍ୟତୀତ ଅନ୍ୟ କ direct ଣସି ପ୍ରତ୍ୟକ୍ଷ ସମାଧାନ ନଥାଏ |

ମୋବାଇଲରେ ଷ୍ଟିକି :hover/ |:focus

ଯଦିଓ ଅଧିକାଂଶ ଟଚସ୍କ୍ରିନରେ ପ୍ରକୃତ ହୋଭିଙ୍ଗ୍ ସମ୍ଭବ ନୁହେଁ, ଅଧିକାଂଶ ମୋବାଇଲ୍ ବ୍ରାଉଜର୍ ହୋଭର୍ ସମର୍ଥନକୁ ଅନୁକରଣ କରନ୍ତି ଏବଂ :hover“ଷ୍ଟିକି” କରନ୍ତି | ଅନ୍ୟ ଶବ୍ଦରେ, :hoverଏକ ଉପାଦାନକୁ ଟ୍ୟାପ୍ କରିବା ପରେ ଶ yles ଳୀ ପ୍ରୟୋଗ ଆରମ୍ଭ କରେ ଏବଂ ଉପଭୋକ୍ତା ଅନ୍ୟ କିଛି ଉପାଦାନ ଟ୍ୟାପ୍ କରିବା ପରେ କେବଳ ପ୍ରୟୋଗ ବନ୍ଦ କରିଦିଏ | ଏହାଦ୍ୱାରା ବୁଟଷ୍ଟ୍ରାପ୍ ର :hoverରାଜ୍ୟଗୁଡିକ ଏହିପରି ବ୍ରାଉଜର୍ ଗୁଡିକରେ ଅବାଞ୍ଛିତ ଭାବରେ “ଅଟକି” ହୋଇପାରେ | କେତେକ ମୋବାଇଲ୍ ବ୍ରାଉଜର୍ ମଧ୍ୟ :focusସମାନ ଭାବରେ ଷ୍ଟିକ୍ କରନ୍ତି | ଏହିପରି ଶ yles ଳୀଗୁଡ଼ିକୁ ସମ୍ପୁର୍ଣ୍ଣ ଭାବରେ ଅପସାରଣ କରିବା ବ୍ୟତୀତ ବର୍ତ୍ତମାନ ଏହି ସମସ୍ୟାଗୁଡ଼ିକ ପାଇଁ କ simple ଣସି ସରଳ କାର୍ଯ୍ୟ ନାହିଁ |

ମୁଦ୍ରଣ

କେତେକ ଆଧୁନିକ ବ୍ରାଉଜରରେ ମଧ୍ୟ ପ୍ରିଣ୍ଟିଙ୍ଗ୍ କ irk ତୁକିଆ ହୋଇପାରେ |

ବିଶେଷ ଭାବରେ, Chrome v32 ପରି ଏବଂ ମାର୍ଜିନ୍ ସେଟିଂସମୂହକୁ ଖାତିର ନକରି, ଏକ ୱେବପେଜ ପ୍ରିଣ୍ଟ କରିବା ସମୟରେ ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକର ସମାଧାନ କରିବା ସମୟରେ କ୍ରୋମ ଭ physical ତିକ କାଗଜ ଆକାରଠାରୁ ଯଥେଷ୍ଟ ସଂକୀର୍ଣ୍ଣ ବ୍ୟବହାର କରେ | ମୁଦ୍ରଣ କରିବା ସମୟରେ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଅତିରିକ୍ତ ଛୋଟ ଗ୍ରୀଡ୍ ଅପ୍ରତ୍ୟାଶିତ ଭାବରେ ସକ୍ରିୟ ହୋଇପାରେ | କିଛି ବିବରଣୀ ପାଇଁ ଇସୁ # 12078 ଏବଂ କ୍ରୋମ୍ ବଗ୍ # 273306 ଦେଖନ୍ତୁ | ପ୍ରସ୍ତାବିତ କାର୍ଯ୍ୟଧାରା:

• ଅତିରିକ୍ତ-ଛୋଟ ଗ୍ରୀଡ୍ କୁ ଆଲିଙ୍ଗନ କରନ୍ତୁ ଏବଂ ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ଆପଣଙ୍କର ପୃଷ୍ଠା ଏହା ତଳେ ଗ୍ରହଣୀୟ ଦେଖାଯାଉଛି |
• କମ୍ ଭେରିଏବଲ୍ ଗୁଡିକର ମୂଲ୍ୟ କଷ୍ଟୋମାଇଜ୍ କରନ୍ତୁ ଯାହା @screen-*ଦ୍ your ାରା ଆପଣଙ୍କର ପ୍ରିଣ୍ଟର୍ ପେପର ଅତିରିକ୍ତ-ଛୋଟ ଅପେକ୍ଷା ବଡ଼ ଭାବରେ ବିବେଚନା କରାଯାଏ |
• କେବଳ ପ୍ରିଣ୍ଟ ମିଡିଆ ପାଇଁ ଗ୍ରୀଡ୍ ସାଇଜ୍ ବ୍ରେକପଏଣ୍ଟ ପରିବର୍ତ୍ତନ କରିବାକୁ କଷ୍ଟମ୍ ମିଡିଆ ଜିଜ୍ଞାସା ଯୋଡନ୍ତୁ |

ଆହୁରି ମଧ୍ୟ, ସଫାରି v8.0 ପରି, ସ୍ଥିର-ଓସାର .containers ପ୍ରିଣ୍ଟ କରିବା ସମୟରେ ସଫାରିକୁ ଏକ ଅସାଧାରଣ ଛୋଟ ଫଣ୍ଟ ଆକାର ବ୍ୟବହାର କରିପାରେ | ଅଧିକ ବିବରଣୀ ପାଇଁ # 14868 ଏବଂ ୱେବ୍ କିଟ୍ ବଗ୍ # 138192 ଦେଖନ୍ତୁ | ଏଥିପାଇଁ ଗୋଟିଏ ସମ୍ଭାବ୍ୟ କାର୍ଯ୍ୟ ନିମ୍ନଲିଖିତ CSS ଯୋଗ କରୁଛି:

@media print {
  .container {
    width: auto;
  }
}

ଆଣ୍ଡ୍ରଏଡ୍ ଷ୍ଟକ୍ ବ୍ରାଉଜର୍ |

ବାକ୍ସ ବାହାରେ, ଆଣ୍ଡ୍ରଏଡ୍ 4.1 (ଏବଂ କିଛି ନୂତନ ରିଲିଜ୍ ମଧ୍ୟ ବୋଧହୁଏ) ବ୍ରାଉଜର୍ ଆପ୍ ସହିତ ଡିଫଲ୍ଟ ୱେବ୍ ବ୍ରାଉଜର୍ ଭାବରେ ପସନ୍ଦ କରେ (କ୍ରୋମ୍ ତୁଳନାରେ) | ଦୁର୍ଭାଗ୍ୟବଶତ।, ବ୍ରାଉଜର୍ ଆପରେ ସାଧାରଣତ CS CSS ସହିତ ଅନେକ ତ୍ରୁଟି ଏବଂ ଅସଙ୍ଗତି ଅଛି |

ମେନୁଗୁଡିକ ବାଛନ୍ତୁ |

ଉପାଦାନଗୁଡିକ ଉପରେ , ଆଣ୍ଡ୍ରଏଡ୍ ଷ୍ଟକ୍ ବ୍ରାଉଜର୍ ଯଦି ଏବଂ / କିମ୍ବା ପ୍ରୟୋଗ <select>ହୁଏ ତେବେ ପାର୍ଶ୍ୱ ନିୟନ୍ତ୍ରଣ ପ୍ରଦର୍ଶନ କରିବ ନାହିଁ | ( ସବିଶେଷ ତଥ୍ୟ ପାଇଁ ଏହି ଷ୍ଟାକ୍ ଓଭରଫ୍ଲୋ ପ୍ରଶ୍ନ ଦେଖନ୍ତୁ |) ଆପତ୍ତିଜନକ CSS ଅପସାରଣ କରିବାକୁ ଏବଂ ଆଣ୍ଡ୍ରଏଡ୍ ଷ୍ଟକ୍ ବ୍ରାଉଜରରେ ଏକ ଅଣସଂରକ୍ଷିତ ଉପାଦାନ ଭାବରେ ଉପସ୍ଥାପନ କରିବାକୁ ନିମ୍ନରେ କୋଡ୍ ର ସ୍ନିପେଟ୍ ବ୍ୟବହାର କରନ୍ତୁ | ୟୁଜର୍ ଏଜେଣ୍ଟ ସ୍ଫିଙ୍ଗ୍ କ୍ରୋମ୍, ସଫାରି ଏବଂ ମୋଜିଲା ବ୍ରାଉଜରରେ ହସ୍ତକ୍ଷେପକୁ ଏଡ଼ାଇଥାଏ |border-radiusborder<select>

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

ଏକ ଉଦାହରଣ ଦେଖିବାକୁ ଚାହୁଁଛନ୍ତି କି? ଏହି JS ବିନ୍ ଡେମୋ ଦେଖନ୍ତୁ |

ବ id ଧତାକାରୀ |

ପୁରୁଣା ଏବଂ ବଗି ବ୍ରାଉଜରକୁ ସର୍ବୋତ୍ତମ ସମ୍ଭାବ୍ୟ ଅଭିଜ୍ଞତା ପ୍ରଦାନ କରିବାକୁ, ବୁଟଷ୍ଟ୍ରାପ୍ ବିଭିନ୍ନ ସ୍ଥାନରେ CSS ବ୍ରାଉଜର୍ ହ୍ୟାକ୍ ବ୍ୟବହାର କରେ ଯାହାକି ବ୍ରାଉଜରରେ ଥିବା ତ୍ରୁଟିଗୁଡ଼ିକରେ କାର୍ଯ୍ୟ କରିବା ପାଇଁ ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ରାଉଜର୍ ସଂସ୍କରଣକୁ ସ୍ୱତନ୍ତ୍ର CSS କୁ ଟାର୍ଗେଟ୍ କରେ | ଏହି ହ୍ୟାକ୍ ଗୁଡିକ ବୋଧହୁଏ CSS ବ valid ଧତାକୁ ଅଭିଯୋଗ କରେ ଯେ ସେମାନେ ଅବ alid ଧ | ଦୁଇଟି ସ୍ଥାନରେ, ଆମେ ରକ୍ତସ୍ରାବ-ଧାର CSS ବ features ଶିଷ୍ଟ୍ୟଗୁଡିକ ମଧ୍ୟ ବ୍ୟବହାର କରୁ ଯାହା ଏପର୍ଯ୍ୟନ୍ତ ସମ୍ପୂର୍ଣ୍ଣ ମାନକ ହୋଇନାହିଁ, କିନ୍ତୁ ଏଗୁଡିକ କେବଳ ପ୍ରଗତିଶୀଳ ବୃଦ୍ଧି ପାଇଁ ବ୍ୟବହୃତ ହୁଏ |

ଏହି ବ ation ଧତା ଚେତାବନୀ ଅଭ୍ୟାସରେ କ matter ଣସି ଫରକ ପଡ଼େ ନାହିଁ କାରଣ ଆମର CSS ର ଅଣ-ହ୍ୟାକି ଅଂଶ ସମ୍ପୂର୍ଣ୍ଣ ବ valid ଧ ହୁଏ ଏବଂ ହ୍ୟାକି ଅଂଶଗୁଡିକ ଅଣ-ହ୍ୟାକି ଅଂଶର ସଠିକ୍ କାର୍ଯ୍ୟରେ ବାଧା ସୃଷ୍ଟି କରେ ନାହିଁ, ତେଣୁ ଆମେ କାହିଁକି ଏହି ନିର୍ଦ୍ଦିଷ୍ଟ ଚେତାବନୀକୁ ଅବହେଳା କରୁ |

ଆମର HTML ଡକଗୁଡ଼ିକରେ ମଧ୍ୟ କିଛି ନିର୍ଦ୍ଦିଷ୍ଟ ଫାୟାରଫକ୍ସ ବଗ୍ ପାଇଁ ଏକ ୱାର୍କଆଉଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ ହେତୁ କିଛି ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ଏବଂ ଅପରିପକ୍ୱ HTML ବ valid ଧତା ଚେତାବନୀ ଅଛି |

ତୃତୀୟ ପକ୍ଷ ସମର୍ଥନ |

ଯେତେବେଳେ ଆମେ ଆନୁଷ୍ଠାନିକ ଭାବରେ କ third ଣସି ତୃତୀୟ ପକ୍ଷ ପ୍ଲଗଇନ୍ କିମ୍ବା ଆଡ-ଅନକୁ ସମର୍ଥନ କରୁନାହୁଁ, ଆମେ ଆପଣଙ୍କର ପ୍ରୋଜେକ୍ଟରେ ସମ୍ଭାବ୍ୟ ସମସ୍ୟାକୁ ଏଡାଇବାରେ ସାହାଯ୍ୟ କରିବାକୁ କିଛି ଉପଯୋଗୀ ପରାମର୍ଶ ଦେଇଥାଉ |

ବାକ୍ସ-ଆକାର

ଗୁଗୁଲ୍ ମ୍ୟାପ୍ ଏବଂ ଗୁଗୁଲ୍ କଷ୍ଟମ୍ ସର୍ଚ୍ଚ ଇଞ୍ଜିନ୍ ସହିତ କିଛି ତୃତୀୟ ପକ୍ଷ ସଫ୍ଟୱେର୍, ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ବିବାଦ * { box-sizing: border-box; }, ଏକ ନିୟମ ଯାହା ଏହାକୁ paddingଏକ ଉପାଦାନର ଅନ୍ତିମ ଗଣିତ ଓସାରକୁ ପ୍ରଭାବିତ କରେ ନାହିଁ | ବକ୍ସ ମଡେଲ ଏବଂ CSS କ icks ଶଳରେ ଆକାର ବିଷୟରେ ଅଧିକ ଜାଣନ୍ତୁ |

ପ୍ରସଙ୍ଗ ଉପରେ ନିର୍ଭର କରି, ଆପଣ ଆବଶ୍ୟକ ଅନୁଯାୟୀ (ବିକଳ୍ପ 1) କୁ ନବଲିଖନ କରିପାରିବେ କିମ୍ବା ସମଗ୍ର ଅଞ୍ଚଳ ପାଇଁ ବାକ୍ସ-ଆକାରକୁ ପୁନ res ସେଟ୍ କରିପାରିବେ (ବିକଳ୍ପ 2) |

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

ଅଭିଗମ୍ୟତା

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସାଧାରଣ ୱେବ୍ ମାନାଙ୍କ ଅନୁସରଣ କରେ ଏବଂ - ସର୍ବନିମ୍ନ ଅତିରିକ୍ତ ପ୍ରୟାସ ସହିତ - ସାଇଟ୍ ବ୍ୟବହାର କରିବାକୁ ବ୍ୟବହାର କରାଯାଇପାରିବ ଯାହା AT ବ୍ୟବହାର କରୁଥିବା ଲୋକଙ୍କ ପାଇଁ ଉପଲବ୍ଧ ଅଟେ |

ନାଭିଗେସନ୍ ଛାଡିଦିଅ |

ଯଦି ଆପଣଙ୍କର ନାଭିଗେସନ୍ ଅନେକ ଲିଙ୍କ୍ ଧାରଣ କରେ ଏବଂ DOM ର ମୁଖ୍ୟ ବିଷୟବସ୍ତୁ ପୂର୍ବରୁ ଆସେ, Skip to main contentନାଭିଗେସନ୍ ପୂର୍ବରୁ ଏକ ଲିଙ୍କ୍ ଯୋଡନ୍ତୁ (ଏକ ସରଳ ବ୍ୟାଖ୍ୟା ପାଇଁ, ନାଭିଗେସନ୍ ଲିଙ୍କ୍କୁ ଏଡ଼ାଇ ଏହି A11Y ପ୍ରୋଜେକ୍ଟ ଆର୍ଟିକିଲ୍ ଦେଖନ୍ତୁ ) | କ୍ଲାସ୍ ବ୍ୟବହାର କରିବା .sr-onlyଦ୍ sk ାରା ସ୍କିପ୍ ଲିଙ୍କ୍ ଭିଜୁଆଲ୍ ଲୁଚାଇବ, ଏବଂ .sr-only-focusableଶ୍ରେଣୀ ନିଶ୍ଚିତ କରିବ ଯେ ଲିଙ୍କ୍ ଥରେ ଧ୍ୟାନ ଦିଆଯିବ (ଦୃଶ୍ୟମାନ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ) |

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

ନେଷ୍ଟେଡ୍ ହେଡିଙ୍ଗ୍ |

ହେଡିଙ୍ଗ୍ ହେଡିଙ୍ଗ୍ ( <h1>- <h6>), ତୁମର ପ୍ରାଥମିକ ଡକ୍ୟୁମେଣ୍ଟ୍ ହେଡର୍ ଏକ ହେବା ଉଚିତ <h1>| ପରବର୍ତ୍ତୀ ଶିରୋନାମାଗୁଡ଼ିକ ଯୁକ୍ତିଯୁକ୍ତ ବ୍ୟବହାର କରିବା ଉଚିତ <h2>- <h6>ଯେପରି ସ୍କ୍ରିନ୍ ପାଠକମାନେ ଆପଣଙ୍କ ପୃଷ୍ଠାଗୁଡ଼ିକ ପାଇଁ ବିଷୟବସ୍ତୁର ଏକ ସାରଣୀ ନିର୍ମାଣ କରିପାରିବେ |

HTML CodeSniffer ଏବଂ Penn State's AccessAbility ରେ ଅଧିକ ଜାଣନ୍ତୁ |

ରଙ୍ଗ ବିପରୀତ |

ସମ୍ପ୍ରତି, ବୁଟଷ୍ଟ୍ରାପରେ ଉପଲବ୍ଧ କିଛି ଡିଫଲ୍ଟ ରଙ୍ଗ ମିଶ୍ରଣ (ଯେପରିକି ବିଭିନ୍ନ ଷ୍ଟାଇଲ୍ ବଟନ୍ କ୍ଲାସ୍, ମ basic ଳିକ କୋଡ୍ ବ୍ଲକ୍ ପାଇଁ ବ୍ୟବହୃତ ରଙ୍ଗକୁ ହାଇଲାଇଟ୍ କରୁଥିବା କେତେକ କୋଡ୍ , .bg-primary ପ୍ରସଙ୍ଗ ପୃଷ୍ଠଭୂମି ପୃଷ୍ଠଭୂମି ସହାୟକ ଶ୍ରେଣୀ, ଏବଂ ଧଳା ପୃଷ୍ଠଭୂମିରେ ବ୍ୟବହୃତ ହେଲେ ଡିଫଲ୍ଟ ଲିଙ୍କ୍ ରଙ୍ଗ) | କମ୍ କଣ୍ଟ୍ରାସ୍ ଅନୁପାତ ଅଛି ( ସୁପାରିଶ କରାଯାଇଥିବା ଅନୁପାତ 4.5: 1 ) | ଏହା କମ୍ ଦୃଷ୍ଟିଶକ୍ତି ଥିବା କିମ୍ବା ରଙ୍ଗ ଅନ୍ଧ ଥିବା ଉପଭୋକ୍ତାମାନଙ୍କ ପାଇଁ ସମସ୍ୟା ସୃଷ୍ଟି କରିପାରେ | ଏହି ଡିଫଲ୍ଟ ରଙ୍ଗଗୁଡିକ ସେମାନଙ୍କର ବିପରୀତ ଏବଂ ଯଥାର୍ଥତା ବୃଦ୍ଧି କରିବାକୁ ପରିବର୍ତ୍ତିତ ହେବା ଆବଶ୍ୟକ ହୋଇପାରେ |

ଅତିରିକ୍ତ ଉତ୍ସଗୁଡ଼ିକ

• ଆକ୍ସେସିବିଲିଟି ସମସ୍ୟା ଚିହ୍ନଟ କରିବା ପାଇଁ "HTML କୋଡନିଫର୍" ବୁକମାର୍କଲେଟ୍ |
• କ୍ରୋମର ଆକ୍ସେସିବିଲିଟି ଡେଭଲପର୍ ଟୁଲ୍ସ ଏକ୍ସଟେନ୍ସନ୍ |
• ରଙ୍ଗ କଣ୍ଟ୍ରାସ ଆନାଲିଜର |
• A11Y ପ୍ରକଳ୍ପ |
• MDN ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ |

ଲାଇସେନ୍ସ ପ୍ରଶ୍ନ

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ MIT ଲାଇସେନ୍ସ ଅଧୀନରେ ପ୍ରକାଶିତ ହୋଇଛି ଏବଂ କପିରାଇଟ୍ 2019 ଟ୍ୱିଟର ଅଟେ | ଛୋଟ ଛୋଟ ଅଂଶରେ ସି iled ିଗଲେ, ଏହାକୁ ନିମ୍ନ ଅବସ୍ଥା ସହିତ ବର୍ଣ୍ଣନା କରାଯାଇପାରେ |

ଏହା ଆପଣଙ୍କୁ ଆବଶ୍ୟକ କରେ:

• ଲାଇସେନ୍ସ ଏବଂ କପିରାଇଟ୍ ବିଜ୍ଞପ୍ତିକୁ ବୁଟଷ୍ଟ୍ରାପ୍ ର CSS ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ ଫାଇଲରେ ଅନ୍ତର୍ଭୂକ୍ତ କର ଯେତେବେଳେ ତୁମେ ଏହାକୁ ନିଜ କାର୍ଯ୍ୟରେ ବ୍ୟବହାର କର |

ଏହା ଆପଣଙ୍କୁ ଅନୁମତି ଦିଏ:

• ବ୍ୟକ୍ତିଗତ, ବେସରକାରୀ, କମ୍ପାନୀ ଆଭ୍ୟନ୍ତରୀଣ କିମ୍ବା ବ୍ୟବସାୟିକ ଉଦ୍ଦେଶ୍ୟରେ ସମ୍ପୂର୍ଣ୍ଣ ଭାବରେ କିମ୍ବା ଆଂଶିକ ବୁଟଷ୍ଟ୍ରାପ୍ ଡାଉନଲୋଡ୍ ଏବଂ ବ୍ୟବହାର କରନ୍ତୁ |
• ଆପଣ ସୃଷ୍ଟି କରିଥିବା ପ୍ୟାକେଜ୍ କିମ୍ବା ବିତରଣରେ ବୁଟଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର କରନ୍ତୁ |
• ଉତ୍ସ କୋଡ୍ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |
• ଲାଇସେନ୍ସରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇନଥିବା ତୃତୀୟ ପକ୍ଷକୁ ବୁଟଷ୍ଟ୍ରାପ୍ ପରିବର୍ତ୍ତନ ଏବଂ ବିତରଣ କରିବାକୁ ଏକ ସବ୍ଲିସେନ୍ସ ପ୍ରଦାନ କରନ୍ତୁ |

ଏହା ଆପଣଙ୍କୁ ବାରଣ କରେ:

• ୱାରେଣ୍ଟି ବିନା ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରଦାନ କରାଯାଉଥିବାରୁ କ୍ଷତି ପାଇଁ ଲେଖକ ଏବଂ ଲାଇସେନ୍ସ ମାଲିକମାନଙ୍କୁ ଦାୟୀ କରନ୍ତୁ |
• ବୁଟଷ୍ଟ୍ରାପର ସୃଷ୍ଟିକର୍ତ୍ତା କିମ୍ବା କପିରାଇଟ୍ ଧାରକମାନଙ୍କୁ ଦାୟୀ କରନ୍ତୁ |
• ଉପଯୁକ୍ତ ଗୁଣ ବିନା ବୁଟଷ୍ଟ୍ରାପର ଯେକ piece ଣସି ଖଣ୍ଡକୁ ପୁନ istr ବଣ୍ଟନ କରନ୍ତୁ |
• Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
• Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question

It does not require you to:

• Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
• Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)

The full Bootstrap license is located in the project repository for more information.

Translations

Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.

• Bootstrap 中文文档 (Chinese)
• Bootstrap på Dansk (Danish)
• Bootstrap en Français (ଫରାସୀ)
• ବୁଟଷ୍ଟ୍ରାପ୍ auf Deutsch (ଜର୍ମାନ)
• ଇଟାଲୀୟୋରେ ବୁଟଷ୍ଟ୍ରାପ୍ (ଇଟାଲୀୟ)
• ବୁଟଷ୍ଟ୍ରାପ୍ 한국어 (କୋରିଆନ୍)
• ବୁଟଷ୍ଟ୍ରାପ୍ ଏମ୍ ପୋର୍ଟୁଗୁସ୍ ବ୍ରାସିଲ୍ (ବ୍ରାଜିଲ୍ ପର୍ତ୍ତୁଗୀଜ୍)
• ବୁଟଷ୍ଟ୍ରାପ୍ по-русски (Russian ଷ)
• Bootstrap en Español (ସ୍ପାନିସ୍)
• ତୁର୍କୀ ବୁଟଷ୍ଟ୍ରାପ୍ (ତୁର୍କୀ)
• ବୁଟଷ୍ଟ୍ରାପ୍ ukраїнською (ୟୁକ୍ରେନ୍)
• ବୁଟଷ୍ଟ୍ରାପ୍ bằng tiếng Việt (ଭିଏତନାମ)

ଆମେ ଅନୁବାଦଗୁଡିକ ଆୟୋଜନ କିମ୍ବା ହୋଷ୍ଟ କରିବାରେ ସାହାଯ୍ୟ କରୁନାହୁଁ, ଆମେ କେବଳ ସେମାନଙ୍କ ସହିତ ଲିଙ୍କ୍ କରୁ |

ଏକ ନୂତନ କିମ୍ବା ଉତ୍ତମ ଅନୁବାଦ ସମାପ୍ତ ହୋଇଛି? ଏହାକୁ ଆମ ତାଲିକାରେ ଯୋଡିବା ପାଇଁ ଏକ ଟାଣ ଅନୁରୋଧ ଖୋଲ |