স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
in English

রিবুট করুন

রিবুট, একটি একক ফাইলে উপাদান-নির্দিষ্ট CSS পরিবর্তনের একটি সংগ্রহ, একটি মার্জিত, সামঞ্জস্যপূর্ণ, এবং সহজ বেসলাইন তৈরি করার জন্য বুটস্ট্র্যাপ কিকস্টার্ট করুন।

এই পৃষ্ঠায়

এপ্রোচ

শুধুমাত্র উপাদান নির্বাচক ব্যবহার করে কিছুটা মতামতযুক্ত শৈলী সহ অনেক এইচটিএমএল উপাদান প্রদান করে, নর্মালাইজের উপর রিবুট তৈরি করে। অতিরিক্ত স্টাইলিং শুধুমাত্র ক্লাসের সাথে করা হয়। উদাহরণস্বরূপ, আমরা <table>একটি সহজ বেসলাইনের জন্য কিছু শৈলী রিবুট করি এবং পরে .table, .table-bordered, এবং আরও অনেক কিছু প্রদান করি।

রিবুটে কী ওভাররাইড করতে হবে তা বেছে নেওয়ার জন্য এখানে আমাদের নির্দেশিকা এবং কারণ রয়েছে:

  • স্কেলেবল কম্পোনেন্ট স্পেসিংয়ের জন্য s remএর পরিবর্তে s ব্যবহার করতে কিছু ব্রাউজার ডিফল্ট মান আপডেট করুন।em
  • এড়িয়ে চলুন margin-top। উল্লম্ব মার্জিন ভেঙে পড়তে পারে, অপ্রত্যাশিত ফলাফল দেয়। আরো গুরুত্বপূর্ণ যদিও, একটি একক দিক marginএকটি সহজ মানসিক মডেল.
  • ডিভাইসের আকার জুড়ে সহজে স্কেলিং করার জন্য, ব্লক উপাদানগুলি rems-এর জন্য margins ব্যবহার করা উচিত।
  • -সম্পর্কিত বৈশিষ্ট্যের ঘোষণা fontন্যূনতম রাখুন, inheritযখনই সম্ভব ব্যবহার করুন।

CSS ভেরিয়েবল

v5.1.1 এ যোগ করা হয়েছে

