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

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

হোম-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

 

বুটস্ট্রাপ ন্যাভিগেশন কম্পোনেন্ট


ট্যাব এবং পিল

ক্লাস বর্ণনা উদাহরণ
.nav nav-tabs একটি ন্যাভিগেশন ট্যাব তৈরি করে। নিজে চেষ্টা করি
.nav nav-pills একটি ন্যাভিগেশন পিল তৈরি করে। নিজে চেষ্টা করি
.nav nav-pills nav-stacked একটি ভার্টিক্যাল ন্যাভিগেশন পিল তৈরি করে। নিজে চেষ্টা করি
.nav-justified ৭৬৮ পিক্সেলের উর্দ্ধে স্ক্রিনের ক্ষেত্রে পেরেন্ট এলিমেন্টের সমান প্রস্থের ন্যাভিগেশন ট্যাব/পিল তৈরি করে। ছোট স্ক্রিনে এটি একের পর এক নিচে নিচে অবস্থান করবে। নিজে চেষ্টা করি
.disabled ট্যাব/পিলকে ডিজেবল(unclickable) করার জন্য এটি ব্যবহার করা হয়। নিজে চেষ্টা করি
ন্যাভিগেশন ট্যাবের মধ্যে ড্রপডাউন মেনু ব্যবহার করা যায়। নিজে চেষ্টা করি
ন্যাভিগেশন পিলের মধ্যে ড্রপডাউন মেনু ব্যবহার করা যায়। নিজে চেষ্টা করি
.tab-content .tab-pane ক্লাস এবং data-toggle="tab" এট্রবিউটের সাথে একসাথে ব্যবহার করা যায় (পিলের ক্ষেত্রে data-toggle="pill")। এটি ট্যাব/পিলকে টোগোলেবল করে। নিজে চেষ্টা করি
.tab-pane .tab-content ক্লাস এবং data-toggle ="tab" এট্রবিউটের সাথে একসাথে ব্যবহার করা যায় (পিলের ক্ষেত্রে data-toggle="pill")। এটি ট্যাব/পিলকে টোগোলেবল করে। নিজে চেষ্টা করি

ব্রেডকাম্ব এবং পেজিনেশন

ক্লাস বর্ণনা উদাহরণ
.breadcrumb একটি ব্রেডকাম্ব তৈরী করে। নিজে চেষ্টা করি
.pager সাধারণ পেজিনেশন লিঙ্ক (পূর্ববর্তী/পরবর্তী) তৈরি করে। নিজে চেষ্টা করি
.previous .pager দ্বারা তৈরিকৃত পেজিনেশন লিংকের "পূর্ববর্তী" বাটনটিকে পেজের বামপাশে এ্যালাইন করে। নিজে চেষ্টা করি
.next .pager দ্বারা তৈরিকৃত পেজিনেশন লিংকের "পরবর্তী" বাটনটিকে পেজের ডানপাশে এ্যালাইন করে। নিজে চেষ্টা করি
.disabled একটি লিঙ্ককে আনক্লিক করে রাখার জন্য ব্যবহার করা হয়। নিজে চেষ্টা করি
.pagination পেজিনেশন লিংক তৈরি করে। নিজে চেষ্টা করি
.pagination-lg বড় আকারের পেজিনেশনের জন্য .pagination ক্লাসের সাথে একত্রে ব্যবহৃত হয়। নিজে চেষ্টা করি
.pagination-sm ছোট আকারের পেজিনেশনের জন্য .pagination ক্লাসের সাথে একত্রে ব্যবহৃত হয়। নিজে চেষ্টা করি
.disabled একটি unclickable লিংককে বুঝায়। নিজে চেষ্টা করি
.active বর্তমান পৃষ্ঠাকে বুঝায়। নিজে চেষ্টা করি

লেভেল

ক্লাস বর্ণনা
.label label-default একটি ডিফল্ট ধূসর লেভেলকে বুঝায়। নিজে চেষ্টা করি
.label label-primary "primary" টাইপের একটি নীল কালারের লেভেলকে বুঝায়। নিজে চেষ্টা করি
.label label-success "success" টাইপের একটি সবুজ কালারের লেভেলকে বুঝায়। নিজে চেষ্টা করি
.label label-info "info" টাইপের হালকা নীল কালারের লেভেলকে বুঝায়। নিজে চেষ্টা করি
.label label-warning "warning" টাইপের হলুদ লেভেলকে বুঝায়। নিজে চেষ্টা করি
.label label-danger "danger" টাইপের লাল লেভেলকে বুঝায়। নিজে চেষ্টা করি
.badge নতুন বা অপঠিত আইটেমকে বুঝায়। নিজে চেষ্টা করি
.jumbotron নতুন ঘটনা বা তথ্য ক্ষেত্রে বাড়তি মনোযোগ কাড়ার করার জন্য একটি বড় বাক্সকে বুঝায়। নিজে চেষ্টা করি
.jumbotron (extra) .jumbotron বক্সকে পূর্ণ প্রস্থ ব্যবহারের সুযোগ দেওয়ার জন্য এটিকে .container ক্লাসের বাহিরে রাখুন। নিজে চেষ্টা করি