Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Codice Menù Orizzontale

Codice Menù Orizzontale

Struttura della pagina

<header class="it-header-wrapper it-header-sticky"
  data-bs-position-type="fixed"
  data-bs-toggle="sticky"
  data-bs-target="#header-nav-wrapper"
  data-bs-sticky-class-name="is-sticky">
  {% include html_docs/header/topbar.html %}
  <div class="it-nav-wrapper">
    {% include html_docs/header/center_menu-oriz.html %}
    {% include html_docs/header/navbar_oriz.html %}
  </div>
</header>

<main>
  <div class="container-fluid">
    <div class="col-12">
    <h1>Tabella dati</h1>
    {% include esempi-lombardia/filtri_tabella.html %}
    {% include esempi-lombardia/tabella.html %}
    {% include esempi-lombardia/paginazione.html %}
    </div>
  </div>
</main>

{% include html_docs/footer/footer.html %}

Topbar e center-heade scompaiono allo scroll Il logo o acronimo e nome dell’applicativo e l’eventuale pulsante di ricera vengono clonati sulla navbar

Sul tag <header>

  • la classe it-header-sticky innesca il comportamento dell’header allo scroll.
  • i vari attributi data-bs- specificano le modalità del fissaggio della testata

La barra istituzionale è composta da tre parti:

  • topbar
  • center_menu-oriz
  • navbar_oriz

Il tag <main> contiene semplicemente tutti gli elementi della parte centrale della pagina.

header_menu-oriz

      <div class="it-header-center-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">

            <div class="it-header-center-content-wrapper d-flex justify-content-between">

              <div class="it25-left-zone d-flex justify-content-start">
                <div class="it-brand-wrapper d-flex">
                  
                  <div class="it-brand-text">
                    <div class="it-brand-title d-inline">
                    
                     <span class="it25-app-name d-none d-md-inline">Nome applicativo</span>
                     </div>
                  </div>
                </div>
              </div>

              <div class="it-right-zone">
                
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>