css - w3school - bootstrap templates



টুইটার বুটস্ট্র্যাপ-সারির মধ্যে শীর্ষ স্থান যোগ করুন (12)

বুটস্ট্র্যাপ 3

যদি আপনি বুটস্ট্র্যাপে সারি আলাদা করতে চান তবে আপনি কেবল .form-group ব্যবহার করতে পারেন। এই সারি নীচে 15px মার্জিন যোগ করে।

আপনার ক্ষেত্রে, মার্জিন শীর্ষ পেতে, আপনি এই ক্লাসটি আগের .row উপাদানতে যুক্ত করতে পারেন

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}

বুটস্ট্র্যাপ 4

আপনি অন্তর্নির্মিত ফাঁক ক্লাস ব্যবহার করতে পারেন

<div class="row mt-3"></div>

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

কিভাবে টুইটার বুটস্ট্র্যাপ ফ্রেমওয়ার্ক ব্যবহার করে class="row" উপাদানের মার্জিন শীর্ষ যুক্ত করবেন?


Answer #1

.Css ফাইলটিতে এই ক্লাসটিতে যোগ করুন:

.row {
    margin-left: -20px;
    *zoom: 1;
    margin-top: 50px;
}

অথবা একটি নতুন বর্গ তৈরি করুন এবং উপাদান যোগ করুন

.rowSpecificFormName td {
    margin-top: 50px;
}

Answer #2

আচ্ছা ঠিক আছে কি ঘটেছে তা জানার জন্য, আমি কিছু নতুন ক্লাস ব্যবহার করে নির্দিষ্ট করেছি যেমন আছরা উপরে বলে:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

যখনই আমি চাই <div class="row top7"></div>

ভাল প্রতিক্রিয়াশীল জন্য আপনি margin-top:7% যুক্ত করতে পারেন margin-top:7% উদাহরণস্বরূপ 5px পরিবর্তে margin-top:7% : D


Answer #3

আপনি এই কোড যোগ করতে পারেন:

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

Answer #4

আপনি বুটস্ট্র্যাপ 4 এর জন্য নিম্নলিখিত ক্লাসটি ব্যবহার করতে পারেন:

mt-0 mt-1 mt-2 mt-3 mt-4 ...

রেফারেন্স: https://v4-alpha.getbootstrap.com/utilities/spacing/


Answer #5

আপনি যদি শুধুমাত্র একটি পৃষ্ঠায় পরিবর্তন করতে চান তবে নিম্নোক্ত শৈলী নিয়মটি যোগ করুন:

 #myCustomDivID .row {
     margin-top:20px;
 }

Answer #6

আমি এই বুটস্ট্র্যাপ স্টাইলশীটে এই ক্লাস যোগ করা

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

উদাহরণ

<div class="container">
  <div class="row voffset2">
    <div class="col-lg-12">
      <p>
        Vertically offset text.
      </p>
    </div>
  </div>
</div>

Answer #7

আমি শীর্ষ মার্জিন পরিবর্তন করতে এই ক্লাস ব্যবহার করছি:

.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }

যখন আমি উপরের উপাদান থেকে 2em স্পেসিং করার জন্য একটি উপাদান প্রয়োজন তখন আমি এটি ব্যবহার করি:

<div class="row margin-top-20">Something here</div>

আপনি পিক্সেল prefere তাই এম আপনার P উপায় এটি px পরিবর্তন।


Answer #8

টুইটার বুটস্ট্র্যাপে সারিটি সম্পাদনা বা ওভাররাইড করা একটি খারাপ ধারণা কারণ এটি পৃষ্ঠাটির ভাঁজগুলির মূল অংশ এবং আপনার শীর্ষ মার্জিন ছাড়াই সারির প্রয়োজন হবে।

এটি সমাধান করার পরিবর্তে, একটি নতুন বর্গ "শীর্ষ-বাফার" তৈরি করুন যা আপনার প্রয়োজনীয় স্ট্যান্ডার্ড মার্জিন যোগ করে।

.top-buffer { margin-top:20px; }

এবং তারপর সারি divs যেখানে আপনি একটি শীর্ষ মার্জিন প্রয়োজন এটি ব্যবহার করুন।

<div class="row top-buffer"> ...

Answer #9

বুটস্ট্র্যাপ 4 আলফা + আপনি এই ব্যবহার করতে পারেন

class margin-bottom-5

ক্লাসগুলি ফর্ম্যাট ব্যবহার করে নামকরণ করা হয়েছে: {property}-{sides}-{size}


Answer #10

bs3-upgrade এবং টেক্সট aligment জন্য শুধু এই bs3-upgrade সহায়ক ব্যবহার করুন ...

https://github.com/studija/bs3-upgrade


Answer #11

বুটস্ট্র্যাপ 4 ফাঁক জন্য ব্যবহার করা উচিত

শর্টন্ড ইউটিলিটি ক্লাস

নিম্নলিখিত বিন্যাসে:

{সম্পত্তি} {পক্ষের} - {SIZE}

যেখানে সম্পত্তি এক:

  • মি - মার্জিন সেট ক্লাস জন্য
  • প্যাডিং সেট ক্লাস জন্য - পি

যেখানে পক্ষগুলি এক:

  • ট - মার্জিন-শীর্ষ বা প্যাডিং-শীর্ষ সেট ক্লাসের জন্য
  • বি - মার্জিন-নীচে বা প্যাডিং-নীচে সেট ক্লাসের জন্য
  • আমি - মার্জিন বাম বা প্যাডিং বাম সেট যে ক্লাসের জন্য
  • r - মার্জিন-ডান বা প্যাডিং-ডান সেট করে এমন ক্লাসগুলির জন্য
  • এক্স - উভয় * বাম এবং * -right উভয় সেট ক্লাস জন্য
  • y - ক্লাসগুলির জন্য যা * -top এবং * -bottom উভয় সেট করে
  • ফাঁকা - ক্লাসের জন্য যা উপাদানটির চারপাশে একটি মার্জিন বা প্যাডিং সেট করে

যেখানে আকার এক:

  • 0 - সেটিকে মার্জিন বা প্যাডিংকে 0 সেট করে সেট করার জন্য
  • 1 - (ডিফল্ট অনুসারে) $ স্পেস * .25 তে মার্জিন বা প্যাডিং সেট করে এমন ক্লাসগুলির জন্য
  • 2 - (স্পেসিফিকেশন অনুসারে) $ স্পেসার * .5 তে মার্জিন বা প্যাডিং সেট করে এমন ক্লাসগুলির জন্য
  • 3 - (স্পষ্টভাবে ডিফল্ট) $ স্পেসারের মার্জিন বা প্যাডিং সেট করে এমন ক্লাসগুলির জন্য
  • 4 - (ডিফল্ট অনুসারে) $ স্পেসার * 1.5 তে মার্জিন বা প্যাডিং সেট করে এমন ক্লাসগুলির জন্য
  • 5 - (স্পষ্টভাবে ডিফল্ট) $ স্পেস * 3 তে মার্জিন বা প্যাডিং সেট করে এমন ক্লাসগুলির জন্য
  • স্বয়ংক্রিয় - মার্জিন স্বয়ং সেট করতে ক্লাসের জন্য

সুতরাং আপনি এই কাজ করা উচিত:

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

আরো ব্যাখ্যা জন্য docs পড়ুন। here লাইভ উদাহরণ চেষ্টা here





twitter-bootstrap