سبد (0)

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

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

در این فصل ما یک وب سایت واکنشگرا 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> شروع کنید.
  • استفاده از کلاس های از پیش تعریف شده مانند  w3-third به سرعت ستونهای شبکه را می سازد.
  •  محتوای متن خود را در داخل ستون های  شبکه قرار دهید.

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

مثال

<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";
}
خودتان امتحان کنيد »
نوشته شده توسط زهرا داوودی
بازدید: 4458

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه