Guvernul Republicii Moldova Guvernul Republicii Moldova

Alte elemente

In aceasta pagina dorim sa afisam elemente utile portalului Dumneavoastra, care tin sa imbogateasca informational si vizual paginile.

Forma de cautare globala


<div class="widget-top-search container bg-light-blue py-3 my-4">
  <div class="row">
    <div class="col-md-3">
      <label for="inputTopSearch" class="label-search">Doriti să cautati:</span>
    </div>
    <div class="col search-container d-flex">
      <input type="search" id="inputTopSearch" class="form-control search-control" placeholder="In intrebari frecvente" />
      <button type="button" class="btn-search"></button>
    </div>
  </div>
</div>

Forma de cautare locala cu filtre pe dreapta


<div class="widget-top-search container px-0">
  <div class="row">
      <div class="col flex-grow-1 search-container d-flex">
          <input type="search" id="inputTopSearch" class="form-control search-control" placeholder="Cuvant cheie" />
          <button type="button" class="btn-search"></button>
      </div>
      <div class="col">
        <form class="form-inline">
          <div class="form-group mb-2 ml-auto">
            <label class="mb-0 mx-2" for="staticSelect01">Afisare: </label>
            <select id="staticSelect01" class="form-control w-130-fixed">
              <option selected>10</option>
              <option>25</option>
              <option>50</option>
            </select>
          </div>
          <div class="form-group mb-2">
            <label class="mb-0 mx-2" for="staticSelect02">Sortare: </label>
            <select id="staticSelect02" class="form-control w-130-fixed">
              <option selected>A - Z</option>
              <option>Z - A</option>
            </select>
          </div>
        </form>
      </div>
  </div>
</div>

Carousel Slider


<div id="carousel-example-2" class="carousel bg-blue slide carousel-fade widget-carousel-with-side-image" data-ride="carousel">
  <ol class="carousel-indicators">
      <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-2" data-slide-to="1"></li>
      <li data-target="#carousel-example-2" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner container py-5" role="listbox">
    <div class="carousel-item active">
      <div class="d-flex carousel-item-container">
        <div class="slide-text-col carousel-caption">
          <h2>Lorem Ipsum dolor sit amet conqiestitur</h2>
          <div class="abstract mb-4">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in libero eros. 
              Nullam tristique erat enim, et dignissim purus tristique in. Donec molestie 
              scelerisque vulputate.
          </div>
          <div class="buttons-group">
              <button class="btn btn-striped mr-2" type="button">Autentificare</button>
              <button class="btn btn-striped mr-2" type="button">Creaza Cont</button>
          </div>
        </div>
        <div class="slide-image-col">
            <img class="d-block w-100" src="images/Carousel/img-generic.png" alt="First slide"/>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="d-flex carousel-item-container">
        <div class="slide-text-col carousel-caption">
          <h2>Bebeto Ipsum dolor sit amet conqiestitur</h2>
          <div class="abstract mb-4">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in libero eros. 
              Nullam tristique erat enim, et dignissim purus tristique in. Donec molestie 
              scelerisque vulputate.
          </div>
          <div class="buttons-group">
              <button class="btn btn-striped mr-2" type="button">Mai mult</button>
          </div>
        </div>
        <div class="slide-image-col">
          <img class="d-block w-100" src="images/Carousel/img-generic-01.png" alt="First slide"/>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="d-flex carousel-item-container">
        <div class="slide-text-col carousel-caption">
          <h2>Schlang Ipsum dolor sit amet conqiestitur</h2>
          <div class="abstract mb-4">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in libero eros. 
              Nullam tristique erat enim, et dignissim purus tristique in. Donec molestie 
              scelerisque vulputate.
          </div>
          <div class="buttons-group">
              <button class="btn btn-striped mr-2" type="button">Vezi detalii</button>
          </div>
        </div>
        <div class="slide-image-col">
          <img class="d-block w-100" src="images/Carousel/img-generic-02.png" alt="First slide"/>
        </div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
  </a>
</div>

Exista setari pentru tranzitia slide-urilor la acest carousel. Implicit, acestea au efectul de rotire, insa, se poate aplica tranzitia fade. Pentru aceasta in rândul codului de initializare a caruselului, indicati clasa aditionala carousel-fade 


<div id="carousel-example-2" class="carousel bg-blue slide carousel-fade widget-carousel-with-side-image" data-ride="carousel">

Widget Text și Media

Text & Media este un bloc de text si imagine (sau video player) plasate in doua coloane de inaltime egala.

Blocul de text contine Titlul blocului, Text exlicativ si butoane de legatura cu pagina asticolului detaliat.

Directia afisarii coloanelor este variabila si se seteaza prin aplicarea clasei .ltr (Left to Right), sau clasa .rtl (Right to Left).

In cazul in care intr-o pagine avem doua sau mai multe asemenea blocuri consecutive, se recomanda de a altera directiile coloanelor.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nisl pretium, pulvinar nisi sed, placerat nibh. Nam egestas nisi quis ligula dapibus, a laoreet augue aliquam.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut nisl pretium, pulvinar nisi sed, placerat nibh. Nam egestas nisi quis ligula dapibus, a laoreet augue aliquam.

Image 

<div class="container widget-text-and-media ltr py-5">
  <div class="row">
    <div class="col-lg-5 col-md-6 d-flex flex-column text-column">
      <h3 class="title mt-auto">Lorem ipsum dolor sit amet</h3>
      <p class="abstract">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Duis ut nisl pretium, pulvinar nisi sed, placerat nibh. 
          Nam egestas nisi quis ligula dapibus, a laoreet augue aliquam.
      </p>
      <div class="buttons mb-auto">
          <button type="button" class="btn btn-primary">Mai mult</button>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 offset-lg-1 image-column">
      <img src="images/Media/ph-570-320-2.png" alt="Image" title="Image Title" class="img-fluid" />
    </div>
  </div>

Carduri cu imagine rotunda

Business
Education
Asigurare Medicala
Sanatate

Aceste carduri se plaseaza in interiorul unei coloane din grila bootstrap sau a unui element copil a parintelui flex, cu directie flex-row 


<div class="flex flex-row">
  <!-- A se plasa codul cardului aici  --> 
</div>



<div class="row">
  <div class="col-md-3">
    <!-- A se plasa codul cardului aici -->
  </div>
</div>



<a href="#" class="column-card p-4">
  <div class="icon-wrapper bg-ruby d-flex">
      <img src=" ... " width="60" height="60"  class="img-fluid"/> 
  </div>
  <div class="card-title">Sanatate</div>
</a>

Taburi


<ul class="nav nav-tabs justify-content-center" id="nav-tab" role="tablist">
  <li class="nav-item">
  <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
  <a class="nav-link" id="nav-tab-item-1" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Tab Item 1</a>
  </li>
  <li class="nav-item">
  <a class="nav-link" id="nav-tab-item-2" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Tab Item 2</a>
  </li>
</ul>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tab-content">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
    ...    
  </div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-tab-item-1">
    ...    
  </div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-tab-item-2">
    ...    
  </div>
</div>

Container gazda

Acest tip de containere are menirea de a gazdui in sine diverse componente de content, gen: forme, text, articole, etc.

Exemplu de asemnea container il puteti vedea pe pagina aceasta.

Continutul vine aici ... 

<div class="content-holder bg-white mb-4">
  Continutul vine aici ...
</div>

Modal

Folosiți pluginul modal JavaScript de Bootstrap pentru a adăuga dialoguri pe site-ul dvs. pentru notificări pentru utilizatori sau conținut complet personalizat. 


<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <a class="navbar-brand py-3 d-flex" href="#">
          <img src="images/logo/m-style.svg" class="img-fluid"/>
          <span class="brand-long-text">Ghid de stil servicii electronice guvernamentale</span>
        </a>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col col-sm-8 offset-sm-2">
              <a href="javascript:void(0)" class="go-back" data-dismiss="modal">
                <i class="fas fa-chevron-left mr-3"></i>
                <span>Inapoi</span>
              </a>
              <div class="content-holder bg-white my-4">
                <h3 class="modal-title">Titlul vine aici ...</h3>
              </div>
              <div class="text-right">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>                    
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Container cu bara laterala

Acest tip de containere are menirea de a gazdui in sine diverse componente de content, gen: forme, text, articole, etc.

0992888182983
active
Depunere cerere comision PPP AT-2000001 Nullam diam felis maximus
Agentia de Guvernare electronica
01.01.2019
Alexandru Balcinschi
Igor Dobrovolschi 

<div class="container-with-side-cap d-flex flex-column flex-md-row mb-4">
  <div class="side-cap bg-gold d-flex flex-md-column flex-sm-row justify-content-between">

    <!-- CAP ICON -->
    <dv class="cap-icon rounded-circle">
      <i class="fas fa-pencil-ruler"></i>
    </dv>

    <!-- CAP BUTTONS GROUP -->
    <ul class="action-buttons d-flex flex-md-column flex-sm-row">
      <li>
        <button type="button" class="btn btn-rounded-circle">
          <i class="fas fa-pen"></i>
        </button>
      </li>
      <li>
        <button type="button" class="btn btn-rounded-circle">
          <i class="fas fa-trash-alt"></i>
        </button>
      </li>
      <li>
        <button type="button" class="btn btn-rounded-circle">
          <i class="fas fa-power-off"></i>
        </button>
      </li>
    </ul>

  </div>
  <div class="content-body d-flex flex-column">

    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-3 col-md-4">
          <div class="mb-2">
            <div class="label-bottom">0992888182983</div>
          </div>
          <div class="mb-2">
            <div class="status active">
              <i class="fas fa-circle"></i> 
              <span>active</span>
            </div>
          </div>
        </div>
        <div class="col-lg-9 col-md-8 pb-3">
          <a href="javascript:void(0)" class="title-link">
            Depunere cerere comision PPP AT-2000001 Nullam diam felis maximus
          </a>
          <div class="">Agentia de Guvernare electronica</div>
        </div>
      </div>
    </div>

    <div class="container-fluid mt-auto striped-top">
      <div class="row">
        <div class="col-lg-3 col-md-4 pt-3">
          <div class="">
            <div class="label-bottom">
              <i class="fas fa-calendar-alt mr-2"></i>
              <span>01.01.2019</span></div>
          </div>
        </div>
        <div class="col-lg-9 col-md-8 pt-3">
          <div class=" d-flex justify-content-between">
            <div class="label-bottom d-flex flex-no-wrap">
              <i class="fas fa-suitcase text-primary mr-2"></i>
              <span>Alexandru Balcinschi</span>
            </div>
            <div class="">
              <i class="fas fa-chevron-right"></i>
            </div>
            <div class="label-bottom d-flex flex-no-wrap">
              <i class="fas fa-user mr-2 text-success"></i>
              <span>Igor Dobrovolschi</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  </div>