加拿大28

<small id='yts2v'></small><noframes id='yts2v'>

  • <tfoot id='yts2v'></tfoot>

      <legend id='yts2v'><style id='yts2v'><dir id='yts2v'><q id='yts2v'></q></dir></style></legend>
      <i id='yts2v'><tr id='yts2v'><dt id='yts2v'><q id='yts2v'><span id='yts2v'><b id='yts2v'><form id='yts2v'><ins id='yts2v'></ins><ul id='yts2v'></ul><sub id='yts2v'></sub></form><legend id='yts2v'></legend><bdo id='yts2v'><pre id='yts2v'><center id='yts2v'></center></pre></bdo></b><th id='yts2v'></th></span></q></dt></tr></i><div id='yts2v'><tfoot id='yts2v'></tfoot><dl id='yts2v'><fieldset id='yts2v'></fieldset></dl></div>

          <bdo id='yts2v'></bdo><ul id='yts2v'></ul>

        1. ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
          当前位置:首页 >> 网页制作 >> web前端 >> Framework7 导航栏和工具栏

          Framework7 导航栏和工具栏(1/2)

          来源:网络整理     时间:2018-08-11     关键词:

          本篇文章主要介绍了" Framework7 导航栏和工具栏",主要涉及到方面的内容,对于web前端感兴趣的同学可以参考一下: 在向应用添加导航栏和工具栏之前,加拿大28需要决定使用哪种布局。Framework7在这方面很自由,有3种不同类型的导航栏/工具栏布局,它们对应着在页面/视图中的不同...

          在向应用添加导航栏和工具栏之前,加拿大28需要决定使用哪种布局。

          Framework7在这方面很自由,有3种不同类型的导航栏/工具栏布局,它们对应着在页面/视图中的不同位置。静态布局(静态布局可能是最少使用的布局),固定布局,穿透布局

          静态

          .view   
            .pages    
              .page   
                .page-content   
                  .navbar   
                  // other page content
                  .toolbar 

          固定

          .view
            .pages.navbar-fixed.navbar-through
              .page
                .navbar
                .page-content
                .toolbar

          穿透

          view
            .navbar
            .pages.navbar-through.toolbar-through
              .page
                .page-content
            .toolbar

          导航栏是一个固定区域 (在固定和穿透布局类型中) 。它位于屏幕顶部,包含页面标题和导航元素。

          导航栏包含3个部分:左、中、右。每个部分都可以包含任意的HTML内容,但推荐按照如下方式使用:

          • 左部 用来放置返回链接、图标以及单独的文字链接。

          • 中部 用来显示页面标题和标签链接(即按钮控制)。

          • 右部 和左部一样

           含有图标和文本的链接

          <div>
              <div>
                  <div>
                      <a href="#">
                          <i></i>
                          <span>返回</span>
                      </a>
                  </div>
                  <div>Center</div>
                  <div>
                      <a href="#">
                          <i></i>
                      </a>
                  </div>
              </div>
          </div>

          自动隐藏导航栏

          在通过Ajax载入的页面上,当你不需要导航栏时,Framework7允许你自动隐藏导航栏。它只在你使用穿透类型的布局时才有用。为了实现这一点,你要做的是添加"no-navbar"类到载入的页面中(<div>),然后在那里放置一个空的导航栏:

          <!-- Empty Navbar -->
          <div>
              <div>
              </div>
          </div>
          
          <!-- Page has additional "no-navbar" class -->
          <div data-page="about">
              <div>
                  <div>
                      <p><a href="#">Go Back</a></p>
                      ...
                  </div>
              </div>
          </div>

           导航结合Popover实现点击下拉效果

          相关图片

          相关文章