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

পুনৰাৰম্ভ কৰক, এটা নথিপত্ৰত উপাদান-নিৰ্দিষ্ট 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>এই ব্ৰাউজাৰ অবিকল্পিত $font-size-rootচলক পৰিবৰ্তন কৰি অভাৰৰাইড কৰিব পাৰি।
লগতে <body>এটা গ্লোবেল font-family, font-weight, line-height, আৰু color. ইয়াক পিছত কিছুমান ফৰ্ম উপাদানৰ দ্বাৰা উত্তৰাধিকাৰী সূত্ৰে পোৱা যায় ফন্টৰ অসামঞ্জস্যতা ৰোধ কৰিবলৈ।
সুৰক্ষাৰ বাবে, <body>এটা ঘোষণা কৰা হৈছে background-color, অবিকল্পিত কৰা হৈছে #fff।

স্থানীয় ফন্ট ষ্টেক

বুটষ্ট্ৰেপে প্ৰতিটো ডিভাইচ আৰু OS ত অনুকূল লিখনী ৰেণ্ডাৰৰ বাবে এটা “স্থানীয় ফন্ট ষ্টেক” বা “চিস্টেম ফন্ট ষ্টেক” ব্যৱহাৰ কৰে। এই চিস্টেম ফন্টসমূহ আজিৰ ডিভাইচসমূহ মনত ৰাখি বিশেষভাৱে ডিজাইন কৰা হৈছে, পৰ্দাসমূহত উন্নত ৰেণ্ডাৰ, চলক ফন্ট সমৰ্থন, আৰু অধিক। এই Smashing Magazine প্ৰবন্ধত স্থানীয় ফন্ট ষ্টেকসমূহৰ বিষয়ে অধিক পঢ়ক ।

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // 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. আমি padding-leftঅন <ul>আৰু <ol>উপাদানসমূহো ৰিছেট কৰিছো।

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

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

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

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

ইনলাইন ক'ড

ক'ডৰ ইনলাইন স্নিপেটসমূহ ৰ সৈতে ৰেপ কৰক <code>। HTML কোণৰ বন্ধনীৰ পৰা আঁতৰি থকাটো নিশ্চিত কৰক।

উদাহৰণস্বৰূপে, <section>ইনলাইন হিচাপে ৰেপ কৰিব লাগে।

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ক'ড ব্লক

<pre>একাধিক শাৰীৰ ক'ডৰ বাবে s ব্যৱহাৰ কৰক । আকৌ এবাৰ, সঠিক ৰেণ্ডাৰৰ বাবে ক'ডত যিকোনো কোণৰ বন্ধনীৰ পৰা আঁতৰি থকাটো নিশ্চিত কৰক। উপাদানটোক ইয়াৰ <pre>আঁতৰাবলৈ আৰু ইয়াৰ বাবে এককসমূহ margin-topব্যৱহাৰ কৰিবলৈ পুনৰায় সেট কৰা হয় ।remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

চলকসমূহ

চলকসমূহ <var>সূচাবলৈ টেগ ব্যৱহাৰ কৰক।

y = m x + খ

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ব্যৱহাৰকাৰীৰ ইনপুট

<kbd>সাধাৰণতে কিবৰ্ডৰ যোগেদি প্ৰৱেশ কৰা ইনপুট সূচাবলৈ ব্যৱহাৰ কৰক ।

পঞ্জিকা সলনি কৰিবলে, পঞ্জিকাৰ cdনাম লিখক তাৰ পিছত।
ছেটিংছ সম্পাদনা কৰিবলৈ, টিপক ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

নমুনা আউটপুট

এটা প্ৰগ্ৰেমৰ পৰা নমুনা আউটপুট সূচাবলৈ <samp>টেগ ব্যৱহাৰ কৰক।

এই লিখনীক এটা কম্পিউটাৰ প্ৰগ্ৰেমৰ পৰা নমুনা আউটপুট হিচাপে গণ্য কৰা হৈছে।

<samp>This text is meant to be treated as sample output from a computer program.</samp>

টেবুলসমূহ

টেবুলসমূহ শৈলী <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)।

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

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

উদাহৰণ ইনপুট

উদাহৰণ ইমেইল

উদাহৰণ টেলিফোন

উদাহৰণ url

উদাহৰণ সংখ্যা

উদাহৰণ সন্ধান

উদাহৰণ পৰিসৰ

উদাহৰণ নথিপত্ৰ ইনপুট

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

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

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

উদাহৰণ textarea

উদাহৰণ তাৰিখ

উদাহৰণ সময়

উদাহৰণ পাছৱৰ্ড

উদাহৰণ datetime-local

উদাহৰণ সপ্তাহ

উদাহৰণ মাহ

উদাহৰণ ৰং

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

তাৰিখ আৰু ৰঙৰ ইনপুট সমৰ্থন

মনত ৰাখিব তাৰিখ ইনপুটসমূহ সকলো ব্ৰাউজাৰে সম্পূৰ্ণৰূপে সমৰ্থিত নহয় , যেনে Safari।

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

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; }হোৱাত বাধা দিবলৈ সহায় কৰোঁ।display

<input type="text" hidden>

jQuery অসামঞ্জস্যতা

[hidden]$(...).hide()jQuery's আৰু $(...).show()পদ্ধতিসমূহৰ সৈতে সামঞ্জস্যপূৰ্ণ নহয় । গতিকে আমি বৰ্তমান উপাদানসমূহৰ [hidden]পৰিচালনাৰ বাবে অন্যান্য কৌশলসমূহৰ ওপৰত বিশেষভাৱে সমৰ্থন নকৰো।display

কেৱল এটা উপাদানৰ দৃশ্যমানতা টগল কৰিবলৈ, অৰ্থাৎ ইয়াৰ displayপৰিবৰ্তন কৰা হোৱা নাই আৰু উপাদানটোৱে এতিয়াও দস্তাবেজৰ প্ৰবাহক প্ৰভাৱিত কৰিব পাৰে, ইয়াৰ পৰিৱৰ্তে শ্ৰেণীটো ব্যৱহাৰ কৰক ।.invisible