amazeui学习笔记--css(常用组件10)--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar
一、总结
1、 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar
class,然后按照示例组织所需内容。<header class="am-topbar">导航条内容</header>
2、am-topbar模块下很多东西:am-topbar是命名空间加上模块名,所以肯定在模块下右很多东西,比如 <h1 class="am-topbar-brand">
3、深色样式: 在容器上添加 .am-topbar-inverse
,调整为背景色为主色调的样式,内部结构同上。<header class="am-topbar am-topbar-inverse">
4、logo图片替换:结合辅助 Class .am-text-ir
使用,需要手动设置替换的背景图片。<a href="#" class="am-text-ir">Amaze UI</a>需在an-text-ir的样式中修改图片位置:
background: url(http://a.static.amazeui.org/assets/i/ui/logo.png) no-repeat left center;
5、顶部固定(很有用):在 .am-topbar
上添加 .am-topbar-fixed-top
class,实现顶部固定。包含顶部固定导航条的页面会在 body
上添加 .am-with-topbar-fixed-top
,用户可以在这个 class 下设置样式,默认设置了 padding-top: 51px
。<header class="am-topbar am-topbar-inverse am-topbar-fixed-top">
6、底部固定:在 .am-topbar
上添加 .am-topbar-fixed-bottom
class,实现底部固定。
二、Topbar导航条
Topbar 导航条
常用于网页顶部放置 Logo、导航等信息(这个名称起得不太好,出现了 top
这个表象的词)。
由于需求的差异性,很难整理出一个适合不同网站的导航条组件,Amaze UI 现在整理的版本适合导航条相对简单(Logo + 链接 + 按钮 + 搜索框)的页面,后续还会进一步优化。
基本样式
默认样式(浅色)
在容器上添加 .am-topbar
class,然后按照示例组织所需内容。
<header class="am-topbar">
<h1 class="am-topbar-brand">
<a href="#">Amaze UI</a>
</h1>
<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
<div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
<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 class="am-active"><a href="#">2. 去火星</a></li>
<li><a href="#">3. 还是回地球</a></li>
<li class="am-disabled"><a href="#">4. 下地狱</a></li>
<li class="am-divider"></li>
<li><a href="#">5. 桥头一回首</a></li>
</ul>
</li>
</ul>
<form class="am-topbar-form am-topbar-left am-form-inline" role="search">
<div class="am-form-group">
<input type="text" class="am-form-field am-input-sm" placeholder="搜索">
</div>
</form>
<div class="am-topbar-right">
<div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
<button class="am-btn am-btn-secondary am-topbar-btn am-btn-sm am-dropdown-toggle" data-am-dropdown-toggle>其他 <span class="am-icon-caret-down"></span></button>
<ul class="am-dropdown-content">
<li><a href="#">注册</a></li>
<li><a href="#">随便看看</a></li>
</ul>
</div>
</div>
<div class="am-topbar-right">
<button class="am-btn am-btn-primary am-topbar-btn am-btn-sm">登录</button>
</div>
</div>
</header>
深色样式
在容器上添加 .am-topbar-inverse
,调整为背景色为主色调的样式,内部结构同上。
<header class="am-topbar am-topbar-inverse">
...
</header>
Logo 图片替换
前端的有趣之处,不是给你一个美轮美奂的城堡,而是使用简单甚至枯燥的组件,通过发挥自己的想象,创造出属于自己的那个小屋。
结合辅助 Class .am-text-ir
使用,需要手动设置替换的背景图片。
<header class="am-topbar am-topbar-inverse">
<h1 class="am-topbar-brand">
<a href="#" class="am-text-ir">Amaze UI</a>
</h1>
...
</header>
.am-topbar .am-text-ir {
display: block;
margin-right: 10px;
height: 50px;
width: 125px;
background: url(http://a.static.amazeui.org/assets/i/ui/logo.png) no-repeat left center;
-webkit-background-size: 125px 24px;
background-size: 125px 24px;
}
顶部、底部固定
顶部固定
在 .am-topbar
上添加 .am-topbar-fixed-top
class,实现顶部固定。
包含顶部固定导航条的页面会在 body
上添加 .am-with-topbar-fixed-top
,用户可以在这个 class 下设置样式,默认设置了 padding-top: 51px
。
<header class="am-topbar am-topbar-inverse am-topbar-fixed-top">
<div class="am-container">
<h1 class="am-topbar-brand">
<a href="#" class="am-text-ir">Amaze UI</a>
</h1>
<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
data-am-collapse="{target: '#doc-topbar-collapse-4'}"><span class="am-sr-only">导航切换</span> <span
class="am-icon-bars"></span></button>
<div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse-4">
<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><a href="#">带我去月球</a></li>
<li><a href="#">还是回地球</a></li>
<li class="am-disabled"><a href="#">臣妾做不到</a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
底部固定
在 .am-topbar
上添加 .am-topbar-fixed-bottom
class,实现底部固定。
包含底部固定导航条的页面会在 body
上添加 .am-with-topbar-fixed-bottom
,用户可以在这个 class 下设置样式,默认设置了 padding-bottom: 51px
。
<header class="am-topbar am-topbar-inverse am-topbar-fixed-bottom">
<div class="am-container">
<h1 class="am-topbar-brand">
<a href="#" class="am-text-ir">Amaze UI</a>
</h1>
<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
data-am-collapse="{target: '#doc-topbar-collapse-5'}"><span class="am-sr-only">导航切换</span> <span
class="am-icon-bars"></span></button>
<div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse-5">
<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 am-dropdown-up" data-am-dropdown>
<a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
上拉 <span class="am-icon-caret-up"></span>
</a>
<ul class="am-dropdown-content">
<li><a href="#">带我去月球</a></li>
<li><a href="#">还是回地球</a></li>
<li class="am-disabled"><a href="#">臣妾做不到</a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
amazeui学习笔记--css(常用组件10)--导航条Topbar的更多相关文章
- amazeui学习笔记--css(常用组件9)--导航nav
amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...
- amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb
amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...
- amazeui学习笔记--css(常用组件3)--按钮组Button-group
amazeui学习笔记--css(常用组件3)--按钮组Button-group 一.总结 1.按钮组用法:把一系列要使用的 .am-btn 按钮放入 .am-btn-group . 2.按钮工具栏: ...
- amazeui学习笔记--css(常用组件16)--文章页Article
amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...
- amazeui学习笔记--css(常用组件15)--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...
- amazeui学习笔记--css(常用组件14)--缩略图Thumbnail
amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...
- amazeui学习笔记--css(常用组件13)--进度条Progress
amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...
- amazeui学习笔记--css(常用组件12)--面板Panel
amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...
- amazeui学习笔记--css(常用组件11)--分页Pagination
amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...
随机推荐
- 【Henu ACM Round#16 A】 Bear and Game
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 看看什么时候t[i]-t[i-1]>15. 输出t[i-1]+15就好. 不存在这样的i就输出min(t[n]+15,90) ...
- php将数组或字符串写入文件
//将数组保存在文件里 function export_to_file($file, $variable) { $fopen = fopen($file, 'wb'); if (!$fopen) { ...
- 转:IOS推送代码
实例:调用方法:- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary ...
- OcadeToolkit - From 2D CAD to PDMS
OcadeToolkit - From 2D CAD to PDMS eryar@163.com Abstract. 基于开源二维CAD软件QCAD开发的插件可以将DXF文件中直线.圆弧转换到PDMS ...
- Oracle-02-数据库概述
一.数据库用途 用于存放数据的软件 当中Application server重要,将数据存在表中每一个表关系就能够反映不同表之间数据的关系,比方淘宝用户注冊.商品买卖等数据存在操作系统的目录中,不便于 ...
- [Codeforces558E]A Simple Task 线段树
链接 题意:给定一个长度不超过 \(10^5\) 的字符串(小写英文字母),和不超过5000个操作. 每个操作 L R K 表示给区间[L,R]的字符串排序,K=1为升序,K=0为降序. 最后输出最终 ...
- js函数的属性和方法
js函数的属性和方法 前面的话 函数是javascript中特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本文是深入理解j ...
- CSS3的属性选择器
CSS3中新增了许多选择器,今天零度给大家说说CSS3的属性选择器. 与CSS2相比,CSS3新增了3种属性选择器:[attr^=value].[attr$=value].[attr*=value]: ...
- Codefroces Round #429Div2 (A,B,C)
A. Generous Kefa time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- 完全背包模板 51Nod 1101
N元钱换为零钱,有多少不同的换法?币值包括1 2 5分,1 2 5角,1 2 5 10 20 50 100元. 例如:5分钱换为零钱,有以下4种换法: 1.5个1分 2.1个2分3个1分 3.2个2分 ...