টাইপোগ্রাফি
বিশ্বব্যাপী সেটিংস, শিরোনাম, বডি টেক্সট, তালিকা এবং আরও অনেক কিছু সহ বুটস্ট্র্যাপ টাইপোগ্রাফির জন্য ডকুমেন্টেশন এবং উদাহরণ।
বুটস্ট্র্যাপ মৌলিক গ্লোবাল ডিসপ্লে, টাইপোগ্রাফি এবং লিঙ্ক শৈলী সেট করে। যখন আরও নিয়ন্ত্রণের প্রয়োজন হয়, পাঠ্য ইউটিলিটি ক্লাসগুলি দেখুন ।
- একটি নেটিভ ফন্ট স্ট্যাক
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. বুটস্ট্র্যাপ শিরোনাম |
|
h2. বুটস্ট্র্যাপ শিরোনাম |
|
h3. বুটস্ট্র্যাপ শিরোনাম |
|
h4. বুটস্ট্র্যাপ শিরোনাম |
|
h5. বুটস্ট্র্যাপ শিরোনাম |
|
h6. বুটস্ট্র্যাপ শিরোনাম |
.h1
ক্লাসের মাধ্যমেও .h6
উপলব্ধ, যখন আপনি একটি শিরোনামের ফন্ট স্টাইলিংয়ের সাথে মেলাতে চান কিন্তু সংশ্লিষ্ট HTML উপাদান ব্যবহার করতে পারবেন না।
h1. বুটস্ট্র্যাপ শিরোনাম
h2. বুটস্ট্র্যাপ শিরোনাম
h3. বুটস্ট্র্যাপ শিরোনাম
h4. বুটস্ট্র্যাপ শিরোনাম
h5. বুটস্ট্র্যাপ শিরোনাম
h6. বুটস্ট্র্যাপ শিরোনাম
বুটস্ট্র্যাপ 3 থেকে ছোট সেকেন্ডারি হেডিং টেক্সট পুনরায় তৈরি করতে অন্তর্ভুক্ত ইউটিলিটি ক্লাস ব্যবহার করুন।
ঐতিহ্যগত শিরোনাম উপাদানগুলি আপনার পৃষ্ঠার বিষয়বস্তুর মাংসে সেরা কাজ করার জন্য ডিজাইন করা হয়েছে। যখন আপনাকে আলাদা করার জন্য একটি শিরোনামের প্রয়োজন হয়, তখন একটি ডিসপ্লে শিরোনাম ব্যবহার করার কথা বিবেচনা করুন — একটি বড়, সামান্য বেশি মতামতযুক্ত শিরোনাম শৈলী৷
ডিসপ্লে 1 |
প্রদর্শন 2 |
প্রদর্শন 3 |
প্রদর্শন 4 |
একটি অনুচ্ছেদ যোগ করে আলাদা করুন .lead
।
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ডুইস মলিস, এটি অ কমোডো লুকটাস।
সাধারণ ইনলাইন HTML5 উপাদানের জন্য স্টাইলিং।
আপনি মার্ক ট্যাগ ব্যবহার করতে পারেনলক্ষণীয় করাপাঠ্য
পাঠ্যের এই লাইনটি মুছে ফেলা পাঠ্য হিসাবে বিবেচনা করা হয়।
পাঠ্যের এই লাইনটিকে আর সঠিক হিসাবে গণ্য করা উচিত নয়।
পাঠ্যের এই লাইনটিকে নথিতে একটি সংযোজন হিসাবে বিবেচনা করা বোঝানো হয়েছে।
পাঠ্যের এই লাইনটি আন্ডারলাইন হিসাবে রেন্ডার হবে
পাঠ্যের এই লাইনটি সূক্ষ্ম মুদ্রণ হিসাবে বিবেচনা করা হয়।
এই লাইনটি বোল্ড টেক্সট হিসাবে রেন্ডার করা হয়েছে।
এই লাইনটি তির্যক টেক্সট হিসাবে রেন্ডার করা হয়েছে।
.mark
এবং .small
ক্লাসগুলিও একই শৈলীগুলি প্রয়োগ করার জন্য উপলব্ধ এবং <mark>
ট্যাগগুলি <small>
আনতে পারে এমন কোনও অবাঞ্ছিত শব্দার্থিক প্রভাব এড়াতে।
উপরে দেখানো না হলেও, নির্দ্বিধায় ব্যবহার করুন <b>
এবং <i>
HTML5 এ। <b>
শব্দ বা বাক্যাংশগুলিকে অতিরিক্ত গুরুত্ব না দিয়ে হাইলাইট করার জন্য বোঝানো হয় যখন <i>
বেশিরভাগই ভয়েস, প্রযুক্তিগত পদ ইত্যাদির জন্য।
আমাদের টেক্সট ইউটিলিটি এবং কালার ইউটিলিটিগুলির সাথে টেক্সট অ্যালাইনমেন্ট, ট্রান্সফর্ম, স্টাইল, ওজন এবং রঙ পরিবর্তন করুন ।
<abbr>
হোভারে প্রসারিত সংস্করণ দেখানোর জন্য সংক্ষিপ্ত রূপ এবং সংক্ষিপ্ত রূপের জন্য HTML এর উপাদানের স্টাইলাইজড বাস্তবায়ন । সংক্ষেপণগুলির একটি ডিফল্ট আন্ডারলাইন থাকে এবং হোভারে এবং সহায়ক প্রযুক্তির ব্যবহারকারীদের জন্য অতিরিক্ত প্রসঙ্গ সরবরাহ করতে সহায়তা কার্স���র লাভ করে।
.initialism
সামান্য ছোট ফন্ট-আকারের জন্য একটি সংক্ষেপে যোগ করুন ।
attr
এইচটিএমএল
আপনার নথির মধ্যে অন্য উৎস থেকে সামগ্রীর ব্লক উদ্ধৃত করার জন্য। উদ্ধৃতি হিসাবে <blockquote class="blockquote">
যেকোনো HTML এর চারপাশে মোড়ানো ।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante.
<footer class="blockquote-footer">
উৎস শনাক্ত করার জন্য একটি যোগ করুন । উৎস কাজের নাম মোড়ানো <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante.
আপনার ব্লককোট এর সারিবদ্ধকরণ পরিবর্তন করতে প্রয়োজনীয় টেক্সট ইউটিলিটিগুলি ব্যবহার করুন।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante.
তালিকা আইটেমগুলিতে ডিফল্ট list-style
এবং বাম মার্জিন সরান (শুধুমাত্র শিশুদের জন্য)। এটি শুধুমাত্র অবিলম্বে শিশুদের তালিকার আইটেমগুলির ক্ষেত্রে প্রযোজ্য , যার অর্থ আপনাকে যেকোনো নেস্টেড তালিকার জন্যও ক্লাস যোগ করতে হবে।
- অ্যাডমিন সরবরাহকারী
- কনসেক্টেতুর অ্যাডিপিসিং এলিট
- ম্যাসা এ পূর্ণসংখ্যা মোলেস্টি লরেম
- প্রিটিয়াম নিসল অ্যালিকুয়েটে ফ্যাসিলিসিস
- নুল্লা ভোলুটপাট আলিকাম ভেলিট
- Phasellus iaculis neque
- Purus sodales ultricies
- ভেস্টিবুলম ল্যাওরেট পোর্টটিটর সেম
- এসি tristique libero volutpat এ
- Faucibus porta lacus fringilla vel
- Aenean বসে amet erat nunc
- এগেট পোর্টটিটর লোরেম
একটি তালিকার বুলেটগুলি সরান এবং margin
দুটি শ্রেণির সংমিশ্রণে কিছু আলো প্রয়োগ করুন, .list-inline
এবং .list-inline-item
.
- Lorem ipsum
- ফ্যাসেলাস আইকুলিস
- নুলা ভোল্টপাট
আমাদের গ্রিড সিস্টেমের পূর্বনির্ধারিত ক্লাস (বা শব্দার্থিক মিশ্রণ) ব্যবহার করে অনুভূমিকভাবে পদ এবং বিবরণ সারিবদ্ধ করুন। দীর্ঘ মেয়াদের জন্য, আপনি ঐচ্ছিকভাবে .text-truncate
একটি উপবৃত্ত সহ পাঠ্যটি ছেঁটে ফেলার জন্য একটি শ্রেণী যোগ করতে পারেন।
- বর্ণনা তালিকা
- একটি বর্ণনা তালিকা শর্তাবলী সংজ্ঞায়িত করার জন্য উপযুক্ত।
- ইউইসমোড
-
Vestibulum id ligula Porta felis euismod Semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- মালেসুদা পোর্টা
- Etiam porta sem malesuada Magna mollis euismod.
- ছেঁটে দেওয়া শব্দটি কাটা হয়
- ফুস ড্যাপিবাস, টেলস এসি কার্সাস কমোডো, টর্টার মৌরিস কনডিমেন্টাম নিভ, ইউটি ফার্মেন্টাম ম্যাসা জাস্টো সিট অ্যামেট রিসাস।
- বাসা বাঁধে
-
- নেস্টেড সংজ্ঞা তালিকা
- Aenean posuere, tortor sed cursus feugiat, Nunc augue blandit Nunc.
প্রতিক্রিয়াশীল টাইপোগ্রাফিfont-size
মিডিয়া প্রশ্নের একটি সিরিজের মধ্যে রুট উপাদানগুলির সামঞ্জস্য করে পাঠ্য এবং উপাদানগুলিকে স্কেলিং বোঝায় । বুটস্ট্র্যাপ আপনার জন্য এটি করে না, তবে আপনার প্রয়োজন হলে এটি যোগ করা মোটামুটি সহজ।
এখানে অনুশীলনে এটির একটি উদাহরণ। font-size
আপনি যা চান তা এবং মিডিয়া প্রশ্ন চয়ন করুন ।