v5.1.1 এর সাথে, আমরা আমাদের @importসমস্ত সিএসএস বান্ডেল জুড়ে আমাদের প্রয়োজনীয় গুলিকে প্রমিত করেছি (সহ bootstrap.css, bootstrap-reboot.css, এবং bootstrap-grid.cssঅন্তর্ভুক্ত করতে _root.scss। এটি :rootসমস্ত বান্ডেলে স্তরের CSS ভেরিয়েবল যোগ করে, সেই বান্ডেলে কতগুলি ব্যবহার করা হয়েছে তা নির্বিশেষে। শেষ পর্যন্ত বুটস্ট্র্যাপ 5 চলতে থাকবে সময়ের সাথে যোগ করা আরও CSS ভেরিয়েবল দেখুন।

পৃষ্ঠা ডিফল্ট

আরও ভাল পৃষ্ঠা-ব্যাপী ডিফল্ট প্রদান করতে উপাদান <html>এবং <body>উপাদান আপডেট করা হয়। আরো নির্দিষ্টভাবে:

  • বিশ্বব্যাপী box-sizingপ্রতিটি উপাদানের উপর সেট করা আছে—সহ *::beforeএবং *::after, থেকে border-box। এটি নিশ্চিত করে যে প্যাডিং বা সীমানার কারণে উপাদানটির ঘোষিত প্রস্থ কখনই অতিক্রম করবে না।
    • তে কোন বেস font-sizeঘোষণা করা হয় না <html>, তবে 16pxধরে নেওয়া হয় (ব্রাউজার ডিফল্ট)। ব্যবহারকারীর পছন্দগুলিকে সম্মান করে এবং আরও অ্যাক্সেসযোগ্য পদ্ধতি নিশ্চিত করার সময় মিডিয়া প্রশ্নের মাধ্যমে সহজ প্রতিক্রিয়াশীল টাইপ-স্কেলিংয়ের জন্য font-size: 1remপ্রয়োগ করা হয় । <body>এই ব্রাউজার ডিফল্ট পরিবর্তনশীল পরিবর্তন করে ওভাররাইড করা যেতে পারে $font-size-root.
  • এছাড়াও <body>একটি বিশ্বব্যাপী font-family, font-weight, line-height, এবং সেট করে color। ফন্টের অসঙ্গতি রোধ করার জন্য এটি কিছু ফর্ম উপাদান দ্বারা উত্তরাধিকারসূত্রে প্রাপ্ত হয়।
  • নিরাপত্তার জন্য, <body>একটি ঘোষণা করেছে background-color, ডিফল্ট করেছে #fff।

নেটিভ ফন্ট স্ট্যাক

বুটস্ট্র্যাপ প্রতিটি ডিভাইস এবং OS-এ সর্বোত্তম পাঠ্য রেন্ডারিংয়ের জন্য একটি "নেটিভ ফন্ট স্ট্যাক" বা "সিস্টেম ফন্ট স্ট্যাক" ব্যবহার করে। এই সিস্টেম ফন্টগুলি বিশেষভাবে আজকের ডিভাইসগুলিকে মাথায় রেখে ডিজাইন করা হয়েছে, স্ক্রীনে উন্নত রেন্ডারিং, পরিবর্তনশীল ফন্ট সমর্থন এবং আরও অনেক কিছু। এই স্ম্যাশিং ম্যাগাজিন নিবন্ধে নেটিভ ফন্ট স্ট্যাক সম্পর্কে আরও পড়ুন ।

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

মনে রাখবেন যেহেতু ফন্ট স্ট্যাকে ইমোজি ফন্ট রয়েছে, তাই অনেক সাধারণ প্রতীক/ডিংবাট ইউনিকোড অক্ষর বহু রঙের পিকটোগ্রাফ হিসাবে রেন্ডার করা হবে। ব্রাউজার/প্ল্যাটফর্মের নেটিভ ইমোজি ফন্টে ব্যবহৃত শৈলীর উপর নির্ভর করে তাদের চেহারা পরিবর্তিত হবে এবং তারা কোন CSS colorশৈলী দ্বারা প্রভাবিত হবে না।

এটি বুটস্ট্র্যাপ জুড়ে বিশ্বব্যাপী স্বয়ংক্রিয়ভাবে উত্তরাধিকার সূত্রে প্রাপ্ত এবং font-familyপ্রয়োগ করা হয় । <body>গ্লোবাল পরিবর্তন করতে , বুটস্ট্র্যাপ font-familyআপডেট এবং পুনরায় কম্পাইল করুন।$font-family-base

CSS ভেরিয়েবল

বুটস্ট্র্যাপ 5 পরিপক্ক হওয়ার সাথে সাথে , সবসময় Sass পুনরায় কম্পাইল করার প্রয়োজন ছাড়াই আরও রিয়েল-টাইম কাস্টমাইজেশন প্রদানের উপায় হিসাবে CSS ভেরিয়েবলের সাথে আরও বেশি স্টাইল তৈরি করা হবে। আমাদের পন্থা হল আমাদের সোর্স Sass ভেরিয়েবলগুলি নেওয়া এবং সেগুলিকে CSS ভেরিয়েবলে রূপান্তর করা। এইভাবে, এমনকি আপনি যদি CSS ভেরিয়েবল ব্যবহার না করেন, তবুও আপনার কাছে Sass এর সমস্ত ক্ষমতা আছে। এটি এখনও প্রক্রিয়াধীন এবং সম্পূর্ণরূপে বাস্তবায়নে সময় লাগবে।

উদাহরণস্বরূপ, সাধারণ শৈলীগুলির :rootজন্য এই CSS ভেরিয়েবলগুলি বিবেচনা করুন:<body>

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

অনুশীলনে, সেই ভেরিয়েবলগুলি তারপরে রিবুটে প্রয়োগ করা হয়:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

যা আপনাকে রিয়েল-টাইম কাস্টমাইজেশন করতে দেয় যদিও আপনি চান:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

শিরোনাম এবং অনুচ্ছেদ

সমস্ত শিরোনাম উপাদান—যেমন, <h1>—এবং <p>তাদের margin-topসরানোর জন্য পুনরায় সেট করা হয়েছে। শিরোনাম যোগ করা হয়েছে এবং সহজ ব্যবধান জন্য margin-bottom: .5remঅনুচ্ছেদ .margin-bottom: 1rem

শিরোনাম উদাহরণ
<h1></h1> h1. বুটস্ট্র্যাপ শিরোনাম
<h2></h2> h2. বুটস্ট্র্যাপ শিরোনাম
<h3></h3> h3. বুটস্ট্র্যাপ শিরোনাম
<h4></h4> h4. বুটস্ট্র্যাপ শিরোনাম
<h5></h5> h5. বুটস্ট্র্যাপ শিরোনাম
<h6></h6> h6. বুটস্ট্র্যাপ শিরোনাম

তালিকা

সমস্ত তালিকা — <ul>, <ol>, এবং <dl>— তাদের margin-topসরানো হয়েছে এবং একটি margin-bottom: 1rem. নেস্টেড তালিকার কোন নেই margin-bottom। padding-leftআমরা অন <ul>এবং <ol>এলিমেন্ট রিসেট করেছি ।

  • সমস্ত তালিকা তাদের শীর্ষ মার্জিন সরানো হয়েছে
  • এবং তাদের নীচের মার্জিন স্বাভাবিক করা হয়েছে
  • নেস্টেড তালিকার নিচের মার্জিন নেই
    • এই ভাবে তারা একটি আরো এমনকি চেহারা আছে
    • বিশেষ করে যখন আরও তালিকা আইটেম দ্বারা অনুসরণ করা হয়
  • বাম প্যাডিংও রিসেট করা হয়েছে
  1. এখানে একটি আদেশ তালিকা
  2. কয়েকটি তালিকা আইটেম সঙ্গে
  3. এটি একই সামগ্রিক চেহারা আছে
  4. আগের মতোই সাজানো তালিকা

সহজ স্টাইলিং, স্পষ্ট শ্রেণিবিন্যাস এবং আরও ভাল ব্যবধানের জন্য, বর্ণনা তালিকাগুলি আপডেট করেছে margin। <dd>s রিসেট margin-leftকরুন 0এবং যোগ করুন margin-bottom: .5rem। <dt>s গাঢ় হয় .

বর্ণনা তালিকা
একটি বর্ণনা তালিকা শর্তাবলী সংজ্ঞায়িত করার জন্য উপযুক্ত।
মেয়াদ
শব্দের জন্য সংজ্ঞা।
একই শব্দের জন্য একটি দ্বিতীয় সংজ্ঞা।
আরেকটি পদ
এই অন্য পদের জন্য সংজ্ঞা.

ইনলাইন কোড

কোডের ইনলাইন স্নিপেটগুলি দিয়ে মোড়ানো <code>। এইচটিএমএল কোণ বন্ধনী এড়ানো নিশ্চিত করুন।

উদাহরণস্বরূপ, <section>ইনলাইন হিসাবে আবৃত করা উচিত. 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

কোড ব্লক

<pre>কোডের একাধিক লাইনের জন্য s ব্যবহার করুন । আবার, সঠিক রেন্ডারিংয়ের জন্য কোডে যেকোন অ্যাঙ্গেল ব্র্যাকেট এড়িয়ে যেতে ভুলবেন না। উপাদানটিকে <pre>অপসারণ করতে margin-topএবং এর জন্য remইউনিটগুলি ব্যবহার করতে পুনরায় সেট করা হয়েছে margin-bottom।

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

ভেরিয়েবল

ভেরিয়েবল নির্দেশ করার জন্য <var>ট্যাগ ব্যবহার করুন।

y = m x + b 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ব্যবহারকারীর ইনপুট

<kbd>ইনপুট নির্দেশ করতে ব্যবহার করুন যা সাধারণত কীবোর্ডের মাধ্যমে প্রবেশ করা হয়।

ডিরেক্টরি স্যুইচ করতে, ডিরেক্টরির cdনাম অনুসরণ করে টাইপ করুন।
সেটিংস সম্পাদনা করতে, টিপুন ctrl + , 
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

নমুনা আউটপুট

একটি প্রোগ্রাম থেকে নমুনা আউটপুট নির্দেশ করার জন্য <samp>ট্যাগ ব্যবহার করুন.

এই টেক্সট একটি কম্পিউটার প্রোগ্রাম থেকে নমুনা আউটপুট হিসাবে বিবেচনা করা বোঝানো হয়. 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

টেবিল

টেবিলগুলিকে স্টাইল s-এর সাথে সামান্য সামঞ্জস্য করা হয় <caption>, সীমানা ভেঙে দেওয়া হয় এবং text-alignসর্বত্র সামঞ্জস্যপূর্ণ নিশ্চিত করা হয়। বর্ডার, প্যাডিং এবং আরও অনেক কিছুর জন্য অতিরিক্ত পরিবর্তন ক্লাসের .tableসাথে আসে ।

এটি একটি উদাহরণ টেবিল, এবং এটি বিষয়বস্তু বর্ণনা করার জন্য এটির ক্যাপশন।
টেবিল শিরোনাম টেবিল শিরোনাম টেবিল শিরোনাম টেবিল শিরোনাম
টেবিল সেল টেবিল সেল টেবিল সেল টেবিল সেল
টেবিল সেল টেবিল সেল টেবিল সেল টেবিল সেল
টেবিল সেল টেবিল সেল টেবিল সেল টেবিল সেল

ফর্ম

সহজ বেস শৈলীর জন্য বিভিন্ন ফর্ম উপাদান রিবুট করা হয়েছে। এখানে সবচেয়ে উল্লেখযোগ্য কিছু পরিবর্তন রয়েছে:

  • <fieldset>s-এর কোনো সীমানা, প্যাডিং বা মার্জিন নেই তাই এগুলি সহজেই পৃথক ইনপুট বা ইনপুটগুলির গ্রুপের জন্য মোড়ক হিসাবে ব্যবহার করা যেতে পারে।
  • <legend>s, ফিল্ডসেটের মতো, বিভিন্ন ধরণের শিরোনাম হিসাবে প্রদর্শিত হওয়ার জন্য পুনরায় স্টাইল করা হয়েছে।
  • <label>s প্রয়োগ display: inline-blockকরার অনুমতি দেওয়ার জন্য সেট করা হয়েছে।margin
  • <input>s, <select>s, <textarea>s, এবং <button>s বেশিরভাগই Normalize দ্বারা সম্বোধন করা হয়, কিন্তু Reboot তাদের marginএবং সেটগুলিকেও সরিয়ে দেয় line-height: inherit।
  • <textarea>অনুভূমিক আকার পরিবর্তন প্রায়ই "ব্রেক" পৃষ্ঠা বিন্যাস হিসাবে s শুধুমাত্র উল্লম্বভাবে রিসাইজ করার জন্য পরিবর্তন করা হয়।
  • <button>s এবং <input>বোতাম উপাদান আছে cursor: pointerযখন :not(:disabled).

এই পরিবর্তন, এবং আরো, নীচে প্রদর্শিত হয়.

উদাহরণ কিংবদন্তি

100

তারিখ এবং রঙ ইনপুট সমর্থন

মনে রাখবেন তারিখ ইনপুটগুলি সাফারি নামে সমস্ত ব্রাউজার দ্বারা সম্পূর্ণরূপে সমর্থিত নয়৷

বোতামে পয়েন্টার

role="button"রিবুটে ডিফল্ট কার্সার পরিবর্তন করার জন্য একটি বর্ধিতকরণ অন্তর্ভুক্ত রয়েছে pointer৷ উপাদানগুলি ইন্টারেক্টিভ নির্দেশ করতে সাহায্য করার জন্য উপাদানগুলিতে এই বৈশিষ্ট্যটি যুক্ত করুন৷ এই ভূমিকাটি <button>উপাদানগুলির জন্য প্রয়োজনীয় নয়, যা তাদের নিজস্ব cursorপরিবর্তন পায়।

নন-বোতাম উপাদান বোতাম 
<span role="button" tabindex="0">Non-button element button</span>

বিবিধ উপাদান

ঠিকানা

ব্রাউজার ডিফল্ট থেকে তে <address>রিসেট করতে উপাদানটি আপডেট করা হয়েছে । এছাড়াও এখন উত্তরাধিকারসূত্রে প্রাপ্ত, এবং যোগ করা হয়েছে। s হল নিকটতম পূর্বপুরুষের (বা কাজের একটি সম্পূর্ণ অংশ) জন্য যোগাযোগের তথ্য উপস্থাপন করার জন্য। এর সাথে লাইন শেষ করে বিন্যাস সংরক্ষণ করুন ।font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
পুরো নাম
[email protected]

ব্লককোট

ব্লককোটগুলির ডিফল্ট marginহল 1em 40px, তাই আমরা 0 0 1remঅন্যান্য উপাদানগুলির সাথে আরও সামঞ্জস্যপূর্ণ কিছুর জন্য এটি পুনরায় সেট করি।

একটি সুপরিচিত উদ্ধৃতি, একটি ব্লককোট উপাদানের মধ্যে রয়েছে।

উৎস শিরোনামে বিখ্যাত কেউ

ইনলাইন উপাদান

অনুচ্ছেদ পাঠ্যের <abbr>মধ্যে এটিকে আলাদা করার জন্য উপাদানটি মৌলিক স্টাইলিং গ্রহণ করে।

HTML সংক্ষেপণ উপাদান ।

সারসংক্ষেপ

সারাংশে ডিফল্ট cursorহল text, তাই আমরা এটিকে রিসেট করি যাতে pointerবোঝাতে হয় যে উপাদানটির সাথে এটিতে ক্লিক করে ইন্টারঅ্যাক্ট করা যেতে পারে।

কিছু বিবরণ

বিস্তারিত সম্পর্কে আরো তথ্য.

এমনকি আরো বিস্তারিত

এখানে বিস্তারিত সম্পর্কে আরো বিস্তারিত আছে.

HTML5 [hidden]বৈশিষ্ট্য

HTML5 নামের একটি নতুন গ্লোবাল অ্যাট্রিবিউট[hidden]display: none যোগ করে, যা ডিফল্ট হিসেবে স্টাইল করা হয়। PureCSS থেকে একটি ধারণা ধার করে , আমরা এই ডিফল্টটিকে ভুলবশত ওভাররাইড হওয়া থেকে [hidden] { display: none !important; }রক্ষা করতে সাহায্য করার মাধ্যমে উন্নতি করি।display

<input type="text" hidden>
jQuery অসঙ্গতি

[hidden]$(...).hide()jQuery এর এবং $(...).show()পদ্ধতির সাথে সামঞ্জস্যপূর্ণ নয় । অতএব, আমরা বর্তমানে উপাদানগুলির [hidden]পরিচালনার জন্য অন্যান্য কৌশলগুলির উপর বিশেষভাবে সমর্থন করি না।display

শুধুমাত্র একটি উপাদানের দৃশ্যমানতা টগল করতে, যার অর্থ এটি displayসংশোধন করা হয়নি এবং উপাদানটি এখনও নথির প্রবাহকে প্রভাবিত করতে পারে, পরিবর্তে ক্লাসটি ব্যবহার করুন.invisible ।