Componente

În această pagină vor fi listate componentele disponibile și modul de utilizare a acestora.

Așezare în pagină

Așezarea în pagina include containerele de bază și un sistem de așezare bazat pe linii și coloane.

Container

Centrează conținutul paginii cu un container.

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

Grila

Grila este una standard prin care adaugi rânduri cu coloane, fiecare coloană având o clasă care stabilește raportul de lățime al acesteia.

coloană două treimi
coloană o treime
<div class="row-fluid">
  <div class="col-md-8">...</div>
  <div class="col-md-4">...</div>
</div>

Tipografie

Titluri

h1. Titlu design.gov.ro

h2. Titlu design.gov.ro

h3. Titlu design.gov.ro

h4. Titlu design.gov.ro

h5. Titlu design.gov.ro
h6. Titlu design.gov.ro
<h1>h1. Titlu design.gov.ro</h1>
<h2>h2. Titlu design.gov.ro</h2>
<h3>h3. Titlu design.gov.ro</h3>
<h4>h4. Titlu design.gov.ro</h4>
<h5>h5. Titlu design.gov.ro</h5>
<h6>h6. Titlu design.gov.ro</h6>

Paragrafe

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p class="lead">...</p>
<p>...</p>

Citate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Liste

Liste neordonate

  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

Liste ordonate

  1. Lorem ipsum dolor sit amet
  2. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  3. Faucibus porta lacus fringilla vel
  4. Aenean sit amet erat nunc
  5. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

Butoane

Butoanele sunt folosite pentru acțiuni în formulare și acțiuni primare în pagină, iar legăturile din text sunt folosite pentru destinații sau pentru a ajunge de la o pagină la alta.

Buton link
<button class="btn btn-default" type="button">Buton button</button>
<a class="btn btn-default" href="#" role="button">Buton link</a>

Dimensiune butoane

<button class="btn btn-default" type="button">Buton</button>
<button class="btn btn-sm" type="button">Buton mic</button>

Tipuri de butoane

Butoanele primare sunt folosite pentru a indica acțiunea principală dintr-o pagină.

Butoanele periculoase aduc aminte utilizatorului că acțiunea respectivă are un potențial periculos (ex: ștergerea unei resurse).

<button class="btn btn-primary" type="button">Buton principal</button>
<button class="btn btn-sm btn-primary" type="button">Buton principal mic</button>

<button class="btn btn-danger" type="button">Buton periculos</button>
<button class="btn btn-sm btn-danger" type="button">Buton periculos mic</button>

Butoane dezactivate

Link dezactivat

Link principal dezactivat

Link periculos dezactivat

<button class="btn btn-default" type="button" disabled>Buton dezactivat</button>
<a class="btn disabled" href="#" role="button">Buton dezactivat</a>

Grupuri de butoane

<div class="btn-group">
  <button class="btn btn-primary" type="button">Buton unu</button>
  <button class="btn btn-primary" type="button">Buton doi</button>
  <button class="btn btn-primary" type="button">Buton trei</button>
</div>

Formulare

Input

<input class="form-control" type="text" placeholder="Input normal">
<input class="form-control input-sm" type="text" placeholder="Input mic">

<input class="form-control" type="text" placeholder="Input dezactivat" disabled>
<input class="form-control input-sm" type="text" placeholder="Input mic dezactivat" disabled>

Select

<select class="form-control">
  <option>Select normal</option>
</select>
<select class="form-control input-sm">
  <option>Select mic</option>
</select>

Textarea

<textarea class="form-control" rows="3"></textarea>

Checkbox și radio

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Aceasta este prima opțiune
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    A doua opțiupe este dezactivată
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" checked>
    Aceasta este prima opțiune și este implicită
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios">
    Aceasta este a doua opțiune
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    A treia opțiune este dezactivată
  </label>
</div>

Grupuri de input

RO

lei

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">RO</span>
  <input type="text" class="form-control" placeholder="12345678" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control text-right" placeholder="1.324,54" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">lei</span>
</div>

Acțiuni formular

<div class="form-actions">
  <button type="button" class="btn btn-primary">Salvează</button>
  <button type="button" class="btn btn-default">Renunță</button>
</div>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Acțiune</a></li>
            <li><a href="#">Altă acțiune</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Acțiune separată</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<ul class="nav nav-side">
  <li class="active"><a href="#">Cont</a></li>
  <li><a href="#">Profil</a></li>
  <li><a href="#">Mesaje</a></li>
</ul>
<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Cont</a></li>
  <li role="presentation"><a href="#">Profil</a></li>
  <li role="presentation"><a href="#">Mesaje</a></li>
</ul>
<ol class="breadcrumb">
  <li><a href="#">Acasa</a></li>
  <li><a href="#">Nivelul 1</a></li>
  <li class="active">Nivelul 2</li>
</ol>

Alerte și notificări

<div class="alert alert-success" role="alert">Mesaj de tip succes</div>
<div class="alert alert-info" role="alert">Mesaj de tip informare</div>
<div class="alert alert-warning" role="alert">Mesaj de tip avertisment</div>
<div class="alert alert-danger" role="alert">Mesaj de tip eroare</div>

Starea implicită

Aceasta este o secțiune implicită

Folosește-o pentru a informa utilizatorul atunci când nu există conținut dinamic.

<div class="well blankslate">
  <h4>Aceasta este o secțiune implicită</h4>
  <p>Folosește-o pentru a informa utilizatorul atunci când nu există conținut dinamic.</p>
</div>

Utilitare

[în curs de actualizare]

Șabloane

Șabloane formular

<form class="form-horizontal">
  <div class="form-group">
    <label for="nume" class="col-sm-2 control-label">Nume</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="nume" placeholder="Ion Popescu">
    </div>
  </div>
  <div class="form-group">
    <label for="email" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-6">
      <input type="email" class="form-control" id="email" placeholder="ion.popescu@gmail.com">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-6">
      <button type="submit" class="btn btn-primary">Salvează</button>
      <button type="submit" class="btn btn-default">Renunță</button>
    </div>
  </div>
</form>

Șabloane antet

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-header-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="https://gov-ithub.github.io/govro-design/img/gov-small.png" alt="Guvernul României"> Guvernul României
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-header-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Acțiune</a></li>
            <li><a href="#">Altă acțiune</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Acțiune separată</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Șabloane subsol

<footer class="footer footer-inverse">
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="col-md-3">
        <p><b>Titlu sectiune</b></p>
        <ul class="list-unstyled">
          <li><a href="#">Primul link</a></li>
          <li><a href="#">Al doilea link</a></li>
          <li><a href="#">Al treilea link</a></li>
        </ul>
      </div>
      <div class="col-md-6">
        <p>Copyright &copy; Guvernul României 2017</p>
      </div>
    </div>
  </div>
</footer>