Category: বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

Bootstrap Case: নেভিগেশান বার যোগ করা (Adding a Navigation Bar)

শেখ মাহফুজুর রহমান   নেভিগেশান বার একটি নেভিগেশান বার হলো একটি নেভিগেশান হেডার যা পেজের উপরের দিকে যোগ করা হয়। বুটস্ট্র্যাপের মাধ্যমে একটি নেভিগেশান বারকে স্ক্রিনের সাইজ অনুযায়ী এক্সট্যান্ড অথবা কলাপ্স করা যায়। অর্থাৎ ডিভাইসের ধরণ অনুসারে সুবিধামতো নেভিগেশান বারকে সেটাপ করা যায়। <nav class=”navbar navbar-default”> এর সাহাজ্যে একটি সাধারণ নেভিগেশান বার তৈরি করা যায়। …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%95%e0%a7%87%e0%a6%b8%e0%a6%83-%e0%a6%a8%e0%a7%87%e0%a6%ad%e0%a6%bf%e0%a6%97%e0%a7%87/

Bootstrap Case: একটি মেনু যোগ করার পদ্ধতি (Adding a Menu)

মেনু অধিকাংশ ওয়েব পেইজ এর ই কিছু Menu রয়েছে। Html এ, একটি মেনু প্রায়ই একটি unordered তালিকা <ul> এর মধ্যে সংজ্ঞায়িত করা হয়। উদাহরনণঃ <ul> <li><a href=”#”>Home</a></li> <li><a href=”#”>Menu 1</a></li> <li><a href=”#”>Menu 2</a></li> <li><a href=”#”>Menu 3</a></li> </ul>   Bootstrap উপরের Menu প্রদর্শনের জন্য দুইটি উপায় অবলম্বন করে, যেমনঃ tabs and pills. Tabs Tabs নির্মিত হয় …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/bootstrap-case-adding-a-menu/

Bootstrap Case: একাধিক কলাম এর বিন্যাস (Multicolumn Layout)

একাধিক কলাম এর বিন্যাস Bootstrap ব্যবহার করে সহজেই multicolumn layout তৈরি করা যায় । Bootstrap একটি প্রতিক্রিয়াশীল এবং mobile-first 12-column grid system দিয়ে থাকে। বিভিন্ন স্ক্রীন সাইজে কলাম গুলো নিজেদের মধ্যে পুনরায় সজ্জিত হয়। Grid এর লিছু নিয়মাবলিঃ একটি ধারক দিয়ে শুরু করুন । <div class=”row”> দ্বারা এর মধ্যে সারি তৈরি করুন। দ্রুত Grid column …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/bootstrap-case-multicolumn-layout/

Bootstrap Case: বাটন ও আইকন যোগ করা (Adding Button and Icon)

বাটন যুক্ত করা বাটন ক্লাস গুলোতে <a>, <button>, or <input> এই উপাদান সমুহে ব্যবহৃত হতে পারে। নিম্নলিখিত উদাহরণে Jumbotron এর মধ্যে একটি বড় এবং হালকা নীল “Search” বাটন দেওয়া হল। এই effect টি পেতে হলে আমাদের .btn-lg এবং .btn-info ক্লাস গুলো ব্যবহার করতে হবে। উদাহরনঃ <div class=”jumbotron”> <h1>My first Bootstrap website!</h1> <p>This page will grow …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/bootstrap-case-adding-button-and-icon/

Bootstrap Case: আমার প্রথম বুটস্ট্র্যাপ ওয়েবসাইট (My First Bootstrap Website)

অনুবাদ করেছেন Abu Jubair Mahin   স্ক্র্যাচ থেকে একটি বুটস্ট্র্যাপ ওয়েব পৃষ্ঠা তৈরি করুন নিচের পৃষ্ঠায় Scratch (স্ক্র্যাচ) থেকে একটি বুটস্ট্র্যাপ ওয়েবসাইট কিভাবে নির্মাণ করা হয় সেটা প্রদর্শন করা হবে আমরা একটি সহজ HTML পৃষ্ঠা দিয়ে শুরু করব, এবং পরে আমরা অনেক বেশি বেশি components সেখানে যোগ করব, যতক্ষণ না আমরা একটি সম্পূর্ণরূপে কার্যকরী এবং …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/bootstrap-case-my-first-bootstrap-website/

