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

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

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

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

ଡିଫଲ୍ଟ 940px ଗ୍ରୀଡ୍ |

୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
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*

ଉଦାହରଣ |

ସ୍ତମ୍ଭର ସ୍ତର 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>

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

ଭେରିଏବଲ୍ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ବର୍ଣ୍ଣନା
@gridColumns 12 ସ୍ତମ୍ଭ ସଂଖ୍ୟା
@gridColumnWidth 60px ପ୍ରତ୍ୟେକ ସ୍ତମ୍ଭର ମୋଟେଇ |
@gridGutterWidth 20px ସ୍ତମ୍ଭ ମଧ୍ୟରେ ନକାରାତ୍ମକ ସ୍ଥାନ |
@siteWidth ସମସ୍ତ ସ୍ତମ୍ଭ ଏବଂ ଗୁଟରର ଗଣିତ ରାଶି | .container-fixed()ମିଶ୍ରଣର ମୋଟେଇ ସେଟ୍ କରିବାକୁ ସ୍ତମ୍ଭ ଏବଂ ଗୁଟର ସଂଖ୍ୟା ଗଣନା କରେ |

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>

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

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

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

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

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

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

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

  • ଆମ ଗ୍ରୀଡରେ ସ୍ତମ୍ଭର ମୋଟେଇକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices

Using the media queries

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

  1. Use the compiled responsive version, bootstrap-responsive.css
  2. Add @import "responsive.less" and recompile Bootstrap
  3. Modify and recompile responsive.less as a separate

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

  1.   // Landscape phones and down
  2.   @media (max-width: 480px) { ... }
  3.  
  4.   // Landscape phone to portrait tablet
  5.   @media (max-width: 768px) { ... }
  6.  
  7.   // Portrait tablet to landscape and desktop
  8.   @media (min-width: 768px) and (max-width: 940px) { ... }
  9.  
  10.   // Large desktop
  11.   @media (min-width: 1200px) { .. }