Skip to content

A
amazeui

Miykael_xxm / amazeui

通知 1
Star 0
Fork 0
A
amazeui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 ea9821f4 编写于 作者: M Minwe
浏览文件
操作

add Non-responsive example

上级 186985ed
隐藏空白更改
内联 并排
Showing with 349 addition and 1 deletion
docs/css.md
浏览文件 @ ea9821f4
...@@ -302,3 +302,29 @@ __不要单独使用、直接在里面编写样式__！！！ ...@@ -302,3 +302,29 @@ __不要单独使用、直接在里面编写样式__！！！
/* 当然，如果你想给自己找点乐，那就随便了 */ /* 当然，如果你想给自己找点乐，那就随便了 */
``` ```
## 禁用响应式
不喜欢响应式？可以尝试禁用：
- 删除 `head` 里的视口设置 `meta` 标签；
```html
<!--<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">-->
```
- 固定容器 `.am-container` 宽度（可以自己添加一个 class，不一定要使用内置的）：
```css
.am-container {
width: 980px !important;
max-width: none;
}
```
- 使用网格系统时，只添加 `.col-sm-*` class，移除其他断点的 class。
至此，布局层的响应式被禁用了（[参考示例](/examples/non-responsive.html)）。
不过，这仅仅是个开始，一些组件的样式细节可能还需要调整，只能陪你到这了……
docs/examples/non-responsive.html 0 → 100644
浏览文件 @ ea9821f4
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Non-responsive | Amaze UI Example</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">-->
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="alternate icon" type="image/png" href="{{assets}}i/favicon.png">
<link rel="stylesheet" href="{{assets}}css/amazeui.min.css"/>
<style>
.get {
background: #1E5B94;
color: #fff;
text-align: center;
padding: 100px 0;
}
.get-title {
font-size: 200%;
border: 2px solid #fff;
padding: 20px;
display: inline-block;
}
.get-btn {
background: #fff;
}
.detail {
background: #fff;
}
.detail-h2 {
text-align: center;
font-size: 150%;
margin: 40px 0;
}
.detail-h3 {
color: #1f8dd6;
}
.detail-p {
color: #7f8c8d;
}
.detail-mb {
margin-bottom: 30px;
}
.hope {
background: #0bb59b;
padding: 50px 0;
}
.hope-img {
text-align: center;
}
.hope-hr {
border-color: #149C88;
}
.hope-title {
font-size: 140%;
}
.about {
background: #fff;
padding: 40px 0;
color: #7f8c8d;
}
.about-color {
color: #34495e;
}
.about-title {
font-size: 180%;
padding: 30px 0 50px 0;
text-align: center;
}
.footer {
background: #2d3e50;
}
.footer p {
color: #7f8c8d;
margin: 0;
padding: 15px 0;
text-align: center;
}
/* 禁用响应式*/
.am-container {
width: 980px !important;
max-width: none;
}
.get,
.hope,
.footer {
min-width: 980px;
}
.am-topbar-collapse {
clear: none;
padding: 0 10px;
}
.am-topbar-nav {
float: left;
margin: 0;
}
.am-topbar-nav > li {
display: inline-block;
margin: 0!important;
}
.am-topbar-collapse .am-dropdown.am-active .am-dropdown-content {
position: absolute;
}
.am-topbar-nav > li > a {
position: relative;
line-height: 50px;
padding: 0 10px;
}
.am-topbar-nav > li > a:after {
position: absolute;
left: 50%;
margin-left: -6px;
bottom: 0;
content: "";
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-bottom: 6px solid #f8f8f8;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-top: 0 dotted;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.am-topbar-nav > li > a:hover:after {
border-bottom-color: #666666;
}
.am-topbar-nav > li.am-dropdown > a:after {
display: none;
}
.am-topbar-nav > li.am-active > a,
.am-topbar-nav > li.am-active > a:hover,
.am-topbar-nav > li.am-active > a:focus {
border-radius: 0;
color: #0e90d2;
background: none;
}
.am-topbar-nav > li.am-active > a:after {
border-bottom-color: #0e90d2;
}
</style>
</head>
<body>
<header class="am-topbar am-topbar-fixed-top">
<div class="am-container">
<h1 class="am-topbar-brand">
<a href="#">Amaze UI</a>
</h1>
<div class="am-topbar-collapse" id="collapse-head">
<ul class="am-nav am-nav-pills am-topbar-nav">
<li class="am-active"><a href="#">首页</a></li>
<li><a href="#">项目</a></li>
<li class="am-dropdown" data-am-dropdown>
<a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
下拉菜单 <span class="am-icon-caret-down"></span>
</a>
<ul class="am-dropdown-content">
<li class="am-dropdown-header">标题</li>
<li><a href="#">1. 默认样式</a></li>
<li><a href="#">2. 基础设置</a></li>
<li><a href="#">3. 文字排版</a></li>
<li><a href="#">4. 网格系统</a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<div class="get">
<div class="am-container">
<h1 class="get-title">Amaze UI - HTML5 跨屏前端框架</h1>
<p>
期待你的参与，共同打造一个简单易用的前端框架
</p>
<p>
<a href="http://amazeui.org" class="am-btn am-btn-sm get-btn">获取新get技能√</a>
</p>
</div>
</div>
<div class="detail">
<div class="am-container">
<h2 class="detail-h2">One Web 、Any Device，期待和你一起去实现!</h2>
<div class="am-g">
<div class="col-sm-3 detail-mb">
<h3 class="detail-h3">
<i class="am-icon-mobile am-icon-sm"></i>
为移动而生
</h3>
<p class="detail-p">
Amaze UI 采用业内先进的 mobile first 理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。
</p>
</div>
<div class="col-sm-3 detail-mb">
<h3 class="detail-h3">
<i class="am-icon-cogs am-icon-sm"></i>
组件丰富，模块化
</h3>
<p class="detail-p">
Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件，更有 17 款包含近 60 个主题的 Widgets，可快速构建界面出色、体验优秀的跨屏页面，大幅度提升你的开发效率。
</p>
</div>
<div class="col-sm-3 detail-mb">
<h3 class="detail-h3">
<i class="am-icon-check-square-o am-icon-sm"></i>
本地化支持
</h3>
<p class="detail-p">
相比国外的前端框架，Amaze UI 专注解决中文排版优化问题，根据操作系统调整字体，实现最佳中文排版效果；针对国内主流浏览器及 App 内置浏览器提供更好的兼容性支持，为你节省大量兼容性调试时间。
</p>
</div>
<div class="col-sm-3 detail-mb">
<h3 class="detail-h3">
<i class="am-icon-send-o am-icon-sm"></i>
轻量级，高性能
</h3>
<p class="detail-p">
Amaze UI 非常注重性能，基于轻量的 Zepto.js 开发，并使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让你的 Web 应用可以高速载入。
</p>
</div>
</div>
</div>
</div>
<div class="hope">
<div class="am-g am-container">
<div class="col-sm-6 hope-img">
<img src="{{assets}}i/examples/landing.png" alt="" data-am-scrollspy="{animation:'slide-left', repeat: false}">
<hr class="am-article-divider am-show-sm-only hope-hr">
</div>
<div class="col-sm-6">
<h2 class="hope-title">同我们一起打造你的前端框架</h2>
<p>
在知识爆炸的年代，我们不愿成为知识的过客，拥抱开源文化，发挥社区的力量，参与到Amaze Ui开源项目能获得自我提升。
</p>
</div>
</div>
</div>
<div class="about">
<div class="am-container">
<h2 class="about-title about-color">Amaze UI 崇尚开放、自由，非常欢迎大家的参与</h2>
<div class="am-g">
<div class="col-sm-4">
<form class="am-form">
<label for="name" class="about-color">你的姓名</label>
<input id="name" type="text">
<br/>
<label for="email" class="about-color">你的邮箱</label>
<input id="email" type="email">
<br/>
<label for="message" class="about-color">你的留言</label>
<textarea id="message"></textarea>
<br/>
<button type="submit" class="am-btn am-btn-primary am-btn-sm"><i class="am-icon-check"></i> 提 交</button>
</form>
<hr class="am-article-divider am-show-sm-only">
</div>
<div class="col-sm-8">
<h4 class="about-color">关于我们</h4>
<p>AllMobilize Inc (美通云动科技有限公司)
由前微软美国总部IE浏览器核心研发团队成员及移动互联网行业专家在美国西雅图创立，旨在解决网页在不同移动设备屏幕上的适配问题。基于国际专利技术并结合最前沿的HTML5技术，云适配解决方案可以帮助企业快速将桌面版网站适配到各种移动设备终端的屏幕上，不仅显著地提高了企业网站的用户体验以及销售转化率，而且大幅度地节省了企业开发和维护移动网站的费用。</p>
<h4 class="about-color">团队介绍</h4>
<p>AllMobilize Inc 获得了微软创投孵化器的支持，其领先科技已得到全球多家企业及机构的认可与信赖，客户包括全球500强企业、美国政府、国内政府机关、国内外上市公司、以及互联网标准化组织W3C。</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="am-container">
<p>© 2014 <a href="http://www.yunshipei.com" target="_blank">AllMobilize, Inc.</a> Licensed under <a
href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>. by the AmazeUI Team.</p>
</div>
</footer>
<script src="{{assets}}js/zepto.min.js"></script>
<script src="{{assets}}js/amazeui.min.js"></script>
</body>
</html>
\ No newline at end of file
less/variables.less
浏览文件 @ ea9821f4
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; @font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-kai: Georgia, 'Times New Roman', Times, Kai, 'Kaiti SC', KaiTi, BiauKai, serif;; @font-family-kai: Georgia, 'Times New Roman', Times, Kai, 'Kaiti SC', KaiTi, BiauKai, serif;
// Font size // Font size
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或