హ్టీఎంఎల్ రెస్పాన్సివ్ వెబ్ డిజైన్

రెస్పాన్సివ్ వెబ్ డిజైన్ ఏమిటి?

  • 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>
ప్రపంచంలోని అత్యంత జనావాసం కలిగిన మెట్రోపాలిటన్ ప్రాంతం.
</div>
</body>
</html>

స్వయంగా ప్రయత్నించండి

బ్రౌసర్లు సహాయపడుతుంది బ్రౌసర్లు ఉపయోగించడం.

రెస్పాన్సివ్ డిజైన్ సృష్టించడానికి మరొక పద్ధతి, ప్రసిద్ధమైన CSS ఫ్రేమ్వర్క్ ఉపయోగించడం.

Bootstrap అత్యంత ప్రసిద్ధమైన రెస్పాన్సివ్ వెబ్ డెవలప్మెంట్ కోసం ఉపయోగించే HTML, CSS, మరియు JS ఫ్రేమ్వర్క్.

Bootstrap మీరు ఎలాంటి పరిమాణంలో ఉండే అందమైన సైట్లను అభివృద్ధి చేయడానికి సహాయపడుతుంది: స్క్రీన్, లాప్టాప్, టాబ్లెట్ లేదా మొబైల్ ఫోన్:

!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>
    ప్రపంచంలోని అత్యంత జనావాసం కలిగిన మెట్రోపాలిటన్ ప్రాంతం.
  </div>
</div>
</div>
</body>
</html>

స్వయంగా ప్రయత్నించండి

Bootstrap గురించి మరింత తెలుసుకోవడానికి మా పాఠ్యాన్ని చదవండి Bootstrap శిక్షణాలు.