Source

রিবুট করুন

রিবুট, একটি একক ফাইলে উপাদান-নির্দিষ্ট CSS পরিবর্তনের একটি সংগ্রহ, একটি মার্জিত, সামঞ্জস্যপূর্ণ, এবং সহজ বেসলাইন তৈরি করার জন্য বুটস্ট্র্যাপ কিকস্টার্ট করুন।

এপ্রোচ

শুধুমাত্র উপাদান নির্বাচক ব্যবহার করে কিছুটা মতামতযুক্ত শৈলী সহ অনেক এইচটিএমএল উপাদান প্রদান করে, নর্মালাইজের উপর রিবুট তৈরি করে। অতিরিক্ত স্টাইলিং শুধুমাত্র ক্লাসের সাথে করা হয়। উদাহরণস্বরূপ, আমরা <table>একটি সহজ বেসলাইনের জন্য কিছু শৈলী রিবুট করি এবং পরে .table, .table-bordered, এবং আরও অনেক কিছু প্রদান করি।

রিবুটে কী ওভাররাইড করতে হবে তা বেছে নেওয়ার জন্য এখানে আমাদের নির্দেশিকা এবং কারণ রয়েছে:

স্কেলেবল কম্পোনেন্ট স্পেসিংয়ের জন্য s remএর পরিবর্তে s ব্যবহার করতে কিছু ব্রাউজার ডিফল্ট মান আপডেট করুন।em
এড়িয়ে চলুন margin-top। উল্লম্ব মার্জিন ভেঙে পড়তে পারে, অপ্রত্যাশিত ফলাফল দেয়। আরো গুরুত্বপূর্ণ যদিও, একটি একক দিক marginএকটি সহজ মানসিক মডেল.
ডিভাইসের আকার জুড়ে সহজে স্কেলিং করার জন্য, ব্লক উপাদানগুলি rems-এর জন্য margins ব্যবহার করা উচিত।
-সম্পর্কিত বৈশিষ্ট্যের ঘোষণা 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

এটি বুটস্ট্র্যাপ জুড়ে বিশ্বব্যাপী স্বয়ংক্রিয়ভাবে উত্তরাধিকার সূত্রে প্রাপ্ত এবং 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।

অ্যাডমিন সরবরাহকারী
কনসেক্টেতুর অ্যাডিপিসিং এলিট
ম্যাসা এ পূর্ণসংখ্যা মোলেস্টি লরেম
প্রিটিয়াম নিসল অ্যালিকুয়েটে ফ্যাসিলিসিস
নুল্লা ভোলুটপাট আলিকাম ভেলিট
- Phasellus iaculis neque
- Purus sodales ultricies
- ভেস্টিবুলম ল্যাওরেট পোর্টটিটর সেম
- এসি tristique libero volutpat এ
Faucibus porta lacus fringilla vel
Aenean বসে amet erat nunc
এগেট পোর্টটিটর লোরেম

অ্যাডমিন সরবরাহকারী
কনসেক্টেতুর অ্যাডিপিসিং এলিট
ম্যাসা এ পূর্ণসংখ্যা মোলেস্টি লরেম
প্রিটিয়াম নিসল অ্যালিকুয়েটে ফ্যাসিলিসিস
নুল্লা ভোলুটপাট আলিকাম ভেলিট
Faucibus porta lacus fringilla vel
Aenean বসে amet erat nunc
এগেট পোর্টটিটর লোরেম

সহজ স্টাইলিং, স্পষ্ট শ্রেণিবিন্যাস এবং আরও ভাল ব্যবধানের জন্য, বর্ণনা তালিকাগুলি আপডেট করেছে margin। <dd>s রিসেট margin-leftকরুন 0এবং যোগ করুন margin-bottom: .5rem। <dt>s গাঢ় হয় .

বর্ণনা তালিকা: একটি বর্ণনা তালিকা শর্তাবলী সংজ্ঞায়িত করার জন্য উপযুক্ত।
ইউইসমোড: Vestibulum id ligula Porta felis euismod Semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
মালেসুদা পোর্টা: Etiam porta sem malesuada Magna mollis euismod.

প্রিফরম্যাট করা টেক্সট

উপাদানটিকে <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).

এই পরিবর্তন, এবং আরো, নীচে প্রদর্শিত হয়.

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

উদাহরণ ইনপুট

উদাহরণ নির্বাচন

এই চেকবক্স চেক করুন

বিকল্প এক এই এবং যে বিকল্প দুটি হল অন্য কিছু যা এই অভিনব ফর্ম নিয়ন্ত্রণগুলির মোড়ক প্রদর্শনের জন্য অত্যন্ত দীর্ঘ। বিকল্প তিনটি অক্ষম করা হয়েছে

উদাহরণ textarea

উদাহরণ তারিখ

উদাহরণ সময়

উদাহরণ আউটপুট 100

বিবিধ উপাদান

ঠিকানা

ব্রাউজার ডিফল্ট থেকে তে <address>রিসেট করতে উপাদানটি আপডেট করা হয়েছে । এছাড়াও এখন উত্তরাধিকারসূত্রে প্রাপ্ত, এবং যোগ করা হয়েছে। s হল নিকটতম পূর্বপুরুষের (বা কাজের একটি সম্পূর্ণ অংশ) জন্য যোগাযোগের তথ্য উপস্থাপন করার জন্য। এর সাথে লাইন শেষ করে বিন্যাস সংরক্ষণ করুন ।font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

পুরো নাম
[email protected]

ব্লককোট

ব্লককোটগুলির ডিফল্ট marginহল 1em 40px, তাই আমরা 0 0 1remঅন্যান্য উপাদানগুলির সাথে আরও সামঞ্জস্যপূর্ণ কিছুর জন্য এটি পুনরায় সেট করি।

Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante.

উৎস শিরোনামে বিখ্যাত কেউ

ইনলাইন উপাদান

অনুচ্ছেদ পাঠ্যের <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 ।