Responsive Web Design - Frameworks
பதிலளிக்கும் வடிவமைப்பை வழங்கும் பல இலவச CSS கட்டமைப்புகள் உள்ளன.
Using Jassif.CSS
பதிலளிக்கும் வடிவமைப்பை உருவாக்க ஒரு சிறந்த வழி, Jassif.CSS போன்ற பதிலளிக்கும் பாணி தாளைப் பயன்படுத்துவதாகும்.
Jassif.CSS எந்த அளவிலும் அழகாகத் தோன்றும் தளங்களை உருவாக்க எளிதாக்குகிறது!
Jassif.CSS Demo
பதிலளிப்புத்தன்மையைப் பார்க்க பக்கத்தை மறுஅளவிடவும்!
Jassif Team Demo
இந்த பதிலளிக்கும் பக்கத்தை மறுஅளவிடவும்!
London
லண்டன் இங்கிலாந்தின் தலைநகரம்.
இது ஐக்கிய இராச்சியத்தில் மிக அதிக மக்கள் தொகை கொண்ட நகரம், 13 மில்லியனுக்கும் அதிகமான குடிமக்களைக் கொண்ட பெருநகரப் பகுதியுடன்.
Paris
பாரிஸ் பிரான்ஸின் தலைநகரம்.
பாரிஸ் பகுதி ஐரோப்பாவில் மிகப்பெரிய மக்கள் தொகை மையங்களில் ஒன்றாகும், 12 மில்லியனுக்கும் அதிகமான குடிமக்களைக் கொண்டுள்ளது.
Tokyo
டோக்கியோ ஜப்பானின் தலைநகரம்.
இது கிரேட்டர் டோக்கியோ பகுதியின் மையமாகும், மற்றும் உலகில் மிக அதிக மக்கள் தொகை கொண்ட பெருநகரப் பகுதியாகும்.
Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.jassifteam.com/jassifcss/4/jassif.css">
<body>
<div class="jassif-container jassif-blue">
<h1>Jassif Team Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="jassif-row-padding">
<div class="jassif-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="jassif-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="jassif-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>Jassif.CSS பற்றி மேலும் அறிய, எங்கள் Jassif.CSS டுடோரியலைப் படிக்கவும்.
Bootstrap
மற்றொரு பிரபலமான கட்டமைப்பு Bootstrap ஆகும். இது பதிலளிக்கும் வலைப்பக்கங்களை உருவாக்க HTML மற்றும் CSS ஐப் பயன்படுத்துகிறது:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>Bootstrap பற்றி மேலும் அறிய, எங்கள் Bootstrap டுடோரியலுக்குச் செல்லவும்.
கட்டமைப்புகளின் நன்மைகள்:
- வேகமான வளர்ச்சி
- ஒத்திசைவான வடிவமைப்பு
- குறுக்கு-உலாவி இணக்கத்தன்மை
- முன்-கட்டப்பட்ட கூறுகள்
- விரிவான ஆவணம்
Exercise
பயிற்சி:
பின்வரும் கூற்றுகளில் எது CSS கட்டமைப்புகளின் நன்மைகளை சரியாக விவரிக்கிறது?