TIP : แนะนำการใช้งาน Materialize css เบื้องต้น

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

M031
PHP Hero Member
PHP Hero Member
โพสต์: 156
ลงทะเบียนเมื่อ: 20/11/2015 9:05 am

TIP : แนะนำการใช้งาน Materialize css เบื้องต้น

โพสต์โดย M031 » 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 ทั่วไป

โค้ด: เลือกทั้งหมด

<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>

test1.PNG
test1.PNG (21.66 KiB) เปิดดู 582 ครั้ง

ภาพตัวอย่างจะเห็นว่ามีfolder ที่ชื่อ css, js, font

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 : m.d.PM.com, hr@mdsoft.co.th </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"> m.d.PM.com, hr@mdsoft.co.th</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>

test.png
test.png (78.48 KiB) เปิดดู 582 ครั้ง

ภาพตัวอย่างการสร้างหน้า ด้วย Materialize

ความพิเศษของ Materialize คือมีข้อมูลสีให้เลือกและยังสามารถนำโค๊ดสี ไปวางใน class ได้ด้วยซึ่งสะดวกมากกว่ามาเขียนใน style

ท่านสามารถศึกษาเพิ่มเติมได้ที่
http://materializecss.com/color.html
http://www.mindphp.com/%E0%B8%9A%E0%B8% ... 9-css.html

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน