রিবুট করুন
রিবুট, একটি একক ফাইলে উপাদান-নির্দিষ্ট CSS পরিবর্তনের একটি সংগ্রহ, একটি মার্জিত, সামঞ্জস্যপূর্ণ, এবং সহজ বেসলাইন তৈরি করার জন্য বুটস্ট্র্যাপ কিকস্টার্ট করুন।
এপ্রোচ
শুধুমাত্র উপাদান নির্বাচক ব্যবহার করে কিছুটা মতামতযুক্ত শৈলী সহ অনেক এইচটিএমএল উপাদান প্রদান করে, নর্মালাইজের উপর রিবুট তৈরি করে। অতিরিক্ত স্টাইলিং শুধুমাত্র ক্লাসের সাথে করা হয়। উদাহরণস্বরূপ, আমরা <table>
একটি সহজ বেসলাইনের জন্য কিছু শৈলী রিবুট করি এবং পরে .table
, .table-bordered
, এবং আরও অনেক কিছু প্রদান করি।
রিবুটে কী ওভাররাইড করতে হবে তা বেছে নেওয়ার জন্য এখানে আমাদের নির্দেশিকা এবং কারণ রয়েছে:
- স্কেলেবল কম্পোনেন্ট স্পেসিংয়ের জন্য s
rem
এর পরিবর্তে s ব্যবহার করতে কিছু ব্রাউজার ডিফল্ট মান আপডেট করুন।em
- এড়িয়ে চলুন
margin-top
। উল্লম্ব মার্জিন ভেঙে পড়তে পারে, অপ্রত্যাশিত ফলাফল দেয়। আরো গুরুত্বপূর্ণ যদিও, একটি একক দিকmargin
একটি সহজ মানসিক মডেল. - ডিভাইসের আকার জুড়ে সহজে স্কেলিং করার জন্য, ব্লক উপাদানগুলি
rem
s-এর জন্যmargin
s ব্যবহার করা উচিত। - -সম্পর্কিত বৈশিষ্ট্যের ঘোষণা
font
ন্যূনতম রাখুন,inherit
যখনই সম্ভব ব্যবহার করুন।
পৃষ্ঠা ডিফল্ট
আরও ভাল পৃষ্ঠা-ব্যাপী ডিফল্ট প্রদান করতে উপাদান <html>
এবং <body>
উপাদান আপডেট করা হয়। আরো নির্দিষ্টভাবে:
- বিশ্বব্যাপী
box-sizing
প্রতিটি উপাদানের উপর সেট করা আছে—সহ*::before
এবং*::after
, থেকেborder-box
। এটি নিশ্চিত করে যে প্যাডিং বা সীমানার কারণে উপাদানটির ঘোষিত প্রস্থ কখনই অতিক্রম করবে না। - তে কোন বেস
font-size
ঘোষণা করা হয় না<html>
, তবে16px
ধরে নেওয়া হয় (ব্রাউজার ডিফল্ট)। ব্যবহারকারীর পছন্দগুলিকে সম্মান করে এবং আরও অ্যাক্সেসযোগ্য পদ্ধতি নিশ্চিত করার সময় মিডিয়া প্রশ্নের মাধ্যমে সহজ প্রতিক্রিয়াশীল টাইপ-স্কেলিংয়ের জন্যfont-size: 1rem
প্রয়োগ করা হয় ।<body>
- এছাড়াও
<body>
একটি বিশ্বব্যাপী সেট করেfont-family
,line-height
, এবংtext-align
. ফন্টের অসঙ্গতি রোধ করার জন্য এটি কিছু ফর্ম উপাদান দ্বারা উত্তরাধিকারসূত্রে প্রাপ্ত হয়। - নিরাপত্তার জন্য,
<body>
একটি ঘোষণা করেছেbackground-color
, ডিফল্ট করেছে#fff
।
নেটিভ ফন্ট স্ট্যাক
ডিফল্ট ওয়েব ফন্টগুলি (Helvetica Neue, Helvetica, এবং Arial) বুটস্ট্র্যাপ 4 এ বাদ দেওয়া হয়েছে এবং প্রতিটি ডিভাইস এবং OS-এ সর্বোত্তম পাঠ্য রেন্ডারিংয়ের জন্য একটি "নেটিভ ফন্ট স্ট্যাক" দিয়ে প্রতিস্থাপিত হয়েছে। এই স্ম্যাশিং ম্যাগাজিন নিবন্ধে নেটিভ ফন্ট স্ট্যাক সম্পর্কে আরও পড়ুন ।
$font-family-sans-serif:
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// 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
শিরোনাম এবং অনুচ্ছেদ
সমস্ত শিরোনাম উপাদান—যেমন, <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
।
- সমস্ত তালিকা তাদের শীর্ষ মার্জিন সরানো হয়েছে
- এবং তাদের নীচের মার্জিন স্বাভাবিক করা হয়েছে
- নেস্টেড তালিকার নিচের মার্জিন নেই
- এই ভাবে তারা একটি আরো এমনকি চেহারা আছে
- বিশেষ করে যখন আরও তালিকা আইটেম দ্বারা অনুসরণ করা হয়
- বাম প্যাডিংও রিসেট করা হয়েছে
- এখানে একটি আদেশ তালিকা
- কয়েকটি তালিকা আইটেম সঙ্গে
- এটি একই সামগ্রিক চেহারা আছে
- আগের মতোই সাজানো তালিকা
সহজ স্টাইলিং, স্পষ্ট শ্রেণিবিন্যাস এবং আরও ভাল ব্যবধানের জন্য, বর্ণনা তালিকাগুলি আপডেট করেছে margin
। <dd>
s রিসেট margin-left
করুন 0
এবং যোগ করুন margin-bottom: .5rem
। <dt>
s গাঢ় হয় .
- বর্ণনা তালিকা
- একটি বর্ণনা তালিকা শর্তাবলী সংজ্ঞায়িত করার জন্য উপযুক্ত।
- মেয়াদ
- শব্দের জন্য সংজ্ঞা।
- একই শব্দের জন্য একটি দ্বিতীয় সংজ্ঞা।
- আরেকটি পদ
- এই অন্য পদের জন্য সংজ্ঞা.
প্রিফরম্যাট করা টেক্সট
উপাদানটিকে <pre>
অপসারণ করতে margin-top
এবং এর জন্য rem
ইউনিটগুলি ব্যবহার করতে পুনরায় সেট করা হয়েছে margin-bottom
।
উদাহরণ-উপাদান { মার্জিন-নিচ: 1rem; }
টেবিল
টেবিলগুলিকে স্টাইল 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)
.
এই পরিবর্তন, এবং আরো, নীচে প্রদর্শিত হয়.
বোতামে পয়েন্টার
role="button"
রিবুটে ডিফল্ট কার্সার পরিবর্তন করার জন্য একটি বর্ধিতকরণ অন্তর্ভুক্ত রয়েছে pointer
৷ উপাদানগুলি ইন্টারেক্টিভ নির্দেশ করতে সাহায্য করার জন্য উপাদানগুলিতে এই বৈশিষ্ট্যটি যুক্ত করুন৷ এই ভূমিকাটি <button>
উপাদানগুলির জন্য প্রয়োজনীয় নয়, যা তাদের নিজস্ব cursor
পরিবর্তন পায়।
<span role="button" tabindex="0">Non-button element button</span>
বিবিধ উপাদান
ঠিকানা
ব্রাউজার ডিফল্ট থেকে তে <address>
রিসেট করতে উপাদানটি আপডেট করা হয়েছে । এছাড়াও এখন উত্তরাধিকারসূত্রে প্রাপ্ত, এবং যোগ করা হয়েছে। s হল নিকটতম পূর্বপুরুষের (বা কাজের একটি সম্পূর্ণ অংশ) জন্য যোগাযোগের তথ্য উপস্থাপন করার জন্য। এর সাথে লাইন শেষ করে বিন্যাস সংরক্ষণ করুন ।font-style
italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 পুরো নাম
[email protected]
ব্লককোট
ব্লককোটগুলির ডিফল্ট margin
হল 1em 40px
, তাই আমরা 0 0 1rem
অন্যান্য উপাদানগুলির সাথে আরও সামঞ্জস্যপূর্ণ কিছুর জন্য এটি পুনরায় সেট করি।
একটি সুপরিচিত উদ্ধৃতি, একটি ব্লককোট উপাদানের মধ্যে রয়েছে।
ইনলাইন উপাদান
অনুচ্ছেদ পাঠ্যের <abbr>
মধ্যে এটিকে আলাদা করার জন্য উপাদানটি মৌলিক স্টাইলিং গ্রহণ করে।
সারসংক্ষেপ
সারাংশে ডিফল্ট cursor
হল text
, তাই আমরা এটিকে রিসেট করি যাতে pointer
বোঝাতে হয় যে উপাদানটির সাথে এটিতে ক্লিক করে ইন্টারঅ্যাক্ট করা যেতে পারে।
কিছু বিবরণ
বিস্তারিত সম্পর্কে আরো তথ্য.
এমনকি আরো বিস্তারিত
এখানে বিস্তারিত সম্পর্কে আরো বিস্তারিত আছে.
HTML5 [hidden]
বৈশিষ্ট্য
HTML5 নামের একটি নতুন গ্লোবাল অ্যাট্রিবিউট[hidden]
display: none
যোগ করে, যা ডিফল্ট হিসেবে স্টাইল করা হয়। PureCSS থেকে একটি ধারণা ধার করে , আমরা এই ডিফল্টটিকে ভুলবশত ওভাররাইড হওয়া থেকে [hidden] { display: none !important; }
রক্ষা করতে সাহায্য করার মাধ্যমে উন্নতি করি। display
যদিও [hidden]
স্থানীয়ভাবে IE10 দ্বারা সমর্থিত নয়, আমাদের CSS-এ স্পষ্ট ঘোষণা সেই সমস্যাটির কাছাকাছি আসে।
<input type="text" hidden>
jQuery অসঙ্গতি
[hidden]
$(...).hide()
jQuery এর এবং $(...).show()
পদ্ধতির সাথে সামঞ্জস্যপূর্ণ নয় । অতএব, আমরা বর্তমানে উপাদানগুলির [hidden]
পরিচালনার জন্য অন্যান্য কৌশলগুলির উপর বিশেষভাবে সমর্থন করি না।display
শুধুমাত্র একটি উপাদানের দৃশ্যমানতা টগল করতে, যার অর্থ এটি display
সংশোধন করা হয়নি এবং উপাদানটি এখনও নথির প্রবাহকে প্রভাবিত করতে পারে, পরিবর্তে ক্লাসটি ব্যবহার করুন.invisible
।