当前位置: 首页 > 工具软件 > Amaze UI > 使用案例 >

amazeui学习笔记--css(常用组件10)--导航条Topbar

温镜
2023-12-01

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"> 
 类似资料: