টুইটার বুটস্ট্র্যাপ 3-এ আমি কখন ধারক এবং সারি ব্যবহার করব?

Question 1

ক্লাস containerএবং কখন ব্যবহার করবেন তা দয়া করে আমাকে ব্যাখ্যা করুন row। আমি নিশ্চিত নই কারণ বুটস্ট্র্যাপের ডকুমেন্টেশন এই অংশটি সম্পর্কে যথেষ্ট অস্পষ্ট।

আমি বুটস্ট্র্যাপ 3 ব্যবহার করছি।

Question 2

containerrowউপাদান একটি ধারক ।

row উপাদানগুলি কলামের ধারক (দস্তাবেজগুলি এটি গ্রিড সিস্টেম বলে)

এছাড়াও, containerআপনার বিন্যাসের প্রতিক্রিয়াশীল আচরণের সাথে সম্পর্কিত বিষয়বস্তুর মার্জিন সেট করে।

সুতরাং containerক্লাসটি প্রায়শই বুটস্ট্র্যাপ প্রকল্পের শৈলীর নির্দেশিকাগুলির উপর ভিত্তি করে 'বাক্সযুক্ত' সামগ্রী তৈরি করতে ব্যবহৃত হয়।

আপনি যদি একটি পূর্ণ প্রস্থের গ্রিড তৈরি করে "বাক্সের বাইরে" যেতে চান তবে আপনি কেবল rowকলামের অভ্যন্তরে কেবলমাত্র উপাদানগুলি ব্যবহার করতে পারেন (মোট 12 টি মোট ছড়িয়ে ছড়িয়ে)।

containerএবং rowশ্রেণীর শরীরে উপাদানের জন্য হয়। সুতরাং একটি বেসিক লেআউটটি হ'ল:

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

একটি বক্সযুক্ত প্রতিক্রিয়াশীল বিন্যাসের জন্য।

আপনি যদি বাদ দেন তবে containerআপনি একটি পূর্ণ-প্রস্থের বিন্যাস পাবেন।

Jumbotron উদাহরণ

জম্বোট্রন containerআচরণের একটি ভাল উদাহরণ । আপনি যদি কোনও উপাদানটিতে একটি Jumbotron উপাদান রাখেন containerতবে এটি বৃত্তাকার সীমানা এবং প্রতিক্রিয়াশীল প্রস্থের ভিত্তিতে একটি নির্দিষ্ট প্রস্থ রয়েছে। যদি জম্বোট্রন কোনও ধারকের বাইরে থাকে তবে এটি সীমানা ছাড়াই পুরো প্রস্থে ছড়িয়ে পড়ে।

Question 3

আমি একই সম্পর্কে ভাবছিলাম এবং এটি বুঝতে যে আমি bootstrap.cssভার্সন 3 সংস্করণটি পেরিয়েছি। উত্তরটি নং নং থেকে রয়েছে। 1585 থেকে 1605. নীচে আরও ভাল বোঝার জন্য আমি এই লাইনগুলি এখানে পোস্ট করব।

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

পুরো কোডটি স্ব-বর্ণনামূলক। তবে এটিকে বিশদভাবে জানাতে, কোডটি দেখানোর সাথে সাথে 750pxপর্দার প্রস্থের প্রস্থের মধ্যে 768pxএবং আরও যদি সামনে থাকে তবে ধারকটি গ্রহণ করবে 992px। এখন, 1200 এরও বেশি সাধারণ স্ক্রিন রেজোলিউশনের জন্য, ধারকটি গ্রহণ করতে পারে 1170pxতবে 30 px( 15px+15px) এর প্যাডিং বিয়োগ করে কার্যকর স্থানটি 1140pxবাম এবং ডানদিকে মার্জিন হিসাবে স্ক্রিনকে কেন্দ্র করে নির্মিত হয় auto

এখন, class="row"কোডের নীচে রয়েছে:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

সুতরাং, যদি সারিটি ধারকটির ভিতরে থাকে, তবে এটি কার্যকরভাবে ধারক থেকে প্রতিটি পাশের 15px প্যাডিং ছিনিয়ে নেবে এবং পুরো স্থানটি ব্যবহার করবে। তবে শ্রেণি সারি যদি বডি ট্যাগের অভ্যন্তরে থাকে তবে এটি নেতিবাচক মার্জিনের কারণে দৃশ্যমান অঞ্চল থেকে ব্রাউজারের বাম এবং ডান উভয় দিকে চলে যেতে পারে।

আমি আশা করি এটি পরিষ্কার হয়ে গেছে।

Question 4

ধারক

ধারক প্রতিক্রিয়াশীল প্রস্থে প্রস্থের সীমাবদ্ধতা সরবরাহ করে। যখন প্রতিক্রিয়াশীল আকার পরিবর্তন হয়, এটি বদলে যায় এমন পাত্রে। সারি এবং কলামগুলি সমস্ত শতাংশ ভিত্তিক তাই তাদের পরিবর্তনের দরকার নেই। নোট করুন যে প্রতিটি পক্ষের 15px মার্জিন রয়েছে, সারি দ্বারা বাতিল করা হয়েছে।

সারি

সারিগুলি সর্বদা একটি পাত্রে থাকা উচিত।

সারিটি কলামগুলিকে থাকার জন্য জায়গা প্রদান করে, আদর্শভাবে কলামগুলি রয়েছে যা 12 পর্যন্ত যুক্ত হয় wra এটি একটি মোড়ক হিসাবেও কাজ করে যেহেতু সমস্ত কলামগুলি বামে ভাসমান, ভাসমানগুলি অদ্ভুত হয়ে উঠলে অতিরিক্ত সারিগুলিতে ওভারল্যাপ থাকে না।

