एचटीएमएल रिस्पोन्सिव वेब डिजाइन
- पिछला पृष्ठ एचटीएमएल लेआउट
- अगला पृष्ठ एचटीएमएल कंप्यूटर कोड
रिस्पांसिव वेब डिजाइन क्या है?
- RWD यानी रिस्पांसिव वेब डिजाइन (Responsive Web Design)
- RWD वेबपेज को बदली हुई आकार में पहुँचाता है
- RWD प्लेटफॉर्म और मोबाइल डिवाइस के लिए आवश्यक है
अपनी रिस्पांसिव डिजाइन बनाएं
रिस्पांसिव डिजाइन बनाने का एक तरीका है उसे खुद बनाना:
!DOCTYPE html
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>CodeW3C.com डेमो</h1>
<h2>इस रिस्पांसिव पृष्ठ को रीजाइज़ करें!</h2>
<br>
<div class="city">
<h2>लंदन</h2>
<p>लंदन इंग्लैंड की राजधानी शहर है。</p>
<p>यह यूनाइटेड किंगडम का सबसे अधिक जनसंख्या वाला शहर है,</p>
<p>जिसका महानगर क्षेत्र 13 मिलियन से अधिक निवासी हैं。</p>
</div>
<div class="city">
<h2>पेरिस</h2>
<p>पेरिस फ्रांस की राजधानी और सबसे अधिक जनसंख्या वाला शहर है。</p>
</div>
<div class="city">
<h2>टोक्यो</h2>
<p>टोक्यो जापान की राजधानी है, बड़े टोक्यो क्षेत्र का केंद्र,</p>
और दुनिया का सबसे अधिक जनसंख्या वाला महानगर क्षेत्र。</p>
</div>
</body>
</html>
बूटस्ट्रैप का उपयोग करें
रिस्पांसिव डिजाइन बनाने का एक और तरीका है तैयार सीएसएस फ्रेमवर्क का उपयोग करना।
बूटस्ट्रैप सबसे लोकप्रिय रिस्पांसिव वेब डेवलपमेंट के लिए HTML, CSS और JS फ्रेमवर्क है।
बूटस्ट्रैप आपको किसी भी आकार में आकर्षक साइट डेवलप करने में मदद करता है: स्क्रीन, कम्प्यूटर, टैबलेट या मोबाइल फोन:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>CodeW3C.com डेमो</h1>
<p>यह एक प्रतिसादी पृष्ठ को यथास्थिति में फिर से आकार बदलें!</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>लंदन</h2>
<p>लंदन इंग्लैंड की राजधानी शहर है。</p>
<p>यह यूनाइटेड किंगडम का सबसे अधिक जनसंख्या वाला शहर है,</p>
<p>जिसका महानगर क्षेत्र 13 मिलियन से अधिक निवासी हैं。</p>
</div>
<div class="col-md-4">
<h2>पेरिस</h2>
<p>पेरिस फ्रांस की राजधानी और सबसे अधिक जनसंख्या वाला शहर है。</p>
</div>
<div class="col-md-4">
<h2>टोक्यो</h2>
<p>टोक्यो जापान की राजधानी है, बड़े टोक्यो क्षेत्र का केंद्र,</p>
और दुनिया का सबसे अधिक जनसंख्या वाला महानगर क्षेत्र。</p>
</div>
</div>
</div>
</body>
</html>
Bootstrap के बारे में अधिक जानने के लिए हमारे Bootstrap शिक्षण。
- पिछला पृष्ठ एचटीएमएल लेआउट
- अगला पृष्ठ एचटीएमएल कंप्यूटर कोड
