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,然后按照示例组织所需内容。

 Copy

Amaze UI

其他 
登录
<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,调整为背景色为主色调的样式,内部结构同上。

 Copy

Amaze UI

其他 
登录
<header class="am-topbar am-topbar-inverse">
...
</header>

Logo 图片替换

前端的有趣之处,不是给你一个美轮美奂的城堡,而是使用简单甚至枯燥的组件,通过发挥自己的想象,创造出属于自己的那个小屋。

结合辅助 Class .am-text-ir 使用,需要手动设置替换的背景图片。

 Copy
<header class="am-topbar am-topbar-inverse">
<h1 class="am-topbar-brand">
<a href="#" class="am-text-ir">Amaze UI</a>
</h1>
...
</header>
 Copy
.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

 Copy
<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

 Copy
<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的更多相关文章

  1. amazeui学习笔记--css(常用组件9)--导航nav

    amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...

  2. amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb

    amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...

  3. amazeui学习笔记--css(常用组件3)--按钮组Button-group

    amazeui学习笔记--css(常用组件3)--按钮组Button-group 一.总结 1.按钮组用法:把一系列要使用的 .am-btn 按钮放入 .am-btn-group . 2.按钮工具栏: ...

  4. amazeui学习笔记--css(常用组件16)--文章页Article

    amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...

  5. amazeui学习笔记--css(常用组件15)--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

  6. amazeui学习笔记--css(常用组件14)--缩略图Thumbnail

    amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...

  7. amazeui学习笔记--css(常用组件13)--进度条Progress

    amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...

  8. amazeui学习笔记--css(常用组件12)--面板Panel

    amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...

  9. amazeui学习笔记--css(常用组件11)--分页Pagination

    amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...

随机推荐

  1. 一个Web报表项目的性能分析和优化实践(六):设置MySQL的最大连接数(max_connections)

    在上一篇文章中"一个Web报表项目的性能分析和优化实践(二):MySQL数据库连接不够用(TooManyConnections)问题的一次分析和解决案例"提到,项目中新增几个数据库 ...

  2. 改动UINavigationBar (导航栏)上NavigationBarItem 的字体大小和颜色的用法

    //创建一个左边button UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithTitle:@"<" ...

  3. OpenLayers3基础教程——OL3之Popup

    概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...

  4. jQuery源码02--(3043 , 3183) Deferred : 延迟对象 : 对异步的统一管理

    //延迟对象 jQuery.extend({ Deferred: function( func ) { var tuples = [//resolve完成.reject未完成.notify进行中类似于 ...

  5. php中array_merge函数

    php中array_merge函数 一.array_merge简介 (PHP 4, PHP 5, PHP 7) array_merge — 合并一个或多个数组 说明¶ array array_merg ...

  6. 3.索引与string进行映射实现高效查找

    #include <iostream> #include <typeindex>//类型索引 #include <unordered_map>//红黑树 #incl ...

  7. JavaScript--数据结构与算法之散列

    散列:实现散列表的数据后可以快速地实现插入或者删除.但是对于实现查找操作则效率非常的低.散列表的底层是数组实现的,长度是预先设定,可以随时根据需求增加.所有的元素根据和该元素对应的键,保存在特定的位置 ...

  8. 【bzoj4864】神秘物质

    Description 给出一个长度为n的序列,第i个数为ai,进行以下四种操作: merge x e:将当前第x个数和第x+1个数合并,得到一个新的数e: insert x e:在当前第x个数和第x ...

  9. FZU 1608 Huge Mission

    Huge Mission Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on FZU. Original I ...

  10. 浅谈架构之路:单点登录 SSO

    前言:SSO 单点登录 "半吊子"的全栈工程师又来了,技术类的文章才发表了两篇,本来想先将主攻的几个系列都开个头(Nodejs.Java.前端.架构.全栈等等),无奈博客起步太晚, ...