অ্যাঙ্গুলার জেএস (AngularJS) এবং টুইটার বুটস্ট্র্যাপ মো: আসাদুজ্জামান (Md. Asaduzzaman) ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার) বুটস্ট্র্যাপ একটি জনপ্রিয় স্টাইল শিট (style sheet) এই অধ্যায়ে AngularJS সঙ্গে কিভাবে এটি ব্যবহার হয় দেখানো হবে। বুটস্ট্র্যাপ আপনার AngularJS এপ্লিকেশন এ বুটস্ট্র্যাপ অন্তর্ভুক্ত করার জন্য, আপনার <head> এলিমেন্ট এর মধ্যে নিম্নলিখিত লাইনটি যোগ করুন: <link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”> …
Tag: বুটস্ট্র্যাপ
Feb 14
Bootstrap Case: আমার প্রথম বুটস্ট্র্যাপ ওয়েবসাইট (My First Bootstrap Website)
অনুবাদ করেছেন Abu Jubair Mahin স্ক্র্যাচ থেকে একটি বুটস্ট্র্যাপ ওয়েব পৃষ্ঠা তৈরি করুন নিচের পৃষ্ঠায় Scratch (স্ক্র্যাচ) থেকে একটি বুটস্ট্র্যাপ ওয়েবসাইট কিভাবে নির্মাণ করা হয় সেটা প্রদর্শন করা হবে আমরা একটি সহজ HTML পৃষ্ঠা দিয়ে শুরু করব, এবং পরে আমরা অনেক বেশি বেশি components সেখানে যোগ করব, যতক্ষণ না আমরা একটি সম্পূর্ণরূপে কার্যকরী এবং …
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 …
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” …
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> ফলাফল : স্ট্যাটিক কন্ট্রোল …
Feb 13
বুটস্ট্র্যাপ ফরম ইনপুট (Bootstrap Form Inputs)
মো: আসাদুজ্জামান মিলন আইটি ইন্সট্রাক্টর, এমএসআইটি, কুড়িগ্রাম। সমর্থিত ফরম কন্ট্রোল বুটস্ট্র্যাপ নিম্নলিখিত ফর্ম কন্ট্রোলগুলো সমর্থন করে input textarea checkbox radio select বুটস্ট্র্যাপ ইনপুট বুটস্ট্র্যাপ এইচটিএমএল ৫ এর সকল ইনপুট টাইপ, যেমন : text, password, time, color. datetime, datetime-local, date, month, week, number, email, url ইত্যাদি সর্মথন করে। নিচের উধাহরনে দুই প্রকারের এইচটিএমএল ৫ …
Feb 13
বুটস্ট্র্যাপ ফর্মস (Bootstrap Forms)
বুটস্ট্র্যাপ এর ডিফল্ট সেটিংস বুটস্ট্র্যাপ ফর্মস কন্ট্রোলগুলো স্বয়ংক্রিয়ভাবে কিছু global styling নেয়: সকল Textual .form-control Class এর <input>, <textarea>, এবং <select> এলিমেন্টগুলোর বিস্তার ১০০% বুটস্ট্র্যাপ ফরম লেআউট Bootstrap তিন ধরনের ফর্ম layouts প্রদর্শন করেঃ Vertical form বা উল্লম্ব ফর্ম (এটি ডিফল্ট হিসেবে থাকে) Horizontal form বা আড়াআড়ি ফর্ম Inline form এই সকল ফর্ম layouts এর …
