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

ସ୍କାଫୋଲ୍ଡିଂ |

ବୁଟଷ୍ଟ୍ରାପ୍ ଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ 12-ସ୍ତମ୍ଭ ଗ୍ରୀଡ୍ ଉପରେ ନିର୍ମିତ | ସେହି ସିଷ୍ଟମ୍ ଉପରେ ଆଧାର କରି ଆମେ ସ୍ଥିର- ଏବଂ ଫ୍ଲୁଇଡ୍-ଓସାର ଲେଆଉଟ୍ ମଧ୍ୟ ଅନ୍ତର୍ଭୁକ୍ତ କରିଛୁ |

CSS ପୁନ et ସେଟ୍, ଟାଇପୋଗ୍ରାଫି ଏବଂ ଲିଙ୍କ୍ ପାଇଁ ଗ୍ଲୋବାଲ୍ ଶ yles ଳୀ |

HTML5 ଡକଟାଇପ୍ ଆବଶ୍ୟକ କରେ |

ବୁଟଷ୍ଟ୍ରାପ୍ HTML ଉପାଦାନ ଏବଂ CSS ଗୁଣଗୁଡିକର ବ୍ୟବହାର କରେ ଯାହା HTML5 ଡକ୍ଟାଇପ୍ ବ୍ୟବହାର ଆବଶ୍ୟକ କରେ | ତୁମର ପ୍ରୋଜେକ୍ଟରେ ପ୍ରତ୍ୟେକ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ପୃଷ୍ଠାର ଆରମ୍ଭରେ ଏହାକୁ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅ |

  1. <! DOCTYPE html>
  2. <html lang = "en" > | 
  3.   ...
  4. </html>

ଟାଇପୋଗ୍ରାଫି ଏବଂ ଲିଙ୍କ୍ |

Scaffolding.less ଫାଇଲ୍ ମଧ୍ୟରେ , ଆମେ ମ basic ଳିକ ଗ୍ଲୋବାଲ୍ ଡିସପ୍ଲେ, ଟାଇପୋଗ୍ରାଫି ଏବଂ ଲିଙ୍କ୍ ଶ yles ଳୀ ସେଟ୍ କରୁ | ନିର୍ଦ୍ଦିଷ୍ଟ ଭାବରେ, ଆମେ:

  • ଶରୀର ଉପରେ ମାର୍ଜିନ ହଟାନ୍ତୁ |
  • background-color: white;ଉପରେ ସେଟ୍ କରନ୍ତୁ |body
  • ଆମର ଟାଇପୋଗ୍ରାଫିକ୍ ଆଧାର ଭାବରେ ,, ଏବଂ ଗୁଣଗୁଡିକ @baseFontFamilyବ୍ୟବହାର @baseFontSizeକରନ୍ତୁ |@baseLineHeight
  • ମାଧ୍ୟମରେ ଗ୍ଲୋବାଲ୍ ଲିଙ୍କ୍ ରଙ୍ଗ ସେଟ୍ କରନ୍ତୁ @linkColorଏବଂ କେବଳ ଲିଙ୍କ୍ ଅଣ୍ଡରଲାଇନ୍ ପ୍ରୟୋଗ କରନ୍ତୁ |:hover

ନର୍ମାଲାଇଜ୍ ମାଧ୍ୟମରେ ପୁନ et ସେଟ୍ କରନ୍ତୁ |

ବୁଟଷ୍ଟ୍ରାପ୍ 2 ଅନୁଯାୟୀ, ନର୍ମାଲାଇଜ୍ । Css ରୁ ଉପାଦାନ ବ୍ୟବହାର କରିବାକୁ ପାରମ୍ପାରିକ CSS ପୁନ et ସେଟ୍ ବିକଶିତ ହୋଇଛି , ନିକୋଲାସ୍ ଗାଲାଗେର୍ ଙ୍କ ଦ୍ୱାରା ଏକ ପ୍ରୋଜେକ୍ଟ ଯାହା HTML5 ବଏଲେପ୍ଲେଟ୍ କୁ ମଧ୍ୟ ଶକ୍ତି ପ୍ରଦାନ କରିଥାଏ |

ନୂତନ ପୁନ et ସେଟ୍ ଏପର୍ଯ୍ୟନ୍ତ reset.less ରେ ମିଳିପାରିବ , କିନ୍ତୁ ଅନେକ ଉପାଦାନଗୁଡିକ କ୍ଷୁଦ୍ରତା ଏବଂ ସଠିକତା ପାଇଁ ଅପସାରିତ ହୋଇଛି |

ଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ ମୋଡ଼ ସହିତ ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ 12 ସ୍ତମ୍ଭ |

୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
4
4
4
4
8
6
6
12

ବୁଟଷ୍ଟ୍ରାପର ଅଂଶ ଭାବରେ ପ୍ରଦାନ କରାଯାଇଥିବା ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ହେଉଛି ଏକ 940px ଚଉଡା, 12 ସ୍ତମ୍ଭ ଗ୍ରୀଡ୍ |

ବିଭିନ୍ନ ଡିଭାଇସ୍ ଏବଂ ରେଜୋଲୁସନ ପାଇଁ ଏହାର ଚାରୋଟି ପ୍ରତିକ୍ରିୟାଶୀଳ ପରିବର୍ତ୍ତନ ମଧ୍ୟ ଅଛି: ଫୋନ୍, ଟାବଲେଟ୍ ପୋଟ୍ରେଟ୍, ଟାବଲେଟ୍ ଲ୍ୟାଣ୍ଡସ୍କେପ୍ ଏବଂ ଛୋଟ ଡେସ୍କଟପ୍ ଏବଂ ବଡ଼ ୱାଇଡ୍ ସ୍କ୍ରିନ୍ ଡେସ୍କଟପ୍ |

  1. <div ଶ୍ରେଣୀ = "ଧାଡି" > | 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

ଏଠାରେ ଦେଖାଯାଇଥିବା ପରି, ଦୁଇଟି “ସ୍ତମ୍ଭ” ସହିତ ଏକ ମ basic ଳିକ ଲେଆଉଟ୍ ସୃଷ୍ଟି କରାଯାଇପାରିବ, ପ୍ରତ୍ୟେକଟି ଆମର ଗ୍ରୀଡ୍ ସିଷ୍ଟମର ଏକ ଅଂଶ ଭାବରେ ବ୍ୟାଖ୍ୟା କରିଥିବା 12 ଟି ମୂଳ ସ୍ତମ୍ଭର ଅନେକ ସଂଖ୍ୟାକୁ ବିସ୍ତାର କରିଥାଏ |


ସ୍ତମ୍ଭଗୁଡିକ ଅଫସେଟ୍ କରିବା |

4
4 ଅଫସେଟ୍ 4
3 ଅଫସେଟ୍ 3
3 ଅଫସେଟ୍ 3
8 ଅଫସେଟ୍ 4 
  1. <div ଶ୍ରେଣୀ = "ଧାଡି" > | 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

ବସା ସ୍ତମ୍ଭ

ବୁଟଷ୍ଟ୍ରାପରେ ଷ୍ଟାଟିକ୍ (ଅଣ-ଫ୍ଲୁଇଡ୍) ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ସହିତ, ବସା ବାନ୍ଧିବା ସହଜ ଅଟେ | ତୁମର ବିଷୟବସ୍ତୁକୁ ବସା କରିବାକୁ, ଏକ ବିଦ୍ୟମାନ ସ୍ତମ୍ଭ ମଧ୍ୟରେ କେବଳ ଏକ ନୂତନ .rowଏବଂ ସ୍ତମ୍ଭର ସେଟ୍ ଯୋଡ |.span*.span*

ଉଦାହରଣ |

ନେଷ୍ଟେଡ୍ ଧାଡିଗୁଡ଼ିକ ସ୍ତମ୍ଭର ଏକ ସେଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ ଯାହାକି ଏହାର ପିତାମାତାଙ୍କ ସ୍ତମ୍ଭ ସଂଖ୍ୟାକୁ ଯୋଡିଥାଏ | ଉଦାହରଣ ସ୍ୱରୂପ, ଦୁଇଟି ନେଷ୍ଟେଡ୍ .span3ସ୍ତମ୍ଭ a ମଧ୍ୟରେ ରଖାଯିବା ଉଚିତ .span6|

ସ୍ତମ୍ଭର ସ୍ତର 1
ସ୍ତର 2
ସ୍ତର 2 
  1. <div ଶ୍ରେଣୀ = "ଧାଡି" > | 
  2.   <div class = "span12" > | 
  3.     ସ୍ତମ୍ଭର ସ୍ତର 1
  4.     <div ଶ୍ରେଣୀ = "ଧାଡି" > | 
  5.       <div class = "span6" > ସ୍ତର 2 </div> | 
  6.       <div class = "span6" > ସ୍ତର 2 </div> | 
  7.     </div>
  8.   </div>
  9. </div>

ଫ୍ଲୁଇଡ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ 12 ପ୍ରତିକ୍ରିୟାଶୀଳ, ଶତକଡ଼ା ସ୍ତମ୍ଭ |

ତରଳ ସ୍ତମ୍ଭ |

୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
4
4
4
4
8
6
6
12

ଶତକଡା, ପିକ୍ସେଲ ନୁହେଁ |

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

ତରଳ ଧାଡି |

.rowକେବଳ ପରିବର୍ତ୍ତନ କରି ଯେକ any ଣସି ଧାଡି ତରଳ ପ୍ରସ୍ତୁତ କରନ୍ତୁ .row-fluid| ସ୍ତମ୍ଭଗୁଡ଼ିକ ସମାନ ଭାବରେ ରହିଥାଏ, ଏହାକୁ ସ୍ଥିର ଏବଂ ଫ୍ଲୁଇଡ୍ ଲେଆଉଟ୍ ମଧ୍ୟରେ ଫ୍ଲପ୍ କରିବାକୁ ଅତି ସରଳ କରିଥାଏ |

ମାର୍କଅପ୍ |

  1. <div ଶ୍ରେଣୀ = "ଧାଡି-ତରଳ" > | 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

ତରଳ ବସା

ଫ୍ଲୁଇଡ୍ ଗ୍ରୀଡ୍ ସହିତ ବସା ବାନ୍ଧିବା ଟିକିଏ ଅଲଗା: ନଷ୍ଟ ହୋଇଥିବା ସ୍ତମ୍ଭ ସଂଖ୍ୟା ପିତାମାତାଙ୍କ ସହିତ ମେଳ ଖାଇବା ଆବଶ୍ୟକ ନାହିଁ | ଏହା ପରିବର୍ତ୍ତେ, ଆପଣଙ୍କର ସ୍ତମ୍ଭଗୁଡିକ ପ୍ରତ୍ୟେକ ସ୍ତରରେ ପୁନ res ସେଟ୍ ହୋଇଛି କାରଣ ପ୍ରତ୍ୟେକ ଧାଡି ପ୍ୟାରେଣ୍ଟ୍ ସ୍ତମ୍ଭର 100% ନେଇଥାଏ |

ତରଳ 12
ତରଳ 6
ତରଳ 6 
  1. <div ଶ୍ରେଣୀ = "ଧାଡି-ତରଳ" > | 
  2.   <div class = "span12" > | 
  3.     ସ୍ତମ୍ଭର ସ୍ତର 1
  4.     <div ଶ୍ରେଣୀ = "ଧାଡି-ତରଳ" > | 
  5.       <div class = "span6" > ସ୍ତର 2 </div> | 
  6.       <div class = "span6" > ସ୍ତର 2 </div> | 
  7.     </div>
  8.   </div>
  9. </div>

ଗ୍ରୀଡ୍ କଷ୍ଟମାଇଜେସନ୍ |

ଭେରିଏବଲ୍ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ବର୍ଣ୍ଣନା
@gridColumns 12 ସ୍ତମ୍ଭ ସଂଖ୍ୟା
@gridColumnWidth 60px ପ୍ରତ୍ୟେକ ସ୍ତମ୍ଭର ମୋଟେଇ |
@gridGutterWidth 20px ସ୍ତମ୍ଭ ମଧ୍ୟରେ ନକାରାତ୍ମକ ସ୍ଥାନ |

LESS ରେ ଭେରିଏବଲ୍ |

ବୁଟଷ୍ଟ୍ରାପରେ ନିର୍ମିତ ଡିଫଲ୍ଟ 940px ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ କଷ୍ଟୋମାଇଜ୍ କରିବା ପାଇଁ ମୁଠାଏ ଭେରିଏବଲ୍, ଉପରେ ଡକ୍ୟୁମେଣ୍ଟ୍ ହୋଇଛି | ଗ୍ରୀଡ୍ ପାଇଁ ସମସ୍ତ ଭେରିଏବଲ୍ ଗୁଡିକ ଭେରିଏବଲ୍.ଲେସ୍ ରେ ଗଚ୍ଛିତ |

କିପରି କଷ୍ଟମାଇଜ୍ କରିବେ |

ଗ୍ରୀଡ୍ ପରିବର୍ତ୍ତନ କରିବା ଅର୍ଥ ହେଉଛି ତିନୋଟି @grid*ଭେରିଏବଲ୍ ବଦଳାଇବା ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ର ପୁନ omp କମ୍ପାଇଲ୍ କରିବା | ଭେରିଏବଲ୍ ଗୁଡିକରେ ଗ୍ରୀଡ୍ ଭେରିଏବଲ୍ ପରିବର୍ତ୍ତନ କରନ୍ତୁ ଏବଂ ପୁନ omp କମ୍ପାଇଲ୍ କରିବାକୁ ଡକ୍ୟୁମେଣ୍ଟ୍ ହୋଇଥିବା ଚାରୋଟି ଉପାୟ ମଧ୍ୟରୁ ଗୋଟିଏ ବ୍ୟବହାର କରନ୍ତୁ | ଯଦି ଆପଣ ଅଧିକ ସ୍ତମ୍ଭ ଯୋଗ କରୁଛନ୍ତି, grid.less ରେ ଥିବା ଲୋକଙ୍କ ପାଇଁ CSS ଯୋଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

ପ୍ରତିକ୍ରିୟାଶୀଳ ରହିବା |

ଗ୍ରୀଡର କଷ୍ଟୋମାଇଜେସନ୍ କେବଳ ଡିଫଲ୍ଟ ସ୍ତରରେ କାମ କରେ, 940px ଗ୍ରୀଡ୍ | ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ପ୍ରତିକ୍ରିୟାଶୀଳ ଦିଗଗୁଡିକ ବଜାୟ ରଖିବା ପାଇଁ, ଆପଣଙ୍କୁ ପ୍ରତିକ୍ରିୟାଶୀଳ.ଲେସରେ ଗ୍ରୀଡ୍ କଷ୍ଟୋମାଇଜ୍ କରିବାକୁ ପଡିବ |

ୱେବପୃଷ୍ଠାଗୁଡ଼ିକ ସୃଷ୍ଟି କରିବା ପାଇଁ ଲେଆଉଟ୍ ମ Basic ଳିକ ଟେମ୍ପଲେଟ୍ |

ସ୍ଥିର ଲେଆଉଟ୍ |

ଡିଫଲ୍ଟ ଏବଂ ସରଳ 940px- ଚଉଡା, ଏକକ ଦ୍ୱାରା ପ୍ରଦତ୍ତ ଯେକ any ଣସି ୱେବସାଇଟ୍ କିମ୍ବା ପୃଷ୍ଠା ପାଇଁ କେନ୍ଦ୍ରିତ ଲେଆଉଟ୍ <div class="container">|

  1. <body>
  2.   <div class = "ପାତ୍ର" > | 
  3.     ...
  4.   </div>
  5. </body>

ଫ୍ଲୁଇଡ୍ ଲେଆଉଟ୍ |

<div class="container-fluid">ନମନୀୟ ପୃଷ୍ଠା ଗଠନ, ମିନି- ଏବଂ ସର୍ବାଧିକ-ମୋଟେଇ, ଏବଂ ଏକ ବାମ ପାର୍ଶ୍ୱ ପାର୍ଶ୍ୱ ଦଣ୍ଡିକା ପ୍ରଦାନ କରେ | ଆପ୍ ଏବଂ ଡକସ୍ ପାଇଁ ଏହା ବହୁତ ଭଲ |

  1. <div class = "ପାତ୍ର-ତରଳ" > | 
  2.   <div ଶ୍ରେଣୀ = "ଧାଡି-ତରଳ" > | 
  3.     <div class = "span2" > | 
  4.       <! - ସାଇଡ୍ ବାର୍ ବିଷୟବସ୍ତୁ -> |
  5.     </div>
  6.     <div class = "span10" > | 
  7.       <! - ଶରୀରର ବିଷୟବସ୍ତୁ ->
  8.     </div>
  9.   </div>
  10. </div>

ପ୍ରତିକ୍ରିୟାଶୀଳ ଡିଜାଇନ୍ ବିଭିନ୍ନ ଉପକରଣ ଏବଂ ରେଜୋଲୁସନ ପାଇଁ ମିଡିଆ ପ୍ରଶ୍ନଗୁଡିକ |

ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପକରଣଗୁଡ଼ିକ |

ସେମାନେ କଣ କରନ୍ତି |

ମିଡିଆ ଜିଜ୍ଞାସା ଅନେକ ସର୍ତ୍ତ - ଅନୁପାତ, ମୋଟେଇ, ପ୍ରଦର୍ଶନ ପ୍ରକାର ଇତ୍ୟାଦି ଉପରେ ଆଧାର କରି କଷ୍ଟମ୍ CSS ପାଇଁ ଅନୁମତି ଦିଏ - କିନ୍ତୁ ସାଧାରଣତ around ଚାରିପାଖରେ ଧ୍ୟାନ min-widthଦେଇଥାଏ max-width|

  • ଆମ ଗ୍ରୀଡରେ ସ୍ତମ୍ଭର ମୋଟେଇକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |
  • ଆବଶ୍ୟକ ସ୍ଥଳେ ଭାସିବା ପରିବର୍ତ୍ତେ ଉପାଦାନଗୁଡିକ ଷ୍ଟକ୍ କରନ୍ତୁ |
  • ଡିଭାଇସ୍ ପାଇଁ ଅଧିକ ଉପଯୁକ୍ତ ହେବା ପାଇଁ ହେଡିଙ୍ଗ୍ ଏବଂ ପାଠ୍ୟର ଆକାର ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

ମିଡିଆ ପ୍ରଶ୍ନଗୁଡିକ ଦାୟିତ୍ ibly ପୂର୍ଣ୍ଣ ଭାବରେ ବ୍ୟବହାର କରନ୍ତୁ ଏବଂ କେବଳ ଆପଣଙ୍କର ମୋବାଇଲ୍ ଦର୍ଶକଙ୍କ ପାଇଁ ଆରମ୍ଭ ଭାବରେ | ବୃହତ ପ୍ରକଳ୍ପଗୁଡିକ ପାଇଁ, ଉତ୍ସର୍ଗୀକୃତ କୋଡ୍ ଆଧାରଗୁଡ଼ିକୁ ବିଚାର କରନ୍ତୁ ଏବଂ ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକର ସ୍ତର ନୁହେଁ |

ସମର୍ଥିତ ଉପକରଣଗୁଡ଼ିକ |

ବିଭିନ୍ନ ଡିଭାଇସ୍ ଏବଂ ସ୍କ୍ରିନ୍ ରେଜୋଲୁସନରେ ଆପଣଙ୍କ ପ୍ରୋଜେକ୍ଟକୁ ଅଧିକ ଉପଯୁକ୍ତ କରିବାରେ ସାହାଯ୍ୟ କରିବାକୁ ବୁଟଷ୍ଟ୍ରାପ୍ ଗୋଟିଏ ଫାଇଲରେ ହାତଗଣତି ମିଡିଆ ଜିଜ୍ଞାସାକୁ ସମର୍ଥନ କରେ | ଏଠାରେ ଯାହା ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି:

ଲେବଲ୍ | ଲେଆଉଟ୍ ଓସାର | ସ୍ତମ୍ଭ ପ୍ରସ୍ଥ ଗୁଟର ମୋଟେଇ |
ସ୍ମାର୍ଟଫୋନ୍ | 480px ଏବଂ ତଳେ | ତରଳ ସ୍ତମ୍ଭ, କ fixed ଣସି ସ୍ଥିର ପ୍ରସ୍ଥ ନାହିଁ |
ଟାବଲେଟକୁ ସ୍ମାର୍ଟଫୋନ୍ | 767px ଏବଂ ତଳେ | ତରଳ ସ୍ତମ୍ଭ, କ fixed ଣସି ସ୍ଥିର ପ୍ରସ୍ଥ ନାହିଁ |
ପୋର୍ଟ୍ରେଟ୍ ଟାବଲେଟ୍ | 768px ଏବଂ ତଦୁର୍ଦ୍ଧ | 42px 20px
ଡିଫଲ୍ଟ | 980px ଏବଂ ଅପ୍ 60px 20px
ବଡ଼ ପ୍ରଦର୍ଶନ 1200px ଏବଂ ଅପ୍ | 70px 30px

ମେଟା ଟ୍ୟାଗ୍ ଆବଶ୍ୟକ କରେ |

ଡିଭାଇସ୍ ଗୁଡିକ ପ୍ରତିକ୍ରିୟାଶୀଳ ପୃଷ୍ଠାଗୁଡ଼ିକୁ ସଠିକ୍ ଭାବରେ ପ୍ରଦର୍ଶନ କରିବାକୁ ନିଶ୍ଚିତ କରିବାକୁ, ଭ୍ୟୁପୋର୍ଟ ମେଟା ଟ୍ୟାଗ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ |

  1. <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" > |

ମିଡିଆ ପ୍ରଶ୍ନଗୁଡିକ ବ୍ୟବହାର କରି |

ବୁଟଷ୍ଟ୍ରାପ୍ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏହି ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକୁ ଅନ୍ତର୍ଭୂକ୍ତ କରେ ନାହିଁ, କିନ୍ତୁ ସେଗୁଡ଼ିକୁ ବୁ understanding ିବା ଏବଂ ଯୋଡିବା ଅତି ସହଜ ଏବଂ ସର୍ବନିମ୍ନ ସେଟଅପ୍ ଆବଶ୍ୟକ କରେ | ବୁଟଷ୍ଟ୍ରାପର ପ୍ରତିକ୍ରିୟାଶୀଳ ବ features ଶିଷ୍ଟ୍ୟ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ପାଇଁ ଆପଣଙ୍କର କିଛି ବିକଳ୍ପ ଅଛି:

  1. ସଙ୍କଳିତ ପ୍ରତିକ୍ରିୟାଶୀଳ ସଂସ୍କରଣ, bootstrap-responsive.css ବ୍ୟବହାର କରନ୍ତୁ |
  2. @Import "responsive.less" ଯୋଡନ୍ତୁ ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ପୁନ omp କମ୍ପାଇଲ୍ କରନ୍ତୁ |
  3. ଏକ ପୃଥକ ଫାଇଲ୍ ଭାବରେ ପ୍ରତିକ୍ରିୟାଶୀଳ ପରିବର୍ତ୍ତନ କରନ୍ତୁ ଏବଂ ପୁନ omp କମ୍ପାଇଲ୍ କରନ୍ତୁ |

କାହିଁକି କେବଳ ଏହାକୁ ଅନ୍ତର୍ଭୁକ୍ତ କରିବ ନାହିଁ? ସତ କହିବାକୁ ଗଲେ ସବୁକିଛି ପ୍ରତିକ୍ରିୟାଶୀଳ ହେବା ଆବଶ୍ୟକ ନୁହେଁ | ଏହି ବ feature ଶିଷ୍ଟ୍ୟ ଅପସାରଣ କରିବାକୁ ବିକାଶକାରୀଙ୍କୁ ଉତ୍ସାହିତ କରିବା ପରିବର୍ତ୍ତେ, ଆମେ ଏହାକୁ ସକ୍ଷମ କରିବାକୁ ସର୍ବୋତ୍ତମ ବୋଲି ଭାବୁ |

  1.   // ଲ୍ୟାଣ୍ଡସ୍କେପ୍ ଫୋନ୍ ଏବଂ ଡାଉନ୍ |
  2.   @ ମିଡିଆ ( ସର୍ବାଧିକ - ମୋଟେଇ : 480px ) { ... }     
  3.  
  4.   // ଟ୍ୟାବଲେଟ୍ ଚିତ୍ର କରିବାକୁ ଲ୍ୟାଣ୍ଡସ୍କେପ୍ ଫୋନ୍ |
  5.   @ ମିଡିଆ ( ସର୍ବାଧିକ - ମୋଟେଇ : 767px ) { ... }     
  6.  
  7.   // ଲ୍ୟାଣ୍ଡସ୍କେପ୍ ଏବଂ ଡେସ୍କଟପ୍ ପାଇଁ ପୋଟ୍ରେଟ୍ ଟ୍ୟାବଲେଟ୍ |
  8.   @ ମିଡିଆ ( ମିନିଟ୍ - ମୋଟେଇ : 768px ) ଏବଂ ( ସର୍ବାଧିକ - ମୋଟେଇ : 979px ) { ... }        
  9.  
  10.   // ବଡ଼ ଡେସ୍କଟପ୍ |
  11.   @ ମିଡିଆ ( ମିନିଟ୍ - ମୋଟେଇ : 1200px ) { ... }

ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପଯୋଗୀ ଶ୍ରେଣୀଗୁଡିକ |

ସେମାନେ କଣ

ଦ୍ରୁତ ମୋବାଇଲ୍ ଅନୁକୂଳ ବିକାଶ ପାଇଁ, ଡିଭାଇସ୍ ଦ୍ୱାରା ବିଷୟବସ୍ତୁ ଦେଖାଇବା ଏବଂ ଲୁଚାଇବା ପାଇଁ ଏହି ମ basic ଳିକ ଉପଯୋଗୀ ଶ୍ରେଣୀଗୁଡ଼ିକୁ ବ୍ୟବହାର କରନ୍ତୁ |

କେତେବେଳେ ବ୍ୟବହାର କରିବେ |

ଏକ ସୀମିତ ଆଧାରରେ ବ୍ୟବହାର କରନ୍ତୁ ଏବଂ ସମାନ ସାଇଟର ସମ୍ପୂର୍ଣ୍ଣ ଭିନ୍ନ ସଂସ୍କରଣ ସୃଷ୍ଟି କରିବା ଠାରୁ ଦୂରେଇ ରୁହନ୍ତୁ | ଏହା ପରିବର୍ତ୍ତେ, ପ୍ରତ୍ୟେକ ଉପକରଣର ଉପସ୍ଥାପନାକୁ ପୂର୍ଣ୍ଣ କରିବା ପାଇଁ ସେମାନଙ୍କୁ ବ୍ୟବହାର କରନ୍ତୁ |

ଉଦାହରଣ ସ୍ୱରୂପ, ଆପଣ <select>ମୋବାଇଲ୍ ଲେଆଉଟ୍ ରେ ନାଭ୍ ପାଇଁ ଏକ ଉପାଦାନ ଦେଖାଇ ପାରନ୍ତି, କିନ୍ତୁ ଟାବଲେଟ୍ କିମ୍ବା ଡେସ୍କଟପ୍ ଉପରେ ନୁହେଁ |

ସମର୍ଥନ କ୍ଲାସ୍ |

ଏଠାରେ ଦେଖାଯାଇଥିବା ଶ୍ରେଣୀର ଏକ ସାରଣୀ ଏବଂ ଆମେ ଦିଆଯାଇଥିବା ମିଡିଆ ଜିଜ୍ଞାସା ଲେଆଉଟ୍ ଉପରେ ଏହାର ପ୍ରଭାବ (ଡିଭାଇସ୍ ଦ୍ୱାରା ଲେବଲ୍) | ସେଗୁଡିକ ଭିତରେ ମିଳିପାରିବ responsive.less|

କ୍ଲାସ୍ ଫୋନ୍ |480px ଏବଂ ତଳେ | ଟାବଲେଟ୍ |767px ଏବଂ ତଳେ | ଡେସ୍କଟପ୍768px ଏବଂ ତଦୁର୍ଦ୍ଧ |
.visible-phone ଦୃଶ୍ୟମାନ |
.visible-tablet ଦୃଶ୍ୟମାନ |
.visible-desktop ଦୃଶ୍ୟମାନ |
.hidden-phone ଦୃଶ୍ୟମାନ | ଦୃଶ୍ୟମାନ |
.hidden-tablet ଦୃଶ୍ୟମାନ | ଦୃଶ୍ୟମାନ |
.hidden-desktop ଦୃଶ୍ୟମାନ | ଦୃଶ୍ୟମାନ |

ପରୀକ୍ଷା ମାମଲା

ଉପରୋକ୍ତ ଶ୍ରେଣୀଗୁଡିକ ପରୀକ୍ଷା କରିବାକୁ ଆପଣଙ୍କର ବ୍ରାଉଜର୍ ର ଆକାର ପରିବର୍ତ୍ତନ କରନ୍ତୁ କିମ୍ବା ବିଭିନ୍ନ ଉପକରଣରେ ଲୋଡ୍ କରନ୍ତୁ |

ଉପରେ ଦୃଶ୍ୟମାନ ...

ସବୁଜ ଚେକମାର୍କ ସୂଚାଇଥାଏ ଯେ ତୁମର ସାମ୍ପ୍ରତିକ ଦୃଶ୍ୟରେ ଶ୍ରେଣୀ ଦୃଶ୍ୟମାନ ହେଉଛି |

  • ଫୋନ୍ |✔ ଫୋନ୍
  • ଟାବଲେଟ୍ |✔ ଟାବଲେଟ୍ |
  • ଡେସ୍କଟପ୍✔ ଡେସ୍କଟପ୍

ଲୁକ୍କାୟିତ ...

ଏଠାରେ, ସବୁଜ ଚେକମାର୍କ ସୂଚାଇଥାଏ ଯେ ଶ୍ରେଣୀ ତୁମର ସାମ୍ପ୍ରତିକ ଦୃଶ୍ୟରେ ଲୁକ୍କାୟିତ |

  • ଫୋନ୍ |✔ ଫୋନ୍
  • ଟାବଲେଟ୍ |✔ ଟାବଲେଟ୍ |
  • ଡେସ୍କଟପ୍✔ ଡେସ୍କଟପ୍