TIP : แนะนำการใช้งาน Materialize css เบื้องต้น
โพสต์แล้ว: 30/11/2015 5:54 pm
Materialize เป็นอีกตัวนี้ซึ่งมีความนิยมไม่แพ้ Booststap
แต่ละตัวก็จะมีการใช้งานที่แตกต่างกันไปแต่ที่เหมือนกันก็คือ framework ทั้งคู่ออกแบบมาเพื่อรองรับบนโทรศัพท์ แท็บเล็ต และ หน้าจอคอมได้เช่นเดี่ยวกัน
ถ้าใครนึกภาพไม่ออก ให้นึกถึง โทรศัพท์จำพวก Iphone หรือ window8 ซึ่งการออกแบบลักษณะนี้ เรียกว่า Material design
ซึ่งการออกแบบ Material design จะเน้นไปที่เรื่องความเรียบง่าย มีสีสัน มองแล้ว สะดุดตา
1. วิธีการติดตั้ง ตอนนี้อยู่ใน v. alpha release v0.97.3
สามารถเข้าไปโหลดได้ที่ http://materializecss.com/getting-started.html
ในไฟล์ที่ โหลดมาก็จะประกอบไปด้วย materialize.css, materialize.js, font roboto
2. ตัวอย่างวิธีการติดตั้ง ก็เหมือนกับ Booststap ทั่วไป
ภาพตัวอย่างจะเห็นว่ามีfolder ที่ชื่อ css, js, font
3.ตัวอย่าง วิธีการออกแบบหน้า Index
ภาพตัวอย่างการสร้างหน้า ด้วย Materialize
ความพิเศษของ Materialize คือมีข้อมูลสีให้เลือกและยังสามารถนำโค๊ดสี ไปวางใน class ได้ด้วยซึ่งสะดวกมากกว่ามาเขียนใน style
ท่านสามารถศึกษาเพิ่มเติมได้ที่
http://materializecss.com/color.html
https://www.mindphp.com/%E0%B8%9A%E0%B8% ... 9-css.html
แต่ละตัวก็จะมีการใช้งานที่แตกต่างกันไปแต่ที่เหมือนกันก็คือ framework ทั้งคู่ออกแบบมาเพื่อรองรับบนโทรศัพท์ แท็บเล็ต และ หน้าจอคอมได้เช่นเดี่ยวกัน
ถ้าใครนึกภาพไม่ออก ให้นึกถึง โทรศัพท์จำพวก Iphone หรือ window8 ซึ่งการออกแบบลักษณะนี้ เรียกว่า Material design
ซึ่งการออกแบบ Material design จะเน้นไปที่เรื่องความเรียบง่าย มีสีสัน มองแล้ว สะดุดตา
1. วิธีการติดตั้ง ตอนนี้อยู่ใน v. alpha release v0.97.3
สามารถเข้าไปโหลดได้ที่ http://materializecss.com/getting-started.html
ในไฟล์ที่ โหลดมาก็จะประกอบไปด้วย materialize.css, materialize.js, font roboto
2. ตัวอย่างวิธีการติดตั้ง ก็เหมือนกับ Booststap ทั่วไป
โค้ด: เลือกทั้งหมด
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<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>
3.ตัวอย่าง วิธีการออกแบบหน้า Index
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Materialize Css</title>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<style>
#content{
height: auto;
}
#content1{
height: auto;
}
</style>
<body>
<div class="container-fluid">
<nav>
<div class="nav-wrapper purple lighten-2 z-depth-1">
<a href="#!" class="brand-logo">Materialize</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid " id='content' style='margin-bottom: 1%;padding: 1%;'>
<div class="row">
</div>
<div class="row">
<div class="col s6 ">
<table class='responsive-table light'>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Petr Cech</td>
<td>GOALKEEPERS</td>
<td>19</td>
</tr>
<tr>
<td>David Ospina</td>
<td>GOALKEEPERS</td>
<td>20</td>
</tr>
<tr>
<td>Hector Bellerin</td>
<td>DEFENDERS</td>
<td>20</td>
</tr>
<tr>
<td>Aaron Ramsey</td>
<td>MIDFIELDERS</td>
<td>19</td>
</tr>
<tr>
<td>Theo Walcott</td>
<td>FORWARDS</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
<div class="col s6">
<table class='responsive-table light bordered'>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arsene wenger</td>
<td>Manager</td>
<td>39</td>
</tr>
<tr>
<td>José Mourinho</td>
<td>Manager</td>
<td>35</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container-fluid purple lighten-5" style='margin-top:-1.3%'>
<div class="row">
<div class="cols 12">
<div class="col s4 ">
<h5 class='float-left'>Job description</h5>
<p class="light">Responsible for system development with PHP languages</p>
</div>
<div class="col s4 ">
<h5 class='float-left'>Qualification</h5>
<p class="light">- Male or Female,Age not over 35 year.</p>
<p class="light">- Bachelor's Degree Computer Science or related fields.</p>
</div>
<div class="col s4 ">
<h5 class='float-left'>Contact Us</h5>
<p class="light"> M.D.Soft Co.,Ltd.</p>
<p class="light"> 999/95 Soi. Paholtothin 34, Chatuchak, Bangkok, 10900 </p>
<p class="light"> Tel : 02-941-7455, 08-1619-8579 </p>
<p class="light"> E-mail : [email protected], [email protected] </p>
</div>
</div>
</div>
</div>
<div class="container-fluid" style='margin-top:-1.3%'>
<div class="col s12">
<footer class="page-footer red lighten-2 z-depth-3" >
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4"> [email protected], [email protected]</p>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">Tel : 02-941-7455, 08-1619-8579</a>
</div>
</div>
</footer>
</div>
</div>
<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>
ความพิเศษของ Materialize คือมีข้อมูลสีให้เลือกและยังสามารถนำโค๊ดสี ไปวางใน class ได้ด้วยซึ่งสะดวกมากกว่ามาเขียนใน style
ท่านสามารถศึกษาเพิ่มเติมได้ที่
http://materializecss.com/color.html
https://www.mindphp.com/%E0%B8%9A%E0%B8% ... 9-css.html