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>

最新文章

  1. SQL Tuning 基础概述03 - 使用sql_trace和10046事件跟踪执行计划
  2. Vijos1680距离／openjudge2988计算字符串的距离[DP]
  3. POJ1185 炮兵阵地
  4. Android学习笔记——xml
  5. 大商创 sql追踪 卖家入驻
  6. [ javascript New Image() ] New Image() 对象讲解
  7. 如何为Linux生成和打上patch
  8. 不含类解决最后一个li边距问题
  9. Neutron GRE模式要注意的问题
  10. URAL1410. Crack
  11. 【小白的java成长系列】——面向对象基础
  12. 学习之spring属性文件注入
  13. HTML5-canvas实例：刮刮乐游戏
  14. redis 在windows上运行
  15. VMware-Workstation安装在ubuntu15.04（内核3.19）
  16. eclipse通过maven构建web项目步骤说明
  17. 基于HTML5 Canvas 点击添加 2D 3D 机柜模型
  18. Gym 101612C Consonant Fencity
  19. Wed 基础
  20. Scala学习笔记（三）：==,eq与equals的区别

热门文章

  1. Java Web学习总结（21）——http协议响应状态码大全以及常用状态码
  2. ArcGIS Engine中删除要素的几种方法总结
  3. js---12数据类型,数据类型转换，NaN,
  4. Array与ArrayList
  5. POJ 2433 枚举
  6. SQL 金额添加千分位
  7. deep-in-es6(五)
  8. angular路由（自带路由篇）
  9. useradd---创建的新的系统用户
  10. HDU——T 1573 X问题