Materialize快速入门教程
https://github.com/Dogfalo/materialize
1,下载
http://materializecss.cn/bin/materialize-v0.97.8.zip
<!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
一般将javascript文件放在页面body标签的末端以减少页面的加载时间。
必须在materialize.js之前引入jQuery
在线演示示例
http://site.elesos.com/demo-web/starter-template/
颜色
每一种颜色的定义有一个基本的颜色类和一个可选的减轻或变暗的类。
背景颜色:
只需要增加颜色的名称和颜色深浅度到元素的class属性中。
<div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
颜色值参考Color Palette:
https://materializecss.com/color.html
网格:
用container类来包含我们的body内容,可以使你的页面内容居中。
s1 表示 small-1,他的意思是 "小屏幕中的一列"。
s = small, m = medium, l = large
布局
如果有三个等宽度的div,我们定义每个div的宽度是4列,4+4+4 = 12,加起来刚好是12。
导航布局
对齐
动态阴影 <div class="card-panel hoverable"> Hoverable Card Panel</div>
更多参加示例页面:
http://site.elesos.com/demo-web/starter-template/test.html
Materialize快速入门教程的更多相关文章
- 专为设计师而写的GitHub快速入门教程
专为设计师而写的GitHub快速入门教程 来源: 伯乐在线 作者:Kevin Li 原文出处: Kevin Li 在互联网行业工作的想必都多多少少听说过GitHub的大名,除了是最大的开源项目 ...
- EntityFramework6 快速入门教程
EntityFramework6 快速入门教程 不得不说EF在国内实在是太小众,相关的技术文章真实屈指可数,而且很多文章都很旧了,里面使用的版本跟如今的EF6差别还是比较大.我刚开始弄这个的时候真是绕 ...
- Apple Watch开发快速入门教程
Apple Watch开发快速入门教程 试读下载地址:http://pan.baidu.com/s/1eQ8JdR0 介绍:苹果为Watch提供全新的开发框架WatchKit.本教程是国内第一本A ...
- 指示灯组与3个复位按钮的介绍Arduino Yun快速入门教程
指示灯组与3个复位按钮的介绍Arduino Yun快速入门教程 1.4.2 指示灯组 指示灯组的放大图如图1.5所示. 图1.5 指示灯组 各个指示灯对应的功能如下: q RX:对应于0号端口, ...
- 游戏控制杆OUYA游戏开发快速入门教程
游戏控制杆OUYA游戏开发快速入门教程 1.2.2 游戏控制杆 游戏控制杆各个角度的视图,如图1-4所示,它的硬件规格是本文选自OUYA游戏开发快速入门教程大学霸: 图1-4 游戏控制杆各个角度的 ...
- Query 快速入门教程
Query 快速入门教程 http://www.365mini.com/page/jquery-quickstart.htm#what_is_jquery jquery常用方法及使用示例汇总 http ...
- Realm for Android快速入门教程
介绍 如果你关注安卓开发的最新趋势,你可能已经听说过Realm.Realm是一个可以替代SQLite以及ORMlibraries的轻量级数据库. 相比SQLite,Realm更快并且具有很多现代数据库 ...
- CMake快速入门教程-实战
http://www.ibm.com/developerworks/cn/linux/l-cn-cmake/ http://blog.csdn.net/dbzhang800/article/detai ...
- .NET Core 快速入门教程
.NET Core 快速学习.入门系列教程.这个入门系列教程主要跟大家聊聊.NET Core的前世今生,以及Windows.Linux(CentOS.Ubuntu)基础开发环境的搭建.第一个.NET ...
随机推荐
- ELK收集mysql_slow.log
关于慢查询的收集及处理也耗费了我们太多的时间和精力,如何在这一块也能提升效率呢?且看本文讲解如何利用ELK做慢日志收集. ELK 介绍 ELK 最早是 Elasticsearch(以下简称ES).Lo ...
- jumpserver 3.2修改排序规则
在默认的情况下,我们使用jumpserver的时候 这里我使用xshell 客户端连接到堡垒机的时候, 这里我的显示规则是根据IP排序的,但是我这里的服务器的hostname 都是根据场景设置的hos ...
- 负载均衡层次结构:LVS Nginx DNS CDN
文章地址:http://blog.csdn.net/mindfloating/article/details/51020767 作为后端应用的开发者,我们经常开发.调试.测试完我们的应用并发布到生产环 ...
- Android开发之API应用指南
原文:http://android.eoe.cn/topic/android_sdk 编辑流程 这里主要是和Android技术相关的开发指南,很多都是来源于官方的API Guides( http:// ...
- 通过maven中properties标签定义spring版本号
一 发现问题 在pom.xml中添加依赖时语法如下 <dependency> <groupId>org.springframework</groupId> &l ...
- 【Unity】3.2 利用预设(Prefab)制作可复用的组件
分类:Unity.C#.VS2015 创建日期:2016-04-02 一.简介 预制体(Prefab,也叫预设)是"存储在工程视图(Project View)中"的一种特殊的资源, ...
- sqlite第三方类库:FMDB使用
转自:http://www.cnblogs.com/wuhenke/archive/2012/02/07/2341656.html 本文转自一位台湾ios开发者的blog,由于blog地址被墙掉,转发 ...
- 菜鸟学Java(十)——分页查询
今天继续跟大家说说一些非常基础的东西,这次我们说说分页查询.说到分页,可能很多人都听说过什么真分页.假分页的.简单解释一下,拿第二页,每页20条为例:真分:数据库里取 的就是21-40条:假分:数据库 ...
- Checkbox: ListView 与CheckBox 触发事件冲突的问题
我相信很多人都遇到过 ListView 中放入checkBox ,会导致ListView的OnItemClickListener无效,这是怎么回事呢? 这是因为checkBox 的点击事件的优先级比L ...
- numRecordsIn 在哪里实现?
/* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreem ...