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

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

ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରତିକ୍ରିୟାଶୀଳ 12-ସ୍ତମ୍ଭ ଗ୍ରୀଡ୍, ଲେଆଉଟ୍ ଏବଂ ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ନିର୍ମିତ |

ଗ୍ଲୋବାଲ୍ ସେଟିଙ୍ଗ୍ |

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

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

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

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

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

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

ଏହି ଶ yles ଳୀଗୁଡିକ scaffolding.less ମଧ୍ୟରେ ମିଳିପାରିବ |

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

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ 2 ସହିତ, ପୁରୁଣା ପୁନ et ସେଟ୍ ବ୍ଲକ୍ ନର୍ମାଲାଇଜ୍ । Css ସପକ୍ଷରେ ଛାଡି ଦିଆଯାଇଛି , ନିକୋଲାସ୍ ଗାଲାଗର୍ ଏବଂ ଜୋନାଥନ୍ ନେଲ୍ ଙ୍କ ଦ୍ୱାରା ପ୍ରସ୍ତୁତ ଏକ ପ୍ରୋଜେକ୍ଟ ଯାହା HTML5 ବଏଲେପ୍ଲେଟ୍ କୁ ମଧ୍ୟ ଶକ୍ତି ପ୍ରଦାନ କରିଥାଏ | ଯେତେବେଳେ ଆମେ ଆମର reset.less ମଧ୍ୟରେ ଅନେକ ନର୍ମାଲାଇଜ୍ ବ୍ୟବହାର କରୁ , ଆମେ ବୁଟଷ୍ଟ୍ରାପ୍ ପାଇଁ ବିଶେଷ ଭାବରେ କିଛି ଉପାଦାନ ଅପସାରଣ କରିଛୁ |

ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ |

ଲାଇଭ୍ ଗ୍ରୀଡ୍ ଉଦାହରଣ |

ଡିଫଲ୍ଟ ବୁଟଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ 12 ସ୍ତମ୍ଭ ବ୍ୟବହାର କରିଥାଏ, ପ୍ରତିକ୍ରିୟାଶୀଳ ବ features ଶିଷ୍ଟ୍ୟଗୁଡିକ ସକ୍ଷମ ନ ହୋଇ 940px ଚଉଡା ପାତ୍ର ପାଇଁ ତିଆରି କରିଥାଏ | ପ୍ରତିକ୍ରିୟାଶୀଳ CSS ଫାଇଲ୍ ସହିତ, ଗ୍ରୀଡ୍ ଆପଣଙ୍କ ଭ୍ୟୁପୋର୍ଟ ଉପରେ ନିର୍ଭର କରି 724px ଏବଂ 1170px ଚଉଡା ହେବାକୁ ଆଡାପ୍ଟ୍ଟ୍ ହୁଏ | 767px ଭ୍ୟୁପୋର୍ଟ୍ ତଳେ, ସ୍ତମ୍ଭଗୁଡ଼ିକ ତରଳ ହୋଇଯାଏ ଏବଂ ଭୂଲମ୍ବ ଭାବରେ ଷ୍ଟାକ ହୁଏ |

୧
୧
୧
୧
୧
୧
୧
୧
୧
୨
3
4
4
5
9

ମ Basic ଳିକ ଗ୍ରୀଡ୍ HTML |

ଏକ ସରଳ ଦୁଇଟି ସ୍ତମ୍ଭ ଲେଆଉଟ୍ ପାଇଁ, ଏକ ସୃଷ୍ଟି .rowକରନ୍ତୁ ଏବଂ ଉପଯୁକ୍ତ ସଂଖ୍ୟକ .span*ସ୍ତମ୍ଭ ଯୋଡନ୍ତୁ | ଯେହେତୁ ଏହା ଏକ 12-ସ୍ତମ୍ଭ ଗ୍ରୀଡ୍, ପ୍ରତ୍ୟେକଟି .span*ସେହି 12 ସ୍ତମ୍ଭର ସଂଖ୍ୟାକୁ ବିସ୍ତାର କରେ, ଏବଂ ପ୍ରତ୍ୟେକ ଧାଡି ପାଇଁ (କିମ୍ବା ପିତାମାତାଙ୍କ ସ୍ତମ୍ଭ ସଂଖ୍ୟା) ପାଇଁ ସର୍ବଦା 12 ପର୍ଯ୍ୟନ୍ତ ଯୋଗ କରିବା ଉଚିତ୍ |

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

ଏହି ଉଦାହରଣକୁ ପ୍ରଦାନ କରି, ଆମର .span4ସମୁଦାୟ .span812 ଟି ସ୍ତମ୍ଭ ଏବଂ ଏକ ସମ୍ପୂର୍ଣ୍ଣ ଧାଡି ତିଆରି କରିବା |

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

.offset*କ୍ଲାସ୍ ବ୍ୟବହାର କରି ସ୍ତମ୍ଭଗୁଡ଼ିକୁ ଡାହାଣକୁ ଘୁଞ୍ଚାନ୍ତୁ | ପ୍ରତ୍ୟେକ ଶ୍ରେଣୀ ଏକ ସ୍ତମ୍ଭର ବାମ ମାର୍ଜିନ୍ କୁ ଏକ ସମ୍ପୂର୍ଣ୍ଣ ସ୍ତମ୍ଭ ଦ୍ୱାରା ବ increases ାଇଥାଏ | ଉଦାହରଣ ସ୍ୱରୂପ, ଚାରୋଟି ସ୍ତମ୍ଭ ଉପରେ .offset4ଗତି କରେ |.span4

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

ବସା ସ୍ତମ୍ଭ

ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସହିତ ଆପଣଙ୍କର ବିଷୟବସ୍ତୁକୁ ବସା କରିବାକୁ, ଏକ ବିଦ୍ୟମାନ ସ୍ତମ୍ଭ ମଧ୍ୟରେ ଏକ ନୂତନ .rowଏବଂ ସ୍ତମ୍ଭର ସେଟ୍ ଯୋଡନ୍ତୁ | ନେଷ୍ଟେଡ୍ ଧାଡିଗୁଡ଼ିକ ସ୍ତମ୍ଭର ଏକ ସେଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ ଯାହାକି ଏହାର ପିତାମାତାଙ୍କ ସ୍ତମ୍ଭ ସଂଖ୍ୟାକୁ ଯୋଡିଥାଏ |.span*.span*

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

ଫ୍ଲୁଇଡ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ |

ଲାଇଭ୍ ଫ୍ଲୁଇଡ୍ ଗ୍ରୀଡ୍ ଉଦାହରଣ |

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

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

ମ Basic ଳିକ ତରଳ ଗ୍ରୀଡ୍ HTML |

ପରିବର୍ତ୍ତନ କରି ଯେକ any ଣସି ଧାଡି "ତରଳ" .rowକରନ୍ତୁ .row-fluid| ସ୍ତମ୍ଭ ଶ୍ରେଣୀଗୁଡ଼ିକ ସମାନ ରହିଥାଏ, ସ୍ଥିର ଏବଂ ତରଳ ଗ୍ରୀଡ୍ ମଧ୍ୟରେ ଫ୍ଲିପ୍ କରିବା ସହଜ କରିଥାଏ |

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

ଫ୍ଲୁଇଡ୍ ଅଫସେଟିଂ |

ସ୍ଥିର ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ଅଫସେଟିଂ ସହିତ ସମାନ ଭାବରେ କାର୍ଯ୍ୟ କରେ: .offset*ସେହି ସ୍ତମ୍ଭଗୁଡ଼ିକ ଦ୍ୱାରା ଅଫସେଟ୍ କରିବାକୁ ଯେକ any ଣସି ସ୍ତମ୍ଭରେ ଯୋଗ କର |

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

ତରଳ ବସା

ଫ୍ଲୁଇଡ୍ ଗ୍ରୀଡ୍ ବସାକୁ ଭିନ୍ନ ଭାବରେ ବ୍ୟବହାର କରେ: ପ୍ରତ୍ୟେକ ସ୍ତମ୍ଭର ସ୍ତମ୍ଭ 12 ସ୍ତମ୍ଭ ପର୍ଯ୍ୟନ୍ତ ଯୋଡିବା ଉଚିତ୍ | ଏହାର କାରଣ ହେଉଛି, ଫ୍ଲୁଇଡ୍ ଗ୍ରୀଡ୍ ପ୍ରସ୍ଥ ସେଟିଂ ପାଇଁ ପିକ୍ସେଲ ନୁହେଁ ଶତକଡ଼ା ବ୍ୟବହାର କରେ |

ତରଳ 12
ତରଳ 6
ତରଳ 6
ତରଳ 6
ତରଳ 6 
  1. <div ଶ୍ରେଣୀ = "ଧାଡି-ତରଳ" > | 
  2.   <div class = "span12" > | 
  3.     ତରଳ 12
  4.     <div ଶ୍ରେଣୀ = "ଧାଡି-ତରଳ" > | 
  5.       <div class = "span6" > | 
  6.         ତରଳ 6
  7.         <div ଶ୍ରେଣୀ = "ଧାଡି-ତରଳ" > | 
  8.           <div class = "span6" > ଫ୍ଲୁଇଡ୍ 6 </div> | 
  9.           <div class = "span6" > ଫ୍ଲୁଇଡ୍ 6 </div> | 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > ଫ୍ଲୁଇଡ୍ 6 </div> | 
  13.     </div>
  14.   </div>
  15. </div>

ଲେଆଉଟ୍

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

କେବଳ ଆବଶ୍ୟକ ସହିତ ଏକ ସାଧାରଣ ସ୍ଥିର-ମୋଟେଇ (ଏବଂ ବ ally କଳ୍ପିକ ଭାବରେ ପ୍ରତିକ୍ରିୟାଶୀଳ) ଲେଆଉଟ୍ ପ୍ରଦାନ କରେ <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>

ପ୍ରତିକ୍ରିୟାଶୀଳ ଡିଜାଇନ୍ |

ପ୍ରତିକ୍ରିୟାଶୀଳ ବ features ଶିଷ୍ଟ୍ୟଗୁଡିକ ସକ୍ଷମ କରିବା |

<head>ତୁମର ଡକ୍ୟୁମେଣ୍ଟରେ ସଠିକ୍ ମେଟା ଟ୍ୟାଗ୍ ଏବଂ ଅତିରିକ୍ତ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରି ତୁମର ପ୍ରୋଜେକ୍ଟରେ ପ୍ରତିକ୍ରିୟାଶୀଳ CSS ଟର୍ନ୍ ଅନ୍ କର | ଯଦି ଆପଣ କଷ୍ଟମାଇଜ୍ ପୃଷ୍ଠାରୁ ବୁଟଷ୍ଟ୍ରାପ୍ ସଂକଳନ କରିଛନ୍ତି, ତେବେ ଆପଣଙ୍କୁ କେବଳ ମେଟା ଟ୍ୟାଗ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ପଡିବ |

  1. <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" > |  
  2. <link href = "ସମ୍ପତ୍ତି / css / bootstrap-responsive.css" rel = "ଷ୍ଟାଇଲ୍ ଶୀଟ୍" >

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

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

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

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

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

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

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

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

ଲେବଲ୍ | ଲେଆଉଟ୍ ଓସାର | ସ୍ତମ୍ଭ ପ୍ରସ୍ଥ ଗୁଟର ମୋଟେଇ |
ବଡ଼ ପ୍ରଦର୍ଶନ 1200px ଏବଂ ଅପ୍ | 70px 30px
ଡିଫଲ୍ଟ | 980px ଏବଂ ଅପ୍ 60px 20px
ପୋର୍ଟ୍ରେଟ୍ ଟାବଲେଟ୍ | 768px ଏବଂ ତଦୁର୍ଦ୍ଧ | 42px 20px
ଟାବଲେଟକୁ ଫୋନ୍ | 767px ଏବଂ ତଳେ | ତରଳ ସ୍ତମ୍ଭ, କ fixed ଣସି ସ୍ଥିର ଓସାର ନାହିଁ |
ଫୋନ୍ | 480px ଏବଂ ତଳେ | ତରଳ ସ୍ତମ୍ଭ, କ fixed ଣସି ସ୍ଥିର ଓସାର ନାହିଁ | 
  1. / * ବଡ଼ ଡେସ୍କଟପ୍ * /
  2. @ ମିଡିଆ ( ମିନିଟ୍ - ମୋଟେଇ : 1200px ) { ... }     
  3.  
  4. / * ଲ୍ୟାଣ୍ଡସ୍କେପ୍ ଏବଂ ଡେସ୍କଟପ୍ ପାଇଁ ପୋଟ୍ରେଟ୍ ଟ୍ୟାବଲେଟ୍ * /
  5. @ ମିଡିଆ ( ମିନିଟ୍ - ମୋଟେଇ : 768px ) ଏବଂ ( ସର୍ବାଧିକ - ମୋଟେଇ : 979px ) { ... }        
  6.  
  7. / * ଟ୍ୟାବଲେଟ୍ ଚିତ୍ର କରିବାକୁ ଲ୍ୟାଣ୍ଡସ୍କେପ୍ ଫୋନ୍ * /
  8. @ ମିଡିଆ ( ସର୍ବାଧିକ - ମୋଟେଇ : 767px ) { ... }     
  9.  
  10. / * ଲ୍ୟାଣ୍ଡସ୍କେପ୍ ଫୋନ୍ ଏବଂ ଡାଉନ୍ * /
  11. @ ମିଡିଆ ( ସର୍ବାଧିକ - ମୋଟେଇ : 480px ) { ... }

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

ଦ୍ରୁତ ମୋବାଇଲ୍ ଅନୁକୂଳ ବିକାଶ ପାଇଁ, ଡିଭାଇସ୍ ଦ୍ୱାରା ବିଷୟବସ୍ତୁ ଦେଖାଇବା ଏବଂ ଲୁଚାଇବା ପାଇଁ ଏହି ଉପଯୋଗୀ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ | ନିମ୍ନରେ ଉପଲବ୍ଧ ଶ୍ରେଣୀର ଏକ ସାରଣୀ ଏବଂ ପ୍ରଦତ୍ତ ମିଡିଆ ଜିଜ୍ଞାସା ଲେଆଉଟ୍ ଉପରେ ସେମାନଙ୍କର ପ୍ରଭାବ (ଡିଭାଇସ୍ ଦ୍ୱାରା ଲେବଲ୍) | ସେଗୁଡିକ ଭିତରେ ମିଳିପାରିବ responsive.less|

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

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

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

ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପଯୋଗିତା ପରୀକ୍ଷା ମାମଲା |

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

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

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

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

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

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

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