পুনৰাৰম্ভ কৰক
পুনৰাৰম্ভ কৰক, এটা নথিপত্ৰত উপাদান-নিৰ্দিষ্ট CSS পৰিবৰ্তনৰ এটা সংগ্ৰহ, এটা মাৰ্জিত, সুসংগত, আৰু সৰল ভিত্তিৰেখা প্ৰদান কৰিবলে Bootstrap kickstart কৰক।
পদ্ধতি
Reboot এ Normalize ৰ ওপৰত নিৰ্মাণ কৰে, কেৱল উপাদান নিৰ্বাচকসমূহ ব্যৱহাৰ কৰি কিছু মতামতযুক্ত শৈলীসমূহৰ সৈতে বহুতো HTML উপাদান প্ৰদান কৰে। অতিৰিক্ত ষ্টাইলিং কেৱল ক্লাছৰ সৈতেহে কৰা হয়। উদাহৰণস্বৰূপ, আমি <table>
এটা সৰল ভিত্তিৰেখাৰ বাবে কিছুমান শৈলী পুনৰাৰম্ভ কৰোঁ আৰু পিছত .table
, .table-bordered
, আৰু অধিক প্ৰদান কৰোঁ ।
ইয়াত আমাৰ নিৰ্দেশনা আৰু পুনৰাৰম্ভত কি অভাৰৰাইড কৰিব লাগে নিৰ্ব্বাচন কৰাৰ কাৰণসমূহ আছে:
- স্কেলেবল উপাদান ব্যৱধানৰ বাবে s
rem
ৰ পৰিবৰ্তে s ব্যৱহাৰ কৰিবলে কিছুমান ব্ৰাউজাৰ অবিকল্পিত মান আপডেইট কৰক ।em
- এৰক
margin-top
. উলম্ব মাৰ্জিনবোৰ ভাঙি যাব পাৰে, যাৰ ফলত অপ্ৰত্যাশিত ফলাফল পোৱা যায়। তাতোকৈ গুৰুত্বপূৰ্ণ কথাটো হ’ল, এটা একক দিশৰmargin
হৈছে এটা সহজ মানসিক আৰ্হি। - ডিভাইচ আকাৰসমূহৰ মাজেৰে সহজ স্কেলিংৰ বাবে, ব্লক উপাদানসমূহে
rem
s ৰ বাবেmargin
s ব্যৱহাৰ কৰিব লাগে। - -সম্পৰ্কীয় বৈশিষ্ট্যসমূহৰ ঘোষণাসমূহ
font
নূন্যতম ৰাখক,inherit
সম্ভৱ হ'লে ব্যৱহাৰ কৰক।
পৃষ্ঠা অবিকল্পিত
<html>
আৰু উপাদানসমূহক <body>
উন্নত পৃষ্ঠা-ব্যাপী অবিকল্পিতসমূহ প্ৰদান কৰিবলে আপডেইট কৰা হয়। অধিক নিৰ্দিষ্টভাৱে ক’বলৈ গ’লে:
box-sizing
প্ৰতিটো উপাদানৰ ওপৰত গোলকীয়ভাৱে সংহতি কৰা হৈছে— আৰু*::before
,*::after
toborder-box
. ই নিশ্চিত কৰে যে পেডিং বা সীমাৰ বাবে উপাদানৰ ঘোষিত প্ৰস্থ কেতিয়াও অতিক্ৰম কৰা নহয়।- ত কোনো ভিত্তি
font-size
ঘোষণা কৰা হোৱা নাই<html>
, কিন্তু16px
ধৰি লোৱা হৈছে (ব্ৰাউজাৰ অবিকল্পিত)। ব্যৱহাৰকাৰীৰ পছন্দসমূহক সন্মান জনাই আৰু এটা অধিক অভিগম্য পদ্ধতি সুনিশ্চিত কৰাৰ সময়ত মাধ্যম প্ৰশ্নসমূহৰ যোগেদি সহজ প্ৰতিক্ৰিয়াশীল ধৰণ-স্কেলিংৰ বাবেfont-size: 1rem
প্ৰয়োগ কৰা হয় ।<body>
- লগতে
<body>
এটা গ্লোবেলfont-family
,line-height
, আৰুtext-align
. ইয়াক পিছত কিছুমান ফৰ্ম উপাদানৰ দ্বাৰা উত্তৰাধিকাৰী সূত্ৰে পোৱা যায় ফন্টৰ অসামঞ্জস্যতা ৰোধ কৰিবলৈ। - সুৰক্ষাৰ বাবে,
<body>
এটা ঘোষণা কৰা হৈছেbackground-color
, অবিকল্পিত কৰা হৈছে#fff
।
স্থানীয় ফন্ট ষ্টেক
অবিকল্পিত ৱেব ফন্টসমূহ (Helvetica Neue, Helvetica, আৰু Arial) Bootstrap 4 ত বাদ দিয়া হৈছে আৰু প্ৰতিটো ডিভাইচ আৰু OS ত অনুকূল লিখনী ৰেণ্ডাৰৰ বাবে এটা “স্থানীয় ফন্ট ষ্টেক” ৰ সৈতে সলনি কৰা হৈছে। এই Smashing Magazine প্ৰবন্ধত স্থানীয় ফন্ট ষ্টেকসমূহৰ বিষয়ে অধিক পঢ়ক ।
$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>
আৰু স্বয়ংক্ৰিয়ভাৱে সমগ্ৰ Bootstrap ত গোলকীয়ভাৱে উত্তৰাধিকাৰী সূত্ৰে পোৱা যায় । গোলকীয় সলনি কৰিবলে , বুটষ্ট্ৰেপ 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> |
h৫. বুটষ্ট্ৰেপ হেডিং |
<h6></h6> |
h6. বুটষ্ট্ৰেপ হেডিং |
তালিকাসমূহ
সকলো তালিকা— <ul>
, <ol>
, আৰু <dl>
—তেওঁলোকৰ margin-top
আঁতৰোৱা হৈছে আৰু এটা margin-bottom: 1rem
. নেষ্টেড তালিকাসমূহৰ কোনো margin-bottom
.
- সকলো তালিকাৰ ওপৰৰ মাৰ্জিন আঁতৰোৱা হৈছে
- আৰু তেওঁলোকৰ তলৰ মাৰ্জিন স্বাভাৱিক হৈ পৰিল
- নেষ্টেড তালিকাৰ কোনো তলৰ মাৰ্জিন নাথাকে
- এইদৰে ইহঁতৰ ৰূপ অধিক সমতাপূৰ্ণ হয়
- বিশেষকৈ যেতিয়া অধিক তালিকাৰ বস্তুৰ পিছত থাকে
- বাওঁফালৰ পেডিংটোও ৰিছেট কৰা হৈছে
- ইয়াত এটা ক্ৰমবদ্ধ তালিকা দিয়া হৈছে
- কেইটামান তালিকাৰ বস্তুৰ সৈতে
- ইয়াৰ সামগ্ৰিক ৰূপ একে
- পূৰ্বৰ অক্ৰমিত তালিকাৰ দৰে
সৰল ষ্টাইলিং, স্পষ্ট হাইৰাৰ্কি, আৰু উন্নত ব্যৱধানৰ বাবে, বিৱৰণ তালিকাসমূহে আপডেইট কৰা margin
s আছে। <dd>
s লৈ পুনৰায় সেট margin-left
কৰক 0
আৰু যোগ কৰক margin-bottom: .5rem
। <dt>
s বল্ড কৰা হৈছে .
- বিৱৰণ তালিকাসমূহ
- শব্দ সংজ্ঞায়িত কৰাৰ বাবে এটা বিৱৰণ তালিকা নিখুঁত।
- কাল
- শব্দটোৰ বাবে সংজ্ঞা।
- একেটা শব্দৰ বাবে দ্বিতীয় সংজ্ঞা।
- আন এটা শব্দ
- এই আনটো শব্দৰ সংজ্ঞা।
পূৰ্বফৰ্মেট কৰা লিখনী
উপাদানটোক ইয়াৰ <pre>
আঁতৰাবলৈ আৰু ইয়াৰ বাবে এককসমূহ margin-top
ব্যৱহাৰ কৰিবলৈ পুনৰায় সেট কৰা হয় ।rem
margin-bottom
.উদাহৰণ-উপাদান { মাৰ্জিন-তলত: 1rem; }
টেবুলসমূহ
টেবুলসমূহ শৈলী <caption>
s লে সামান্য সামঞ্জস্য কৰা হয়, সীমাসমূহ সংকুচিত কৰা হয়, আৰু 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>
Misc উপাদানসমূহ
ঠিকনা
উপাদানটো <address>
আপডেইট কৰা হয় ব্ৰাউজাৰ অবিকল্পিতক font-style
ৰ পৰা লৈ পুনৰায় সেট italic
কৰিবলে normal
। line-height
ও এতিয়া উত্তৰাধিকাৰী সূত্ৰে পোৱা গৈছে, আৰু margin-bottom: 1rem
যোগ কৰা হৈছে। <address>
s হৈছে নিকটতম পূৰ্বপুৰুষৰ (বা এটা সমগ্ৰ কামৰ বাবে) যোগাযোগৰ তথ্য উপস্থাপনৰ বাবে। ৰ সৈতে শাৰীসমূহ শেষ কৰি ফৰ্মেটিং সংৰক্ষণ কৰক <br>
।
১৩৫৫ মাৰ্কেট ছেণ্ট, ছুইট ৯০০
ছান ফ্ৰান্সিস্কো, কে এ ৯৪১০৩
পি: (১২৩) ৪৫৬-৭৮৯০ সম্পূৰ্ণ নাম
[email protected]
ব্লককোট
margin
blockquotes ত অবিকল্পিত হৈছে , গতিকে আমি সেইটো অন্য উপাদানসমূহৰ সৈতে অধিক সামঞ্জস্যপূৰ্ণ কিবা এটাৰ বাবে 1em 40px
পুনৰায় সেট কৰোঁ ।0 0 1rem
এটা সুপৰিচিত উক্তি, এটা ব্লককোট উপাদানত থকা।
ইনলাইন উপাদানসমূহ
উপাদানটোৱে <abbr>
অনুচ্ছেদৰ লিখনীৰ মাজত ইয়াক আঁতৰাই ৰাখিবলৈ মৌলিক ষ্টাইলিং লাভ কৰে।
সাৰাংশ
cursor
সাৰাংশৰ অবিকল্পিত হৈছে text
, গতিকে আমি সেইটোক পুনৰায় ছেট কৰি কওঁ যাতে pointer
উপাদানটোৰ ওপৰত ক্লিক কৰি ইয়াৰ সৈতে পাৰস্পৰিক ক্ৰিয়া কৰিব পাৰি।
কিছু সবিশেষ
সবিশেষৰ বিষয়ে অধিক তথ্য।
আৰু অধিক বিৱৰণ
ইয়াত সবিশেষৰ বিষয়ে আৰু অধিক বিৱৰণ দিয়া হৈছে।
HTML5 [hidden]
বৈশিষ্ট্য
HTML5 এ এটা নতুন গোলকীয় বৈশিষ্ট্য যোগ কৰে যাৰ নাম[hidden]
, যি display: none
অবিকল্পিতভাৱে শৈলী কৰা হয়। PureCSS ৰ পৰা এটা ধাৰণা ধাৰ কৰি , আমি এই অবিকল্পিত উন্নত কৰি ইয়াক ভুলবশতঃ অভাৰৰাইড [hidden] { display: none !important; }
হোৱাত বাধা দিবলৈ সহায় কৰোঁ। IE10 দ্বাৰা স্থানীয়ভাৱে সমৰ্থিত নহ'লেও, আমাৰ CSS ত স্পষ্ট ঘোষণাই সেই সমস্যাৰ পৰা আঁতৰি যায় display
।[hidden]
<input type="text" hidden>
jQuery অসামঞ্জস্যতা
[hidden]
$(...).hide()
jQuery's আৰু $(...).show()
পদ্ধতিসমূহৰ সৈতে সামঞ্জস্যপূৰ্ণ নহয় । গতিকে আমি বৰ্তমান উপাদানসমূহৰ [hidden]
পৰিচালনাৰ বাবে অন্যান্য কৌশলসমূহৰ ওপৰত বিশেষভাৱে সমৰ্থন নকৰো।display
কেৱল এটা উপাদানৰ দৃশ্যমানতা টগল কৰিবলৈ, অৰ্থাৎ ইয়াৰ display
পৰিবৰ্তন কৰা হোৱা নাই আৰু উপাদানটোৱে এতিয়াও দস্তাবেজৰ প্ৰবাহক প্ৰভাৱিত কৰিব পাৰে, ইয়াৰ পৰিৱৰ্তে শ্ৰেণীটো ব্যৱহাৰ কৰক ।.invisible