আসুন শিখি Twitter Bootstrap (২য় পর্ব)

টিউন করেছেন Esrat | May 6, 2014 22:41 | পোস্টটি 631 বার দেখা হয়েছে

আসুন শিখি Twitter Bootstrap (২য় পর্ব)


এই পর্বে Twitter Bootstrap এর Base CSS এর কিছু পার্ট  নিয়ে আলোচনা করব ।

আমরা সাধারনত বাটন আনার জন্য <input type=”button” value=”submit” > এভাবে লিখি কিন্তু  বুত্স্ত্রাপ সেটাকে আরো সহজ করে দিয়েছে| এক্ষেত্রে আপনি চাইলে সহজেই বাটন এর সাইজ সহ বাটন তৈরী করতে পারবেন| এবনং সেটাকে কয়েকটা পার্ট এ দেখানো হয়েছে|

এখানে বাটন এবং লেখার কিছু পরিবর্তন করানো দেখানো হল :

Screenshot_4

আপনি যদি এরকম কোন বাটন কোন সেক্ষত্রে নিচের দেখানো  কোড লিখতে হবে :

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

বাটন লার্জ করে এবং এরকম প্রাইমারি , সাকসেস , ইনফো ,ওয়ার্নিং এবং ডেঞ্জার এর জন্য় দেখাতে চাইলে এভাবে লিখতে হয় …

বাটনFireShot Screen Capture #008 - 'CSS · Bootstrap' - _L__Bootstrap tutorial_bootstrap_latest_bootstrap_latest_getbootstrap_com_css_index_html#buttons

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
এখানে btn-primary বলতে বাটন কোন ধরনের চাচ্ছেন সেটা বুঝিয়েছে, btn-lg বলতে বাটন এর সাইজ বুঝানো হয়েছে| উপরের চিত্রে তা দেখানো হয়েছে|

একইভাবে যদি কোন টেক্সট কে প্রাইমারি , সাকসেস , ইনফো ,ওয়ার্নিং এবং ডেঞ্জার এর জন্য় দেখাতে কান সেক্ষত্রে একইরকম কোড লিখতে হয় শুধু মাত্র বাটন এর জায়গায়তে টেক্সট লিখতে হয়|
যেমন:<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
দেখতে অনেকটা এরকম হবে: 
Screenshot_1

আপনি একইভাবে ব্যাকগ্রাউন্ড কালার ও পরিবতন করতে পারবেন |
যেমন: 
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

দেখতে এরকম লাগবে :
Screenshot_2
এভাবে আরো কিছু আইটেম পরিবর্তন করা যায় | bootsrtap ওয়েবসাইটে একটু দেখলেই পেয়ে যাবেন|
 আজ এ পর্যন্তই , ভুল ভ্রান্তি থাকলে জানাবেন এবং ক্ষমাসুন্দর দৃষ্টিতে দেখবেন| আল্লাহ হাফেজ|
  • Mohammed Jahangir Hossain

    Nice post!

  • http://www.shishircse.tk/ Razib Ur Rashid Shishir

    valo kisu shikta parlam