in English

টাইপোগ্রাফি

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

এই পৃষ্ঠায়

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

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

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

html

<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 থেকে ছোট সেকেন্ডারি হেডিং টেক্সট পুনরায় তৈরি করতে অন্তর্ভুক্ত ইউটিলিটি ক্লাস ব্যবহার করুন।

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

html

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

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

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

ডিসপ্লে 1

প্রদর্শন 2

প্রদর্শন 3

প্রদর্শন 4

প্রদর্শন 5

প্রদর্শন 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

$display-font-sizesপ্রদর্শন শিরোনাম Sass মানচিত্র এবং দুটি ভেরিয়েবলের মাধ্যমে কনফিগার করা হয় , $display-font-weightএবং $display-line-height.

প্রদর্শন শিরোনাম দুটি ভেরিয়েবলের মাধ্যমে কাস্টমাইজ করা যায়, $display-font-familyএবং $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

সীসা

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

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

html

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

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

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

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

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

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

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

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

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

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

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

html

<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>

সতর্ক থাকুন যে এই ট্যাগগুলি শব্দার্থগত উদ্দেশ্যে ব্যবহার করা উচিত:

রেফারেন্স বা স্বরলিপির উদ্দেশ্যে চিহ্নিত বা হাইলাইট করা পাঠ্যের প্রতিনিধিত্ব করে।
কপিরাইট এবং আইনি টেক্সট মত পার্শ্ব-মন্তব্য এবং ছোট মুদ্রণ প্রতিনিধিত্ব করে।
<s>এমন উপাদানের প্রতিনিধিত্ব করে যা আর প্রাসঙ্গিক নয় বা আর সঠিক নয়।
ইনলাইন পাঠ্যের একটি স্প্যান উপস্থাপন করে যা এমনভাবে রেন্ডার করা উচিত যা নির্দেশ করে যে এটিতে একটি নন-টেক্সচুয়াল টীকা রয়েছে।

আপনি যদি আপনার পাঠ্যকে স্টাইল করতে চান তবে আপনার পরিবর্তে নিম্নলিখিত ক্লাসগুলি ব্যবহার করা উচিত:

.markহিসাবে একই শৈলী প্রয়োগ করা হবে .
.smallহিসাবে একই শৈলী প্রয়োগ করা হবে .
.text-decoration-underlineহিসাবে একই শৈলী প্রয়োগ করা হবে .
.text-decoration-line-throughহিসাবে একই শৈলী প্রয়োগ করা হবে <s>.

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

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

টেক্সট সারিবদ্ধকরণ, রূপান্তর, শৈলী, ওজন, লাইন-উচ্চতা, সাজসজ্জা এবং রঙ পরিবর্তন করুন আমাদের পাঠ্য ইউটিলিটি এবং রঙের ইউটিলিটিগুলির সাথে ।

শব্দ সংক্ষেপ

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

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

attr

এইচটিএমএল

html

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

ব্লককোট

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

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

html

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

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

এইচটিএমএল স্পেকের জন্য প্রয়োজন যে ব্লককোট অ্যাট্রিবিউশন এর বাইরে রাখা হবে <blockquote>। অ্যাট্রিবিউশন প্রদান করার সময়, আপনার <blockquote>a তে মোড়ানো এবং ক্লাসের সাথে <figure>একটি <figcaption>বা একটি ব্লক স্তরের উপাদান (যেমন, ) ব্যবহার করুন। সেইসাথে .blockquote-footerউৎস কাজের নাম মোড়ানো নিশ্চিত করুন .<cite>

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

html

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

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

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

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

html

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

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

html

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

তালিকা

স্টাইলবিহীন

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

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

html

<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.

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

html

<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একটি উপবৃত্ত সহ পাঠ্যটি ছেঁটে ফেলার জন্য একটি শ্রেণী যোগ করতে পারেন।

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

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

মেয়াদ

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

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

আরেকটি পদ

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

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

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

বাসা বাঁধে

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

html

<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>

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

বুটস্ট্র্যাপ 5-এ, আমরা ডিফল্টরূপে প্রতিক্রিয়াশীল ফন্টের আকার সক্ষম করেছি, পাঠ্যকে ডিভাইস এবং ভিউপোর্ট আকার জুড়ে স্বাভাবিকভাবে স্কেল করার অনুমতি দেয়। এটি কিভাবে কাজ করে তা জানতে RFS পৃষ্ঠাটি দেখুন ।

সস

ভেরিয়েবল

শিরোনাম সাইজিং এবং ব্যবধান জন্য কিছু উত্সর্গীকৃত ভেরিয়েবল আছে.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

এখানে এবং রিবুট -এ কভার করা বিবিধ টাইপোগ্রাফি উপাদানগুলির ডেডিকেটেড ভেরিয়েবল রয়েছে।

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

মিক্সিন

টাইপোগ্রাফির জন্য কোনো ডেডিকেটেড মিক্সিন নেই, তবে বুটস্ট্র্যাপ রেসপন্সিভ ফন্ট সাইজিং (RFS) ব্যবহার করে ।