ভূমিকা ঃ যারা ওয়েবডিজাইন এ কাজ করে থাকেন তাদের জন্য সব থেকে যেটা বেশি গুরুত্বপূর্ণ বিষয় থাকে সেটা হল ১টা ওয়েবসাইটকে পরিপূর্ণ responsive করে তোলা । বিশেষ করে যারা frelancing করেন বা করতে চান তাদের জন্য এটা সব থেকে বেশি গুরুত্বপূর্ণ একটা বিষয় । কারণ যারা frelancing করে থাকেন তারা নিশ্চয়ই বলতে পারবেন যে marketplace এ যে সমস্ত বায়ার থাকেন তাদের এক নাম্বারে requirement থাকে ওয়েবসাইট responsive হতে হবে । অর্থাৎ তার ওয়েবসাইট যেন scroll কড়া ছারাই সব device এ সুন্দর ভাবে দেখা যায়। যারা responsive ওয়েবসাইট করতে চান তাদের জন্যই রয়েছে কিছু টিপস ।
১। responsive ওয়েবসাইট ডিজাইন করার জন্য আপনার প্রথম প্রয়োজন হবে responsive এর যে কোন একটা framework ডাউনলোড কড়া । সে ক্ষেত্রে আপনি bootstrap ডাউনলোড করে responsive ওয়েবসাইট ডিজাইন করতে পারেন । responsive ওয়েবসাইট ডিজাইন এর জন্য bootstrap অনেক বেশি popular ।
bootstrap download link : http://getbootstrap.com/
২ । bootstrap ডাউনলোড করার পর এটার css, fonts & js ফাইলগুলোকে আপনার html file এ রাখতে হবে এবং এটা link করে দিতে হবে । আপনার html file কিভাবে সাজাবেন তার জন্য নিচে একটি demo দেওয়া হল ।
bootstrap/
├── css/
│ ├── bootstrap.min.css
├── js/
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
৩। bootstrap থেকে css & js file ঠিক ভাবে রাখার পর css folder এ অবশ্যই আমরা আলাদা একটা css file নিব (style.css, main.css ) । bootstrap এর class গুলকে ব্যাবহার করে যেখানে আমরা আমাদের মত করে stylesheet করব ।
৪। bootstrap এর js file কে কাজ করানোর জন্য এবং jquery এর কোন plugins ব্যাবহার করতে চাইলে সে জন্য jquery এর main file কে অবশ্যই link রাখতে হবে। এ ক্ষেত্রে লক্ষণীয় যে আমরা সবসময় update file নিয়ে কাজ করার চেষ্টা করব। নিচে jquery এর download লিঙ্ক দেওয়া হল ।
jquery download link : http://jquery.com/
যে ভাবে link করবেন –
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>bootstrap-1</title>
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
<script src=”js/jquery-3.1.0.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>