বুটস্ট্রাপ ফরম লে-আউট
বুটস্ট্রাপে তিন ধরণের ফরম লে-আউট রয়েছেঃ
- উলম্ব(Vertical) ফরম (এটিই ডিফল্ট)
- আনুভূমিক(Horizontal) ফরম
- ইনলাইন(Inline) ফরম
তিনটি ফরম লে-আউটের জন্যই স্ট্যান্ডার রুলস গুলো হলোঃ
- সবসময়
< form role="form" >ব্যবহার করুন। (স্ক্রিন রিডারদের জন্য সহায়ক) - লেভেল এবং ফরম কন্ট্রোলগুলো
< div class="form-group" >এর মধ্যে রাখুন (কাঙ্খিত ব্যবধানের জন্য প্রয়োজন) - সকল টেক্সট এলিমেন্ট যেমন
< input >,< textarea >এবং< select >এ.form-controlক্লাস যুক্ত করুন।
বুটস্ট্রাপ Vertical ফরম (ডিফল্ট)
নিচের উদাহরণে দুইটি ইনফুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটন সহ একট vertical ফরম তৈরি করা হলোঃ
kt_satt_skill_example_id=1004
বুটস্ট্রাপ ইনলাইন ফরম
ইনলাইন ফরমে, সকল এলিমেন্টই ইনলাইন এবং বামে এ্যালাইনযুক্ত হয়। এছাড়াও লেভেলগুলো একই সাথে থাকে।
নোটঃ এটি শুধুমাত্র সেখানের এমন দেখাবে যেখানে ভিউপোর্ট(ডিভাইসের স্ক্রিনের আকার) কমপক্ষে 768px প্রশস্ত!
ইনলাইন ফরম তৈরি করা জন্য < form > এলিমেন্টের মধ্যে .form-inline ক্লাস যুক্ত করতে হবে।
নিচের উদাহরণে দুটি ইনপুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটনসহ একটি ইনলাইন ফরম দেখানো হলোঃ
kt_satt_skill_example_id=1006
টিপসঃ আপনি যদি আপনার ফরমের প্রতিটি ইনপুট ফিল্ডে লেভেল যুক্ত না করেন, তাহলে স্ক্রিন রিডারদের জন্য তা কষ্টদায়ক হবে। .sr-only ক্লাস ব্যবহার করে চাইলে আপনি স্ক্রিন রিডার ব্যতীত অন্য যেকোন ডিভাইসের জন্য লেভেল হাইড করতে পারেনঃ
kt_satt_skill_example_id=1008
বুটস্ট্রাপ Horizontal ফরম
একটি Horizontal ফরম মার্কআপের সংখ্যা এবং উপস্থাপনার দিক থেকে অন্যান্য ফরমের চেয়ে আলাদা।
Horizontal ফরম তৈরি করার নিয়মঃ
- Horizontal ফরম তৈরি করার জন্য
< form >এলিমেন্টে.form-horizontalক্লাস অন্তর্ভূক্ত করুন। - এবং সকল
< label >এলিমেন্টে.control-labelক্লাস যুক্ত করুন।
টিপসঃ একটি Horizontal ফরম লে-আউটে লেভেল এবং ফরম কন্ট্রোল গ্রুপকে বিন্যাস(align) করার জন্য বুটস্ট্রাপের পূর্বনির্ধারিত গ্রীড ক্লাস ব্যবহার করুন।
নিচের উদাহরণে দুটি ইনপুট ফিল্ড, একটি চেকবক্স এবং একটি সাবমিট বাটনসহ Horizontal ফরম তৈরি করা হলোঃ
kt_satt_skill_example_id=1011
Read more
