বুটষ্ট্ৰেপ এটা প্ৰতিক্ৰিয়াশীল ১২-স্তম্ভ গ্ৰীডত নিৰ্মাণ কৰা হৈছে। আমি সেই ব্যৱস্থাৰ ওপৰত ভিত্তি কৰি স্থিৰ- আৰু তৰল-প্ৰস্থৰ পৰিকল্পনাও অন্তৰ্ভুক্ত কৰিছো।
বুটষ্ট্ৰেপৰ অংশ হিচাপে প্ৰদান কৰা অবিকল্পিত গ্ৰীড ব্যৱস্থাপ্ৰণালী এটা 940px-বহল, 12-স্তম্ভ গ্ৰীড ।
ইয়াৰ বিভিন্ন ডিভাইচ আৰু ৰিজ'লিউচনৰ বাবে চাৰিটা প্ৰতিক্ৰিয়াশীল ভিন্নতাও আছে: ফোন, টেবলেট প'ৰ্ট্ৰেইট, টেবুল লেণ্ডস্কেপ আৰু সৰু ডেস্কটপ, আৰু ডাঙৰ ৱাইডস্ক্ৰীণ ডেস্কটপ।
- <div শ্ৰেণী = "শাৰী" >
- <div শ্ৰেণী = "span4" > ... </div>
- <div শ্ৰেণী = "span8" > ... </div>
- </div>
ইয়াত দেখুওৱাৰ দৰে, দুটা "স্তম্ভ"ৰ সৈতে এটা মূল পৰিকল্পনা সৃষ্টি কৰিব পাৰি, প্ৰত্যেকেই আমি আমাৰ গ্ৰীড ব্যৱস্থাৰ অংশ হিচাপে সংজ্ঞায়িত কৰা ১২টা মূল স্তম্ভৰ এটা সংখ্যাক সামৰি লৈছে।
- <div শ্ৰেণী = "শাৰী" >
- <div শ্ৰেণী = "span4" > ... </div>
- <div শ্ৰেণী = "span4 অফছেট4" > ... </div>
- </div>
বুটষ্ট্ৰেপত স্থিতিশীল (অ-তৰল) গ্ৰীড ব্যৱস্থাপ্ৰণালীৰ সৈতে, নেষ্টিং সহজ। আপোনাৰ বিষয়বস্তু নেষ্ট কৰিবলে, মাত্ৰ এটা বৰ্ত্তমানৰ স্তম্ভৰ ভিতৰত এটা নতুন .row
আৰু স্তম্ভৰ গোট যোগ কৰক ।.span*
.span*
- <div শ্ৰেণী = "শাৰী" >
- <div শ্ৰেণী = "span12" >
- স্তম্ভৰ স্তৰ ১
- <div শ্ৰেণী = "শাৰী" >
- <div class = "span6" > স্তৰ ২ </div>
- <div class = "span6" > স্তৰ ২ </div>
- </div>
- </div>
- </div>
লৰৃ - চৰ হৈ থকা | অবিকল্পিত মান | বিৱৰণ |
---|---|---|
@gridColumns |
১২ | স্তম্ভৰ সংখ্যা |
@gridColumnWidth |
৬০পিক্সেল | প্ৰতিটো স্তম্ভৰ প্ৰস্থ |
@gridGutterWidth |
২০পিক্সেল | স্তম্ভৰ মাজত ঋণাত্মক স্থান |
@siteWidth |
সকলো স্তম্ভ আৰু নালাৰ গণনা কৰা যোগফল | .container-fixed() মিক্সিনৰ প্ৰস্থ নিৰ্ধাৰণ কৰিবলৈ স্তম্ভ আৰু নালাৰ সংখ্যা গণনা কৰে |
বুটষ্ট্ৰেপত নিৰ্মিত অবিকল্পিত 940px গ্ৰীড ব্যৱস্থাপ্ৰণালী স্বনিৰ্বাচিত কৰাৰ বাবে এটা মুষ্টিমেয় চলক আছে, ওপৰত নথিভুক্ত কৰা হৈছে । গ্ৰীডৰ বাবে সকলো চলক variables.less ত সংৰক্ষণ কৰা হয়।
গ্ৰীড পৰিবৰ্তন কৰাৰ অৰ্থ হৈছে তিনিটা @grid*
চলক সলনি কৰা আৰু বুটষ্ট্ৰেপ পুনৰায় কম্পাইলিং কৰা । grid চলকসমূহ variables.less ত সলনি কৰক আৰু পুনৰ সংকলন কৰিবলে নথিভুক্ত চাৰিটা উপায়ৰ এটা ব্যৱহাৰ কৰক । যদি আপুনি অধিক স্তম্ভ যোগ কৰিছে, grid.less ত থকাসকলৰ বাবে CSS যোগ কৰাটো নিশ্চিত কৰক।
গ্ৰীডৰ স্বনিৰ্বাচনে কেৱল অবিকল্পিত স্তৰত কাম কৰে, 940px গ্ৰীডত। Bootstrap ৰ প্ৰতিক্ৰিয়াশীল দিশসমূহ ৰক্ষণাবেক্ষণ কৰিবলে, আপুনি responsive.less ত গ্ৰীডসমূহো স্বনিৰ্বাচিত কৰিব লাগিব।
এটাই প্ৰদান কৰা প্ৰায় যিকোনো ৱেবছাইট বা পৃষ্ঠাৰ বাবে অবিকল্পিত আৰু সহজ 940px-ব্যাপী, কেন্দ্ৰীভূত বিন্যাস <div class="container">
।
- <শৰীৰ>
- <div class = "পাত্ৰ" >
- ...
- </div>
- </body>
<div class="container-fluid">
নমনীয় পৃষ্ঠা গঠন, নূন্যতম- আৰু সৰ্বোচ্চ-প্ৰস্থ, আৰু এটা বাওঁ-হাতৰ চাইডবাৰ দিয়ে। এপ আৰু ডক্সৰ বাবে ই অতি উত্তম।
- <div class = "পাত্ৰ-তৰল" >
- <div class = "শাৰী-তৰল" >
- <div শ্ৰেণী = "span2" >
- <!--চাইডবাৰৰ বিষয়বস্তু-->
- </div>
- <div শ্ৰেণী = "span10" >
- <!--শৰীৰৰ বিষয়বস্তু-->
- </div>
- </div>
- </div>
বুটষ্ট্ৰেপে আপোনাৰ প্ৰকল্পসমূহক বিভিন্ন ডিভাইচসমূহ আৰু পৰ্দ্দা ৰিজ'লিউচনসমূহত অধিক উপযুক্ত কৰাত সহায় কৰিবলে এটা মুষ্টিমেয় মাধ্যম প্ৰশ্ন সমৰ্থন কৰে। ইয়াত কি কি অন্তৰ্ভুক্ত কৰা হৈছে:
লেবেল | বিন্যাসৰ প্ৰস্থ | স্তম্ভৰ প্ৰস্থ | নালাৰ প্ৰস্থ |
---|---|---|---|
স্মাৰ্টফোন | 480px আৰু তাৰ তলৰ | তৰল স্তম্ভ, কোনো নিৰ্দিষ্ট প্ৰস্থ নাই | |
প'ৰ্ট্ৰেইট টেবলেট | ৪৮০px ৰ পৰা ৭৬৮px লৈকে | তৰল স্তম্ভ, কোনো নিৰ্দিষ্ট প্ৰস্থ নাই | |
লেণ্ডস্কেপ টেবলেট | 768px ৰ পৰা 940px লৈ | ৪৪পিক্সেল | ২০পিক্সেল |
ডিফল্ট | 940px আৰু ওপৰৰ | ৬০পিক্সেল | ২০পিক্সেল |
ডাঙৰ ডিছপ্লে | 1210px আৰু ওপৰৰ | ৭০px | ৩০পিক্সেল |
মিডিয়া প্ৰশ্নসমূহে বহুতো চৰ্তৰ ওপৰত ভিত্তি কৰি স্বনিৰ্বাচিত CSS ৰ অনুমতি দিয়ে—অনুপাত, প্ৰস্থ, প্ৰদৰ্শন ধৰণ, ইত্যাদি—কিন্তু সাধাৰণতে min-width
আৰু ৰ চাৰিওফালে ফোকাচ কৰে max-width
।
বুটষ্ট্ৰেপে স্বয়ংক্ৰিয়ভাৱে এই মাধ্যম প্ৰশ্নসমূহ অন্তৰ্ভুক্ত নকৰে, কিন্তু সিহতক বুজা আৰু যোগ কৰাটো অতি সহজ আৰু নূন্যতম প্ৰতিষ্ঠাৰ প্ৰয়োজন । Bootstrap ৰ প্ৰতিক্ৰিয়াশীল বৈশিষ্ট্যসমূহ অন্তৰ্ভুক্ত কৰাৰ বাবে আপোনাৰ ওচৰত কেইটামান বিকল্প আছে:
কেৱল অন্তৰ্ভুক্ত নকৰি কিয়? সঁচা কথা ক’বলৈ গ’লে সকলো কথাই সঁহাৰি জনোৱাৰ প্ৰয়োজন নাই। ডেভেলপাৰসকলক এই বৈশিষ্ট্য আঁতৰাবলৈ উৎসাহিত কৰাৰ পৰিৱৰ্তে, আমি ইয়াক সামৰ্থবান কৰাটো সৰ্বোত্তম বুলি ভাবো।
- // লেণ্ডস্কেপ ফোন আৰু তললৈ
- @media ( সৰ্বোচ্চ - প্ৰস্থ : ৪৮০px ) { ... }
- // টেবলেট প'ৰ্ট্ৰেইটলৈ লেণ্ডস্কেপ ফোন
- @media ( সৰ্বোচ্চ - প্ৰস্থ : 768px ) { ... }
- // লেণ্ডস্কেপ আৰু ডেস্কটপলৈ টেবলেট প'ৰ্ট্ৰেইট কৰক
- @media ( নূন্যতম - প্ৰস্থ : 768px ) আৰু ( সৰ্বোচ্চ - প্ৰস্থ : 940px ) { ... }
- // ডাঙৰ ডেস্কটপ
- @media ( নূন্যতম - প্ৰস্থ : 1200px ) { .. }