সারিগুলির প্রতিটি পাশে একটি 15px নেতিবাচক মার্জিন রয়েছে। সারিটি তৈরি করা ডিভটি সাধারণত পাত্রে প্যাডিংয়ের ভিতরে সীমাবদ্ধ থাকবে, গোলাপী অঞ্চলের প্রান্তগুলিকে স্পর্শ করবে তবে এর বাইরে নয়। 15px নেতিবাচক মার্জিনগুলি পাত্রে 15px প্যাডিংয়ের উপরে সারিটি সরিয়ে দেয়, মূলত এটিকে এড়িয়ে চলে। তদতিরিক্ত, সারিগুলি আপনাকে নিশ্চিত করে যে এর ভিতরে থাকা সমস্ত ডিভগুলি পূর্বের এবং নিম্নলিখিত সারিগুলি থেকে পৃথক করে তাদের নিজস্ব লাইনে প্রদর্শিত হবে।

কলাম

কলামগুলিতে এখন 15px প্যাডিং রয়েছে। এই প্যাডিংয়ের অর্থ হ'ল কলামগুলি সারিটির প্রান্তটি স্পর্শ করে, যা নিজেই ধারকটির প্রান্তকে স্পর্শ করে যেহেতু সারিটির negativeণাত্মক প্রান্ত থাকে এবং ধারকটির ইতিবাচক প্যাডিং থাকে। তবে, কলামের প্যাডিংটি কলামের ভিতরে যেখানেই হওয়া দরকার সেখানে কোনও কিছুকে ঠেলে দেয় এবং কলামগুলির মধ্যে 30px নালী সরবরাহ করে। সারির বাইরে কোনও কলাম কখনই ব্যবহার করবেন না, এটি কাজ করবে না।

আরও তথ্যের জন্য, আমি আপনাকে এই নিবন্ধটি পড়ার পরামর্শ দিচ্ছি । এটি সত্যিই পরিষ্কার, এবং বুটস্ট্র্যাপের গ্রিড সিস্টেম কীভাবে কাজ করে তা ভালভাবে ব্যাখ্যা করুন।

Question 5

শ্রেণি 'ধারক' ভিউ পোর্টের মধ্যবর্তী অংশে সামগ্রী মোড়ানো ps বডি ট্যাগ সহ সম্পূর্ণ সামগ্রী পাতাগুলির মাঝে নির্দিষ্ট প্রস্থের পৃষ্ঠা প্রদর্শিত ফলাফলগুলিতে স্থাপন করা যেতে পারে।

শ্রেণি 'সারি' ব্যবহার করা হয় যখন আপনাকে একটি সারিতে কলামগুলিতে সামগ্রী রাখতে হবে, প্রতিটি সারিতে মোট 12 টি কলাম থাকতে পারে।

Question 6

প্রচলিত সিএসএস অনুশীলনে আপনি সম্ভবত নিম্নলিখিত ক্লাসগুলি ব্যবহার করবেন:

wrapper, header, navigator, contents, footer

উপরের ক্লাসগুলির ব্যবহার এই উদাহরণের মতো হতে পারে:

<body>
    <div class="wrapper">
        <div class="header">

        </div>
        <div class="navigator">

        </div>
        <div class="content">

        </div>
        <div class="footer">

        </div>
    </div>

</body>

বুটস্ট্র্যাপে আপনি ইচ্ছুক হলে বা আপনি উপরের টেম্পলেটটিতে বুটস্ট্র্যাপ শ্রেণীর উদাহরণ ব্যবহার করতে পারেন তবে ব্যবহার করতে পারেন:

<body>

    <div class="container">
        <div class="col-md-12">
            <h1>Header</h1>
            <p>Header contents goes here</p>
        </div>
        <div class="col-md-12">
            <nav role="navigation" class="nav navbar">
                <h1>Navigation</h1>
                <p>Navigation contents goes here</p>
            </nav>
        </div>
        <div class="col-md-12">
            <div class="pagination">
                <h1>Page contents</h1>
                <p>Webpage contents goes here</p>
            </div>

        </div>
        <div class="col-lg-12">
            <h1>Footer contents</h1>
            <p>footer contents goes here</p>
        </div>
    </div>

</body>

পৃষ্ঠার জন্য টেবুলার লেআউট ডিজাইন করতে চাইলে সারি শ্রেণীর জন্য আপনি সারি শ্রেণি ব্যবহার করতে পারেন, তবে আপনি যখন টেবিল বিন্যাসে ডেটা প্রদর্শন করতে চান আপনার টেবিল শ্রেণি ব্যবহার করা উচিত, তবে টেবিলটি প্রতিক্রিয়াশীল হবে না।

ডাটা টেবিলের চেয়ে আলাদা টেবুলার লেআউট তৈরি করতে উদাহরণস্বরূপ সারি শ্রেণি ব্যবহার করুন:

<body>

<div class="container">
    <div class="row">
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
  </div>
</div>

</body>

আপনার অবশ্যই টেবিল-ভিত্তিক লেআউটটি ব্যবহার এড়াতে চেষ্টা করতে হবে এবং এখানে বর্ণিত মতো প্রতিক্রিয়াশীল টেবিলগুলি ব্যবহার করার চেষ্টা করতে হবে