স্ক্যাফোল্ডিংয়ের উপরে, মৌলিক HTML উপাদানগুলিকে একটি নতুন, সামঞ্জস্যপূর্ণ চেহারা এবং অনুভূতি প্রদানের জন্য এক্সটেনসিবল ক্লাসের সাথে স্টাইল করা এবং উন্নত করা হয়েছে।
সম্পূর্ণ টাইপোগ্রাফিক গ্রিডটি আমাদের variables.less ফাইলের দুটি Less ভেরিয়েবলের উপর ভিত্তি করে: @baseFontSize
এবং @baseLineHeight
. প্রথমটি সর্বত্র ব্যবহৃত বেস ফন্ট-আকার এবং দ্বিতীয়টি হল বেস লাইন-উচ্চতা।
আমরা আমাদের সকল প্রকারের মার্জিন, প্যাডিং এবং লাইন-উচ্চতা তৈরি করতে সেই ভেরিয়েবলগুলি এবং কিছু গণিত ব্যবহার করি।
নুল্লাম কুইস রিসাস এগেট উর্না মলিস অর্নরে ভেল ইউ লিও। সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস। Nullam id dolor id nibh ultricies vehicula ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, Nisi erat Porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
উপাদান | ব্যবহার | ঐচ্ছিক |
---|---|---|
<strong> |
গুরুত্বপূর্ণ সহ পাঠ্যের একটি স্নিপেটে জোর দেওয়ার জন্য | কোনোটিই নয় |
<em> |
স্ট্রেস সহ পাঠ্যের একটি স্নিপেটে জোর দেওয়ার জন্য | কোনোটিই নয় |
<abbr> |
হোভারে প্রসারিত সংস্করণ দেখানোর জন্য সংক্ষিপ্ত রূপ এবং সংক্ষিপ্ত শব্দগুলিকে মোড়ানো | title প্রসারিত পাঠ্যের জন্য ঐচ্ছিক অন্তর্ভুক্ত করুন |
<address> |
তার নিকটতম পূর্বপুরুষ বা কাজের পুরো অংশের জন্য যোগাযোগের তথ্যের জন্য | এর সাথে সমস্ত লাইন শেষ করে বিন্যাস সংরক্ষণ করুন<br> |
ফুস ড্যাপিবাস , টেলস এসি কার্সাস কমোডো , টরটর মৌরিস কনডিমেন্টাম নিভ , ইউটি ফার্মেন্টাম ম্যাসা জাস্টো সিট অ্যামেট রিসাস। Maecenas faucibus mollis interdum. নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু।
দ্রষ্টব্য: নির্দ্বিধায় ব্যবহার করুন <b>
এবং <i>
HTML5 এ, তবে তাদের ব্যবহার কিছুটা পরিবর্তিত হয়েছে। <b>
শব্দ বা বাক্যাংশগুলিকে অতিরিক্ত গুরুত্ব না দিয়ে হাইলাইট করার জন্য বোঝানো হয় যখন <i>
বেশিরভাগই ভয়েস, প্রযুক্তিগত পদ ইত্যাদির জন্য।
<address>
ট্যাগটি কীভাবে ব্যবহার করা যেতে পারে তার দুটি উদাহরণ এখানে রয়েছে :
সংক্ষিপ্ত রূপগুলি বড় হাতের টেক্সট এবং একটি হালকা বিন্দুযুক্ত নীচের সীমানা দিয়ে স্টাইল করা হয়। হোভারে তাদের একটি হেল্প কার্সারও রয়েছে যাতে ব্যবহারকারীদের অতিরিক্ত ইঙ্গিত থাকে যে হোভারে কিছু দেখানো হবে।
স্লাইসড ব্রেড থেকে এইচটিএমএল সবচেয়ে ভালো জিনিস।
অ্যাট্রিবিউট শব্দের একটি সংক্ষিপ্ত রূপ হল attr ।
উপাদান | ব্যবহার | ঐচ্ছিক |
---|---|---|
<blockquote> |
অন্য উৎস থেকে কন্টেন্ট উদ্ধৃত করার জন্য ব্লক-স্তরের উপাদান |
.pull-left এবং ক্লাস.pull-right |
<small> |
একটি ব্যবহারকারী-মুখী উদ্ধৃতি যোগ করার জন্য ঐচ্ছিক উপাদান, সাধারণত কাজের শিরোনাম সহ একজন লেখক | <cite> উৎসের শিরোনাম বা নামের চারপাশে রাখুন |
একটি ব্লককোট অন্তর্ভুক্ত করতে, উদ্ধৃতি হিসাবে <blockquote>
যেকোনো HTML এর চারপাশে মোড়ানো। সোজা উদ্ধৃতি জন্য আমরা একটি সুপারিশ <p>
.
<small>
আপনার উত্স উদ্ধৃত করার জন্য একটি ঐচ্ছিক উপাদান অন্তর্ভুক্ত করুন এবং আপনি —
স্টাইলিং উদ্দেশ্যে এটির আগে একটি এম ড্যাশ পাবেন৷
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante venenatis. </p>
- <small> বিখ্যাত কেউ </small>
- </blockquote>
ডিফল্ট ব্লককোট এইভাবে স্টাইল করা হয়:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante venenatis.
কাজের শরীরে বিখ্যাত কেউ
আপনার ব্লককোট ডানদিকে ভাসতে, যোগ করুন class="pull-right"
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante venenatis.
কাজের শরীরে বিখ্যাত কেউ
<ul>
<ul class="unstyled">
<ol>
<dl>
কোডের ইনলাইন স্নিপেটগুলি দিয়ে মোড়ানো <code>
।
- উদাহরণস্বরূপ , <code> বিভাগ < / code > ইনলাইন হিসাবে মোড়ানো উচিত ।
<pre>
কোডের একাধিক লাইনের জন্য ব্যবহার করুন । সঠিক রেন্ডারিংয়ের জন্য যেকোনো ক্যারেটকে তাদের ইউনিকোড অক্ষরে পরিণত করতে ভুলবেন না।
<p>এখানে নমুনা পাঠ্য...</p>
- <প্রে>
- <p>এখানে নমুনা পাঠ্য...</p>
- </pre>
দ্রষ্টব্য: ট্যাগের মধ্যে কোডটি <pre>
যতটা সম্ভব বাম দিকে রাখতে ভুলবেন না; এটি সমস্ত ট্যাব রেন্ডার করবে।
একই <pre>
উপাদান নিন এবং উন্নত রেন্ডারিংয়ের জন্য দুটি ঐচ্ছিক ক্লাস যোগ করুন।
- <p> এখানে নমুনা পাঠ্য... </p>
- <প্রি ক্লাস = "প্রিটিপ্রিন্ট
- লাইননামস" >
- <p>এখানে নমুনা পাঠ্য...</p>
- </pre>
google-code-prettify ডাউনলোড করুন এবং কিভাবে ব্যবহার করবেন তার জন্য রিডমি দেখুন।
ট্যাগ | বর্ণনা |
---|---|
<table> |
সারণী বিন্যাসে ডেটা প্রদর্শনের জন্য মোড়ানো উপাদান |
<thead> |
<tr> টেবিল কলাম লেবেল করার জন্য টেবিল হেডার সারি ( ) এর জন্য ধারক উপাদান |
<tbody> |
<tr> টেবিলের মূল অংশে টেবিল সারি ( ) এর জন্য ধারক উপাদান |
<tr> |
সারণি কক্ষের একটি সেটের জন্য ধারক উপাদান ( <td> বা <th> ) যা একটি একক সারিতে প্রদর্শিত হয়৷ |
<td> |
ডিফল্ট টেবিল সেল |
<th> |
কলামের জন্য বিশেষ টেবিল সেল (অথবা সারি, সুযোগ এবং স্থান নির্ধারণের উপর নির্ভর করে) লেবেলের মধ্যে ব্যবহার করা আবশ্যক <thead> |
<caption> |
সারণীতে যা আছে তার বর্ণনা বা সারাংশ, বিশেষ করে স্ক্রিন রিডারদের জন্য উপযোগী |
- <টেবিল>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </ টেবিল>
নাম | ক্লাস | বর্ণনা |
---|---|---|
ডিফল্ট | কোনোটিই নয় | কোন শৈলী নেই, শুধু কলাম এবং সারি |
মৌলিক | .table |
সারির মধ্যে শুধুমাত্র অনুভূমিক রেখা |
বর্ডারযুক্ত | .table-bordered |
কোণগুলি বৃত্তাকার করে এবং বাইরের সীমানা যোগ করে |
জেব্রা-ডোরা | .table-striped |
বিজোড় সারিতে হালকা ধূসর পটভূমির রঙ যোগ করে (1, 3, 5, ইত্যাদি) |
ঘনীভূত | .table-condensed |
উল্লম্ব প্যাডিংকে অর্ধেক করে, 8px থেকে 4px পর্যন্ত, সমস্ত td এবং th উপাদানগুলির মধ্যে |
পাঠযোগ্যতা নিশ্চিত করতে এবং গঠন বজায় রাখার জন্য টেবিলগুলি স্বয়ংক্রিয়ভাবে শুধুমাত্র কয়েকটি সীমানা দিয়ে স্টাইল করা হয়। 2.0 সহ, .table
ক্লাস প্রয়োজন।
- <টেবিল ক্লাস = "টেবিল" >
- …
- </ টেবিল>
# | নামের প্রথম অংশ | নামের শেষাংশ | ভাষা |
---|---|---|---|
1 | মার্ক | অটো | সিএসএস |
2 | জ্যাকব | থর্নটন | জাভাস্ক্রিপ্ট |
3 | স্টু | ডেন্ট | এইচটিএমএল |
জেব্রা-স্ট্রাইপিং যোগ করে আপনার টেবিলের সাথে একটু অভিনব হয়ে উঠুন—শুধু .table-striped
ক্লাস যোগ করুন।
দ্রষ্টব্য: স্প্রাইটেড টেবিল :nth-child
CSS নির্বাচক ব্যবহার করে এবং IE7-IE8 এ উপলব্ধ নয়।
- <টেবিল ক্লাস = "টেবিল টেবিল-স্ট্রিপড" >
- …
- </ টেবিল>
# | নামের প্রথম অংশ | নামের শেষাংশ | ভাষা |
---|---|---|---|
1 | মার্ক | অটো | সিএসএস |
2 | জ্যাকব | থর্নটন | জাভাস্ক্রিপ্ট |
3 | স্টু | ডেন্ট | এইচটিএমএল |
নান্দনিক উদ্দেশ্যে সমগ্র টেবিলের চারপাশে সীমানা এবং বৃত্তাকার কোণগুলি যোগ করুন।
- <টেবিল ক্লাস = "টেবিল টেবিল-বর্ডারযুক্ত" >
- …
- </ টেবিল>
# | নামের প্রথম অংশ | নামের শেষাংশ | ভাষা |
---|---|---|---|
1 | মার্ক অটো | সিএসএস | |
2 | জ্যাকব | থর্নটন | জাভাস্ক্রিপ্ট |
3 | স্টু | ডেন্ট | |
3 | ব্রোসেফ | স্ট্যালিন | এইচটিএমএল |
.table-condensed
অর্ধেক (8px থেকে 4px পর্যন্ত) টেবিল সেল প্যাডিং কাটতে ক্লাস যোগ করে আপনার টেবিলগুলিকে আরও কমপ্যাক্ট করুন ।
- <টেবিল ক্লাস = "টেবিল টেবিল-কন্ডেন্সড" >
- …
- </ টেবিল>
# | নামের প্রথম অংশ | নামের শেষাংশ | ভাষা |
---|---|---|---|
1 | মার্ক | অটো | সিএসএস |
2 | জ্যাকব | থর্নটন | জাভাস্ক্রিপ্ট |
3 | স্টু | ডেন্ট | এইচটিএমএল |
যেকোনও উপলব্ধ ক্লাস ব্যবহার করে ভিন্ন চেহারা অর্জন করতে যেকোনও টেবিল ক্লাস একত্রিত করতে নির্দ্বিধায়।
- <টেবিল ক্লাস = "টেবিল টেবিল-স্ট্রিপড টেবিল-বর্ডারযুক্ত টেবিল-ঘন" >
- ...
- </ টেবিল>
# | নামের প্রথম অংশ | নামের শেষাংশ | ভাষা |
---|---|---|---|
1 | মার্ক | অটো | সিএসএস |
2 | জ্যাকব | থর্নটন | জাভাস্ক্রিপ্ট |
3 | স্টু | ডেন্ট | এইচটিএমএল |
4 | ব্রোসেফ | স্ট্যালিন | এইচটিএমএল |
বুটস্ট্র্যাপের ফর্মগুলির সবচেয়ে ভাল অংশ হল যে আপনার সমস্ত ইনপুট এবং নিয়ন্ত্রণগুলি আপনি আপনার মার্কআপে যেভাবেই তৈরি করুন না কেন তা দুর্দান্ত দেখায়। কোন অপ্রয়োজনীয় HTML এর প্রয়োজন নেই, তবে যাদের প্রয়োজন তাদের জন্য আমরা নিদর্শন প্রদান করি।
সহজ স্টাইলিং এবং ইভেন্ট বাইন্ডিংয়ের জন্য আরও জটিল লেআউটগুলি সংক্ষিপ্ত এবং মাপযোগ্য ক্লাসের সাথে আসে, তাই আপনি প্রতিটি ধাপে কভার করেন।
বুটস্ট্র্যাপ চার ধরনের ফর্ম লেআউটের জন্য সমর্থন সহ আসে:
বিভিন্ন ধরনের ফর্ম লেআউটের মার্কআপে কিছু পরিবর্তনের প্রয়োজন হয়, কিন্তু নিয়ন্ত্রণগুলি নিজেরাই থাকে এবং একই আচরণ করে।
বুটস্ট্র্যাপের ফর্মগুলিতে ইনপুট, টেক্সটেরিয়া, এবং আপনি আশা করতে চান এমন সমস্ত বেস ফর্ম নিয়ন্ত্রণের শৈলী অন্তর্ভুক্ত করে। তবে এটি বেশ কয়েকটি কাস্টম উপাদানের সাথে আসে যেমন সংযুক্ত এবং আগে থেকে যুক্ত ইনপুট এবং চেকবক্সের তালিকার জন্য সমর্থন।
প্রতিটি ধরণের ফর্ম নিয়ন্ত্রণের জন্য ত্রুটি, সতর্কতা এবং সাফল্যের মতো রাজ্যগুলি অন্তর্ভুক্ত করা হয়েছে। এছাড়াও অক্ষম নিয়ন্ত্রণের জন্য শৈলী অন্তর্ভুক্ত.
বুটস্ট্র্যাপ সাধারণ ওয়েব ফর্মের চারটি শৈলীর জন্য সহজ মার্কআপ এবং শৈলী প্রদান করে।
নাম | ক্লাস | বর্ণনা |
---|---|---|
উল্লম্ব (ডিফল্ট) | .form-vertical (আবশ্যক না) |
স্তুপীকৃত, নিয়ন্ত্রণের উপর বাম-সারিবদ্ধ লেবেল |
সঙ্গতিপূর্ণভাবে | .form-inline |
কমপ্যাক্ট শৈলীর জন্য বাম-সারিবদ্ধ লেবেল এবং ইনলাইন-ব্লক নিয়ন্ত্রণ |
অনুসন্ধান করুন | .form-search |
একটি সাধারণ অনুসন্ধান নান্দনিকতার জন্য অতিরিক্ত বৃত্তাকার পাঠ্য ইনপুট |
অনুভূমিক | .form-horizontal |
কন্ট্রোলের মতো একই লাইনে বামে, ডান-সারিবদ্ধ লেবেলগুলি ভাসুন |
v2.0 এর সাথে, ফর্ম শৈলীর জন্য আমাদের কাছে হালকা এবং স্মার্ট ডিফল্ট রয়েছে। কোনো অতিরিক্ত মার্কআপ নেই, শুধু ফর্ম নিয়ন্ত্রণ।
ডিফল্ট ওয়েবকিট শৈলী প্রতিফলিত করে, শুধু .form-search
অতিরিক্ত বৃত্তাকার অনুসন্ধান ক্ষেত্রে যোগ করুন।
ইনপুটগুলি শুরু করার জন্য ব্লক স্তর। .form-inline
এবং এর জন্য .form-horizontal
, আমরা ইনলাইন-ব্লক ব্যবহার করি।
আমরা সমর্থন করি এমন সমস্ত ডিফল্ট ফর্ম নিয়ন্ত্রণগুলি বাম দিকে দেখানো হয়েছে৷ এখানে বুলেটেড তালিকা রয়েছে:
v1.4 পর্যন্ত, বুটস্ট্র্যাপের ডিফল্ট ফর্ম শৈলী অনুভূমিক বিন্যাস ব্যবহার করে। বুটস্ট্র্যাপ 2-এর সাহায্যে, আমরা যে কোনও ফর্মের জন্য আরও স্মার্ট, আরও স্কেলেবল ডিফল্ট থাকার জন্য সেই সীমাবদ্ধতাটিকে সরিয়ে দিয়েছি।
বুটস্ট্র্যাপ ব্রাউজার-সমর্থিত ফোকাসড এবং স্টেটের জন্য শৈলী বৈশিষ্ট্য disabled
। আমরা ডিফল্ট ওয়েবকিট মুছে ফেলি এবং এর জায়গায় outline
একটি প্রয়োগ করি ৷box-shadow
:focus
এতে ত্রুটি, সতর্কতা এবং সাফল্যের জন্য বৈধতা শৈলীও অন্তর্ভুক্ত রয়েছে। ব্যবহার করতে, চারপাশে ত্রুটি শ্রেণী যোগ করুন .control-group
।
- <ক্ষেত্রসেট
- ক্লাস = "কন্ট্রোল-গ্রুপ ত্রুটি" >
- …
- </fieldset>
ইনপুট গোষ্ঠীগুলি-সংযুক্ত বা প্রিপেন্ড করা পাঠ্য সহ-আপনার ইনপুটগুলির জন্য আরও প্রসঙ্গ দেওয়ার একটি সহজ উপায় প্রদান করে। দুর্দান্ত উদাহরণগুলির মধ্যে রয়েছে টুইটার ব্যবহারকারীর নামের জন্য @ চিহ্ন বা অর্থের জন্য $।
v1.4 পর্যন্ত, বুটস্ট্র্যাপের জন্য চেকবক্স এবং রেডিওগুলিকে স্ট্যাক করার জন্য অতিরিক্ত মার্কআপের প্রয়োজন। এখন, এটি পুনরাবৃত্তি করার একটি সহজ বিষয় <label class="checkbox">
যা মোড়ানো হয় <input type="checkbox">
।
ইনলাইন চেকবক্স এবং রেডিও সমর্থিত. শুধু .inline
কোনো যোগ করুন .checkbox
বা .radio
এবং আপনি সম্পন্ন.
ইনলাইন আকারে প্রিপেন্ড বা যুক্ত ইনপুট ব্যবহার করতে, ফাঁকা জায়গা ছাড়াই এবং একই লাইনে রাখতে ভুলবেন .add-on
না input
।
আপনার ফর্ম ইনপুটগুলির জন্য সহায়তা পাঠ্য যোগ করতে , ইনপুট উপাদানের পরে সহ ইনলাইন সহায়তা পাঠ্য <span class="help-inline">
বা সাহায্য পাঠ্য ব্লক অন্তর্ভুক্ত করুন।<p class="help-block">
:after
। ডক্সে, আইকনের আকার হাইটলাইট করতে আমরা হোভারে একটি হালকা লাল পটভূমির রঙ দেখাই।
প্রতিটি আইকনকে একটি অতিরিক্ত অনুরোধ করার পরিবর্তে, আমরা সেগুলিকে একটি স্প্রাইট-এ কম্পাইল করেছি—একটি ফাইলে একগুচ্ছ ছবি যা সিএসএস ব্যবহার করে ছবিগুলিকে স্থির করতে background-position
। এটি একই পদ্ধতি যা আমরা Twitter.com এ ব্যবহার করি এবং এটি আমাদের জন্য ভাল কাজ করেছে।
সমস্ত আইকন ক্লাস .icon-
সঠিক নামস্থান এবং স্কোপিংয়ের জন্য উপসর্গযুক্ত, অনেকটা আমাদের অন্যান্য উপাদানগুলির মতো। এটি অন্যান্য সরঞ্জামগুলির সাথে দ্বন্দ্ব এড়াতে সহায়তা করবে।
Glyphicons আমাদের ওপেন-সোর্স টুলকিটে হাফলিংস সেট ব্যবহার করার অনুমতি দিয়েছে যতক্ষণ না আমরা এখানে ডক্সে একটি লিঙ্ক এবং ক্রেডিট প্রদান করি। আপনার প্রকল্পে একই কাজ বিবেচনা করুন.
v2.0.0 এর সাথে, আমরা <i>
আমাদের সমস্ত আইকনগুলির জন্য একটি ট্যাগ ব্যবহার করতে বেছে নিয়েছি, তবে তাদের কোনও কেস ক্লাস নেই - শুধুমাত্র একটি ভাগ করা উপসর্গ৷ ব্যবহার করতে, নিচের কোডটি প্রায় যেকোনো জায়গায় রাখুন:
- <i ক্লাস = "আইকন-সার্চ" ></i>
উল্টানো (সাদা) আইকনগুলির জন্যও শৈলী উপলব্ধ রয়েছে, একটি অতিরিক্ত শ্রেণী দিয়ে প্রস্তুত করা হয়েছে:
- <i class = "icon-search icon-white" ></i>
আপনার আইকনগুলির জন্য বেছে নেওয়ার জন্য 120টি ক্লাস রয়েছে৷ শুধু <i>
সঠিক ক্লাসের সাথে একটি ট্যাগ যোগ করুন এবং আপনি সেট হয়ে গেছেন। আপনি সম্পূর্ণ তালিকা sprites.less- এ বা ঠিক এই নথিতে খুঁজে পেতে পারেন।
আইকনগুলি দুর্দান্ত, তবে কেউ সেগুলি কোথায় ব্যবহার করবে? এখানে কয়েকটি ধারনা:
মূলত, যে কোন জায়গায় আপনি একটি <i>
ট্যাগ লাগাতে পারেন, আপনি একটি আইকন রাখতে পারেন।
একটি টুলবার, নেভিগেশন, বা প্রিপেনড ফর্ম ইনপুটগুলির জন্য বোতাম, বোতাম গ্রুপগুলিতে এগুলি ব্যবহার করুন।