Framework7学习笔记之 导航栏

一:导航栏的布局

导航栏按“左 中 右”用三个div进行布局,中部宽度优先级最低,两边内容较多时会把中部用 ... 缩起来。

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">Left</div>
        <div class="center">Center</div>
        <div class="right">Right</div>
    </div>
</div>

二:导航栏的链接

通常,我们在导航栏的 左、右 会设置跳转,跳转的实现一般通过超链接,因此要实现导航栏控制跳转,只需在div中包含 <a>标签即可。

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">左边跳转</a>
        </div>
        <div class="center">中部标题</div>
        <div class="right">
            <a href="#" class="link">右边跳转</a>
        </div>
    </div>
</div>   

三:多个链接

多个链接,只需在div中包含多个<a>标签即可。

四:图标+文字 的链接

只需在<a>标签中:用 <i> 子标签包含图标,用<span>子标签包含文字。

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">
                <i class="icon 图标类名"></i>
                <span>文字</span>
            </a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link">
                <i class="icon 图标类名"></i>
                <span>文字</span>
            </a>
        </div>
    </div>
</div>

五:只含图标的链接

需要对<a>标签添加 icon-only 类,该类为图标设定了一个固定大小区域,以便用户点击。

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link icon-only">
                <i class="icon 图标类名"></i>
            </a>
        </div>
        <div class="center">Center</div>
        <div class="right">
            <a href="#" class="link icon-only">
                <i class="icon 图标类名"></i>
            </a>
        </div>
    </div>
</div>    

六:自动隐藏导航栏

在使用穿透布局类型时,view中的导航栏会自动穿透到页面中。

如果跳转到的页面不需要导航栏,就需要对导航栏进行自动隐藏:在页面文件中定义空导航栏;页面元素中增加 no-navbar类。

<!-- 1:定义一个空的导航栏 -->
<div class="navbar">
  <div class="navbar-inner">
  </div>
</div>          

<!-- 2:在页面元素添加 no-navbar类  -->
<div data-page="about" class="page no-navbar">
  <div class="page-content">
    <div class="content-block">
      <p>页面内容...</p>
      ...
    </div>
  </div>
</div>

原文地址:https://www.cnblogs.com/ygj0930/p/8455322.html

时间: 2024-10-11 13:56:27

Framework7学习笔记之 导航栏的相关文章

Framework7学习笔记之导航栏与工具栏的布局类型

一:布局类型 导航栏.工具栏 有多种布局类型,他们分别有不同的表现效果,主要有:静态布局.固定布局.穿透布局. 二:静态布局(少用) 静态布局的导航栏.工具栏,是写死在页面文件中的,每个页面都有它自己的导航栏和工具栏. 原文地址:https://www.cnblogs.com/ygj0930/p/8455093.html

&lt;Bootstrap&gt; 学习笔记八. 导航栏和颁

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet&

HTML&CSS基础学习笔记11-导航栏

上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航栏. 导航栏在HTML中有一个语义化的标签<nav>,这个标签表示带有导航性质的内容,会有自己默认的特殊样式.语义化标签我们将会在后面讲到. 我们在这里先使用下<nav>标签,和<a>组合成一个导航栏. 代码如下: <!DOCTYPE html> <htm

Framework7学习笔记之App基本布局

一:App基本布局 用Framework7搭建的app,一般在index.html中引入所需的样式文件与js文件,并且搭建起整体的基本视图框架. 二:跨平台.通用型布局 <!DOCTYPE html> <html> <head> <!--1:4个meta标签,指定编码格式.界面宽高.app性质.状态栏颜色等参数--> <meta charset="utf-8"> <meta name="viewport&quo

Framework7学习笔记之初始化App

一:初始化应用对象 我们想要在js文件中操作app,就需要初始化一个app对象来存储应用本身. 在初始化app时,还可以传递一些参数,对app进行一些个性化定制,如:主题.缓存设置.工具栏.导航栏.通知栏等等对app整体的特性设置. 二:格式实例 var app = new Framework7({ // App root element root: '#app', // App Name name: 'My App', // App id id: 'com.myapp.test', // En

Framework7学习笔记之Page的定义与Page初始化

一:Page 一个page文件定义了一个app页面,它可以定义该页面的导航栏.底部工具栏.中间详细内容等等.  page通过加载到view容器中运行,而view在index.html中定义. index.html定义了app的基本结构:引入样式文件.引入js文件.创建app标签.创建view标签. 因此,page的定义文件 XX.html 不需要在定义head.body等等部分,只需要使用 div 搭建出页面的 状态栏.侧边栏.页面内容(导航栏.主体部分.底部工具栏).(不是每部分都要有,按需搭

Snail—UI学习之自定义导航栏NSNavigationController

首先新建一个RootViewController 再建一个FirstViewController 在RootViewController.m中写入 #import "WJJRootViewController.h" #import "WJJFirstViewController.h" @interface WJJRootViewController () @end @implementation WJJRootViewController - (id)initWit

Framework7学习笔记之View的定义与View的初始化

一:View与Views View:在应用中是一个独立的部分,她有自己的设置.页面切换和历史.每一个视图都可以有不同的导航栏.工具栏布局和不同的样式. 所以View就像是嵌在应用中的另一个应用.这种功能可以让你来分别操作一个应用中的不同部分. Views:是所有可见View的容器(不包括Modal和Panel).Views 是你的应用主容器.一个应用中只能有一个 Views.    辨析:app>views>view>page.    关系:一个app只能有一个views标签,用于容纳v

Framework7学习笔记之 工具栏

一:工具栏布局 工具栏布局十分简单:所有工具栏元素(链接)沿着工具栏等距分布. <div class="toolbar"> <div class="toolbar-inner"> <a href="#" class="link">导航元素 1</a> <a href="#" class="link">导航元素 2</a&g