পুনৰাৰম্ভ কৰক
পুনৰাৰম্ভ কৰক, এটা নথিপত্ৰত উপাদান-নিৰ্দিষ্ট CSS পৰিবৰ্তনৰ এটা সংগ্ৰহ, এটা মাৰ্জিত, সুসংগত, আৰু সৰল ভিত্তিৰেখা প্ৰদান কৰিবলে Bootstrap kickstart কৰক।
পদ্ধতি
Reboot এ Normalize ৰ ওপৰত নিৰ্মাণ কৰে, কেৱল উপাদান নিৰ্বাচকসমূহ ব্যৱহাৰ কৰি কিছু মতামতযুক্ত শৈলীসমূহৰ সৈতে বহুতো HTML উপাদান প্ৰদান কৰে। অতিৰিক্ত ষ্টাইলিং কেৱল ক্লাছৰ সৈতেহে কৰা হয়। উদাহৰণস্বৰূপ, আমি <table>
এটা সৰল ভিত্তিৰেখাৰ বাবে কিছুমান শৈলী পুনৰাৰম্ভ কৰোঁ আৰু পিছত .table
, .table-bordered
, আৰু অধিক প্ৰদান কৰোঁ ।
ইয়াত আমাৰ নিৰ্দেশনা আৰু পুনৰাৰম্ভত কি অভাৰৰাইড কৰিব লাগে নিৰ্ব্বাচন কৰাৰ কাৰণসমূহ আছে:
- স্কেলেবল উপাদান ব্যৱধানৰ বাবে s
rem
ৰ পৰিবৰ্তে s ব্যৱহাৰ কৰিবলে কিছুমান ব্ৰাউজাৰ অবিকল্পিত মান আপডেইট কৰক ।em
- এৰক
margin-top
. উলম্ব মাৰ্জিনবোৰ ভাঙি যাব পাৰে, যাৰ ফলত অপ্ৰত্যাশিত ফলাফল পোৱা যায়। তাতোকৈ গুৰুত্বপূৰ্ণ কথাটো হ’ল, এটা একক দিশৰmargin
হৈছে এটা সহজ মানসিক আৰ্হি। - ডিভাইচ আকাৰসমূহৰ মাজেৰে সহজ স্কেলিংৰ বাবে, ব্লক উপাদানসমূহে
rem
s ৰ বাবেmargin
s ব্যৱহাৰ কৰিব লাগে। - -সম্পৰ্কীয় বৈশিষ্ট্যসমূহৰ ঘোষণাসমূহ
font
নূন্যতম ৰাখক,inherit
সম্ভৱ হ'লে ব্যৱহাৰ কৰক।
CSS চলকসমূহ
v5.1.1 ত যোগ কৰা হৈছে
v5.1.1 ৰ সৈতে, আমি আমাৰ সকলো CSS বাণ্ডিলত আমাৰ প্ৰয়োজনীয় s প্ৰামাণিক কৰিলোঁ ( @import
, bootstrap.css
, bootstrap-reboot.css
আৰু bootstrap-grid.css
অন্তৰ্ভুক্ত কৰিবলে অন্তৰ্ভুক্ত _root.scss
কৰি :root
সময়ৰ লগে লগে যোগ কৰা অধিক CSS চলক চাওক।
পৃষ্ঠা অবিকল্পিত
<html>
আৰু উপাদানসমূহক <body>
উন্নত পৃষ্ঠা-ব্যাপী অবিকল্পিতসমূহ প্ৰদান কৰিবলে আপডেইট কৰা হয়। অধিক নিৰ্দিষ্টভাৱে ক’বলৈ গ’লে:
box-sizing
প্ৰতিটো উপাদানৰ ওপৰত গোলকীয়ভাৱে সংহতি কৰা হৈছে— আৰু*::before
,*::after
toborder-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
CSS চলকসমূহ
বুটষ্ট্ৰেপ ৫ পৰিপক্ক হৈ থকাৰ লগে লগে, অধিক আৰু অধিক শৈলীসমূহ CSS চলকসমূহৰ সৈতে নিৰ্মাণ কৰা হ'ব এটা উপায় হিচাপে অধিক বাস্তৱ-সময় স্বনিৰ্বাচন প্ৰদান কৰাৰ উপায় হিচাপে সদায় Sass পুনৰায় কম্পাইল কৰাৰ প্ৰয়োজন নোহোৱাকৈ। আমাৰ পদ্ধতিটো হ’ল আমাৰ উৎস Sass ভেৰিয়েবলবোৰ লৈ সেইবোৰক CSS ভেৰিয়েবললৈ ৰূপান্তৰ কৰা। তেনেকৈয়ে, আপুনি CSS ভেৰিয়েবল ব্যৱহাৰ নকৰিলেও, আপোনাৰ ওচৰত Sass ৰ সকলো শক্তি আছে। এইটো এতিয়াও চলি আছে আৰু ইয়াক সম্পূৰ্ণৰূপে কাৰ্যকৰী কৰিবলৈ সময় লাগিব।
উদাহৰণস্বৰূপ, সাধাৰণ শৈলীসমূহৰ :root
বাবে এই CSS চলকসমূহ বিবেচনা কৰক:<body>
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
কাৰ্য্যক্ষেত্ৰত, সেই চলকসমূহক তাৰ পিছত পুনৰাৰম্ভত এনেদৰে প্ৰয়োগ কৰা হয়:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
যিয়ে আপোনাক আপুনি যিদৰে বিচাৰে বাস্তৱ-সময়ৰ স্বনিৰ্বাচন কৰিবলৈ অনুমতি দিয়ে:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
শিৰোনাম আৰু অনুচ্ছেদ
সকলো শিৰোনাম উপাদান—যেনে, <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>
উপাদানসমূহো ৰিছেট কৰিছো।
- সকলো তালিকাৰ ওপৰৰ মাৰ্জিন আঁতৰোৱা হৈছে
- আৰু তেওঁলোকৰ তলৰ মাৰ্জিন স্বাভাৱিক হৈ পৰিল
- নেষ্টেড তালিকাৰ কোনো তলৰ মাৰ্জিন নাথাকে
- এইদৰে ইহঁতৰ ৰূপ অধিক সমতাপূৰ্ণ হয়
- বিশেষকৈ যেতিয়া অধিক তালিকাৰ বস্তুৰ পিছত থাকে
- বাওঁফালৰ পেডিংটোও ৰিছেট কৰা হৈছে
- ইয়াত এটা ক্ৰমবদ্ধ তালিকা দিয়া হৈছে
- কেইটামান তালিকাৰ বস্তুৰ সৈতে
- ইয়াৰ সামগ্ৰিক ৰূপ একে
- পূৰ্বৰ অক্ৰমিত তালিকাৰ দৰে
সৰল ষ্টাইলিং, স্পষ্ট হাইৰাৰ্কি, আৰু উন্নত ব্যৱধানৰ বাবে, বিৱৰণ তালিকাসমূহে আপডেইট কৰা margin
s আছে। <dd>
s লৈ পুনৰায় সেট margin-left
কৰক 0
আৰু যোগ কৰক margin-bottom: .5rem
। <dt>
s বল্ড কৰা হৈছে .
- বিৱৰণ তালিকাসমূহ
- শব্দ সংজ্ঞায়িত কৰাৰ বাবে এটা বিৱৰণ তালিকা নিখুঁত।
- কাল
- শব্দটোৰ বাবে সংজ্ঞা।
- একেটা শব্দৰ বাবে দ্বিতীয় সংজ্ঞা।
- আন এটা শব্দ
- এই আনটো শব্দৰ সংজ্ঞা।
ইনলাইন ক'ড
ক'ডৰ ইনলাইন স্নিপেটসমূহ ৰ সৈতে ৰেপ কৰক <code>
। HTML কোণৰ বন্ধনীৰ পৰা নিশ্চিতভাৱে পলায়ন কৰক।
<section>
ইনলাইন হিচাপে ৰেপ কৰিব লাগে।
For example, <code><section></code> should be wrapped as inline.
ক'ড ব্লক
<pre>
একাধিক শাৰীৰ ক'ডৰ বাবে s ব্যৱহাৰ কৰক । আকৌ এবাৰ, সঠিক ৰেণ্ডাৰৰ বাবে ক'ডত যিকোনো কোণৰ বন্ধনীৰ পৰা আঁতৰি থকাটো নিশ্চিত কৰক। উপাদানটোক ইয়াৰ <pre>
আঁতৰাবলৈ আৰু ইয়াৰ বাবে এককসমূহ margin-top
ব্যৱহাৰ কৰিবলৈ পুনৰায় সেট কৰা হয় ।rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
চলকসমূহ
চলকসমূহ <var>
সূচাবলৈ টেগ ব্যৱহাৰ কৰক।
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
ব্যৱহাৰকাৰীৰ ইনপুট
<kbd>
সাধাৰণতে কিবৰ্ডৰ যোগেদি প্ৰৱেশ কৰা ইনপুট সূচাবলৈ ব্যৱহাৰ কৰক ।
ছেটিংছ সম্পাদনা কৰিবলৈ, টিপক 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)
।
এই পৰিৱৰ্তনসমূহ, আৰু অধিক, তলত প্ৰদৰ্শন কৰা হৈছে।
তাৰিখ আৰু ৰঙৰ ইনপুট সমৰ্থন
মনত ৰাখিব তাৰিখ ইনপুটসমূহ সকলো ব্ৰাউজাৰে সম্পূৰ্ণৰূপে সমৰ্থিত নহয় , যেনে 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]
ব্লককোট
margin
blockquotes ত অবিকল্পিত হৈছে , গতিকে আমি সেইটো অন্য উপাদানসমূহৰ সৈতে অধিক সামঞ্জস্যপূৰ্ণ কিবা এটাৰ বাবে 1em 40px
পুনৰায় সেট কৰোঁ ।0 0 1rem
এটা সুপৰিচিত উক্তি, এটা ব্লককোট উপাদানত থকা।
Source Title ত কোনোবা বিখ্যাত
ইনলাইন উপাদানসমূহ
উপাদানটোৱে <abbr>
অনুচ্ছেদৰ লিখনীৰ মাজত ইয়াক আঁতৰাই ৰাখিবলৈ মৌলিক ষ্টাইলিং লাভ কৰে।
সাৰাংশ
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