آموزش فریمورک materialize-تنظیمات مربوط به grid
[ad_1]
سلام به همه ی دوستان! در اموزش های قبلی (کلیک کنید) گفتیم چجوری میشه از فریمورک متریالایز استفاده کرد و توضیحاتی راجب سیستم grid در این فریمورک داده شد. در اینجا میخوام یک سری توضیحات تکمیلی راجب سیستم Grid داشته باشیم 
کلاس container :
این کلاس به شما اجازه میده تا محتوای خودتون رو به بخش مرکزی صفحه هدایت کنید! این کلاس به هر Tag از صفحه که اعمال بشه عرض اون تگ رو ۷۰% از صفحه در نظر میگیره و بیشترین عرض (width) رو ۹۹۲ پیکسل قرار میده! به مثال زیر دقت کنید 
برای دیدن پیش نمایش کلیک کنید)
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
.red{
background: red;
}
.blue{
background: blue;
}
.col{
height:50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col s1 red">1</div>
<div class="col s1 blue">2</div>
<div class="col s1 red">3</div>
<div class="col s1 blue">4</div>
<div class="col s1 red">5</div>
<div class="col s1 blue">6</div>
<div class="col s1 red">7</div>
<div class="col s1 blue">8</div>
<div class="col s1 red">9</div>
<div class="col s1 blue">10</div>
<div class="col s1 red">11</div>
<div class="col s1 blue">12</div>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
در مثال بالا یک row یا ردیف ایجاد کردیم. اگه دقت کنید این ردیف (row) را درون container قرار دادیم! این باعث میشه که عرض row برابر با ۷۰ درصد صفحه باشه و بیشترین سایز برای عرض ان ۹۹۲ پیکسل در نظر گرفته شود. پیش نمایش مثال بالا رو میتونید از اینجا(کلیک کنید) ببینید.
افست ها (Offsets) :
با استفاده از کلاس های offset میتونید یک ستون (تگی که دارای کلاس col باشد) رو با توجه به grid جابه جا کنید! مجموع offset ها و اندازه ی ستون ها نباید بیشتر از ۱۲ بشه چون در فریمورک متریالایز عرض صفحه به ۱۲ ستون تقسیم بندی میشه!!! برای اینکه بهتر متوجه بشید به مثال زیر دقت کنید: (پیش نمایش رو میتونید از اینجا ببینید)
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
.red{
background: red;
}
.blue{
background: blue;
}
.col{
height:50px;
}
</style>
</head>
<body>
<div class="row">
<div class="col s6 red"></div>
<div class="col s6 offset-s6 red"></div>
</div>
<div class="row">
<div class="col s1 offset-s1 blue"></div>
</div>
<div class="row">
<div class="col s1 offset-s2 blue"></div>
</div>
<div class="row">
<div class="col s1 offset-s3 blue"></div>
</div>
<div class="row">
<div class="col s1 offset-s4 blue"></div>
</div>
<div class="row">
<div class="col s1 offset-s5 blue"></div>
</div>
<div class="row">
<div class="col s1 offset-s6 blue"></div>
</div>
<div class="row">
<div class="col s1 offset-s7 blue"></div>
</div>
<div class="row">
<div class="col s1 offset-s8 blue"></div>
</div>
<div class="row">
<div class="col s1 offset-s9 blue"></div>
</div>
<div class="row">
<div class="col s1 offset-s10 blue"></div>
</div>
<div class="row">
<div class="col s1 offset-s11 blue"></div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
در دستورات بالا اومدیم از کلاس offset استفاده کردیم تا ستون ها رو به سمت چپ انتقال بدیم! پیش نمایش مثال بالا رو میتونید از اینجا(کلیک کنید) ببینید.
دقت کنید که کلاس offset دارای سایز های ۱ تا ۱۲ است و چون حالت رسپانسیو رو پوشش میده به سه قسمت تقسیم میشه :
- برای صفحه های کوچک از offset-s1 تا offset-s12
- برای صفحه های با سایز متوسط از offset-m1 تا offset-m12
- برای صفحه های با سایز بزرگ از offset-l1 تا offset-l12
در اینجا s مخفف small و m مخفف medium و L مخفف large است.
دقت کنید که در یک ردیف یا row , مجموع سایز ستون ها و offset ها نباید بیشتر از سایز Grid بشه! همونطور که گفتم سایز گرید در فریمورک متریالایز برابر با ۱۲ است بدین معنا که در این فریمورک عرض صفحه به ۱۲ ستون تقسیم میشه.
میتونید از کلاس های offset همزمان در حالت هاس s و L و M استفاده کنید تا در هر سایزی یک offset به خصوص برای ستون ها در نظر گرفته شود.
[ad_2]
لینک منبع مطلب
