শেখ মাহফুজুর রহমান নেভিগেশান বার একটি নেভিগেশান বার হলো একটি নেভিগেশান হেডার যা পেজের উপরের দিকে যোগ করা হয়। বুটস্ট্র্যাপের মাধ্যমে একটি নেভিগেশান বারকে স্ক্রিনের সাইজ অনুযায়ী এক্সট্যান্ড অথবা কলাপ্স করা যায়। অর্থাৎ ডিভাইসের ধরণ অনুসারে সুবিধামতো নেভিগেশান বারকে সেটাপ করা যায়। <nav class=”navbar navbar-default”> এর সাহাজ্যে একটি সাধারণ নেভিগেশান বার তৈরি করা যায়। …
Tag: Bootstrap
Feb 14
Bootstrap Case: একাধিক কলাম এর বিন্যাস (Multicolumn Layout)
একাধিক কলাম এর বিন্যাস Bootstrap ব্যবহার করে সহজেই multicolumn layout তৈরি করা যায় । Bootstrap একটি প্রতিক্রিয়াশীল এবং mobile-first 12-column grid system দিয়ে থাকে। বিভিন্ন স্ক্রীন সাইজে কলাম গুলো নিজেদের মধ্যে পুনরায় সজ্জিত হয়। Grid এর লিছু নিয়মাবলিঃ একটি ধারক দিয়ে শুরু করুন । <div class=”row”> দ্বারা এর মধ্যে সারি তৈরি করুন। দ্রুত Grid column …
Feb 14
Bootstrap Case: আমার প্রথম বুটস্ট্র্যাপ ওয়েবসাইট (My First Bootstrap Website)
অনুবাদ করেছেন Abu Jubair Mahin স্ক্র্যাচ থেকে একটি বুটস্ট্র্যাপ ওয়েব পৃষ্ঠা তৈরি করুন নিচের পৃষ্ঠায় Scratch (স্ক্র্যাচ) থেকে একটি বুটস্ট্র্যাপ ওয়েবসাইট কিভাবে নির্মাণ করা হয় সেটা প্রদর্শন করা হবে আমরা একটি সহজ HTML পৃষ্ঠা দিয়ে শুরু করব, এবং পরে আমরা অনেক বেশি বেশি components সেখানে যোগ করব, যতক্ষণ না আমরা একটি সম্পূর্ণরূপে কার্যকরী এবং …
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 …
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 এর ক্ষেত্রে …
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 …
Feb 14
বুটস্ট্র্যাপ গ্রিড – স্ট্যাকড-টু-হরাইজন্টাল (Bootstrap Grid – Stacked-to-horizontal)
শেখ মাহফুজুর রহমান বুটস্ট্র্যাপ গ্রিডের উদাহরণঃ স্ট্যাকড থেকে হরাইজন্টাল আমরা একটি সাধারণ গ্রিড সিস্টেম তৈরি করবো যা মোবাইল/টেবলেট-এ স্ট্যাকড বা স্তুপাকারে (একটির উপর আরেকটি) দেখাবে, কিন্তু মাঝারী/বড় ডিভাইস যেমন ডেস্কটপে হরাইজন্টাল হয়ে যাবে। নিচের উদাহরণটি একটি খুবই সাধারণ “stacked-to-horizontal” লেআউট তৈরি করেঃ উদাহরণঃ Stacked-to-horizontal <div class=”container”> <h1>Hello World!</h1> <div class=”row”> <div …
Feb 14
বুটস্ট্র্যাপ গ্রিড সিস্টেম (Bootstrap Grid System)
শেখ মাহফুজুর রহমান বুটস্ট্র্যাপের গ্রিড সিস্টেম একটি পেজে ১২টি পর্যন্ত কলাম যোগ করতে দেয়। আপনি যদি আলাদাভাবে সবগুলো (১২টি) কলাম ব্যবহার করতে না চান তাহলে কিছু কলামকে গ্রুপ বা গুচ্ছাকৃত করে প্রশস্তততর কলাম তৈরি করতে পারবেনঃ span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 …
