Source

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

পুনৰাৰম্ভ কৰক, এটা নথিপত্ৰত উপাদান-নিৰ্দিষ্ট 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

ইয়াক 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.

  • লৰেম ইপছুম ডলৰ বহি আমেট
  • Consectetur adipiscing অভিজাত
  • পূৰ্ণসংখ্যা molestie lorem এ massa
  • প্ৰিটিয়াম নিছল এলিকেটত ফেচিলিচিছ
  • নুল্লা ভলুটপট এলিকুৱাম ভেলিট
    • ফেচেলাছ ইয়াকুলিছ নেক
    • Purus sodales ultricies
    • ভেষ্টিবুলুম লাওৰিট পৰ্টিটৰ চেম
    • 'এক ট্ৰিষ্টিক লিবেৰ' volutpat at
  • ফ'চিবাছ পৰ্টা লেকাছ ফ্ৰিংজিলা ভেল
  • Aenean বহি আমেট এৰত nunc
  • এগেট পৰ্টটিটৰ লৰেম
  1. লৰেম ইপছুম ডলৰ বহি আমেট
  2. Consectetur adipiscing অভিজাত
  3. পূৰ্ণসংখ্যা molestie lorem এ massa
  4. প্ৰিটিয়াম নিছল এলিকেটত ফেচিলিচিছ
  5. নুল্লা ভলুটপট এলিকুৱাম ভেলিট
  6. ফ'চিবাছ পৰ্টা লেকাছ ফ্ৰিংজিলা ভেল
  7. Aenean বহি আমেট এৰত nunc
  8. এগেট পৰ্টটিটৰ লৰেম

সৰল ষ্টাইলিং, স্পষ্ট হাইৰাৰ্কি, আৰু উন্নত ব্যৱধানৰ বাবে, বিৱৰণ তালিকাসমূহে আপডেইট কৰা 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 কেৱল উলম্বভাৱে আকাৰ সলনি কৰিব পৰাকৈ পৰিবৰ্তন কৰা হয় কাৰণ অনুভূমিক আকাৰ সলনি কৰিলে প্ৰায়ে পৃষ্ঠাৰ বিন্যাস “ভংগ” হয়।

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

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

১০০ টা

Misc উপাদানসমূহ

ঠিকনা

উপাদানটো <address>আপডেইট কৰা হয় ব্ৰাউজাৰ অবিকল্পিতক font-styleৰ পৰা লৈ পুনৰায় সেট italicকৰিবলে normal। line-heightও এতিয়া উত্তৰাধিকাৰী সূত্ৰে পোৱা গৈছে, আৰু margin-bottom: 1remযোগ কৰা হৈছে। <address>s হৈছে নিকটতম পূৰ্বপুৰুষৰ (বা এটা সমগ্ৰ কামৰ বাবে) যোগাযোগৰ তথ্য উপস্থাপনৰ বাবে। ৰ সৈতে শাৰীসমূহ শেষ কৰি ফৰ্মেটিং সংৰক্ষণ কৰক <br>।

টুইটাৰ, ইনকৰ্পৰেটেড
১৩৫৫ মাৰ্কেট ছেণ্ট, ছুইট ৯০০
ছান ফ্ৰান্সিস্কো, কে এ ৯৪১০৩
পি: (১২৩) ৪৫৬-৭৮৯০
সম্পূৰ্ণ নাম
[email protected]

ব্লককোট

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

লৰেম ইপ্সম ডলৰ বহা আমেট, কনচেক্টেটাৰ এডিপিচিং এলিট। পূৰ্ণসংখ্যা posuere erat এটা ante.

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