বুটস্ট্রাপ সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট জেকুয়েরি পিএইচপি এসকিউএল এঙ্গুলার জেএস
ফোরাম
×

বুটস্ট্রাপ টিউটোরিয়াল

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

বুটস্ট্রাপ গ্রীড সিস্টেম

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ সিএসএস টাইপোগ্রাফী রেফারেন্স


বুটস্ট্রাপ ডিফল্ট সেটিংস

বুটস্ট্রাপের ডিফল্ট ফন্ট-সাইজ ১৪পিক্সেল এবং লাইন হাইট ১.৪২৮।

এটি <body> এবং সকল প্যারাগ্রাফে জন্য প্রযোজ্য।

সকল <p> এলিমেন্টের নিচের মার্জিন আছে যা তাদের লাইন-উচ্চতার অর্ধেক। ডিফল্ট ভ্যালু হচ্ছে ১০ পিক্সেল।


টাইপোগ্রাফী

নিচের এইচটিএমএল এলিমেন্টগুলোকে বুটস্ট্রাপের সাহায্যে ব্রাউজারের ডিফল্ট স্টাইলের তুলনায় একটু ভিন্ন স্টাইলে দেখানো হবে। "নিজে চেষ্টা করি" উদাহরণগুলোতে ফলাফল/ভিন্নতা দেখুন।

এলিমেন্টকে আরো স্টাইল করার জন্য নিচের ক্লাসগুলোকে ব্যবহার করুন।

এলিমেন্ট/ক্লাস বর্ণনা উদাহরণ
<h1> - <h6>
অথবা
.h1 - .h6
h1 - h6 হেডিং নিজে চেষ্টা করি
<small> হাল্কা রঙয়ের সেকেন্ডারী টেক্সট তৈরি করে

হেডিং (সেকেন্ডারী টেক্সট)

নিজে চেষ্টা করি
.small অপেক্ষাকৃত ছোট টেক্সট করতে ব্যবহার করা হয় (প্যারেন্টের সাইজের ৮৫%):
ছোট টেক্সট
নিজে চেষ্টা করি
.lead অপেক্ষাকৃত বড় টেক্সট করতে ব্যবহার করা হয়ঃ বড় টেক্সট নিজে চেষ্টা করি
<mark>
অথবা
.mark
হাইলাইট টেক্সটঃ হাইলাইটেড টেক্সট নিজে চেষ্টা করি
<del> ডিলেট হওয়া টেক্সটকে বুঝায়ঃ ডিলেটেড টেক্সট নিজে চেষ্টা করি
<s> অপ্রাসঙ্গিক টেক্সটকে নির্দেশ করেঃ অপ্রাসঙ্গিক টেক্সট নিজে চেষ্টা করি
<ins> যুক্ত হওয়া টেক্সটকে বুঝায়ঃ যুক্ত হওয়া টেক্সট নিজে চেষ্টা করি
<u> আন্ডারলাইন করতে ব্যবহার করা হয়ঃ আন্ডারলাইন টেক্সট নিজে চেষ্টা করি
<strong> টেক্সটকে বোল্ড করতে ব্যবহার করা হয়ঃ বোল্ড টেক্সট নিজে চেষ্টা করি
<em> টেক্সটকে ইটালিক করতে ব্যবহার করা হয়ঃ ইটালিক টেক্সট নিজে চেষ্টা করি
.text-left টেক্সটকে বামে এ্যালাইন করতে ব্যবহার করা হয় নিজে চেষ্টা করি
.text-center টেক্সটকে মাঝে এ্যালাইন করতে ব্যবহার করা হয় নিজে চেষ্টা করি
.text-right টেক্সটকে ডানে এ্যালাইন করতে ব্যবহার করা হয় নিজে চেষ্টা করি
.text-justify টেক্সটকে দুইদিকে সমান রাখতে ব্যবহার করা হয় নিজে চেষ্টা করি
.text-nowrap টেক্সটকে এক লাইনে দেখাতে ব্যবহার করা হয় নিজে চেষ্টা করি
.text-lowercase টেক্সটকে ছোটহাতের টেক্সটে রুপান্তরিত করতে ব্যবহার করা হয়ঃ LOWERCASED TEXT নিজে চেষ্টা করি
.text-uppercase টেক্সটকে বড়হাতের করতে ব্যবহার করা হয়ঃ uppercased text নিজে চেষ্টা করি
.text-capitalize টেক্সটকে capitalize করতে ব্যবহার করা হয় capitalized text নিজে চেষ্টা করি
<abbr> <abbr> এলিমেন্ট সংক্ষিপ্ত শব্দকে বুঝায়। টাইটেল এট্রিবিউটযুক্ত সংক্ষিপ্ত শব্দের নিচে ডট আকৃতির বর্ডার থাকে এবং হোভার করলে অতিরিক্ত তথ্য দেওয়ার জন্য একটি হেল্প কার্সর আসবে। নিজে চেষ্টা করি
.initialism <abbr> এলিমেন্টের মাঝের ফন্ট সাইজ ছোট করার জন্য ব্যবহার করা হয় নিজে চেষ্টা করি
<address> যোগাযোগের তথ্য সরবরাহ করে নিজে চেষ্টা করি
<blockquote> ভিন্ন উৎস থেকে নেওয়া কন্টেন্টের ব্লক দেখানোর জন্য ব্যবহার করা হয় নিজে চেষ্টা করি
.blockquote-reverse একটি উদ্ধৃতির কন্টেন্টকে ডানপাশ থেকে শুরু করে নিজে চেষ্টা করি
<ul> একটি আনঅর্ডার লিস্ট তৈরি করে নিজে চেষ্টা করি
<ol> একটি অর্ডার লিস্ট তৈরি করে নিজে চেষ্টা করি
.list-unstyled বামপাশের মার্জিন এবং ডিফল্ট লিস্ট-স্টাইল বাদ দেওয়া হয়। ( <ul> এবং <ol> দুইটিতেই কাজ করে)। এই ক্লাসটি সরাসরি লিস্ট এলিমেন্টের জন্য প্রযোজ্য। নিজে চেষ্টা করি
.list-inline সকল লিস্ট আইটেমকে এক লাইনে নিয়ে আসে নিজে চেষ্টা করি
<dl> একটি ডেস্ক্রিপশন লিস্ট তৈরি করতে ব্যবহার করা হয় নিজে চেষ্টা করি
.dl-horizontal <dl> এলিমেন্টের বর্ননা পাশাপাশি দেখায়। ইহা প্রথমে ডিফল্ট <dl> এর মতই দেখায়, কিন্তু যখন ব্রাউজার উইন্ডো বড় করা হয়, ইহা পাশাপাশি দেখানো হয়। নিজে চেষ্টা করি

কোড

এলিমেন্ট/ক্লাস বর্ণনা উদাহরণ
<var> ভ্যারিয়েবলকে বুঝায়ঃ x = ab + y নিজে চেষ্টা করি
<kbd> কীবোর্ডের মাধ্যমে টাইপ করা ইনপুটকে নির্দেশ করেঃ CTRL + P নিজে চেষ্টা করি
<pre> একাধিক লাইনের কোডকে নির্দেশ করে নিজে চেষ্টা করি
<pre class="pre-scrollable"> স্ক্রলবারসহ একাধিক লাইনের কোডকে নির্দেশ করে নিজে চেষ্টা করি
<samp> কম্পিউটার প্রোগ্রামের একটি নমুনা দেখানো হয়ঃ নমুনা নিজে চেষ্টা করি
<code> কোডের কিছু অংশ নির্দেশ করেঃ span, div নিজে চেষ্টা করি