MDL-Menu
Left Aligned Menu Below Button
_i_
Some Action
Another Action
Disabled Action
Yet Another Action
<!-- Left aligned menu below button -->
<button id="leftBelowButton" class="mdl-button mdl-js-button mdl-button--icon mdl-button--fab">
<i class="material-icons">i</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-left mdl-js-ripple-effect" for="l ...
图解 Git
基本用法图中, History 即为本地仓库(local repository), Stage(Index) 为暂存目录, 也称为索引, Working Directory 为工作目录.
git add *file* 把Current Working Directory 下的file 放入 Stage
git commit 对 Stage 生成快照并放入 local Repo
git reset -- *file* 用来将 Stage 恢复到上一次 commit 的状态(快照)
git checkout -- *file* 把文件从 Stage 复制到 Current Working Directory, 并且丢弃本地修改
可以使用 git reset -p, git checkout -p, git add -p进入交互模式.
可以跳过 Stage, 实现 Working Directory 和 Local Repo 的直接交流.
git commit -a 相当于运行 git add把Working Directory 下的文件放入 Stage 并 Commit
git co ...
MDL-Loading
Defaut Progress Bar<!-- Simple MDL Progress Bar -->
<div class="mdl-progress mdl-js-progress" id="p1"></div>
<script>
document.querySelector('#p1').addEventListener('mdl-componentupgraded', function(){
this.MaterialProgress.setProgress(44);
})
</script>
`</pre>
### Intedeterminate Progress Bar
<!-- MDL Progress Bar with Indetermina ...
MDL-List
Document
Simple List
Content 1
Content 2
Content 3
Content 4
Content 5
<!– Simple List –><ul class=”mdl-list”><li class=”mdl-list_item”><span class=”mdl-listitem-primary-content”>Content 1</span></li><li class=”mdl-list_item”><span class=”mdl-listitem-primary-content”>Content 2</span></li><li class=”mdl-list_item”><span class=”mdl-listitem-primary-content”>Content 3</span></li><li clas ...
MDL-Navigation
Transparent Navigation
.demo-layout-transparent{
background: url('https://getmdl.io/assets/demos/transparent.jpg') center/cover;
}
</style>
</head>
</body>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
...
MDL-Card
Wide Card
<style>
.demo-card-wide.mdl-card{
width:512px
}
.demo-card-wide>.mdl-card__title{
color: #fff;
height: 176px;
background: url("https://getmdl.io/assets/demos/welcome_card.jpg") center/cover;
}
</style>
</head>
<body>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
&a ...
MDL-Button
Add: class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect", **"mdl-button--fab" adds the 3D circle, "mdl-button--colored" colors the 3D circle, "mdl-js-ripple-effect" adds ripple effect ont the button**
Button: class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect", **"mdl-button--raised" adds the 3D Rectangle on the button.**
Button: class="mdl-button mdl-js-button mdl-button--raised mdl-button--color ...
MDL-Badge
Badge: class="material-icons mdl-badge mdl-badge--overlap"
Badge: class="mdl-badge", **the material-icons makes the text bigger, and mdl-badge--overlap makes badge overlap the text**
[Badge](#): Badge in the inlink
[Badge](#): Badge outside the link
[Badge](#): Badge with too many characters(12345)
[Badge](#): class="mdl-badge mdl-badge--no-background"
<!-- Number badge on icon -->
<div class="material-icons mdl-badge mdl-badge--overlap ...
侧边栏固定宽度, 主体自适应宽度的等高布局
两列布局实现方法1, 浮动布局Sidebar 设置为浮动, Content Body 的 margin 设置为 Sidebar 的宽度
HTML<div class='sidebar'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, ...
8 Material Design Web UI Framework
Origin of Material Design
Google has its own Polymer Project which embraces Material Design thourghout its Web Components. And in fact, the Polymer Project played a key role in Material Design's development and in showcase of Material Design Concept of Web.
8 Material Design Web UI Framework1. Materialize
A modern responsive front-end framework based on Material Design. It provides an option of both CSS as well as source SCSS Files, along with JavaScript, Material Design Icon and Roboto font. ...
Git Commands
git init to init a working space into a git repo
git add filename or git add . to track file or all files, and add them to stage
git commit -m "message" to commit changes to local repo
Several files can be commited together: git add file1; git add file2; git commit -m "add 2 files"
Use regx: git add "*.txt"; git commit -m "add all text"
git status to check which file has been modified
git diff filename to check details of modification in filename
git log ...
CFB HomePage(RWD)
Chinafiremag.cn is a non-responsive website and this is a prototype of RW one.
