Framework7 - Navbar di base

Descrizione

Un NAVBAR di base può essere creato utilizzando le classi NAVBAR , NAVBAR-inner , left , center e right .

La parte centrale ha la larghezza con priorità più bassa, quando le dimensioni dello schermo sono ridotte. Se tutti e tre gli elementi (cioè centro , sinistra e destra ) non si adattano allo schermo, la parte centrale verrà rimossa.

esempio

Il seguente esempio dimostra l'uso di NAVBAR Framework7 -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Navbar</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>
   
   <body>
      <div class = "views">
         <div class = "view view-main">
            
            <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 class = "pages navbar-through ">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                        Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer 
                        sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat 
                        dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia 
                        dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam 
                        eu consectetur. Sed posuere a orci id imperdiet.</p>
                     
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                        Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer 
                        sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat 
                        dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia 
                        dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam 
                        eu consectetur. Sed posuere a orci id imperdiet.</p>
                  </div>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
   </body>
   
</html>

produzione

Eseguiamo i seguenti passaggi sopra indicati per vedere come funziona il codice:

  • Salva il codice HTML sopra indicato come navbar_basic.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/navbar_basic.html e l'output viene visualizzato come mostrato di seguito.

  • Le parti di base di NAVBAR 3 come sinistra, centro e destra e ogni parte include qualsiasi contenuto HTML.