Post No:14
আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা Bootstrap সম্পর্কে জানবো।
আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib
বুটস্ট্রাপ কি?
বুটস্ট্রাপ হলো সবচেয়ে জনপ্রিয় রেসপন্সিভ এবং মোবাইল ফাস্ট ওয়েবসাইট ডিজাইন করার ক্ষেত্রে এইচটিএমএল, সিএসএস, এবং জাভাস্ক্রিপ্ট ফ্রেমোয়ার্ক । বুটস্ট্রাপ ব্যবহার করা যায় খুবই সহজ কিন্তু এক্ষত্রে এইচটিএমএল, সিএসএস জানা থাকলে বুটস্ট্রাপ ব্যবহার করা যায়। তাই বুটস্ট্রাপ ব্যবহারের পূর্বে এইচটিএমএল জানা জরুরি। বুটস্ট্রাপ এর মাধ্যমে টাইপোগ্রাফি, ফরম, বাটন, টেবিল, নেভিগেশন, মোডাল, ইমেজ ক্যারোসেল সহ অরোও অনেক কিছু কোন রকম কোডিং এর ঝামেলা ছাড়া ব্যবহার করা যায় ।
এইচটিএমএল এবং সিএসএস দিয়ে ওয়েবসাইট ডিজাইন করার পর সেগুলোকে আবার মোবাইল, ট্যাবলেট, পিসিতে সকল সাইজের জন্য মানানসই করে তোলায় হলো রিসপন্সিভ। বুটস্ট্রাপ যেমন : - Chrome, Firefox, Internet Explorer, Safari, এবং Opera ইত্যাদি সকল আধুনিক ব্রাউজারে সাথে সমার্থন করে । বুটস্ট্রাপ ব্যবহার করার জন্য দুই ধরনের পদ্ধতি রয়েছে ।
বুটস্ট্রাপ ডাউনলোড
বুটস্ট্রাপ ডাউনলোড করার জন্য ব্রাউজারে সার্চ করতে হবে getbootstrap.com, এবং তাদের নির্দেশনা অনুযায়ী বুটস্ট্রাপ ব্যবহার করতে হবে । এখানে একটি জিপ ফাইল থাকে যা ডাইনলোড করার পর আনজিপ করার মাধ্যমে ব্যবহার করা হয় । বুটস্ট্রাপ ব্যবহার করার জন্য আপনাকে ডাউনলোড করে ব্যবহার করতে হবে। এটি সম্পর্ণ ফ্রি ব্যবহার করা যায় । তবে এ ফাইলটি দিয়ে ওয়েব সাইট ডেভেলপ করলে সাইটি লোড হতে একটু বেশি সময় নেয় । সব থেকে বড মজার বিষয হলো এটি অনলাইন ছাড়া ব্যবহার করা সম্ভব হয় ।
বুটস্ট্রাপ সিডিএন ( CDN ) যুক্ত
বুটস্ট্রাপ ব্যবহার করার জন্য ফাইলটি ডাউনলোড করতে না চান তাহলে আপনাকে অবশ্যই সিডিএন যুক্ত করতে পারবেন ( CDN = কন্টেন্ট ডেলিভারী নেটওয়ার্ক ) । MaxCDN বুটস্ট্রাপ সিএসএস এবং জাভাস্ক্রিপ্ট এর সিডিএন সাপোর্ট এর জন্য সহযোগিতা করে । আপনাকে এ সমস্ত সুবিধা পাওয়ার জন্য অবশ্যই জেকুয়ারি যুক্ত করতে হবে । বুস্ট্রাপে CND ব্যবহার করার ফলে যখন কোন ইউজার আপনার সাইটে প্রবেশ করে তখন এটি cache থেকে লোড হয় যা দ্রুত এবং ফাস্ট লোডিং নিশ্চিত করে ।
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Bootstrap ফ্রেমওয়ার্কটা কি!
ফ্রেমওয়ার্ক ব্যাপারটা এমন যে তুলনামূলক অপ্রয়োজনীয় কাজে সময় এবং শ্রম নষ্ট করা থেকে আমাদেরকে রক্ষা করা। একটা ফ্রেমওয়ার্কে আগে থেকে অনেকগুলো কাজ করে দেওয়া থাকে, আমরা শুধু ঐ কাজের নাম ধরে ডাকলেই কাজ হয়ে যাবে। আশা করি, অনুভব করতে পারছেন ফ্রেমওয়ার্কটা আসলে কি।
বুটস্ট্রেপ হলো css এবং js এর একটা প্যাকেজ ফ্রেমওয়ার্ক। আমরা এই প্যাকেজ ফ্রেমওয়ার্কটা হাড্ডিওয়ালা HTML ওয়েবপেজের উপর প্রয়োগ করে সহজেই একটা কুল এইট প্যাকওয়ালা বডি বিল্ডার ওয়েবপেজ বানিয়ে ফেলতে পারি।
বুটস্ট্রেপের গ্রিড সিস্টেমঃ
বুটস্ট্রেপের আছে চমৎকার একটা গ্রিড সিস্টেম। যার মাধ্যমে একটা ওয়েবপেজকে ১২ ভাগে ভাগ করে ইচ্ছামতন কন্টেন্ট বসানো যায়। বুটস্ট্রেপ ছাড়াও আপনি নিজে স্টাইল লিখে ১২ ভাগে ভাগ করতে পারবেন, তবে যে কাজটা কোন প্রকার কষ্ট না করে ৩০-৪০ সেকেন্ডে করে ফেলতে পারছেন সেটা কেন ৮-১০ মিনিট সময় নষ্ট করে করবেন?
তাছাড়া বুটস্ট্রেপে অনেকগুলো ক্লাসের স্টাইল আগে থেকেই করে দেওয়া আছে। আমরা শুধু সময়-সুযোগমতো ক্লাসের নাম ধরে ডাকতে পারলেই আমাদের কাজ শেষ। ব্যাপারটা ধরতে পারছেন না? আমরা div কিংবা বিভিন্ন ট্যাগের মধ্যে যে class এর নাম লিখি, সেই class কে আমরা বিভিন্ন স্টাইল দিই। এরকম অনেক গুলো ক্লাসকে আগে থেকে বুটস্ট্রেপে চমৎকার সব স্টাইল দেওয়া আছে।
Learn More - https://getbootstrap.com/docs/4.0/layout/grid/
জাভাস্ক্রিপ্টের অনেক ফাংশন আগে থেকেই লিখা আছে। আমাদের কাজ শুধু কান চেপে ধরে প্রয়োজনীয় ফাংশনকে ডাক দেওয়া, সেই ফাংশন ‘জি হুজুর’ ‘ জি হুজুর’ করতে করতে হাজির হবে। এইসব কান চাপাচাপির জন্য ajax’ই মূল বস।
সিএসএস ফন্ট (CSS Font):
ফন্ট কি সেটা কম বেশি আমরা সবাই জানি, একটি এইচটিএমএল ওয়েব পেজে আমরা যা কিছু লিখি তার সবই হচ্ছে টেক্সট। কিন্তু শুধু টেক্সট দিয়ে কোন কিছু লিখলে ওয়েব পেজের সুন্দরতা প্রকাশ পায় না। তাই সিএসএস ফন্ট প্রোপার্টির মাধ্যমে টেক্সটের জন্য ফন্ট ফ্যামিলি, টেক্সটের গাঢ়ত্ব, টেক্সটের সাইজ এবং স্টাইল ইত্যাদী নির্ধারণ করা হয়।
আমরা যারা ওয়েব ডিজাইন নিয়ে কাজ করি তারা সবাই কম বেশি ওয়েব ফন্ট সম্মন্ধে জানি। এবং এটাও জানি যে, ওয়েব ডিজাইনের জন্য ফন্ট কতটা গুরুত্বপূর্ণ। ফন্ট অনেক রকম হয়ে থাকে। কিছু ফন্ট আছে যে গুলি সিএসএস সরাসরি সাপোর্ট করে। শুধু ফন্ট ফ্যামিলি উল্লেখ করলে সেই ফন্টটি ওয়েব পেজে প্রদর্শিত হবে। কিছু ফন্ট আছে যেগুলি আমরা আমাদের সার্ভারে ডাউনলোড করে লিংক সংযোগের মাধ্যমে ব্যবহার করতে পারি। আর কিছু ফন্ট এমন আছে যেগুলি আমরা আমাদের ওয়েবসাইটে ব্যবহার করতে হলে তাদের দেওয়া নির্ধারিত URL আমাদের ডকুমেন্টে সংযোগ করতে হবে। এ কারণে নেট সংযোগ থাকাটা আবশ্যক।
ফন্টের জন্য বর্তমান সময়ে সবচেয়ে জনপ্রিয় ওয়েবসাইট হচ্ছে Google Fonts. কারণ এখানে বিভিন্ন ডিজাইনে হাজার হাজার ইংরেজী ফন্ট রয়েছে। এই সাইটে বেশ কিছু ফন্ট আছে যেগুলি ১০০% ফ্রী। এবং কিছু ফন্ট এমন আছে যা ক্রয় করতে হয়। আমাদের বাংলা ভাষায় বাংলা ফন্টের জন্য কিছু ওয়েবসাইট আছে, যেখান থেকে একসাথে অনেক গুলো ফন্ট ডাউনলোড করে ব্যবহার করতে পারবেন। অথবা, তাদের দেওয়া লিংক সংযোগের মাধ্যমে ব্যবহার করা যাবে। তবে, সব কিছুর ভিন্ন ভিন্ন নিয়ম রয়েছে।
সিএসএস ফন্ট ফ্যামিলি (CSS Font Family):
font-family বলতে টেক্সট সমূহে কি ধরণের ফন্ট ব্যবহার করা হবে, তা নির্দেশ করার জন্য যে সকল ফন্ট ব্যবহার করা হয় সে গুলোকে ফন্ট ফ্যামিলি বুঝানো হয়। ফন্ট ফ্যামিলি অনেক রকম হয়ে থাকে। কিছু কিছু ফন্ট ফ্যামিলি সরাসরি সিএসএস সাপোর্ট করে, যেগুলোকে আমরা সিএসএস ফন্ট বলে থাকি। আর কিছু ফন্ট এমন আছে যেগুলো আমাদের'কে লিঙ্ক সংযোগ বা ডাউনলোড করে ব্যবহার করতে হয়, যেমন Google Font ইত্যাদি।
সেরা দশটি ফন্টের মধ্যে রয়েছেঃ
Arial
Times New Roman
Verdana
Palatino
Trebuchet MS
Comic Sans MS
Tahoma
Courier New
Lucida Sans Unicode
Georgia