in English

টাইপোগ্রাফি

বিশ্বব্যাপী সেটিংস, শিরোনাম, বডি টেক্সট, তালিকা এবং আরও অনেক কিছু সহ বুটস্ট্র্যাপ টাইপোগ্রাফির জন্য ডকুমেন্টেশন এবং উদাহরণ।

গ্লোবাল সেটিংস

বুটস্ট্র্যাপ মৌলিক গ্লোবাল ডিসপ্লে, টাইপোগ্রাফি এবং লিঙ্ক শৈলী সেট করে। যখন আরও নিয়ন্ত্রণের প্রয়োজন হয়, পাঠ্য ইউটিলিটি ক্লাসগুলি দেখুন ।

একটি নেটিভ ফন্ট স্ট্যাকfont-family ব্যবহার করুন যা প্রতিটি OS এবং ডিভাইসের জন্য সেরাটি নির্বাচন করে ।
আরও অন্তর্ভুক্ত এবং অ্যাক্সেসযোগ্য টাইপ স্কেলের জন্য, আমরা ব্রাউজারের ডিফল্ট রুট font-size(সাধারণত 16px) ব্যবহার করি যাতে দর্শকরা তাদের ব্রাউজার ডিফল্টগুলি প্রয়োজন অনুসারে কাস্টমাইজ করতে পারে।
আমাদের টাইপোগ্রাফিক বেস হিসাবে $font-family-base, $font-size-base, এবং গুণাবলী ব্যবহার করুন ।$line-height-base<body>
এর মাধ্যমে বিশ্বব্যাপী লিঙ্কের রঙ সেট করুন $link-colorএবং শুধুমাত্র লিঙ্ক আন্ডারলাইন প্রয়োগ করুন :hover।
( ডিফল্টরূপে) উপর $body-bgএকটি সেট করতে ব্যবহার করুন ।background-color<body>#fff

এই শৈলীগুলির মধ্যে পাওয়া যেতে পারে _reboot.scss, এবং বিশ্বব্যাপী ভেরিয়েবলগুলিকে সংজ্ঞায়িত করা হয়েছে _variables.scss। $font-size-baseসেট করা নিশ্চিত করুন rem।

শিরোনাম

সমস্ত এইচটিএমএল শিরোনাম, এর <h1>মাধ্যমে <h6>, উপলব্ধ।

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

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1ক্লাসের মাধ্যমেও .h6উপলব্ধ, যখন আপনি একটি শিরোনামের ফন্ট স্টাইলিং এর সাথে মেলাতে চান কিন্তু সংশ্লিষ্ট HTML উপাদান ব্যবহার করতে পারবেন না।

h1. বুটস্ট্র্যাপ শিরোনাম

h2. বুটস্ট্র্যাপ শিরোনাম

h3. বুটস্ট্র্যাপ শিরোনাম

h4. বুটস্ট্র্যাপ শিরোনাম

h5. বুটস্ট্র্যাপ শিরোনাম

h6. বুটস্ট্র্যাপ শিরোনাম

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

শিরোনাম কাস্টমাইজ করা

বুটস্ট্র্যাপ 3 থেকে ছোট সেকেন্ডারি হেডিং টেক্সট পুনরায় তৈরি করতে অন্তর্ভুক্ত ইউটিলিটি ক্লাস ব্যবহার করুন।

বিবর্ণ গৌণ পাঠ্য সহ অভিনব প্রদর্শন শিরোনাম

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

শিরোনাম প্রদর্শন করুন

ঐতিহ্যগত শিরোনাম উপাদানগুলি আপনার পৃষ্ঠার বিষয়বস্তুর মাংসে সেরা কাজ করার জন্য ডিজাইন করা হয়েছে। যখন আপনাকে আলাদা করার জন্য একটি শিরোনামের প্রয়োজন হয়, তখন একটি ডিসপ্লে শিরোনাম ব্যবহার করার কথা বিবেচনা করুন — একটি বড়, সামান্য বেশি মতামতযুক্ত শিরোনাম শৈলী৷ মনে রাখবেন এই শিরোনামগুলি ডিফল্টরূপে প্রতিক্রিয়াশীল নয়, তবে প্রতিক্রিয়াশীল ফন্ট আকারগুলি সক্ষম করা সম্ভব ৷

ডিসপ্লে 1

প্রদর্শন 2

প্রদর্শন 3

প্রদর্শন 4

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

সীসা

একটি অনুচ্ছেদ যোগ করে আলাদা করুন .lead।

এটি একটি সীসা অনুচ্ছেদ. এটা নিয়মিত অনুচ্ছেদ থেকে স্ট্যান্ড আউট.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

ইনলাইন টেক্সট উপাদান

সাধারণ ইনলাইন HTML5 উপাদানের জন্য স্টাইলিং।

আপনি মার্ক ট্যাগ ব্যবহার করতে পারেনলক্ষণীয় করাপাঠ্য

~~পাঠ্যের এই লাইনটি মুছে ফেলা পাঠ্য হিসাবে বিবেচনা করা হয়।~~

~~পাঠ্যের এই লাইনটিকে আর সঠিক হিসাবে বিবেচনা করা হয় না।~~

পাঠ্যের এই লাইনটিকে নথিতে একটি সংযোজন হিসাবে বিবেচনা করা বোঝানো হয়েছে।

পাঠ্যের এই লাইনটি আন্ডারলাইন হিসাবে রেন্ডার হবে

পাঠ্যের এই লাইনটি সূক্ষ্ম মুদ্রণ হিসাবে বিবেচনা করা হয়।

এই লাইনটি বোল্ড টেক্সট হিসাবে রেন্ডার করা হয়েছে।

এই লাইনটি তির্যক টেক্সট হিসাবে রেন্ডার করা হয়েছে।

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.markএবং .smallক্লাসগুলিও একই শৈলীগুলি প্রয়োগ করার জন্য উপলব্ধ এবং <mark>ট্যাগগুলি <small>আনতে পারে এমন কোনও অবাঞ্ছিত শব্দার্থিক প্রভাব এড়াতে।

উপরে দেখানো না হলেও, নির্দ্বিধায় ব্যবহার করুন <b>এবং <i>HTML5 এ। <b>শব্দ বা বাক্যাংশগুলিকে অতিরিক্ত গুরুত্ব না দিয়ে হাইলাইট করার জন্য বোঝানো হয় যখন <i>বেশিরভাগই ভয়েস, প্রযুক্তিগত পদ ইত্যাদির জন্য।

টেক্সট ইউটিলিটি

আমাদের টেক্সট ইউটিলিটি এবং কালার ইউটিলিটিগুলির সাথে টেক্সট অ্যালাইনমেন্ট, ট্রান্সফর্ম, স্টাইল, ওজন এবং রঙ পরিবর্তন করুন ।

শব্দ সংক্ষেপ

<abbr>হোভারে প্রসারিত সংস্করণ দেখানোর জন্য সংক্ষিপ্ত রূপ এবং সংক্ষিপ্ত রূপের জন্য HTML এর উপাদানের স্টাইলাইজড বাস্তবায়ন । সংক্ষেপণগুলির একটি ডিফল্ট আন্ডারলাইন থাকে এবং হোভারে এবং সহায়ক প্রযুক্তির ব্যবহারকারীদের জন্য অতিরিক্ত প্রসঙ্গ সরবরাহ করার জন্য একটি সহায়তা কার্সার লাভ করে।

.initialismসামান্য ছোট ফন্ট-আকারের জন্য একটি সংক্ষেপে যোগ করুন ।

attr

এইচটিএমএল

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

ব্লককোট

আপনার নথির মধ্যে অন্য উৎস থেকে সামগ্রীর ব্লক উদ্ধৃত করার জন্য। উদ্ধৃতি হিসাবে <blockquote class="blockquote">যেকোনো HTML এর চারপাশে মোড়ানো ।

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

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

একটি উৎসের নামকরণ

<footer class="blockquote-footer">উৎস শনাক্ত করার জন্য একটি যোগ করুন । সোর্স কাজের নাম লিখুন <cite>।

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

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

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

প্রান্তিককরণ

আপনার ব্লককোট এর সারিবদ্ধকরণ পরিবর্তন করতে প্রয়োজনীয় টেক্সট ইউটিলিটি ব্যবহার করুন।

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

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

<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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

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

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

তালিকা

স্টাইলবিহীন

তালিকা আইটেমগুলিতে ডিফল্ট list-styleএবং বাম মার্জিন সরান (শুধুমাত্র শিশুদের জন্য)। এটি শুধুমাত্র অবিলম্বে শিশুদের তালিকার আইটেমগুলিতে প্রযোজ্য , যার অর্থ আপনাকে যেকোনো নেস্টেড তালিকার জন্যও ক্লাস যোগ করতে হবে।

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

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

সঙ্গতিপূর্ণভাবে

একটি তালিকার বুলেটগুলি সরান এবং marginদুটি শ্রেণির সংমিশ্রণে কিছু আলো প্রয়োগ করুন, .list-inlineএবং .list-inline-item.

এটি একটি তালিকা আইটেম.
এবং অন্য একটি.
কিন্তু তারা ইনলাইনে প্রদর্শিত হয়.

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

বর্ণনা তালিকা প্রান্তিককরণ

আমাদের গ্রিড সিস্টেমের পূর্বনির্ধারিত ক্লাস (বা শব্দার্থিক মিশ্রণ) ব্যবহার করে অনুভূমিকভাবে পদ এবং বিবরণ সারিবদ্ধ করুন। দীর্ঘ মেয়াদের জন্য, আপনি ঐচ্ছিকভাবে .text-truncateএকটি উপবৃত্ত সহ পাঠ্যটি ছেঁটে ফেলার জন্য একটি শ্রেণী যোগ করতে পারেন।

বর্ণনা তালিকা

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

মেয়াদ

শব্দের জন্য সংজ্ঞা।

এবং আরো কিছু স্থানধারক সংজ্ঞা পাঠ্য.

আরেকটি পদ

এই সংজ্ঞাটি সংক্ষিপ্ত, তাই কোন অতিরিক্ত অনুচ্ছেদ বা কিছু নেই।

ছেঁটে দেওয়া শব্দটি কাটা হয়

স্থান টাইট হলে এটি কার্যকর হতে পারে। শেষে একটি উপবৃত্ত যোগ করে।

বাসা বাঁধে

নেস্টেড সংজ্ঞা তালিকা: আমি আপনাকে সংজ্ঞা তালিকা পছন্দ শুনেছি. আমাকে আপনার সংজ্ঞা তালিকা ভিতরে একটি সংজ্ঞা তালিকা করা যাক.

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

প্রতিক্রিয়াশীল ফন্ট আকার

v4.3.0 অনুসারে, প্রতিক্রিয়াশীল ফন্টের আকার সক্ষম করার বিকল্প সহ বুটস্ট্র্যাপ জাহাজে পাঠানো হয়, যা পাঠ্যকে ডিভাইস এবং ভিউপোর্ট আকার জুড়ে স্বাভাবিকভাবে স্কেল করার অনুমতি দেয়। Sass ভেরিয়েবল পরিবর্তন করে বুটস্ট্র্যাপ পুনরায় কম্পাইল করে RFS সক্রিয় করা যেতে পারে ।$enable-responsive-font-sizestrue

RFS সমর্থন করার জন্য , আমরা আমাদের স্বাভাবিক font-sizeবৈশিষ্ট্য প্রতিস্থাপন করতে একটি Sass মিক্সিন ব্যবহার করি। প্রতিক্রিয়াশীল ফন্টের আকারগুলি প্রতিক্রিয়াশীল স্কেলিং আচরণ সক্ষম করতে ভিউপোর্ট ইউনিটের calc()মিশ্রণ সহ ফাংশনে কম্পাইল করা হবে । RFSrem এবং এর কনফিগারেশন সম্পর্কে আরও তথ্য এর GitHub সংগ্রহস্থলে পাওয়া যাবে ।