Twitter Bootstrap 3 এর কিছু সাধারন সমস্যা ও সমাধান।

bs3

সমস্যা নং ১:

বুটস্ট্রাপ ৩ এ রেস্পনসিভ করার জন্য আলাদা কোড লিখতে গেলে কাজ করে না !!!

সমাধানঃ

বুটস্ট্রাপ ৩ “Mobile First” মোবাইল ফাস্ট বলতে বুঝানো হয় বুটস্ট্রাপ ৩ এ তৈরি প্রায় সব ডিজাইন কোডিং শুরু হবে ছোট আকারের ডিভাইস থেকে।

তাই আপনি যখন কোড লিখবেন তখন আগে মোবাইলের জন্য কোড লিখতে হবে তারপর অন্য স্ক্রিনের জন্য যেমন http://getbootstrap.com/ এই সাইটে যান। প্রথমেই বড় করে লেখা আছে Bootstrap

ফায়ারফক্স দিয়ে ইনসপেক্ট করে দেখুন বড় করে Bootstrap লিখা টির ফন্ট সাইজ 100px দেওয়া আছে এবং Ctrl+shift+M চেপে স্ক্রিন ছোট করে দেখুন এটা যখন ট্যাব বা মোবাইলের স্ক্রিন হবে তখন ফন্ট সাইজ 50px হয়ে যাবে।

যেভাবে কোড লিখতে হবে (উদাহরণ)

যেহেতু “Mobile First” তাই আগে মোবাইলের (ছোট ডিভাইসের জন্য) কোড লিখতে হবে

.h1 {
     font-size: 50px
}

এরপর

@media screen and (min-width: 768px) {
.h1 {
     font-size: 100px
}
}

সমস্যা নং ২:

কোডিং সবই ঠিক কিন্তু যখন ট্যাব বা মোবাইল সাইজ করা হয় তখন রেসপনসিভ নেভিগেশন বাটন কাজ করে না। (ক্লিক করলে কোন মেনু ড্রপডাউন হয় না।)

সমাধানঃ

বুটস্ট্রাপ এর বেসিক স্ট্রাকচার এ </body> এর ঠিক উপরে jquery লিঙ্ক করা থাকে।

<script src=”//code.jquery.com/jquery.js”></script>

উপরে যে সোর্স লিঙ্ক দেওয়া আছে সেখানে গিয়ে সম্পূর্ণ কোড কপি করে jquery.js নামে একটি ফাইল তৈরি করে সেটা লিঙ্কআপ করে দিন। যেমনঃ

<script src=”js/jquery.js”></script>

Facebook Comments

মন্তব্য করুন