পুনৰাৰম্ভ কৰক

পুনৰাৰম্ভ কৰক, এটা নথিপত্ৰত উপাদান-নিৰ্দিষ্ট CSS পৰিবৰ্তনৰ এটা সংগ্ৰহ, এটা মাৰ্জিত, সুসংগত, আৰু সৰল ভিত্তিৰেখা প্ৰদান কৰিবলে Bootstrap kickstart কৰক।

পদ্ধতি

Reboot এ Normalize ৰ ওপৰত নিৰ্মাণ কৰে, কেৱল উপাদান নিৰ্বাচকসমূহ ব্যৱহাৰ কৰি কিছু মতামতযুক্ত শৈলীসমূহৰ সৈতে বহুতো HTML উপাদান প্ৰদান কৰে। অতিৰিক্ত ষ্টাইলিং কেৱল ক্লাছৰ সৈতেহে কৰা হয়। উদাহৰণস্বৰূপ, আমি <table>এটা সৰল ভিত্তিৰেখাৰ বাবে কিছুমান শৈলী পুনৰাৰম্ভ কৰোঁ আৰু পিছত .table, .table-bordered, আৰু অধিক প্ৰদান কৰোঁ ।

ইয়াত আমাৰ নিৰ্দেশনা আৰু পুনৰাৰম্ভত কি অভাৰৰাইড কৰিব লাগে নিৰ্ব্বাচন কৰাৰ কাৰণসমূহ আছে:

স্কেলেবল উপাদান ব্যৱধানৰ বাবে s remৰ পৰিবৰ্তে s ব্যৱহাৰ কৰিবলে কিছুমান ব্ৰাউজাৰ অবিকল্পিত মান আপডেইট কৰক ।em
এৰক margin-top. উলম্ব মাৰ্জিনবোৰ ভাঙি যাব পাৰে, যাৰ ফলত অপ্ৰত্যাশিত ফলাফল পোৱা যায়। তাতোকৈ গুৰুত্বপূৰ্ণ কথাটো হ’ল, এটা একক দিশৰ marginহৈছে এটা সহজ মানসিক আৰ্হি।
ডিভাইচ আকাৰসমূহৰ মাজেৰে সহজ স্কেলিংৰ বাবে, ব্লক উপাদানসমূহে rems ৰ বাবে margins ব্যৱহাৰ কৰিব লাগে।
-সম্পৰ্কীয় বৈশিষ্ট্যসমূহৰ ঘোষণাসমূহ fontনূন্যতম ৰাখক, inheritসম্ভৱ হ'লে ব্যৱহাৰ কৰক।

পৃষ্ঠা অবিকল্পিত

<html>আৰু উপাদানসমূহক <body>উন্নত পৃষ্ঠা-ব্যাপী অবিকল্পিতসমূহ প্ৰদান কৰিবলে আপডেইট কৰা হয়। অধিক নিৰ্দিষ্টভাৱে ক’বলৈ গ’লে:

box-sizingপ্ৰতিটো উপাদানৰ ওপৰত গোলকীয়ভাৱে সংহতি কৰা হৈছে— আৰু *::before, *::afterto 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) 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.

সকলো তালিকাৰ ওপৰৰ মাৰ্জিন আঁতৰোৱা হৈছে
আৰু তেওঁলোকৰ তলৰ মাৰ্জিন স্বাভাৱিক হৈ পৰিল
নেষ্টেড তালিকাৰ কোনো তলৰ মাৰ্জিন নাথাকে
- এইদৰে ইহঁতৰ ৰূপ অধিক সমতাপূৰ্ণ হয়
- বিশেষকৈ যেতিয়া অধিক তালিকাৰ বস্তুৰ পিছত থাকে
বাওঁফালৰ পেডিংটোও ৰিছেট কৰা হৈছে

ইয়াত এটা ক্ৰমবদ্ধ তালিকা দিয়া হৈছে
কেইটামান তালিকাৰ বস্তুৰ সৈতে
ইয়াৰ সামগ্ৰিক ৰূপ একে
পূৰ্বৰ অক্ৰমিত তালিকাৰ দৰে

সৰল ষ্টাইলিং, স্পষ্ট হাইৰাৰ্কি, আৰু উন্নত ব্যৱধানৰ বাবে, বিৱৰণ তালিকাসমূহে আপডেইট কৰা margins আছে। <dd>s লৈ পুনৰায় সেট margin-leftকৰক 0আৰু যোগ কৰক margin-bottom: .5rem। <dt>s বল্ড কৰা হৈছে .

বিৱৰণ তালিকাসমূহ: শব্দ সংজ্ঞায়িত কৰাৰ বাবে এটা বিৱৰণ তালিকা নিখুঁত।
কাল: শব্দটোৰ বাবে সংজ্ঞা।; একেটা শব্দৰ বাবে দ্বিতীয় সংজ্ঞা।
আন এটা শব্দ: এই আনটো শব্দৰ সংজ্ঞা।

পূৰ্বফৰ্মেট কৰা লিখনী

উপাদানটোক ইয়াৰ <pre>আঁতৰাবলৈ আৰু ইয়াৰ বাবে এককসমূহ margin-topব্যৱহাৰ কৰিবলৈ পুনৰায় সেট কৰা হয় ।remmargin-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)।

এই পৰিৱৰ্তনসমূহ, আৰু অধিক, তলত প্ৰদৰ্শন কৰা হৈছে।

উদাহৰণ কিংবদন্তি

উদাহৰণ ইনপুট

উদাহৰণ নিৰ্বাচন কৰক

এই চেকবাকচটো নিৰ্বাচন কৰক

বিকল্প এটা হ’ল এইটো আৰু সেইটো বিকল্প দুটা আন কিবা এটা যিটোও এই ফেন্সি ফৰ্ম নিয়ন্ত্ৰণসমূহৰ ৰেপিং প্ৰদৰ্শন কৰিবলৈ ছুপাৰ লং। বিকল্প তিনিটা নিষ্ক্ৰিয় কৰা হৈছে

উদাহৰণ textarea

উদাহৰণ তাৰিখ

উদাহৰণ সময়

উদাহৰণ আউটপুট ১০০ টা

বুটামসমূহৰ ওপৰত পইণ্টাৰসমূহ

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]

ব্লককোট

marginblockquotes ত অবিকল্পিত হৈছে , গতিকে আমি সেইটো অন্য উপাদানসমূহৰ সৈতে অধিক সামঞ্জস্যপূৰ্ণ কিবা এটাৰ বাবে 1em 40pxপুনৰায় সেট কৰোঁ ।0 0 1rem

এটা সুপৰিচিত উক্তি, এটা ব্লককোট উপাদানত থকা।

Source Title ত কোনোবা বিখ্যাত

ইনলাইন উপাদানসমূহ

উপাদানটোৱে <abbr>অনুচ্ছেদৰ লিখনীৰ মাজত ইয়াক আঁতৰাই ৰাখিবলৈ মৌলিক ষ্টাইলিং লাভ কৰে।

Nulla attr vitae elit libero, এটা ফেৰেট্ৰা অগু।

সাৰাংশ

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