বু্টস্ট্র্যাপ গ্রিড উদাহরণ (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 …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a7%8d%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%97%e0%a7%8d%e0%a6%b0%e0%a6%bf%e0%a6%a1-%e0%a6%89%e0%a6%a6%e0%a6%be%e0%a6%b9/

বুটস্ট্র্যাপ গ্রিড – বড় ডিভাইস । 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 এর ক্ষেত্রে …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/bootstrap-grid-large-devices/

বুটস্ট্র্যাপ গ্রিড – মধ্যম ডিভাইস । 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 …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/bootstrap-grid-medium-devices/

বুটস্ট্র্যাপ গ্রিড – স্ট্যাকড-টু-হরাইজন্টাল (Bootstrap Grid – Stacked-to-horizontal)

শেখ মাহফুজুর রহমান   বুটস্ট্র্যাপ গ্রিডের উদাহরণঃ স্ট্যাকড থেকে হরাইজন্টাল আমরা একটি সাধারণ গ্রিড সিস্টেম তৈরি করবো যা মোবাইল/টেবলেট-এ স্ট্যাকড বা স্তুপাকারে (একটির উপর আরেকটি) দেখাবে, কিন্তু মাঝারী/বড় ডিভাইস যেমন ডেস্কটপে হরাইজন্টাল হয়ে যাবে। নিচের উদাহরণটি একটি খুবই সাধারণ “stacked-to-horizontal” লেআউট তৈরি করেঃ উদাহরণঃ Stacked-to-horizontal <div class=”container”>   <h1>Hello World!</h1>   <div class=”row”>     <div …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%97%e0%a7%8d%e0%a6%b0%e0%a6%bf%e0%a6%a1-%e0%a6%b8%e0%a7%8d%e0%a6%9f/

বুটস্ট্র্যাপ গ্রিড সিস্টেম (Bootstrap Grid System)

শেখ মাহফুজুর রহমান   বুটস্ট্র্যাপের গ্রিড সিস্টেম একটি পেজে ১২টি পর্যন্ত কলাম যোগ করতে দেয়। আপনি যদি আলাদাভাবে সবগুলো (১২টি) কলাম ব্যবহার করতে না চান তাহলে কিছু কলামকে গ্রুপ বা গুচ্ছাকৃত করে প্রশস্তততর কলাম তৈরি করতে পারবেনঃ span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%97%e0%a7%8d%e0%a6%b0%e0%a6%bf%e0%a6%a1-%e0%a6%b8%e0%a6%bf%e0%a6%b8%e0%a7%8d%e0%a6%9f/

বুটস্ট্রাপ ক্যারোজেল প্লাগিন (Bootstrap Carousel Plugin)

বুটস্ট্রাপ কারুসেল প্লাগিন Carousel প্লাগইন হচ্ছে এলিমেন্ট দ্বারা আবর্ত করার জন্য একটি ক্যারোজেল (স্লাইডশো) এর মত একটি উপাদান। টিপস : প্লাগইন স্বতন্ত্রভাবে অন্তর্ভুক্ত করা যেতে পারে (বুটস্ট্র্যাপ এর স্বতন্ত্র “carousel.js” ফাইল ব্যবহার করে), অথবা সব একযোগে (“bootstrap.js” বা “bootstrap.min.js” ব্যবহার করে) এর উদাহরণ নোট : ক্যারোজেল ইন্টারটেন এক্সপ্লোরার ৯ এবং এর আগের ভার্সনগুলোতে সাপর্ট করে না …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a6%be%e0%a6%aa-%e0%a6%95%e0%a6%be%e0%a6%b0%e0%a7%81%e0%a6%b8%e0%a7%87%e0%a6%b2-%e0%a6%aa%e0%a7%8d%e0%a6%b2%e0%a6%be%e0%a6%97/

বুটস্ট্র্যাপ ইনপুট সাইজিং (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” …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%87%e0%a6%a8%e0%a6%aa%e0%a7%81%e0%a6%9f-%e0%a6%b8%e0%a6%be%e0%a6%87%e0%a6%9c%e0%a6%bf/

বুটস্ট্র্যাপ ইনপুট ফরম (আরো জানুন) 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> ফলাফল : স্ট্যাটিক কন্ট্রোল …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/bootstrap-form-inputs-more/

বুটস্ট্র্যাপ ফরম ইনপুট (Bootstrap Form Inputs)

মো: আসাদুজ্জামান মিলন আইটি ইন্সট্রাক্টর, এমএসআইটি, কুড়িগ্রাম।   সমর্থিত ফরম কন্ট্রোল বুটস্ট্র্যাপ নিম্নলিখিত ফর্ম কন্ট্রোলগুলো সমর্থন করে input textarea checkbox radio select   বুটস্ট্র্যাপ ইনপুট বুটস্ট্র্যাপ এইচটিএমএল ৫ এর সকল ইনপুট টাইপ, যেমন : text, password, time, color. datetime, datetime-local, date, month, week, number, email, url ইত্যাদি সর্মথন করে। নিচের উধাহরনে দুই প্রকারের এইচটিএমএল ৫ …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%ab%e0%a6%b0%e0%a6%ae-%e0%a6%87%e0%a6%a8%e0%a6%aa%e0%a7%81%e0%a6%9f-bootstrap-form-i/

বুটস্ট্র্যাপ ফর্মস (Bootstrap Forms)

বুটস্ট্র্যাপ এর ডিফল্ট সেটিংস বুটস্ট্র্যাপ ফর্মস কন্ট্রোলগুলো স্বয়ংক্রিয়ভাবে কিছু global styling নেয়: সকল Textual .form-control Class এর <input>, <textarea>, এবং <select> এলিমেন্টগুলোর  বিস্তার ১০০%   বুটস্ট্র্যাপ ফরম লেআউট Bootstrap তিন ধরনের ফর্ম layouts প্রদর্শন করেঃ Vertical form বা উল্লম্ব ফর্ম (এটি ডিফল্ট হিসেবে থাকে) Horizontal form বা আড়াআড়ি ফর্ম Inline form এই সকল ফর্ম layouts এর …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%ab%e0%a6%b0%e0%a7%8d%e0%a6%ae%e0%a6%b8-bootstrap-forms/

বুটস্ট্র্যাপ লিস্ট গ্রুপ্স (Bootstrap List Groups)

নাম-শরিফুল ইসলাম Job category-Php Coder   basic list group তৈরি করার জন্য আমাদের <ul> এর মধ্যে .list-group ব্যবহার করতে হবে। এবং <li> এর মধ্যে .list-group-item ব্যবহার করতে হবে। <ul class=”list-group”>   <li class=”list-group-item”>First item</li>   <li class=”list-group-item”>Second item</li>   <li class=”list-group-item”>Third item</li> </ul> ফলাফল :   আমরা list-group এর সাথে badges যুক্ত করতে পারি। এইগুলো …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%b2%e0%a6%bf%e0%a6%b8%e0%a7%8d%e0%a6%9f-%e0%a6%97%e0%a7%8d%e0%a6%b0%e0%a7%81%e0%a6%aa/

বুটস্ট্র্যাপ পেজার (Bootstrap Pager)

Pager কি ??? Pager দিয়ে সাধারণত কত নাম্বার পেইজ সেটা বোঝানো হয় ( এই সন্মন্ধে পূর্ববর্তী অধ্যায়ে আলোচনা করা হয়েছে ) Pager এর কাজ previous (পূর্ববর্তী ) এবং next (পরবর্তী) পেইজের buttons প্রদর্শিত করা previous/next buttons তৈরি করার জন্য .pager Class, <ul> element এর মাঝে স্থাপন করতে হয় উদাহরনঃ <ul class=”pager”>   <li><a href=”#”>Previous</a></li>   …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%aa%e0%a7%87%e0%a6%9c%e0%a6%be%e0%a6%b0-bootstrap-pager/

Bootstrap Pagination

অনুবাদ করেছে Abu Jubair Mahin Bootstrap Pagination Pagination বলতে পত্রাঙ্কন বুঝায় , সহজ ভাবে বলতে গেলে এক পেইজ থেকে অন্য পেইজে সহজ ভাবে যাওয়াকে বুঝায় । আপনার যদি একটা web site থাকে যাতে পেইজের সংখ্যা অনেক তাহলে আপনি প্রত্যেক পেইজে ছোট করে pagination ব্যবহার করতে পারেন । সাধারণত Bootstrap এ নিচের মত pagination দেখা যায়। …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/bootstrap-pagination/

বুটস্ট্র্যাপ প্রগ্রেস বার (Bootstrap Progress Bars)

প্রোগ্রেস বার ব্যবহার করা হয় যাতে সহজে বোঝা যায় ইউজার এর কাজের প্রক্রিয়া কতদুর সম্মন্ন হয়েছে। Bootstrap এ কয়েক ধরনের প্রোগ্রেস বার লক্ষ্য করা যায়। আমরা যদি একটি উদাহরণ দেখি। একটি ডিফল্ট প্রোগ্রেস বার দেখার জন্য .progress class <div> এর মধ্যে যুক্ত করতে হবে। এরপর ব্রাউজার এ রান করলে একটি নিল বার আমরা পাব। যা …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%aa%e0%a7%8d%e0%a6%b0%e0%a6%97%e0%a7%8d%e0%a6%b0%e0%a7%87%e0%a6%b8-%e0%a6%ac%e0%a6%be/

বুটস্ট্র্যাপ গ্লাইফাইকন এবং ব্যাজ বা লেবেল (Bootstrap Glyphicons and Badges/Level)

লিখেছেন সুদীপ্ত সাহা   গ্লাইফাইকনস গ্লাইফাইকনের সেটে বুটস্ট্র্যাপের ২০০ আইকন রয়েছে। টেক্সট, বাটন, টুলবার, নেভিগেশন, ফর্ম এরকম বিভিন্ন জায়গায় গ্লাইফাইকন ব্যবহার করা হয়। কিছু গ্লাইফাইকনের উদাহরণ হলঃ   গ্লাইফাইকনের সিনট্যাক্স গ্লাইফাইকন সেট করার জন্য নিচের সিনট্যাক্স ব্যবহার করতে হয়ঃ <span class=”glyphicon glyphicon-name”></span> সিনট্যাক্সের নেম এর অংশে অবশ্যই একটি সঠিক গ্লাইফাইকনের নাম দিতে হবে।   গ্লাইফাইকনের …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%97%e0%a7%8d%e0%a6%b2%e0%a6%be%e0%a6%87%e0%a6%ab%e0%a6%be%e0%a6%87%e0%a6%95%e0%a6%a8/

বুটস্ট্র্যাপ বাটন (Bootstrap Buttons)

Button স্টাইল Bootstrap এ সাতটি স্টাইলের button ব্যবহৃত হয়, যথা: এই সাতটি স্টাইলের প্রত্যেকটির জন্য ভিন্ন ভিন্ন class ব্যবহৃত হয়, যথা: Default – .btn-default Primary – .btn-primary Success – .btn-success Info – .btn-info Warning – .btn-warning Danger – .btn-danger Link – .btn-link   নিম্নোক্ত উদাহরণে ভিন্ন ভিন্ন button এর স্টা্ইলের দেখানো হলো: <button type=”button” class=”btn …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/bootstrap-buttons/

বুটস্ট্র্যাপ জাম্বট্রন এবং পেজ হেডার (Bootstrap Jumbotron and Page Header)

বুটস্ট্র্যাপ জাম্বট্রন এবং পেজ হেডার জাম্বট্রন তৈরির পদ্ধতি কোন স্পেশাল কন্টেন্ট বা তথ্যের প্রতি ইউজারের মনোযোগ আকর্ষণের জন্য ওয়েবপেজে বড় স্পেস বা বক্সকে নির্দেশ করাই হচ্ছে জাম্বট্রন। জাম্বট্রনের ব্যাকগ্রাউন্ড কালার সাধারনত গ্রে হয়ে থাকে এবং এর কর্নারগুলো একটু রাউন্ড আকৃতির হয়। জাম্বট্রনের ভেতরে যেই টেক্সটগুলো থাকে সেগুলো সেগুলোর ফন্টসাইজও স্বয়ংক্রিয়ভাবে বড় হয়ে থাকে। টিপসঃ জাম্বট্রনের …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%9c%e0%a6%be%e0%a6%ae%e0%a7%8d%e0%a6%ac%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a6%a8-%e0%a6%8f/

বুটস্ট্র্যাপ ইমেজেস (Bootstrap Images)

বুটস্ট্র্যাপ ইমেজ আকৃতি Bootstrap এর সাহায্যে সহজেই Image কে তিন প্রকার Shape এ দেখানো যায়, যথা: গোলাকৃতির কোণ বৃত্ত থাম্বনেল   গোলাকৃতির কোণ Image এর চারপাশে Rounded Corner তৈরি করার জন্য .img-rounded class টিকে যোগ করা হয়, তবে ইন্টারনেট এক্সপ্লোরার-৮ Rounded Corner সাপোর্ট করে না। উদাহরণ:  <img src=”cinqueterre.jpg” class=”img-rounded” alt=”Cinque Terre” width=”304″ height=”236″>   বৃত্ত …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%87%e0%a6%ae%e0%a7%87%e0%a6%9c%e0%a7%87%e0%a6%b8-bootstrap-images/

বুটস্ট্র্যাপ টেবিল (Bootstrap Tables)

Bootstrap বেসিক টেবিল সাধারণত Bootstrap বেসিক টেবিলে light padding বা সামান্য প্যাডিং ও horizontal বা আনুভূমিক divider থাকে। এক্ষেত্রে divider বলতে Row এর bottom-border কে বোঝানো হয়েছে। .table class ব্যবহার করে টেবিলের basic styling করা হয়। যেমন: কোড : <div class=”container”>   <h2>Basic Table</h2>   <p>The .table class adds basic styling (light padding and only …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%9f%e0%a7%87%e0%a6%ac%e0%a6%bf%e0%a6%b2-bootstrap-tables/

বুটস্ট্র্যাপ ট্যাক্সট / টাইপোগ্রাফি (Bootstrap Text/Typography)

Bootstrap এর প্রাথমিক (default ) ফন্ট সাইজ হল ১৪ পিক্সেল, যার প্রতি লাইনের উচ্চতা (height) ১.৪২৮ । এটা <body> এবং সমস্ত প্যরাগ্রাফে ব্যবহার করা হয় । উপরন্তু, সকল <p> elements এর একটি bottom margin থাকে যেটা তাদের নির্ণিত line-height এর সমান অথবা অর্ধেক (ডিফল্ট হিসেবে 10px) বুটস্ট্র্যাপ বনাম ব্রাউজার ডিফল্ট  এই অনুশীলনীতে আমারা দেখব বুটস্ট্র্যাপ …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%9f%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%95%e0%a7%8d%e0%a6%b8%e0%a6%9f-%e0%a6%9f/

বুটস্ট্র্যাপ গ্রিডস (Bootstrap Grids)

শেখ মাহফুজুর রহমান   বুটস্ট্র্যাপ গ্রিড সিস্টেম বুটস্ট্র্যাপ গ্রিড সিস্টেম পুরো পেজে ১২টি কলাম যোগ করতে দেয়। যদি আপনি ১২টি কলাম আলাদা আলাদাভাবে ব্যবহার করতে না চান, তাহলে কয়েকটি কলামকে একসাথে একত্র করে প্রশস্ত কলাম তৈরি করতে পারেনঃ span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%97%e0%a7%8d%e0%a6%b0%e0%a6%bf%e0%a6%a1%e0%a6%b8-bootstrap-grids/

বুটস্ট্র্যাপ শেখা শুরু করা যাক (Bootstrap Get Started)

Bootstrap কি ???? Bootstrap হল ফ্রি front-end framework, সহজ এবং দ্রুত গতির web development এর জন্য Bootstrap হল HTML এবং CSS নির্ভর মুদ্রণবিদ্যা, ফর্ম, বাটন, টেবিল, নেভিগেটর, মডালস, ইমেজ carousels এবং আরও অনেক কিছু, জাভা স্ক্রিপ্ট প্লাগিন সহ ডিজাইন templates তরির মাধ্যম Bootstrap এর সাহায্যে তুমি যে কোন Responsive ডিজাইন ও করতে পারবে   Responsive …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a6%97%e0%a7%87%e0%a6%9f-%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a6%be%e0%a6%b0%e0%a7%8d%e0%a6%9f/

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

প্রতাপ চন্দ্র   বুটস্ট্র্যাপ হচ্ছে রেসপনসিভ ও মোবাইল-বান্ধব ওয়েবসাইট তৈরীর জন্য এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের সবচেয় জনপ্রিয় ফ্রেমওয়ার্ক। এটি সম্পূর্ণ বিনামূল্যে ডাউনলোড করে ব্যবহার করা যায়। বুটস্ট্র্যাপ ব্যবহার করে খুব সহজে দৃষ্টিনন্দন ও রেসপনসিভ ওয়েবসাইট তৈরী করা যায়। বুটস্ট্র্যাপ শেখার জন্য আমরা ধারাবাহিক টিউটরিয়াল প্রকাশ করব যার মাধ্যমে ধাপে ধাপে আপনারা এই প্রযুক্তির মাধ্যমে ওয়েব …

Continue reading

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%aa-%e0%a7%a9-%e0%a6%9f%e0%a6%bf%e0%a6%89%e0%a6%9f%e0%a7%8b%e0%a6%b0%e0%a6%bf%e0%a7%9f%e0%a6%be/