Tag Archives: Align

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

বুটস্ট্র্যাপ পেজার (Bootstrap Pager)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Pager কি ???

Pager দিয়ে সাধারণত কত নাম্বার পেইজ সেটা বোঝানো হয় ( এই সন্মন্ধে পূর্ববর্তী অধ্যায়ে আলোচনা করা হয়েছে )

Pager এর কাজ previous (পূর্ববর্তী ) এবং next (পরবর্তী) পেইজের buttons প্রদর্শিত করা

previous/next buttons তৈরি করার জন্য .pager Class, <ul> element এর মাঝে স্থাপন করতে হয়

উদাহরনঃ

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

ফলাফলঃ

 

Align Buttons

.previous এবং .next class ব্যবহার করা হয় button দুইটিকে পেইজের দুই পার্শে স্থাপন করার জন্য

উদাহরনঃ

<ul class="pager">
  <li class="previous"><a href="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

ফলাফলঃ

 

আশা করি সকলেই বুঝতে পেরেছেন। কয়েক বার চেস্টা করলেই বিষয়টি পরিস্কার হয়ে যাবে ।

 

সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস আনুভূমিক সারি (CSS Horizontal Align)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

ইন্দ্র ভূষণ শুভ

 

CSS এ, উপাদানকে আনুভূমিক ভাবে সারিবদ্ধ করার জন্য বিভিন্ন ধরনের বৈশষ্ট্য ব্যবহার করা হয়।

সারিবদ্ধ ব্লক উপাদানসমূহ

ব্লক উপাদান হলো এক ধরণের উপাদান যা ব্যবহারযোগ্য সব width ব্যবহার করে, এবং আগে ও পরে একটি লাইন বিরতি থাকে।

 

ব্লক উপাদানের উদাহরণ

সারিবদ্ধ টেক্সটের জন্য, CSS Text অধ্যায় দেখুন।
এই অধ্যায়ে আমরা দেখব কিভাবে বিন্যাসের উদ্দেশ্যে উপাদানগুলোকে আনুভূমিক ভাবে সারিবদ্ধ করা হয়।

মার্জিন বৈশিষ্ট্য ব্যবহার করে কেন্দ্রে সারিবদ্ধ করা

বাম এবং ডান মার্জিনকে "auto" সেট করে ব্লক উপদানকে কেন্দ্রে সারিবদ্ধ করা যায়।

বিশেষ দ্রষ্টব্যঃ মার্জিন ব্যবহারঃ auto; IE8 এবং পুর্বের গুলোতে কাজ করে না যতক্ষণ না !DOCTYPE ধরা হয়।

বাম এবং ডান মার্জিন সয়ংক্রিয় ধরা হয় যাতে তারা ব্যবহারযোগ্য মার্জিন সমান ভাগে বিভক্ত করে। এর ফলে কেন্দ্রীভূত উপাদান পাওয়া যায়ঃ

উদাহরণ

.center {
     margin-left: auto;
     margin-right: auto;
     width: 70%;
     background-color: #b0e0e6;
 }

নির্দেশঃ প্রস্থ যদি ১০০% হয় তবে কেন্দ্রে সারির কনো প্রভাব নেই।

 

স্থান বৈশিষ্ট্যকে ব্যবহার করে বাম এবং ডানে সারিবদ্ধ করা

পূর্ণ অবস্থানের জন্য সারিবদ্ধ উপাদানে একটি পদ্ধতি ব্যবহার কর হয়ঃ
উদাহরণ

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
 }

বিশেষ দ্রষ্টব্যঃ পূর্ণ অবস্থানের উপাদানকে স্বাভাবিক প্রবাহ থেকে সরিয়ে নেওয়া হয়, এবং উপাদানকে আবৃত করতে পারে।

 

Crossbrowser সামঞ্জস্যের সমস্যা

যখন উপাদানকে সারিবদ্ধ করা হয়,<body> উপাদানের জন্য মার্জিন এবং প্যাডিংকে পূর্বনির্ধারণ করা সর্বদাই একটি ভাল ধারণা। এটি করা হয় বিভিন্ন ব্রাউজেরের দৃশ্যমান পার্থক্য এড়ানোর জন্য।
যখন স্থান বৈশিষ্ট্য ব্যবহার করা হয় তখন IE8 এবং পুর্বের গুলোতে কিছু সমস্যা দেখা দেয়। যদি ধারক উপাদানটিতে ( এক্ষত্রে<div class="container">) নির্ধারিত প্রস্থ থাকে এবং !DOCTYPE না ধরা হয়, IE8 এবং পুর্বের গুলো ডান দিকে 17px এর একটি মার্জিন যোগ করে। এটি একটি স্ক্রলবারের জন্য সংরক্ষিত স্থান মনে করা হয়। স্থান বৈশিষ্ট্যে সবসময় !DOCTYPE সেট করতে হয়ঃ

 উদাহরন
body {
     margin: 0;
     padding: 0;
 }


.container {
     position: relative;
     width: 100%;
 }


.right {
     position: absolute;
     right: 0px;
     width: 300px;
     background-color: #b0e0e6;
 }




 


ফ্লট বৈশিষ্ট্য ব্যবহার করে বামে এবং ডানে সারিবদ্ধ করা


ফ্লট বৈশিষ্ট্যের জন্য সারিবদ্ধ উপাদানে একটি পদ্ধতি ব্যবহার কর হয়ঃ


উদাহরণ




.right {
     float: right;
     width: 300px;
     background-color: #b0e0e6;
 }




 


Crossbrowser সামঞ্জস্যের সমস্যা


যখন উপাদানকে সারিবদ্ধ করা হয়,<body> উপাদানের জন্য মার্জিন এবং প্যাডিংকে পূর্বনির্ধারণ করা সর্বদাই একটি ভাল ধারণা। এটি করা হয় বিভিন্ন ব্রাউজেরের দৃশ্যমান পার্থক্য এড়ানোর জন্য।


যখন ফ্লট বৈশিষ্ট্য ব্যবহার করা হয় তখন IE8 এবং পুর্বের গুলোতে কিছু সমস্যা দেখা দেয়। যদি উপাদানটিতে !DOCTYPE না ধরা হয়, IE8 এবং পুর্বের গুলো ডান দিকে 17px এর একটি মার্জিন যোগ করে। এটি একটি স্ক্রলবারের জন্য সংরক্ষিত স্থান মনে করা হয়। স্থান বৈশিষ্ট্যে সবসময় !DOCTYPE সেট করতে হয়ঃ


উদাহরণ




body {
     margin: 0;
     padding: 0;
 }


.right {
     float: right;
     width: 300px;
     background-color: #b0e0e6;
 }