آکادمی کدنویسان با هدف برگزاری آموزش های آنلاین راه اندازی شد. با ثبت نام در دوره های پیش رو، تابستان پرباری داشته باشید

جلسه پنجم- ساخت کارت ها برای نمایش پست ها در متریالایز

طراحی واکنش گرا با متریالایز
در materialize کلاس های متنوعی برای ساخت کادرهای گوناگون و زیبا وجود دارد . این کلاس ها این امکان را به شما می دهد تا به وسیله آن براحتی کادرهای زیبا ایجاد کنید. در زیر جدولی از این کلاس ها به همراه توضیحات آن ها آورده شده است.
ردیفنام کلاس  توضیحات
card عنصر  div که قرار است کادر را ایجاد کند را نشان می دهد.
card-content Identifies div as a card content container and is required on “inner” div.
card-title برای نشاندادن div داخلی یک کادر مورد نیاز است. و محتوای کادر داخل این کلاس قرار می گیرد.
card-action این کلاس داخلی کلاس card قرار می گیرد و محتوای کادر مانند متن ها، دکمه ها، لینک ها و غیره داخل div این کلاس قرار می گیرند.
card-image هنگام به کاربرد تصویر داخل کادر از این کلاس استفاده می کنیم. این کلاس نیز داخل کلاس card قرار می گیرد.
card-reveal نشان دهنده یک div که شامل محتوای متنی می باشد.
activator نشان دهنده یک div شامل متن و تصویر می باشد . این کلاس برای نمایش توضیحات تصویر به کار می رود.
card-panel نشان دهنده یک کادر ساده همراه با سایه و padding
card-small نشان دهنده یک کادر کوچک با ارتفاع ۳۰۰ پیکسل
card-medium نشان دهنده یک کادر متوسط با ارتفاع ۴۰۰ پیکسل
card-large نشان دهنده یک کادر بزرگ با ارتفاع ۵۰۰ پیکسل

در مثال زیر نحوه استفاده از کلاس های فوق نمایش داده شده است .

<!DOCTYPE html>
<html>
<head>
<title>The Materialize Cards Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
</head>
<body class="container"> 
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey lighten-4">
<div class="card-content">
<span class="card-title"><h3>Learn HTML5</h3></span>
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
</div>
<div class="card-action">
<button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>
<a class="right blue-grey-text" href="http://www.tutorialspoint.com">www.tutorialspoint.com</a>
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card blue-grey lighten-4">
<div class="card-image">
<img src="html5-mini-logo.jpg"> 
</div>
<div class="card-content"> 
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
</div>
<div class="card-action">
<button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>
<a class="right blue-grey-text" href="http://www.tutorialspoint.com">www.tutorialspoint.com</a>
</div>
</div>
</div>
</div> 
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey lighten-4">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="html5-mini-logo.jpg"> 
</div>
<div class="card-content activator"> 
<p>Click the image to reveal more information.</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">HTML5<i class="material-icons right">close</i></span>
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
</div>
<div class="card-action">
<button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>
<a class="right blue-grey-text" href="http://www.tutorialspoint.com">www.tutorialspoint.com</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m3">
<div class="card-panel teal">
<span class="white-text">Simple Card</span>
</div>
</div>
<div class="col s12 m3">
<div class="card small teal">
<span class="white-text">Small Card</span>
</div>
</div>
<div class="col s12 m3">
<div class="card medium teal">
<span class="white-text">Medium Card</span>
</div>
</div>
<div class="col s12 m3">
<div class="card large teal">
<span class="white-text">Large Card</span>
</div>
</div>
</div> 
</body> 
</html>

 
 خروجی بصورت زیر خواهد بود

برچسب ها

, , , , , ,

محصولات پیشنهادی


نظرات کاربران


نظرات برای آموزش چارچوب متریالایز | بدون نظر »

کاربر عزیز، لطفاً دیدگاه ارزشمند خود را از طریق فرم زیر برای ما ارسال کنید:

درباره کدنویسان
آکادمی کدنویسان جهت کمک به دانشجویان رشته های کامپیوتر و فناوری اطلاعات و همه علاقمندان به طراحی و برنامه نویسی برای ویندوز، وب و موبایل ایجاد شده است.
بیشتر آموزش های سایت کدنویسان، بصورت رایگان ارائه شده است و بعضی بسته های آموزشی تصویری و نیز نرم افزارهای پیاده سازی شده در ازای پرداخت، قابل دانلود هستند.
هر گونه نظر، انتقاد یا پیشنهادی در مورد مطالب یا عملکرد کدنویسان دارید، حتما با ما در میان بگذارید.
نمادهای اعتماد ما


تماس با ما
  • شماره همراه : ۰۹۱۵۱۶۰۴۰۶۸
  • آی دی تلگرام : @mmoha94
  • پست الکترونیکی : mohammadi.sm@gmail.com
  • آدرس پستی : بیرجند، خیابان پیروزی، پیروزی ۹، پلاک ۲۸
کلیه حقوق متعلق به سایت کدنویسان است، انتشار و کپی برداری از مطالب این سایت غیرمجاز بوده و پیگرد قانونی دارد.