Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="mui组件通用CSS类">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://rawgit.com/dcloudio/mui/master/dist/css/mui.min.css">
</head>
<body>
  <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">mui组件通用CSS类</h1>
  </header>
  <div class="mui-content mui-content-padded">
    <h4>color(颜色)：</h4>
    <div class="mui-content-padded">
      <span class="mui-badge">1</span>
      <span class="mui-badge mui-badge-primary">2</span>
      <span class="mui-badge mui-badge-success">3</span>
      <span class="mui-badge mui-badge-warning">4</span>
      <span class="mui-badge mui-badge-danger">5</span>
      <span class="mui-badge mui-badge-royal">6</span>
    </div>
​
    <div class="mui-content-padded">
      <button type="button" class="mui-btn">默认</button>
      <button type="button" class="mui-btn mui-btn-primary">蓝色</button>
      <button type="button" class="mui-btn mui-btn-success">绿色</button>
      <button type="button" class="mui-btn mui-btn-warning">黄色</button>
      <button type="button" class="mui-btn mui-btn-danger">红色</button>
      <button type="button" class="mui-btn mui-btn-royal">紫色</button>
    </div>
​
    <div class="mui-content-padded">
      <div class="mui-switch mui-active">
        <div class="mui-switch-handle"></div>
      </div>
      <div class="mui-switch mui-switch-blue mui-active">
        <div class="mui-switch-handle"></div>
      </div>
    </div>
​
    <div class="mui-content-padded">
      <div class="mui-bg-primary">我是蓝色背景</div>
      <div class="mui-bg-positive">我是绿色背景</div>
      <div class="mui-bg-negative">我是红色背景</div>
    </div>
​
    <h4>文字(font)：</h4>
    <div class="mui-content-padded">
      <div class="mui-text-left">我在左边</div>
      <div class="mui-text-center">我在中间</div>
      <div class="mui-text-right">我在右边</div>
    </div>
​
    <div class="mui-content-padded">
      <p class="mui-ellipsis">我在一行内，当我超出了会显示省略号。我在一行内，当我超出了会显示省略号。我在一行内，当我超出了会显示省略号。我在一行内，当我超出了会显示省略号。</p>
      <p class="mui-ellipsis-2">我在两行内，当我超出了会显示省略号。我在两行内，当我超出了会显示省略号。我在两行内，当我超出了会显示省略号。我在两行内，当我超出了会显示省略号。我在两行内，当我超出了会显示省略号。</p>
      <p class="mui-ellipsis-2" style="-webkit-line-clamp:3">我在三行内，当我超出了会显示省略号。我在三行内，当我超出了会显示省略号。我在三行内，当我超出了会显示省略号。我在三行内，当我超出了会显示省略号。我在三行内，当我超出了会显示省略号。我在三行内，当我超出了会显示省略号。</p>
    </div>
​
    <h4>布局(layout)：</h4>
​
    <div class="mui-content-padded">
      <div class="mui-inline">我是A</div>
      <div class="mui-inline">我是B</div>
      <div class="mui-inline">我是C</div>
    </div>
​
    <div class="mui-clearfix">
      <div class="mui-pull-left">我在左边</div>
      <div class="mui-pull-right">我在右边</div>
    </div>
​
    <div class="mui-table">
      <div class="mui-table-cell mui-text-center">
          我是A
      </div>
      <div class="mui-table-cell mui-text-center">
          我是B
      </div>
      <div class="mui-table-cell mui-text-center">
          我是C
      </div>
    </div>
​
    <ul class="mui-list-unstyled">
      <li>我是第1条</li>
      <li>我是第2条</li>
      <li>我是第3条</li>
    </ul>
​
    <ul class="mui-list-inline">
      <li>我是第1条</li>
      <li>我是第2条</li>
      <li>我是第3条</li>
    </ul>
​
    <div class="mui-input-row mui-plus-visible">
      <label>mui-plus-visible</label>
      <input type="text" class="mui-input-speech mui-input-clear" placeholder="我在web环境下隐藏5+环境下显示">
    </div>
    <div class="mui-input-row mui-plus-hidden">
      <label>mui-plus-hidden</label>
      <input type="text" class="mui-input-clear" placeholder="我在web环境下显示5+环境下隐藏">
    </div>
​
    <div class="mui-row">
      <div class="mui-col-xs-4 mui-col-sm-3">
          .mui-col-sm-3
      </div>
      <div class="mui-col-xs-8 mui-col-sm-9">
          .mui-col-sm-9
      </div>
    </div>
​
  </div>
  <script src="https://rawgit.com/dcloudio/mui/master/dist/js/mui.min.js"></script>
</body>
</html>
 
.mui-row{
  height: 50px;
  line-height: 50px;
  text-align: center; 
}
.mui-col-sm-3{
  border: 1px solid #aaa;
}
.mui-col-sm-9{
  border: 1px solid #aaa;
}
 
setTimeout(function(){
    document.getElementById("loading").classList.add('mui-hidden');
},3000)
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
zhaomenghuanpro
0viewers