ସ୍କାଫୋଲ୍ଡିଂ · ବୁଟଷ୍ଟ୍ରାପ୍

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

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

<! DOCTYPE html>
<html lang = "en" > | 
  ...
</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 ଭ୍ୟୁପୋର୍ଟ୍ସ ତଳେ, ସ୍ତମ୍ଭଗୁଡ଼ିକ ତରଳ ହୋଇଯାଏ ଏବଂ ଭୂଲମ୍ବ ଭାବରେ ଷ୍ଟାକ ହୁଏ |

୧

୨

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

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

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

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

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

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

3 ଅଫସେଟ୍ 2

3 ଅଫସେଟ୍ 1

3 ଅଫସେଟ୍ 2

6 ଅଫସେଟ୍ 3

<div ଶ୍ରେଣୀ = "ଧାଡି" > | 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

ବସା ସ୍ତମ୍ଭ

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

ସ୍ତର 1 ସ୍ତମ୍ଭ

ସ୍ତର 2

<div ଶ୍ରେଣୀ = "ଧାଡି" > | 
  <div class = "span9" > | 
    ସ୍ତର 1 ସ୍ତମ୍ଭ
    <div ଶ୍ରେଣୀ = "ଧାଡି" > | 
      <div class = "span6" > ସ୍ତର 2 </div> | 
      <div class = "span3" > ସ୍ତର 2 </div> | 
    </div>
  </div>
</div>

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

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

୧

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

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

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

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

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

4 ଅଫସେଟ୍ 4

3 ଅଫସେଟ୍ 3

6 ଅଫସେଟ୍ 6

<div ଶ୍ରେଣୀ = "ଧାଡି-ତରଳ" > | 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

ତରଳ ବସା

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

ତରଳ 12

ତରଳ 6

<div ଶ୍ରେଣୀ = "ଧାଡି-ତରଳ" > | 
  <div class = "span12" > | 
    ତରଳ 12
    <div ଶ୍ରେଣୀ = "ଧାଡି-ତରଳ" > | 
      <div class = "span6" > | 
        ତରଳ 6
        <div ଶ୍ରେଣୀ = "ଧାଡି-ତରଳ" > | 
          <div class = "span6" > ଫ୍ଲୁଇଡ୍ 6 </div> | 
          <div class = "span6" > ଫ୍ଲୁଇଡ୍ 6 </div> | 
        </div>
      </div>
      <div class = "span6" > ଫ୍ଲୁଇଡ୍ 6 </div> | 
    </div>
  </div>
</div>

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

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

<body>
  <div class = "ପାତ୍ର" > | 
    ...
  </div>
</body>

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

<div class="container-fluid">ପ୍ରୟୋଗ ଏବଂ ଡକସ୍ ପାଇଁ ବଡ଼ ସହିତ ଏକ ତରଳ, ଦୁଇ ସ୍ତମ୍ଭ ପୃଷ୍ଠା ସୃଷ୍ଟି କରନ୍ତୁ |

<div class = "ପାତ୍ର-ତରଳ" > | 
  <div ଶ୍ରେଣୀ = "ଧାଡି-ତରଳ" > | 
    <div class = "span2" > | 
      <! - ସାଇଡ୍ ବାର୍ ବିଷୟବସ୍ତୁ -> |
    </div>
    <div class = "span10" > | 
      <! - ଶରୀରର ବିଷୟବସ୍ତୁ ->
    </div>
  </div>
</div>

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

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

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0" > |  
<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 ଣସି ସ୍ଥିର ପ୍ରସ୍ଥ ନାହିଁ \|

/ * ବଡ଼ ଡେସ୍କଟପ୍ * /
@ ମିଡିଆ ( ମିନିଟ୍ - ମୋଟେଇ : 1200px ) { ... }     
 
/ * ଲ୍ୟାଣ୍ଡସ୍କେପ୍ ଏବଂ ଡେସ୍କଟପ୍ ପାଇଁ ପୋଟ୍ରେଟ୍ ଟ୍ୟାବଲେଟ୍ * /
@ ମିଡିଆ ( ମିନିଟ୍ - ମୋଟେଇ : 768px ) ଏବଂ ( ସର୍ବାଧିକ - ମୋଟେଇ : 979px ) { ... }        
 
/ * ଟ୍ୟାବଲେଟ୍ ଚିତ୍ର କରିବାକୁ ଲ୍ୟାଣ୍ଡସ୍କେପ୍ ଫୋନ୍ * /
@ ମିଡିଆ ( ସର୍ବାଧିକ - ମୋଟେଇ : 767px ) { ... }     
 
/ * ଲ୍ୟାଣ୍ଡସ୍କେପ୍ ଫୋନ୍ ଏବଂ ଡାଉନ୍ * /
@ ମିଡିଆ ( ସର୍ବାଧିକ - ମୋଟେଇ : 480px ) { ... }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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