সিএসএস ফ্রেমওয়ার্ক - Css Framework



রেস্পন্সিভ ওয়েবসাইট ডিজাইন করার জন্য ফ্রেমওয়ার্কের ব্যবহার করাই বুদ্ধিমানের কাজ। বর্তমানে অনেক ধরনের সিএসএস ফ্রেমওয়ার্ক রয়েছে। এগুলো বিনামূল্যেই পাওয়া যায় এবং এর ব্যবহারও অনেক সহজ।


Bootstrap ব্যবহার

জনপ্রিয় একটি ফ্রেমওয়ার্ক হল বুটস্ট্র্যাপ, এটি এইচটিএমএল, সিএসএস এবং jQuery ব্যবহার করে রেসপন্সিভ ওয়েব পেজ তৈরি করে।
বুটস্ট্র্যাপ ফ্রি ডাউনলোড করতে নিচের লিংক ব্রাউজ করুন।

বুটস্ট্র্যাপ ডাউনলোড লিংক


উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
</div>
<div class="row">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
</div>
</body>
</html>




W3.CSS ব্যবহার

রেস্পন্সিভ ওয়েবসাইট ডিজাইন তৈরি করার অন্য একটি জনপ্রিয় ও সহজ উপায় হলো একটি রেস্পন্সিভ স্টাইল শীট ব্যবহার করা, যেমন W3.CSS.
W3.CSS ডাউনলোড করতে নিচের লিংক ব্রাউজ করুন।

W3.CSS ডাউনলোড লিংক


উদাহরণ

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container w3-green">
<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</div>
</div>
</body>
</html>









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.