ساخت صفحه واکنشگرا قدم به قدم

چاپ

ساخت یک وب سایت واکنشگرا از ابتدا

در این فصل ما یک وب سایت واکنشگرا W3.CSS  را از ابتدا می سازیم.

در ابتدا، با یک صفحه HTML ساده ،  یک viewport و یک لینک به W3.CSSشروع می کنیم.

مثال

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

<body>
  <h1>My first W3.CSS website!</h1>
  <p>This site will grow as we add more ...</p>
  <p>This is another paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</body>

</html>
خودتان امتحان کنيد »

 قرار دادن عناصر درContainer ها 

برای اضافه کردن حاشیه ها و paddingمشترک ، عناصر HTML را در داخل container قرار میدهیم.
(<div class="w3-container">)

 سرصفحه را از بقیه مطالب، با استفاده از دو عنصر<div> جداگانه،جدا میکنیم:

مثال

<div class="w3-container">
  <h1>My First W3.CSS Website!</h1>
  <p>This site will grow as we add more ...</p>
</div>

<div class="w3-container">
  <p>This is another paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>
خودتان امتحان کنيد »

 کلاس های رنگ

کلاس های رنگ ،رنگ عناصر را تعریف میکنند.

در این مثال  یک رنگ به اولین عنصر<div>می افزاید:

مثال

<div class="w3-container w3-light-grey">
  <h1>My First W3.CSS Website!</h1>
  <p>This site will grow as we add more ...</p>
</div>

<div class="w3-container">
  <p>This is another paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>
خودتان امتحان کنيد »

کلاس های  اندازه

کلاس های اندازه ، اندازه ی متن عناصر را تعریف میکند.

 این مثال  یک اندازه به هر دو عنصر سر صفحه می افزاید:

مثال

<div class="w3-container w3-light-grey">
  <h1 class="w3-jumbo">My First W3.CSS Website!</h1>
  <p class="w3-xxlarge">This sage will grow as we add more ...</p>
</div>

<div class="w3-container">
  <p>This is another paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>
خودتان امتحان کنيد »

استفاده از عناصر معنایی

اگرتوصیه های معنایی HTML5 را  میخواهید دنبال کنید ،لطفا  انجام دهید!

برای  W3.CSS  مهم نیست که از <div> یا <header> استفاده کنید.

مثال

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<header class="w3-container w3-light-grey">
  <h1 class="w3-jumbo">My first W3.CSS website!</h1>
  <p class="w3-xxlarge">This site will grow as we add more ...</p>
</header>

<div class="w3-container">
  <p>This is another paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>

<footer class="w3-container">
  <p>This is my footer</p>
</footer>

</body>
</html>
خودتان امتحان کنيد »

  طرح بندی چندستونه واکنشگرا

با W3.CSS به آسانی می توان  یک طرح چندستونه واکنشگرا ایجاد کرد.

این ستون ها به صورت خودکار خود را با اندازه های مختلف صفحه نمایش تنظیم می کنند.

برخی از قوانین شبکه بندی:

این مثال نشان می دهد که چگونه می توان سه ستون با عرض برابر ایجاد کرد:

مثال

<div class="w3-row-padding">
  <div class="w3-third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="w3-third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="w3-third">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>
خودتان امتحان کنيد »

این مثال نشان می دهد که چگونه می توان چهار ستون با عرض برابر ایجاد کرد:

مثال

<div class="w3-row-padding">
  <div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="w3-quarter">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
 </div>
  <div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>
خودتان امتحان کنيد »

 ستون هایی با عرض متفاوت

 این مثال یک طرح سه ستونه که در آن ستون وسط گسترده تر از ستون اول و آخر است ایجاد می کند:

مثال

 <div class="w3-row-padding">
  <div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="w3-half">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="w3-quarter">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>
خودتان امتحان کنيد »

نوار منو 

نوار منو  یک  منو سر صفحه است که در بالای صفحه ،قرار داده شده است.

مثال

<nav class="w3-topnav w3-black w3-large">
  <a href="#">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</nav>
خودتان امتحان کنيد »

منو کناری (عمودی)

با منوی عمودی شما چند گزینه دارید:

این مثال منو را در سمت چپ محتوای صفحه باز میکند:

<nav class="w3-sidenav w3-black w3-card-2" style="display:none" id="mySidenav">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
</nav>

از جاوااسکریپت برای نمایش و مخفی کردن منو استفاده میشود:

function w3_open() {
    document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
}
خودتان امتحان کنيد »