Guvernul Republicii Moldova Guvernul Republicii Moldova

Grila

Folosim grila de 12 coloane a câte 70 de pixeli per coloană și cu spațiere de 30 de pixeli între coloane. Astfel avem o lățime totală de 1170 de pixeli. Spațierea de 30px se referă și la elementele din module, nu doar la spațiul între module.

Pentru a mări compatibilitatea cu diferite sisteme de management a conținutului pe care ar putea rula serviciile electronice guvernamentale, vom folosi framework-ul bootstrap.

Pagina Bootstrap

Layout

Containere

Containerele sunt elementele de bază din Bootstrap și sunt necesare atunci când folosiți sistemul nostru de grilă. Alegeți dintr-un recipient sensibil, cu lățime fixă (însemnând lățimile maxime ale acestuia la fiecare punct de rupere) sau lățimea fluidului (ceea ce înseamnă că este lățim 100% tot timpul).

Folosind .container pentru grila, vei obtine o grila limitata in latime si centrata pe orizontala.

.container 

<div class="container">
  <!-- Contentul vine aici -->
</div>

Utilizați .container-fluid pentru container cu lățime care acopera întreaga lățime a elementului părinte sau a paginii.

.container-fluid 

<div class="container-fluid">
  ... 
</div>

Tipuri de layout

Reiesind din cele de mai sus, propunem posibilitatea de a folosi urmatoarele tipuri pagini:

Layout cu o singura coloana

Header
Footer

Layout cu coloana laterala si coloana de baza

Header
 
 
Footer

Layout cu o singura coloana centrata

Header
 
Footer

Layout cu header si footer fluid

Header
.container
Footer

Layout cu containere fluid si simple

Header
Element fluid (ex: Carsouel)
.container
Footer

Continut pagina cu navigare laterala

Setati clasele .side-column și .position-relative pentru coloana din grila bootstrap, care va fi coloană laterala. Raportul recomandat al coloanelor pentru ecrane medid sunt de 3/9. 


<div class="col-md-3 side-column py-3 position-relative"> ... </div>
<div class="col-md-9  py-3"> ... </div>

Continut coloana laterala


<div class="col-md-3 side-column py-3 position-relative">...</div>



<nav class="side-nav" data-spy="affix" data-offset-top="100">

  <!-- Butonul de cavigare spre pagina precedenta -->
  <a href="javascript:void(0)" class="go-back">
    <i class="fas fa-chevron-left mr-3"></i>
    <span>Inapoi</span>
  </a>

  <!-- Lista de navigare -->
  <ul>
    <li>
        <a class="side-nav-item" href="...">Item de meniu lateral 1</a>
    </li>
    <li>
        <a class="side-nav-item" href="...">Item de meniu lateral 2</a>
    </li>
    <li>
        <a class="side-nav-item" href="...">Item de meniu lateral 2</a>
    </li>
  </ul>

</nav>