Feb 14

বু্টস্ট্র্যাপ গ্রিড উদাহরণ (Bootstrap Grid Examples)

নিচে Bootstrap grid layouts এর কিছু উদাহহরন লক্ষ্য করা যাকঃ

Three Equal Columns (তিনটি সমান কলামের জন্য)

নিম্নলিখিত উদাহরণের মাধ্যমে দেখা যাবে কিভাবে একটি তিন সমান প্রস্থ কলাম ট্যাবলেট এ শুরু হয় এবং সেটা বড় ডেস্কটপের স্কেলিং পায়, মোবাইলে কলামগুলো স্বয়ংক্রিয় ভাবে স্থান পায় ।

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

ফলাফল : তিনটি সমান কলামের জন্য

 

Three Unequal Columns (তিনটি অসমান কলামের জন্য)

নিম্নলিখিত উদাহরণের মাধ্যমে দেখা যাবে কিভাবে তিনটি ভিন্ন প্রস্থের কলাম ট্যাবলেট এ শুরু হয় এবং সেটা বড় ডেস্কটপের স্কেলিং পায়ঃ

উদাহরনঃ

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-6">.col-sm-6</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

ফলাফল : তিনটি অসমান কলামের জন্য

 

Two Unequal Columns (দুইটি অসমান কলামের জন্য)

নিম্নলিখিত উদাহরণের মাধ্যমে দেখা যাবে কিভাবে দুটি ভিন্ন প্রস্থের কলাম ট্যাবলেট এ শুরু হয় এবং সেটা বড় ডেস্কটপের স্কেলিং পায়ঃ

উদাহরনঃ

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

ফলাফল : দুইটি অসমান কলামের জন্য

 

দুইটি নেস্টেড কলাম এর সাথে দুইটি কলাম (Two Columns With Two Nested Columns)

নিম্নলিখিত উদাহরণে দেখা যাবে যে কিভাবে two columns ট্যাবলেট এ শুরু এবং বড় ডেস্কটপে সেটা Scaling করবে যা বড় কলামের মধ্যে অন্য দুটি কলাম (সমান প্রস্থ) (মোবাইল ফোন, এই কলাম এবং তাদের nested
কলাম stackহবে)

উদাহরনঃ

<div class="row">
  <div class="col-sm-8">
    .col-sm-8
    <div class="row">
      <div class="col-sm-6">.col-sm-6</div>
      <div class="col-sm-6">.col-sm-6</div>
    </div>
  </div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

ফলাফল : দুইটি নেস্টেড কলাম এর সাথে দুই কলাম

 

মিশ্র: মোবাইল এবং ডেস্কটপ (Mixed: Mobile And Desktop)

Bootstrap grid সিস্টেমের চারটি ক্লাস আছেঃ xs (phones), sm (tablets), md (desktops), এবং lg (larger desktops) এই class গুলো ব্যবহার করে আরো গতিশীল এবং নমনীয় লেআউট তৈরি করা যায়।

টিপ: প্রতিটি Class বর্গাকার, তাই আপনি xs এবং sm জন্য একই প্রস্থ সেট করতে চান তাহলে আপনাকে শুধুমাত্র xs নির্দিষ্ট করতে হবে.

উদাহরনঃ

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
ফলাফল : মিশ্র: মোবাইল এবং ডেস্কটপ

টিপস: মনে রাখবেন, গ্রিড কলামে একটি সারি জন্য বারো পর্যন্ত যোগ করা যেতে পারে, এর বেশি হলে কলাম কোন ব্যাপার viewport স্ট্যাক করবে না ।

 

মিশ্র: মোবাইল, ট্যাবলেট এবং ডেস্কটপ (Mixed: Mobile, Tablet And Desktop)

উদাহরনঃ

<div class="row">
  <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
  <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

ফলাফল : মিশ্র: মোবাইল, ট্যাবলেট এবং ডেস্কটপ

 

Clear Floats

নির্দিষ্ট ব্রেকপয়েন্ট এ Clear floats (.clearfix class এর সঙ্গে) ব্যবহার করা হয় যাতে uneven content এর সাথে strange wrapping প্রতিরোধ করা যায় ।

উদাহরনঃ

<div class="row">
  <div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
  </div>
  <div class="col-xs-6 col-sm-3">Column 2</div>
  <!-- Add clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3">Column 3</div>
  <div class="col-xs-6 col-sm-3">Column 4</div>
</div>

ফলাফল : Clear Float

 

ভারসাম্য করা কলাম (Offsetting Columns)

.col-md-offset-* classes ব্যবহার করা কলামকে ডান পাশ্র সরিয়ে নেয়া হয় ।

এই ক্লাস * কলাম এর সাহায্যে কলামের বাম মার্জিন বৃদ্ধি করে:

উদাহরনঃ

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
  .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

ফলাফল : Offsetting Column

 

ধাক্কা ও টানা – কলামের ক্রম পরিবর্তন (Push And Pull – Change Column Ordering)

.col-md-push-* এবং .col-md-pull-* classes এর সাহায্যে grid columns এর order পরিবর্তন করা হয় ।

উদাহরনঃ

<div class="row">
  <div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
  <div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>

ফলাফল : Push And Pull

 

ধন্যবাদ মনযোগ সহকারে টিউটোরিয়ালটি পরার জন্য। আশা করি বুঝতে পেরেছেন ।

 

Feb 14

বুটস্ট্র্যাপ গ্রিড – বড় ডিভাইস । Bootstrap Grid – Large Devices

পূর্বের অধ্যায়ে আমরা ছোট (small) এবং মাঝারি (medium) device এর জন্য class সহ grid এর উদাহরণ আলোচনা করেছি। সেখানে দুইটি div রেখে হয়, যাদের ছোট device এর জন্য ২৫% /৭৫% এবং মাঝারি device এর জন্য ৫০% /৫০% ভাগে ভাগ (split) করা হয়।

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

 

তবে বড় (Large) device এর ক্ষেত্রে দুইটি div-কে ৩৩% /৬৬% ভাগে ভাগ করা যেতে পারে।

টিপস: বড় device এর ক্ষেত্রে সাধারণত screen এর width 1200 pixel বা তার বেশি হিসাবে গণনা করা হয়।

বড় device এর ক্ষেত্রে .col-lg-* class ব্যবহার করা হয়।

এখন আমরা বড় device এর ক্ষেত্রে column এর width যোগ করবো:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

 

সুতরাং Bootstrap আলোচনার এই পর্যায়ে দেখা যাচ্ছে যে, ছোট (small) device এর ক্ষেত্রে -sm-, মাঝারি (medium) device এর ক্ষেত্রে -md-এবং বড় (Large) device এর ক্ষেত্রে -lg- class ব্যবহার করা উত্তম।

নিম্নোক্ত উদাহরণে দেখানো হয়েছে যে, div দুইটি, ছোট (small) device এর ক্ষেত্রে ২৫% /৭৫%, মাঝারি (medium) device এর ক্ষেত্রে ৫০% /৫০% এবং বড় (Large) device এর ক্ষেত্রে ৩৩% /৬৬% এ বিভক্ত (split) হয়ে যায়:

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:lavender;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8" style="background-color:lavenderblush;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

ফলাফল : ছোট, মাঝারি ও বড় ডিভাইস

 

Feb 14

বুটস্ট্র্যাপ গ্রিড – মধ্যম ডিভাইস । Bootstrap Grid – Medium Devices

পূর্ববর্তী অধ্যায়ে আমরা ছোট ডিভাইসের জন্য Class সহ একটি Grid এর উদাহরন দেখিয়েছিলাম।

আমরা সেখানে দুইটি divs (কলাম ) ব্যবহার করেছিলাম এবুং আমরা সেখানে 25%/75% এর বিভক্তি দেখিয়েছি।

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

 

কিন্তু মাঝারি ডিভাইসের জন্য সব থেকে ভাল হবে যদি 50%/50% ব্যবহার করা হয়।

নির্দেশনাঃ মাঝারি রকমের ডিভাইসের Screen সাইজ সাধারণত 992 pixels থেকে 1199 pixels হয়ে থাকে ।

মাঝারি ডিভাইসের জন্য আমরা .col-md-* classes ব্যবহার করব।

এখন আমরা Medium Device এর জন্য কলাম এর বিস্তার ব্যবহার করা দেখবঃ

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

 

এখন Bootstrap এর মতে বলা যায়, Small সাইজের জন্য খেয়াল কর আমরা -sm- class ব্যবহার করেছি। Medium সাইজের জন্য খেয়াল কর আমরা -md- class ব্যবহার করেছি।

নিচের উদাহরন Small Device এর জন্য 25%/75% Split ফলাফল প্রদর্শন করবে আর। Medium Device এর জন্য 50%/50% Split ফলাফল প্রদর্শন করবেঃ

উদাহরনঃ

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6" style="background-color:lavender;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6" style="background-color:lavenderblush;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

ফলাফল : ছোট ও মাঝারি ডিভাইস

 

Feb 14

বুটস্ট্র্যাপ গ্রিড – স্ট্যাকড-টু-হরাইজন্টাল (Bootstrap Grid – Stacked-to-horizontal)

শেখ মাহফুজুর রহমান

 

বুটস্ট্র্যাপ গ্রিডের উদাহরণঃ স্ট্যাকড থেকে হরাইজন্টাল

আমরা একটি সাধারণ গ্রিড সিস্টেম তৈরি করবো যা মোবাইল/টেবলেট-এ স্ট্যাকড বা স্তুপাকারে (একটির উপর আরেকটি) দেখাবে, কিন্তু মাঝারী/বড় ডিভাইস যেমন ডেস্কটপে হরাইজন্টাল হয়ে যাবে।

নিচের উদাহরণটি একটি খুবই সাধারণ “stacked-to-horizontal” লেআউট তৈরি করেঃ

উদাহরণঃ Stacked-to-horizontal

<div class="container">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6" style="background-color:lavenderblush;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

ফলাফল : Stacked-to-horizontal

টিপসঃ .col-sm-* ক্লাসের নাম্বারগুলো কতটি column এ div টি প্রসারিত হবে তা নির্দেশ করে (১২টির মধ্যে)। তাই, .col-sm-1 এক কলাম পর্যন্ত প্রসারিত হয়, .col-sm-4 চার কলাম পর্যন্ত প্রসারিত হয়, .col-sm-6 ছয় কলাম পর্যন্ত প্রসারিত হয় ইত্যাদি।

নোটঃ নিশ্চিত করতে হবে যেন মোট কলাম সংখ্যা ১২ এর মধ্যে থাকে।

টিপসঃ ক্লাস .container কে .container-fluid তে পরিবর্তন করে আপনি যেকোন ফিক্সড-উইডথ লেআউটকে ফুল-উইডথ লেআউটে পরিবর্তন করতে পারবেনঃ

উদাহরণঃ Fluid container

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6" style="background-color:lavenderblush;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

ফলাফল : Fluid container

 

Feb 14

বুটস্ট্র্যাপ গ্রিড সিস্টেম (Bootstrap Grid System)

শেখ মাহফুজুর রহমান

 

বুটস্ট্র্যাপের গ্রিড সিস্টেম একটি পেজে ১২টি পর্যন্ত কলাম যোগ করতে দেয়। আপনি যদি আলাদাভাবে সবগুলো (১২টি) কলাম ব্যবহার করতে না চান তাহলে কিছু কলামকে গ্রুপ বা গুচ্ছাকৃত করে প্রশস্তততর কলাম তৈরি করতে পারবেনঃ

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 4

span 4

span 4

span 4

span 8

span 6

span 6

span 12

বুটস্ট্র্যাপ গ্রিড সিস্টেম রেস্পন্সিভ হয়ে থাকে এবং স্ক্রিনের আকার অনুযায়ী কলামগুলো পুনরায় সজ্জিত হয়ঃ বড় স্ক্রিনে তিনটি কলামের মধ্যে কন্টেন্টগুলো সাজালে দেখতে ভালো লাগে কিন্তু ছোট স্ক্রিনে কন্টেন্টগুলো একটি আরেকটির উপর স্তুপাকারে সজ্জিত হলে দেখতে ভালো লাগবে।

টিপসঃ মনে রখবেন একটি রো বা সারির জন্য ১২টি পর্যন্ত গ্রিড কলাম যোগ করতে হবে। এর চেয়ে বেশি কলাম যোগ করা হলে, স্ক্রিন যত বড়ই হোক না কেন, সেগুলো স্তুপাকার হয়ে যাবে।

 

গ্রিড ক্লাস

বুটস্ট্র্যাপ গ্রিড সিস্টেমের চারটি ক্লাস রয়েছেঃ

  • xs (ফোনের জন্য)
  • sm (টেবলেটের জন্য)
  • md (ডেস্কটপের জন্য)
  • lg (বড় ডেস্কটপের জন্য)

 

উপরের ক্লাসগুলো একসাথে করে আরও ডাইনামিক এবং ফ্ল্যাক্সিবল লেআউট তৈরি করা সম্ভব।

টিপসঃ প্রত্যেকটি ক্লাস মাপ অনুযায়ী হয়ে থাকে, তাই আপনি যদি xs এবং sm এর জন্য একই উইডথ (প্রস্থ্য) ঠিক করতে চান তাহলে আপনাকে শুধু xs কে নির্দিষ্ট করে দিলেই হবে।

 

গ্রিড সিস্টেমের নিয়ম

কিছু বুটস্ট্র্যাপ গ্রিড সিস্টেমের নিয়ম:

সঠিক অ্যালাইনম্যান্ট ও প্যাডিং এর জন্য রো’গুলোকে অবশ্যই .container (এর প্রস্থ্য পরিবর্তিত হয়না) অথবা .container-fluid (প্রস্থ্য পুরো স্ক্রিনে প্রসারিত হতে পারে) এর ভিতরে রাখতে হবে।

  • কতগুলো কলাম নিয়ে একটি হরাইজন্টাল গ্রুপ তৈরি করতে রো ব্যবহার করুন।
  • কন্টেন্টকে অবশ্যই কলামের ভিতরে রাখতে হবে এবং কলামগুলোই শুধুমাত্র রো এর ইমিডিয়েট চাইল্ড হতে পারে।
  • .row এবং .col-sm-4 এর মতো পুর্ব-সংজ্ঞায়িত ক্লাসগুলো তাৎক্ষণিকভাবে তৈরি গ্রিড লেআউটের জন্য ব্যবহার করা যায়।
  • কলাম এর কন্টেন্টগুলোর মধ্যে প্যাডিং এর মাধ্যমে ফাঁক তৈরি করে। এই প্যাডিং .rows এর উপর নেগেটিভ মার্জিনের মাধ্যমে প্রথম ও শেষ কলামের এর জন্য রো’তে অফসেট থাকে।
  • আপনি কতটি কলামে প্রসারিত করবেন তা ১২টি কলামের নাম্বার নির্দিষ্ট করে দেয়ার মাধ্যমে গ্রিড কলাম তৈরি করতে পারবেন। উদাহরণস্বরূপ, তিনটি সমান কলাম তিনটি .col-sm-4 ব্যবহার করবেন।

 

একটি বুটস্ট্র্যাপ গ্রিডের বেসিক স্ট্রাকচার

নিচে একটি বুটস্ট্যাপ গ্রিডের বেসিক স্ট্রাকচার দেয়া হলোঃ

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

 

আপনার ইচ্ছে মতো লেআউট তৈরি করতে চাইলে প্রথমে একটি কন্টেইনার তৈরি করুন (<div class="container">)। তারপর একটি রো তৈরি করুন (<div class="row">)। এরপরে, ইচ্ছেমতো কলাম সংখ্যা যোগ করুন ( সঠিক .col-*-* ক্লাসসহ ট্যাগ)। খেয়াল রাখবেন, .col-*-* এর নাম্বারগুলো প্রত্যেক রো এর জন্য ১২ পর্যন্ত হতে হবে।

 

গ্রিড অপশান

বিভিন্ন ডিভাইসে বুটস্ট্র্যাপ গ্রিড সিস্টেম কিভাবে কাজ করে তা নিচের ছকে ব্যাখ্যা করা হলোঃ

অতি ছোট ডিভাইস

ফোন

(<768px)

ছোট ডিভাইস

ট্যাবলেট (>=768px)

মাঝারি ডিভাইস

ডেস্কটপ

(>=992px)

বড় ডিভাইস

ডেস্কটপ

(>=1200px)
গ্রিড এর আচরন

সব সময়ে অনুভূমিক

শুরুতে ধসে যায়, ব্রেকপয়েন্ট এর উপরে অনুভূমিক

শুরুতে ধসে যায়, ব্রেকপয়েন্ট এর উপরে অনুভূমিক

শুরুতে ধসে যায়, ব্রেকপয়েন্ট এর উপরে অনুভূমিক
ধারক এর প্রস্থ

নাই (স্বয়ংক্রিয়)

750px

970px

1170px
ক্লাস প্রিফিক্স

.col-xs-

.col-sm-

.col-md-

.col-lg-
কলাম সংখ্যা

12

12

12

12
কলামের প্রসস্থতা

স্বয়ংক্রিয়

~62px

~81px

~97px
গুটার প্রস্থ

30px (কলামের প্রতিটি পার্শ্বে 15px)

30px (কলামের প্রতিটি পার্শ্বে 15px)

30px (কলামের প্রতিটি পার্শ্বে 15px)

30px (কলামের প্রতিটি পার্শ্বে 15px)
Nestable

হ্যাঁ

হ্যাঁ

হ্যাঁ

হ্যাঁ
অফসেটস

হ্যাঁ

হ্যাঁ

হ্যাঁ

হ্যাঁ
কলাম ক্রম

হ্যাঁ

হ্যাঁ

হ্যাঁ

হ্যাঁ

Feb 13

বুটস্ট্রাপ ক্যারোজেল প্লাগিন (Bootstrap Carousel Plugin)

বুটস্ট্রাপ কারুসেল প্লাগিন

Carousel প্লাগইন হচ্ছে এলিমেন্ট দ্বারা আবর্ত করার জন্য একটি ক্যারোজেল (স্লাইডশো) এর মত একটি উপাদান।

টিপস : প্লাগইন স্বতন্ত্রভাবে অন্তর্ভুক্ত করা যেতে পারে (বুটস্ট্র্যাপ এর স্বতন্ত্র “carousel.js” ফাইল ব্যবহার করে), অথবা সব একযোগে (“bootstrap.js” বা “bootstrap.min.js” ব্যবহার করে)

এর উদাহরণ

নোট : ক্যারোজেল ইন্টারটেন এক্সপ্লোরার ৯ এবং এর আগের ভার্সনগুলোতে সাপর্ট করে না (কারণ তারা স্লাইড ইফেক্ট CSS 3 ট্রানজিশন এবং অ্যানিমেশন ব্যবহার করে)।

 

কিভাবে একটি ক্যারোজেল তৈরি করা যায়

নিজের উদাহরণে একটি সাধারণ ক্যারোজেল তৈরি করার পদ্ধতি দেখানো হল:

উদাহরণ : ০১

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ফলাফল : কিভাবে কেরোজেল তৈরি করবেন

 

উদাহরণের ব্যাখ্যা

<div> অংশ:

প্রথমে id="myCarousel" নামে একটা আইডি নিতে হবে যাতে ক্যারোজেল এর কন্ট্রোলগুলো সিঠিকভাবে কাজ করতে পারে।

class="carousel" নির্দেশ করে যে <div> এর ভিতরে একটি ক্যারোজেল আছে।

.slide ক্লাসটি সিএসএস ট্রানজিশন এবং অ্যানিমেশন ইফেক্ট যোগ করে, যা যখন নতুন আইটেম প্রদর্শিত হয় তখন আগের আইটেমটিকে স্লাইড করে। আপনি যদি এটি না চান তাহলে এটিকে মুছে দিতে পারেন।

data-ride="carousel" এট্রিবিউটটি পেজ লোড হওয়ার সময় বুটস্ট্রাপকে নির্দেম দেয় ক্যারোজেল এনিমেশন শুরু করার জন্য।

 

“Indicators” (নির্দেশক) অংশ

“Indicators” হচ্ছে প্রতিটি স্লাইডের নিজের দিকে ছোট একটি বিন্দু (যা নির্দেশ ক্যারোজেল এর মধ্যে কতটি স্লাইড রয়েছে এবং ব্যবহারকারী বর্তমানে কোন স্লাইডটি দেখছে)।

.carousel-indicators ক্লাস এর সাথে ক্রম তালিকায় নির্দেশক উল্লেক করা হয়।

data-target এট্রিবিউট ক্যারোজেল এর আইডিকে পয়েন্ট করে।

data-slide-to এট্রিবউট নির্দেশ করে কোন স্লাইডটি প্রদর্শিত হবে যখন নির্দিষ্ট ডট এ ক্লিক করা হবে।

 

“Wrapper for slides” স্লাইড এর জন্য আবরণ অংশ:

<div> এর মধ্যে .carousel-inner ক্লাস দ্বারা স্লাইড নির্দিষ্ট করা হয়।

.item ক্লাস দ্বারা <div> এর মধ্যের উপাদানগুলোকে সঙ্গায়িত করা হয়।

একটি স্লাইড এর মধ্যে .active ক্লাস যোগ করতে হয়। এছাড়া ক্যারোজেলটি দৃশ্যমান হয় না।

 

“Left and right controls” ডান বাম নিয়ন্ত্রণ অংশ:

কোডটি ডান এবং বাম বাটন যোগ করে যা দ্বারা ব্যবহারকারী নিজের ইচ্ছা মতো ডান অথবা বাম স্লাইডে যেতে পারে।

data-slide এট্রিবিউটটি prev" এবং "next" কীওয়ার্ডকে গ্রহণ করে। যা বর্তমান অবস্থানের পরিপ্রেক্ষিকে স্লাইড এর আপেক্ষিক অবস্থান পরিবর্তন করে।

 

 

 

স্লাইড এ ক্যাপশন যোগ করা

প্রতিটি স্লাইডের জন্য ক্যাপসন তৈরি করার জন্য প্রতিটি <div class="item">  এর ভিতরে <div class="carousel-caption"> যোগ করুন।

উদাহরণ ০২:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ফলাফল : স্লাইড এ ক্যাপশন যোগ করা

 

 

Feb 13

বুটস্ট্র্যাপ ইনপুট সাইজিং (Bootstrap Input Sizing)

.input-lg এবং .input-sm Class ব্যবহার করে প্রয়োগকৃত উপাদানসমুহের heights নির্ধারন করা হয়।

.col-lg-* এবং .col-sm-* grid column classe ব্যবহার করে প্রয়োগকৃত উপাদানসমুহের widths নির্ধারন করা হয়।

 

উচ্চতা মাপবদল / Height Sizing

নিচের উদাহরনের সাহায্যে input Element এর বিভিন্ন heights দেখানো যায়ঃ

উদাহরনঃ

<form role="form">
  <div class="form-group">
    <label for="inputdefault">Default input</label>
    <input class="form-control" id="inputdefault" type="text">
  </div>
  <div class="form-group">
    <label for="inputlg">input-lg</label>
    <input class="form-control input-lg" id="inputlg" type="text">
  </div>
  <div class="form-group">
    <label for="inputsm">input-sm</label>
    <input class="form-control input-sm" id="inputsm" type="text">
  </div>
</form>

ফলাফল : ইনপুট মাপবদল

 

<div class="form-group"> এর ভিতরে .form-group-* ব্যবহার করে আনুভুমিক ফর্ম এর খুব দ্রুত লেবেল এবং ফর্ম Controls করা যায়

উদাহরনঃ

<form class=”form-horizontal” role=”form”>
<div class=”form-group form-group-lg”>
<label class=”col-sm-2 control-label” for=”lg”>form-group-lg</label>
<div class=”col-sm-10″>
<input class=”form-control” type=”text” id=”lg”>
</div>
</div>
<div class=”form-group form-group-sm”>
<label class=”col-sm-2 control-label” for=”sm”>form-group-sm</label>
<div class=”col-sm-10″>
<input class=”form-control” type=”text” id=”sm”>
</div>
</div>
</form>

ফলাফল :ইনপুট মাপবদল

 

কলাম মাপবদল (Column Sizing)

নিচের উদাহরনের সাহায্যে আমরা দেখব কি করে বিভিন্ন widths এ বিভিন্নি .col-xs-* classes ব্যবহার করা যায়

উদাহরনঃ

<div class="col-xs-2">
  <label for="ex1">col-xs-2</label>
  <input class="form-control" id="ex1" type="text">
</div>
<div class="col-xs-3">
  <label for="ex2">col-xs-3</label>
  <input class="form-control" id="ex2" type="text">
</div>
<div class="col-xs-4">
  <label for="ex3">col-xs-4</label>
  <input class="form-control" id="ex3" type="text">
</div>

ফলাফল : কলাম মাপবদল

 

সাহায়ক নির্দেশিকা (Help Text)

ব্লক লেবেল সহায়ক নির্দেশিকা যোগ করার জন্য .help-block ক্লাস যোগ করা হয়।

উদাহরণ :

<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd" placeholder="Enter password">
  <span class="help-block">This is some help text...</span>
</div>

ফলাফল : সাহায়ক নির্দেশিকা

 

Feb 13

বুটস্ট্র্যাপ ইনপুট ফরম (আরো জানুন) Bootstrap Form Inputs (more)

স্ট্যাটিক কন্ট্রোল

আপনি যদি একটি অনুভূমিক ফর্ম এর মধ্যে একটি ফর্ম লেবেল এর পরে প্লেইন টেক্সট সন্নিবেশ করতে চান তাহলে <p> এলিমেন্ট এর ভিতরে .form-control-static ক্লাস ব্যবহার করুন।

উদাহরনঃ

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <p class="form-control-static">someone@example.com</p>
    </div>
  </div>
</form>

ফলাফল : স্ট্যাটিক কন্ট্রোল

 

বুটস্ট্র্যাপ ফরম কন্ট্রোল অবস্থা

  • INPUT FOCUS – ইনপুট সীমারেখা মুছে ফেলা হয় এবং ফোকাস এর উপর বক্স ছায়ার প্রয়োগ করা হয়
  • DISABLED INPUTS – একটি ইনপুট ক্ষেত্রেকে নিষ্ক্রিয় করার জন্য disabled এট্রিবিউট যোগ করা হয়
  • DISABLED FIELDSETS – একটি fieldset এর মধ্যে সকল Controls কে নিস্ক্রিয় করারা জন্য disable এট্রিবিউট যোগ করা হয়
  • READONLY INPUTS – একটি ইনপুট ফিল্ড এর মধ্যে ব্যবহারকারীর ইনপুট প্রদান প্রতিহত করার জন্য একটি readonly এট্রিবিউট যোগ করা হয়
  • VALIDATION STATES – Bootstrap ত্রুটি, সতর্কতা, এবং সাফল্যের বার্তা জন্য validation styles ব্যবহার করে। এটা ব্যবহার করেতে .has-warning, .has-error, অথবা .has-success ক্লাস  পিতৃ এলিমেন্ট এর সাথে ব্যবহার করা হয়
  • ICONS- আপনি .has-feedback ক্লাস এর মাধ্যমে feedback icons যোগ করতে পারবেন ।
  • HIDDEN LABELS – অ দৃশ্যমান লেবেল এর ক্ষেত্রে .sr-only ক্লাস যোগ করা হয়

 

নিম্নলিখিত উদাহরণে একটি অনুভূমিক আকারের ফর্মের উপরে নিয়ন্ত্রণ নিয়ন্ত্রণ অবস্থা প্রদর্শন করে:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Focused</label>
    <div class="col-sm-10">
      <input class="form-control" id="focusedInput" type="text" value="Click to focus">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Disabled</label>
    <div class="col-sm-10">
      <input class="form-control" id="disabledInput" type="text" disabled>
    </div>
  </div>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label"></label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>Disabled select</option>
        </select>
      </div>
    </div>
  </fieldset>
  <div class="form-group has-success has-feedback">
    <label class="col-sm-2 control-label" for="inputSuccess">
    Input with success and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputSuccess">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="col-sm-2 control-label" for="inputWarning">
    Input with warning and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="col-sm-2 control-label" for="inputError">
    Input with error and icon</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputError">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
  </div>
</form>

ফলাফল : অনুভূমিক ফর্মটি নিয়ন্ত্রণ হালচাল

 

এবং এখানে একটি ইনলাইন form control states এর কিছু একটি উদাহরণ দেয়া হল:

উদাহরনঃ

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="focusedInput">Focused</label>
    <input class="form-control" id="focusedInput" type="text">
  </div>
  <div class="form-group">
    <label for="inputPassword">Disabled</label>
    <input class="form-control" id="disabledInput" type="text" disabled>
  </div>
  <div class="form-group has-success has-feedback">
    <label for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label for="inputWarning2">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning2">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label for="inputError2">Input with error</label>
    <input type="text" class="form-control" id="inputError2">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
</form>

ফলাফল : ইনলাইন form control state

 

Feb 13

বুটস্ট্র্যাপ ফরম ইনপুট (Bootstrap Form Inputs)

মো: আসাদুজ্জামান মিলন
আইটি ইন্সট্রাক্টর,
এমএসআইটি, কুড়িগ্রাম।

 

সমর্থিত ফরম কন্ট্রোল

বুটস্ট্র্যাপ নিম্নলিখিত ফর্ম কন্ট্রোলগুলো সমর্থন করে

  • input
  • textarea
  • checkbox
  • radio
  • select

 

বুটস্ট্র্যাপ ইনপুট

বুটস্ট্র্যাপ এইচটিএমএল ৫ এর সকল ইনপুট টাইপ, যেমন : text, password, time, color. datetime, datetime-local, date, month, week, number, email, url ইত্যাদি সর্মথন করে।

নিচের উধাহরনে দুই প্রকারের এইচটিএমএল ৫ ইনপুট যথাঃ text ও password এর ব্যবহার দেখান হল।

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

 

বুটস্ট্র্যাপ টেক্সটএরিয়া


ওয়েবপেজের যে অংশে ব্যবহার কারী তার মতামত বা মনের কথা লিখতে পারে সেটিকে টেক্সট এরিয়া বলে। নিচের উদাহরনে টেক্সটএরিয়া এর ব্যবহার দেখান হল।

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

 

বুটস্ট্র্যাপ চেকবক্স


ওয়েবপেজে চেকবক্স ব্যবহার করা হয় যাতে ব্যবহারকারী অনেক গুলি অপশন থেকে তার পছন্দের এক বা একাধিক অপশন বেছে নিতে পারে । এর মাধ্যমে ব্যবহার কারী অনেকগুলি র্পূব নির্ধারিত বিষয় থেকে তার পছন্দের বিষয়টি বা বিষয়গুলি র্নিবাচন করতে পারেন। নিচের উদাহরন থেকে বিষয়টি বোঝা যাবে।

<div class="checkbox">
  <label><input type="checkbox" value="">Dhaka</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Rangpur</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Bai Jing</label>
</div>

উপরের উধাহরনে দেখা যাচ্ছে, একজন ব্যবহার কারী তার পছন্দের শহর র্নিবাচনের জন্য ঢাকা, রংপুর এবং বেইজিং নামক তিনটি অপশন পাবেন যার মধ্যে বেইজিং অপশনটি নিস্ক্রিয় থাকবে।

যদি সবগুলি চেকবক্স একই লাইনে প্রদর্শন করার প্রয়োজন হয়, তবে checkbox-inline ক্লাস এর ব্যবহার করা যায়। নিচের উধাহরনে বিষয়টি বোঝা যাবে।

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

 

বুটস্ট্র্যাপ রেডিও বাটন


ওয়েবপেজে রেডিও বাটন ব্যবহার করা হয়, যাতে ব্যবহার কারী অনেক গুলি অপশন থেকে তার পছন্দের একটি মাত্র অপশন বেছে নিতে পারে। উদাহরনঃ

<div class="radio">
  <label><input type="radio" name="optradio">Dhaka</label>
</div>
<div class="radio">
  <label><input type="radio" name="optradio">Rangpur</label>
</div>
<div class="radio disabled">
  <label><input type="radio" name="optradio" disabled>Bai Jing</label>
</div>

উপরের উধাহরনে দেখা যাচ্ছে, একজন ব্যবহার কারী তার পছন্দের শহর র্নিবাচনের জন্য ঢাকা, রংপুর এবং বেইজিং নামক তিনটি শহর থেকে ঢাকা ও রংপুর এর যেকোন একটি নির্বাচনের সুযোগ পাবেন। বেইজিং নামক অপশনটি নিস্ক্রিয় দেথানো হয়েছে।যদি সবগুলি রেডিও বাটন একই লাইনে প্রদর্শন করার প্রয়োজন হয়, তবে radio-inline ক্লাস এর ব্যবহার করা যায়।

 

বুটস্ট্র্যাপ সিলেক্ট লিষ্ট


ব্যবহারকারীকে অনেকগুলি বিষয়ের একটি তালিকা থেকে একটি বিষয় বাছাই করার সুযোগ দিতে সিলেক্ট লিষ্ট ব্যবহার করতে হয। নিচের উধাহরনে বিষয়টি বোঝা যাবে।

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

 

 

Feb 13

বুটস্ট্র্যাপ ফর্মস (Bootstrap Forms)

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

বুটস্ট্র্যাপ ফর্মস কন্ট্রোলগুলো স্বয়ংক্রিয়ভাবে কিছু global styling নেয়:

সকল Textual .form-control Class এর <input>, <textarea>, এবং <select> এলিমেন্টগুলোর  বিস্তার ১০০%

 

বুটস্ট্র্যাপ ফরম লেআউট

Bootstrap তিন ধরনের ফর্ম layouts প্রদর্শন করেঃ

  • Vertical form বা উল্লম্ব ফর্ম (এটি ডিফল্ট হিসেবে থাকে)
  • Horizontal form বা আড়াআড়ি ফর্ম
  • Inline form

এই সকল ফর্ম layouts এর জন্য কিছু আদর্শ বিধিমালা আছে

  • সবসময় <form role=”form”> ব্যবহার করতে হবে (স্ক্রিন রিডার ব্যবহার করে মানুষের জন্য প্রবেশযোগ্যতা উন্নত করতে সাহায্য করে)
  • ফর্ম গুছাতে এবং নিয়ন্ত্রন করতে <div class=”form-group”> ব্যবহার করতে হয় (সর্বোত্তম ফাঁকা স্থান দেয়ার জন্য প্রয়োজন)
  • সকল টেক্সট বেজ এলিমেন্ট <input>, <textarea>, এবং <select> এর জন্য .form-control ক্লাস কোয করা হয়।

 

বুটস্ট্র্যাপ উল্লম্ব ফরম Vertical Form (default)

দুইটা input fields, একটি চেকবক্স এবং একটি submit button এর সাহায্যে নিচের উদাহরন এর মতো একটি উলম্ব ফর্ম গঠন করা যায়:

উদাহরনঃ

<form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

 

বুটস্ট্র্যাপ ইনলাইন ফরম

একটি inline form এ সকল উপাদানগুলো একটা সরল রেখায় থাকে , left-aligned, এবং লেবেল পাশাপাশি থাকে

বিশেষ দ্রস্টব্যঃ এটা শুধু মাত্র তখনই প্রদর্শিত হবে যখন viewports এর প্রসস্থতা 768px হবে।

কিছু অতিরিক্ত নিয়ম আছে এটা ব্যবহার করার জন্যঃ

  • .form-inline class টা <form> এর মাঝে স্থাপন করতে হয়

উদাহরনঃ

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ফলাফল : Bootstrap Inline Form

 

সতর্কতাঃ প্রত্যেক input এর জন্য যদি label ব্যবহার না করা হয় তাহলে screen readers ফর্ম গঠনে সমস্যা করতে পারে ।

শধু মাত্র screen reader ছাড়া .sr-only class ব্যবহার করে সকল devices এর জন্য labels hide করে রাখা যাবে।

উদাহরনঃ

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ফলাফল : Inline form with sr-only class

 

বুটস্ট্র্যাপ অনুভূমিক ফর্ম

A horizontal form stands apart from the other forms both in the amount of markup, and in the presentation of the form.

উভয় markup এবং presentation ফর্ম এর ক্ষেত্রে আড়াআড়ি ফর্ম গুলো অন্য ফর্মগুলো থেকে দূরত্ব বজায় রাখে

টা ব্যবহার করার কিছু নিয়ম আছে:

  • <form> এলিমেন্ট এর মধ্যে .form-horizontal class স্থাপন করতে হয়
  • সকল <label> এলিমেন্ট এর মাঝে .control-label class ব্যবহার করতে হয়

উদাহরনঃ

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

ফলাফল : Bootstrap Horizontal Form