Documentação do Guia de Estilos

sobre

Este é o guia de estilos do RS.GOV.BR, baseado no Bootstrap 3.2. O objetivo do mesmo é centralizar e documentar a padronização visual de seus elementos e componentes, facilitando a consulta entre os desenvolvedores.

Foundation

cores

Cores principais

#156B66
#eeeeee
#777
#555
#333
#222

Cores complementares

#009932
#5cb85c
#f0ad4e
#d9534f
#5bc0de

grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
.col-md-12

tipografia

Font Stacks

"Montserrat", Helvetica, Arial, sans-serif;

Georgia, "Times New Roman", Times, serif;

Base Styles

address

PROCERGS
Praça dos Açorianos, S/Nº
CEP 90010-340
Fone: (51) 3210.3100
Fax: (51) 3325.3221
Porto Alegre - RS
Nome completo
primeiro-último@procergs.rs.gov.br
Ver fonte Voltar ao topo
Copy Source
<address>
  <strong>PROCERGS</strong><br>
  Praça dos Açorianos, S/Nº<br>
  CEP 90010-340<br>
  <abbr title="Telefone">Fone</abbr>: <a href="tel:+555132103100">(51) 3210.3100</a><br>
  Fax: (51) 3325.3221</a><br>
  Porto Alegre - RS<br>
</address>

<address>
  <strong>Nome completo</strong><br>
  <a href="mailto:#">primeiro-último@procergs.rs.gov.br</a>
</address>

badges



Ver fonte Voltar ao topo
Copy Source
<ul class="nav nav-pills">
     <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
     <li><a href="#">Profile</a></li>
     <li><a href="#">Messages <span class="badge">3</span></a></li>
   </ul>
   <br>
   <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
     <li class="active">
       <a href="#">
         <span class="badge pull-right">42</span>
         Home
       </a>
     </li>
     <li><a href="#">Profile</a></li>
     <li>
       <a href="#">
         <span class="badge pull-right">3</span>
         Messages
       </a>
     </li>
   </ul>
   <br>
   <button class="btn btn-primary" type="button">
     Messages <span class="badge">4</span>
   </button>

blockquote

"O Estado deve estar a serviço do desenvolvimento, e não de si mesmo. Não precisamos de um Estado complexo e genial, mas simples e eficiente”.

Blockquote com atribuição

Quando você pode contar com pessoas muito boas, você não precisa estar sempre em cima delas. Se você espera que elas façam coisas grandes, podes conseguir que façam coisas grandes. A equipe original do Mac me ensinou que os jogadores de primeira divisão gostam de trabalhar juntos, e que eles não gostam que você tolere um trabalho de segunda.

Steve Jobs em Steve Jobs

Alinhado à direita

Ciência é o conhecimento organizado. Sabedoria é a vida organizada.

Immanuel Kant em Crítica da Razão Pura
Ver fonte Voltar ao topo
Copy Source
<blockquote>
  <p>"O Estado deve estar a serviço do desenvolvimento, e não de si mesmo. Não precisamos de um Estado complexo e genial, mas simples e eficiente”.</p>
</blockquote>
<h3>Blockquote com atribuição</h3>
<blockquote>
  <p>Quando você pode contar com pessoas muito boas, você não precisa estar sempre em cima delas. Se você espera que elas façam coisas grandes, podes conseguir que façam coisas grandes. A equipe original do Mac me ensinou que os jogadores de primeira divisão gostam de trabalhar juntos, e que eles não gostam que você tolere um trabalho de segunda.</p>
  <footer>Steve Jobs em <cite title="Steve Jobs">Steve Jobs</cite></footer>
</blockquote>
<h3>Alinhado à direita</h3>
		
<blockquote class="blockquote-reverse">
      <p>Ciência é o conhecimento organizado. Sabedoria é a vida organizada.</p>
      <footer>Immanuel Kant em <cite title="Crítica da Razão Pura">Crítica da Razão Pura</cite></footer>
    </blockquote>

buttons

Ver fonte Voltar ao topo
Copy Source

              <p>
                <button type="button" class="btn btn-default">Default</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-danger">Danger</button>
                <button type="button" class="btn btn-link">Link</button>
              </p>
            </div>

              <p>
                <button type="button" class="btn btn-default disabled">Default</button>
                <button type="button" class="btn btn-primary disabled">Primary</button>
                <button type="button" class="btn btn-success disabled">Success</button>
                <button type="button" class="btn btn-info disabled">Info</button>
                <button type="button" class="btn btn-warning disabled">Warning</button>
                <button type="button" class="btn btn-danger disabled">Danger</button>
                <button type="button" class="btn btn-link disabled">Link</button>
              </p>
<p>
	<button type="button" class="btn btn-primary btn-lg">Large</button>
	<button type="button" class="btn btn-primary disabled">Disabled</button>
	<button type="button" class="btn btn-primary">Default</button>
	<button type="button" class="btn btn-primary btn-sm">Small</button>
	<button type="button" class="btn btn-primary btn-xs">Extra Small</button>
</p>

code

<p>A block of code is wrapped in pre tags</p>

For example, <section> should be wrapped as inline.

To switch directories, type cd followed by the name of the directory.

Ver fonte Voltar ao topo
Copy Source

		
<pre>&lt;p&gt;A block of code is wrapped in pre tags&lt;/p&gt;</pre>
<p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
<p>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.</p>

definition lists

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontal

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Ver fonte Voltar ao topo
Copy Source

		
<dl>
      <dt>Description lists</dt>
      <dd>A description list is perfect for defining terms.</dd>
      <dt>Euismod</dt>
      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
      <dd>Donec id elit non mi porta gravida at eget metus.</dd>
      <dt>Malesuada porta</dt>
      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
    </dl>

	

<h3>Horizontal</h3>
<dl class="dl-horizontal">
      <dt>Description lists</dt>
      <dd>A description list is perfect for defining terms.</dd>
      <dt>Euismod</dt>
      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
      <dd>Donec id elit non mi porta gravida at eget metus.</dd>
      <dt>Malesuada porta</dt>
      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
      <dt>Felis euismod semper eget lacinia</dt>
      <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
    </dl>

form controls

Inline checkboxes

Ver fonte Voltar ao topo
Copy Source
<!--<input type="text" class="form-control" placeholder="Text input">
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">-->


<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled default input here..." disabled>
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">
    <option value="">.input-lg</option>
</select>
<select class="form-control">
    <option value="">Default select</option>
</select>
<select class="form-control input-sm">
    <option value="">.input-sm</option>
</select>


<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>
<div class="row input-groups">
  <div class="col-xs-4">
    <div class="input-group input-group-lg">
          <input type="text" class="form-control" placeholder="Buscar por...">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">Ir!</button>
          </span>
        </div>
  </div>
  <div class="col-xs-4">
    <div class="input-group">
          <input type="text" class="form-control" placeholder="Buscar por...">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">Ir!</button>
          </span>
        </div>
  </div>
  <div class="col-xs-4">
    <div class="input-group input-group-sm">
          <input type="text" class="form-control" placeholder="Buscar por...">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">Ir!</button>
          </span>
        </div>
  </div>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<textarea class="form-control" rows="3"></textarea>
<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<h3>Inline checkboxes</h3>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

headings

Page Header With Small Text

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
Ver fonte Voltar ao topo
Copy Source
<h1 class="page-header">Page Header <small>With Small Text</small></h1>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

images

Imagens Horizontais tamanho padrão Matriz v.2

Imagens Verticais tamanho padrão Matriz v.2

Formato TH

Classes auxiliares: img-rounded, img-circle, img-thumbnail e img-responsive

Ver fonte Voltar ao topo
Copy Source
			<h3>Imagens Horizontais tamanho padrão Matriz v.2</h3>
             <p><img src="https://placehold.co/336x189"></p>
             <p><img src="https://placehold.co/608x342"></p>
             <p><img src="https://placehold.co/1140x641"></p>
            <h3>Imagens Verticais tamanho padrão Matriz v.2</h3>
             <p>
             	<p><img src="https://placehold.co/345x460"></p>
             	<p><img src="https://placehold.co/600x800"></p>
             	<p><img src="https://placehold.co/801x1068"></p>
            <h3>Formato TH</h3>
             <p>
             	<img src="https://placehold.co/180x180">
             </p>
            <h3>Classes auxiliares: img-rounded, img-circle, img-thumbnail e img-responsive</h3>
            <p>
             	<img src="https://placehold.co/336x189" class="img-rounded">
             	<img src="https://placehold.co/120x120" class="img-circle">
             	<img src="https://placehold.co/336x189" class="img-thumbnail">
             </p>
             <p>
             	<img src="https://placehold.co/1200x300" class="img-responsive"></p>

labels

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Default Primary Success Info Warning Danger

Com link

Default Primary Success Info Warning Danger
Ver fonte Voltar ao topo
Copy Source
<h1>Example heading <span class="label label-default">New</span></h1>
    <h2>Example heading <span class="label label-default">New</span></h2>
    <h3>Example heading <span class="label label-default">New</span></h3>
    <h4>Example heading <span class="label label-default">New</span></h4>
    <h5>Example heading <span class="label label-default">New</span></h5>
    <h6>Example heading <span class="label label-default">New</span></h6>
    <span class="label label-default">Default</span>
    <span class="label label-primary">Primary</span>
    <span class="label label-success">Success</span>
    <span class="label label-info">Info</span>
    <span class="label label-warning">Warning</span>
    <span class="label label-danger">Danger</span>
    <h3>Com link</h3>
    <a class="label label-default" href="javascript:void(0)">Default</a>
    <a class="label label-primary" href="javascript:void(0)">Primary</a>
    <a class="label label-success" href="javascript:void(0)">Success</a>
    <a class="label label-info" href="javascript:void(0)">Info</a>
    <a class="label label-warning" href="javascript:void(0)">Warning</a>
    <a class="label label-danger" href="javascript:void(0)">Danger</a>

lists

Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • 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

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • 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

Inline

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
Ver fonte Voltar ao topo
Copy Source
<h3>Unordered</h3>
		
<ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Integer molestie lorem at massa</li>
      <li>Facilisis in pretium nisl aliquet</li>
      <li>Nulla volutpat aliquam velit
        <ul>
          <li>Phasellus iaculis neque</li>
          <li>Purus sodales ultricies</li>
          <li>Vestibulum laoreet porttitor sem</li>
          <li>Ac tristique libero volutpat at</li>
        </ul>
      </li>
      <li>Faucibus porta lacus fringilla vel</li>
      <li>Aenean sit amet erat nunc</li>
      <li>Eget porttitor lorem</li>
    </ul>
    <h3>Ordered</h3>
    <ol>
          <li>Lorem ipsum dolor sit amet</li>
          <li>Consectetur adipiscing elit</li>
          <li>Integer molestie lorem at massa</li>
          <li>Facilisis in pretium nisl aliquet</li>
          <li>Nulla volutpat aliquam velit</li>
          <li>Faucibus porta lacus fringilla vel</li>
          <li>Aenean sit amet erat nunc</li>
          <li>Eget porttitor lorem</li>
        </ol>
        <h3>Unstyled</h3>
        
        		
        <ul class="list-unstyled">
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetur adipiscing elit</li>
              <li>Integer molestie lorem at massa</li>
              <li>Facilisis in pretium nisl aliquet</li>
              <li>Nulla volutpat aliquam velit
                <ul>
                  <li>Phasellus iaculis neque</li>
                  <li>Purus sodales ultricies</li>
                  <li>Vestibulum laoreet porttitor sem</li>
                  <li>Ac tristique libero volutpat at</li>
                </ul>
              </li>
              <li>Faucibus porta lacus fringilla vel</li>
              <li>Aenean sit amet erat nunc</li>
              <li>Eget porttitor lorem</li>
            </ul>
        
        	
        
        
       <h3>Inline</h3>
       <ul class="list-inline">
             <li>Lorem ipsum</li>
             <li>Phasellus iaculis</li>
             <li>Nulla volutpat</li>
           </ul>

marcadores

Itens simples inline

Texto de marcador

Inline

Multilinhas

Orientações para gestores de serviços digitais do RS

Ver fonte Voltar ao topo
Copy Source
<h3>Itens simples inline</h3>
<p><a class="marcador-inline" href="#">Texto de marcador</a></p>	
<h3>Inline</h3>
<ul class="marcador-lista list-unstyled">
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Phasellus iaculis</a></li>
  <li><a href="#">Nulla volutpat</a></li>
</ul>
<h3>Multilinhas</h3>
<div class="marcador-multi">
    <p>Orientações para gestores de serviços digitais do RS</p>
</div>

progress bars

Basic

60% Complete
60%

Contextual Alternatives

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

Striped

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Animated

45% Complete

Stacked

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Ver fonte Voltar ao topo
Copy Source
<h3>Basic</h3>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

<h3>Contextual Alternatives</h3>
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete</span>
  </div>
</div>
<h3>Striped</h3>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>
<h3>Animated</h3>
<div class="progress progress-striped active">
  <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>
<h3>Stacked</h3>
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

tables

# First Name Tables
1 Michael Are formatted like this
2 Lucille Do you like them?
3 Success
4 Danger
5 Warning
6 Active

Striped & condensed table with alternating backgrounds

# First Name Tables
1 Michael This one is bordered and condensed
2 Lucille Do you still like it?
Ver fonte Voltar ao topo
Copy Source

<table class="table table-hover">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Tables</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Michael</td>
                  <td>Are formatted like this</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Lucille</td>
                  <td>Do you like them?</td>
                </tr>
                <tr class="success">
                  <td>3</td>
                  <td>Success</td>
                  <td></td>
                </tr>
                <tr class="danger">
                  <td>4</td>
                  <td>Danger</td>
                  <td></td>
                </tr>
                <tr class="warning">
                  <td>5</td>
                  <td>Warning</td>
                  <td></td>
                </tr>
                <tr class="active">
                  <td>6</td>
                  <td>Active</td>
                  <td></td>
                </tr>
              </tbody>
            </table>
            <h3>Striped &amp; condensed table with alternating backgrounds</h3>
            <table class="table table-striped table-bordered table-condensed">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Tables</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Michael</td>
                  <td>This one is bordered and condensed</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Lucille</td>
                  <td>Do you still like it?</td>
                </tr>
              </tbody>
            </table>

text elements

Exemplo de corpo de texto (h2)

Parágrafo Lead: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

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.

Esta linha de texto é para ser tratada como fine print.

O trecho de texto a seguir está renderizado como texto em negrito.

O trecho de texto a seguir está renderizado como texto italicizado.

Uma abreviação de atributo da palavra é attr.

Texto alinhado à esquerda. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta justo nec ante varius, eget eleifend lacus pharetra. Curabitur eget leo velit.

Texto alinhado ao centro. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta justo nec ante varius, eget eleifend lacus pharetra. Curabitur eget leo velit.

Texto alinhado à direita. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta justo nec ante varius, eget eleifend lacus pharetra. Curabitur eget leo velit.

Texto justificado. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta justo nec ante varius, eget eleifend lacus pharetra. Curabitur eget leo velit.

Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.

Warning: Etiam porta sem malesuada magna mollis euismod.

Danger: Donec ullamcorper nulla non metus auctor fringilla.

Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Info: Maecenas sed diam eget risus varius blandit sit amet non magna.

Ver fonte Voltar ao topo
Copy Source
<div class="artigo__texto">
              <h2>Exemplo de corpo de texto (h2)</h2>
              
              		
              <p class="lead">Parágrafo Lead: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
              
              	
              
              
              <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
              <p><small>Esta linha de texto é para ser tratada como fine print.</small></p>
              <p>O trecho de texto a seguir está <strong>renderizado como texto em negrito</strong>.</p>
              <p>O trecho de texto a seguir está <em>renderizado como texto italicizado</em>.</p>
              <p>Uma abreviação de atributo da palavra é <abbr title="attribute">attr</abbr>.</p>
              <p class="text-left">Texto alinhado à esquerda. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta justo nec ante varius, eget eleifend lacus pharetra. Curabitur eget leo velit.</p>
              <p class="text-center">Texto alinhado ao centro. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta justo nec ante varius, eget eleifend lacus pharetra. Curabitur eget leo velit.</p>
              <p class="text-right">Texto alinhado à direita. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta justo nec ante varius, eget eleifend lacus pharetra. Curabitur eget leo velit.</p>
              <p class="text-justify">Texto justificado. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta justo nec ante varius, eget eleifend lacus pharetra. Curabitur eget leo velit.</p>
     
                            <p class="text-muted">Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
                            <p class="text-primary">Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                            <p class="text-warning">Warning: Etiam porta sem malesuada magna mollis euismod.</p>
                            <p class="text-danger">Danger: Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p class="text-success">Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                            <p class="text-info">Info: Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </div>

well

Look, I'm in a well!
Small Well
Large Padding Well
Ver fonte Voltar ao topo
Copy Source
<div class="well">
      Look, I'm in a well!
    </div>
    <div class="well well-small">Small Well
             </div>

             <div class="well well-large">Large Padding Well

Patterns - Padrões de design e marcação únicos para o seu sítio.

alerts

Mensagem de aviso! Lorem ipsum dolor sit amet, consectetur texto link adipisicing elit.
Mensagem de erro! Numquam quos fuga quam suscipit texto link sapiente perferendis magnam.
Mensagem de sucesso! Totam officiis dolorum voluptatibus texto link maxime molestiae iste.
Mensagem informativa! Consequatur facere deleniti cumque texto link ducimus maiores nemo.
Ver fonte Voltar ao topo
Copy Source
<!-- Sample pattern, your site's patterns will be different -->
<div class="alert alert-warning">
  <strong>Mensagem de aviso!</strong> Lorem ipsum dolor sit amet, consectetur <a class="alert-link" href="#self">texto link</a> adipisicing elit. 
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <strong>Aviso!</strong> Better check yourself, you're not looking too good.
</div>

<div class="alert alert-danger">
  <strong>Mensagem de erro!</strong> Numquam quos fuga quam suscipit <a class="alert-link" href="#self">texto link</a> sapiente perferendis magnam. 
</div>

<div class="alert alert-success">
  <strong>Mensagem de sucesso!</strong> Totam officiis dolorum voluptatibus <a class="alert-link" href="#self">texto link</a> maxime molestiae iste.
</div>

<div class="alert alert-info">
  <strong>Mensagem informativa!</strong> Consequatur facere deleniti cumque <a class="alert-link" href="#self">texto link</a> ducimus maiores nemo.
</div>

breadcrumbs

  2. Seção
  3. Título da página
Ver fonte Voltar ao topo
Copy Source
<ol class="breadcrumb">
  <li><a href="#"><span class="fa fa-home"></span></a></li>
  <li><a href="#">Seção</a></li>
  <li class="active">Título da página</li>
</ol>

buttons advanced

Button Groups

With Dropdown

Vertical

Justified

Dropdowns

    ...
    ...
    ...
Ver fonte Voltar ao topo
Copy Source
<h3>Button Groups</h3>

<!--sizes-->

<div class="col-md-12">
<div class="btn-toolbar" role="toolbar">
      <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
      </div>
    </div>
    </div>
    <div class="col-md-12">
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
      </div>
    </div>
    </div>
    <div class="col-md-12">
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
      </div>
    </div>
    </div>
    <div class="col-md-12">
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
      </div>
    </div>
    </div>
    <!--with dropdown-->
    <h3>With Dropdown</h3>
    <div class="col-md-12">
    <div class="btn-group">
      <button type="button" class="btn btn-default">1</button>
      <button type="button" class="btn btn-default">2</button>
    
      <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>
    </div>
    <!--vertical-->
    <h3>Vertical</h3>
    <div class="col-md-12">
    <div class="btn-group-vertical">
         <button type="button" class="btn btn-default">Button</button>
         <button type="button" class="btn btn-default">Button</button>
         <div class="btn-group">
           <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
             Dropdown
             <span class="caret"></span>
           </button>
           <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
             <li><a href="#">Dropdown link</a></li>
             <li><a href="#">Dropdown link</a></li>
           </ul>
         </div>
         <button type="button" class="btn btn-default">Button</button>
         </div>
         </div>
         <div class="col-md-12">
         <!--justified-->
         <h3>Justified</h3>
         <div class="btn-group btn-group-justified">
           <div class="btn-group">
             <button type="button" class="btn btn-default">Left</button>
           </div>
           <div class="btn-group">
             <button type="button" class="btn btn-default">Middle</button>
           </div>
           <div class="btn-group">
             <button type="button" class="btn btn-default">Right</button>
           </div>
         </div>
        
         <h3>Dropdowns</h3>
         <div class="col-md-12">
         <div class="btn-group">
               <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>
                 <li><a href="#">Something else here</a></li>
                 <li class="divider"></li>
                 <li><a href="#">Separated link</a></li>
               </ul>
             </div><!-- /btn-group -->
             <div class="btn-group">
               <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>
                 <li><a href="#">Something else here</a></li>
                 <li class="divider"></li>
                 <li><a href="#">Separated link</a></li>
               </ul>
             </div><!-- /btn-group -->
             <div class="btn-group">
               <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>
                 <li><a href="#">Something else here</a></li>
                 <li class="divider"></li>
                 <li><a href="#">Separated link</a></li>
               </ul>
             </div><!-- /btn-group -->
             <div class="btn-group">
               <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>
                 <li><a href="#">Something else here</a></li>
                 <li class="divider"></li>
                 <li><a href="#">Separated link</a></li>
               </ul>
             </div><!-- /btn-group -->
             <div class="btn-group">
               <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>
                 <li><a href="#">Something else here</a></li>
                 <li class="divider"></li>
                 <li><a href="#">Separated link</a></li>
               </ul>
             </div><!-- /btn-group -->
             <div class="btn-group">
               <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>
                 <li><a href="#">Something else here</a></li>
                 <li class="divider"></li>
                 <li><a href="#">Separated link</a></li>
               </ul>
             </div><!-- /btn-group -->
             </div>
             <div class="col-md-12">
          
             <!--split-->
             <div class="btn-group">
                   <button type="button" class="btn btn-default">Default</button>
                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                     <span class="caret"></span>
                     <span class="sr-only">Toggle Dropdown</span>
                   </button>
                   <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Action</a></li>
                     <li><a href="#">Another action</a></li>
                     <li><a href="#">Something else here</a></li>
                     <li class="divider"></li>
                     <li><a href="#">Separated link</a></li>
                   </ul>
                 </div><!-- /btn-group -->
                 <div class="btn-group">
                   <button type="button" class="btn btn-primary">Primary</button>
                   <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                     <span class="caret"></span>
                     <span class="sr-only">Toggle Dropdown</span>
                   </button>
                   <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Action</a></li>
                     <li><a href="#">Another action</a></li>
                     <li><a href="#">Something else here</a></li>
                     <li class="divider"></li>
                     <li><a href="#">Separated link</a></li>
                   </ul>
                 </div><!-- /btn-group -->
                 <div class="btn-group">
                   <button type="button" class="btn btn-success">Success</button>
                   <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                     <span class="caret"></span>
                     <span class="sr-only">Toggle Dropdown</span>
                   </button>
                   <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Action</a></li>
                     <li><a href="#">Another action</a></li>
                     <li><a href="#">Something else here</a></li>
                     <li class="divider"></li>
                     <li><a href="#">Separated link</a></li>
                   </ul>
                 </div><!-- /btn-group -->
                 <div class="btn-group">
                   <button type="button" class="btn btn-info">Info</button>
                   <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                     <span class="caret"></span>
                     <span class="sr-only">Toggle Dropdown</span>
                   </button>
                   <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Action</a></li>
                     <li><a href="#">Another action</a></li>
                     <li><a href="#">Something else here</a></li>
                     <li class="divider"></li>
                     <li><a href="#">Separated link</a></li>
                   </ul>
                 </div><!-- /btn-group -->
                 <div class="btn-group">
                   <button type="button" class="btn btn-warning">Warning</button>
                   <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                     <span class="caret"></span>
                     <span class="sr-only">Toggle Dropdown</span>
                   </button>
                   <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Action</a></li>
                     <li><a href="#">Another action</a></li>
                     <li><a href="#">Something else here</a></li>
                     <li class="divider"></li>
                     <li><a href="#">Separated link</a></li>
                   </ul>
                 </div><!-- /btn-group -->
                 <div class="btn-group">
                   <button type="button" class="btn btn-danger">Danger</button>
                   <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                     <span class="caret"></span>
                     <span class="sr-only">Toggle Dropdown</span>
                   </button>
                   <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Action</a></li>
                     <li><a href="#">Another action</a></li>
                     <li><a href="#">Something else here</a></li>
                     <li class="divider"></li>
                     <li><a href="#">Separated link</a></li>
                   </ul>
                 </div><!-- /btn-group -->
                 </div>
                 <div class="col-md-12">
                 <!-- Large button group -->
                 <div class="btn-group">
                   <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
                     Large button <span class="caret"></span>
                   </button>
                   <ul class="dropdown-menu">
                     ...
                   </ul>
                 </div>
                 
                 <!-- Small button group -->
                 <div class="btn-group">
                   <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
                     Small button <span class="caret"></span>
                   </button>
                   <ul class="dropdown-menu">
                     ...
                   </ul>
                 </div>
                 
                 <!-- Extra small button group -->
                 <div class="btn-group">
                   <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
                     Extra small button <span class="caret"></span>
                   </button>
                   <ul class="dropdown-menu">
                     ...
                   </ul>
                 </div>
                 </div>

dropdowns

Ver fonte Voltar ao topo
Copy Source
<div class="dropdown">
  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
          <li role="presentation" class="dropdown-header">Dropdown header</li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
          <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled action</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation" class="dropdown-header">Dropdown header</li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
</div>

<div class="dropdown">
              <!-- Link or button to toggle dropdown -->
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static;">
                <li class="dropdown-header">Dropdown header</li>
                <li class="disabled">
                  <a tabindex="-1" href="#">Action</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">Another action</a>
                </li>
                <li class="active">
                  <a tabindex="-1" href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a tabindex="-1" href="#">Separated link</a>
                </li>
              </ul>
            </div>

forms

Legenda

A senha deve possuir entre 5 e 8 caracteres misturando entre letras e números.

Exemplo de ajuda em nível de bloco aqui.

Ver fonte Voltar ao topo
Copy Source
<form>
         <fieldset>
           <legend>Legenda</legend>
           <div class="form-group">
             <label for="exampleInputEmail">Endereço eletrônico</label>
             <input type="text" class="form-control" id="exampleInputEmail" placeholder="Digite seu email">
           </div>
           <div class="form-group">
             <label for="exampleInputPassword">Senha</label>
             <input autocomplete="off" type="password" class="form-control" id="exampleInputPassword" placeholder="Senha">
             <p class="help-block">A senha deve possuir entre 5 e 8 caracteres misturando entre letras e números.</p>
           </div>
           <div class="form-group">
             <label for="exampleInputFile">Envio de arquivo</label>
             <input type="file" id="exampleInputFile">
             <p class="help-block">Exemplo de ajuda em nível de bloco aqui.</p>
           </div>
           <div class="checkbox">
             <label>
               <input type="checkbox">Check me out</label>
           </div>
           <button type="submit" class="btn btn-default">Enviar</button>
         </fieldset>
       </form>
       <hr>
       <form class="form-inline">
         <input type="text" class="form-control" placeholder="Email" style="width: 200px;">
         <input autocomplete="off" type="password" class="form-control" placeholder="Senha" style="width: 200px;">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search for...">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
          </span>
        </div>
         <div class="checkbox">
           <label>
             <input type="checkbox">Lembrar-me</label>
         </div>
         <button type="submit" class="btn btn-default">Entrar</button>
       </form>
       <hr>
       <form class="form-horizontal">
         <div class="form-group">
           <label for="inputEmail" class="col-lg-2 control-label">Email</label>
           <div class="col-lg-10">
             <input type="text" class="form-control" id="inputEmail" placeholder="Email">
           </div>
         </div>
         <div class="form-group has-warning">
           <label for="inputEmail" class="col-lg-2 control-label">Email</label>
           <div class="col-lg-10">
             <input type="text" class="form-control" id="inputEmail" placeholder="Email">
           </div>
         </div>
         <div class="form-group has-error">
           <label for="inputEmail" class="col-lg-2 control-label">Email</label>
           <div class="col-lg-10">
             <input type="text" class="form-control" id="inputEmail" placeholder="Email">
           </div>
         </div>
         <div class="form-group has-success">
           <label for="inputEmail" class="col-lg-2 control-label">Email</label>
           <div class="col-lg-10">
             <input type="text" class="form-control" id="inputEmail" placeholder="Email">
           </div>
         </div>
         <div class="form-group">
           <label for="inputPassword" class="col-lg-2 control-label">Senha</label>
           <div class="col-lg-10">
             <input autocomplete="off" type="password" class="form-control" id="inputPassword" placeholder="Password">
             <div class="checkbox">
               <label>
                 <input type="checkbox">Lembrar-me</label>
             </div>
             <button type="submit" class="btn btn-default">Entrar</button>
           </div>
         </div>
       </form>

hero

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Ver fonte Voltar ao topo
Copy Source
<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

list groups

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus

Com links

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Contextual classes

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Conteúdo customizado

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Ver fonte Voltar ao topo
Copy Source
<ul class="list-group">
      <li class="list-group-item">
        <span class="badge">14</span>
        Cras justo odio
      </li>
      <li class="list-group-item">
        <span class="badge">2</span>
        Dapibus ac facilisis in
      </li>
      <li class="list-group-item">
        <span class="badge">1</span>
        Morbi leo risus
      </li>
    </ul>
    
    <h3>Com links</h3>
    <div class="list-group">
      <a href="#" class="list-group-item active">
        Cras justo odio
      </a>
      <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item">Morbi leo risus</a>
      <a href="#" class="list-group-item">Porta ac consectetur ac</a>
      <a href="#" class="list-group-item">Vestibulum at eros</a>
    </div>
    <h3>Contextual classes</h3>
    <ul class="list-group">
      <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
      <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
      <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
    </ul>
    <h3>Conteúdo customizado</h3>
    <div class="list-group">
        <a class="list-group-item active" href="#">
            <h4 class="list-group-item-heading">List group item heading</h4>
            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        </a>
        <a class="list-group-item" href="#">
            <h4 class="list-group-item-heading">List group item heading</h4>
            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        </a>
        <a class="list-group-item" href="#">
            <h4 class="list-group-item-heading">List group item heading</h4>
            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        </a>
    </div>

media object

Default

media-object

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
media-object

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
media-object

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media List

  • media-object

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    media-object

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    media-object

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    media-object

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • media-object

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Ver fonte Voltar ao topo
Copy Source
<h3>Default</h3>
<div class="media">
      <a class="pull-left" href="#">
         <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
    <div class="media">
      <a class="pull-left" href="#">
         <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
      </a>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        <div class="media">
          <a class="pull-left" href="#">
            <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
          </a>
          <div class="media-body">
            <h4 class="media-heading">Nested media heading</h4>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </div>
        </div>
      </div>
    </div>
<h3>Media List</h3>
<ul class="media-list">
      <li class="media">
        <a class="pull-left" href="#">
          <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
        </a>
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>
          <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
          
          <div class="media">
            <a class="pull-left" href="#">
              <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
            </a>
            <div class="media-body">
              <h4 class="media-heading">Nested media heading</h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
         
              <div class="media">
                <a class="pull-left" href="#">
                  <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
                </a>
                <div class="media-body">
                  <h4 class="media-heading">Nested media heading</h4>
                  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                </div>
              </div>
            </div>
          </div>
     
          <div class="media">
            <a class="pull-left" href="#">
              <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
            </a>
            <div class="media-body">
              <h4 class="media-heading">Nested media heading</h4>
              Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
            </div>
          </div>
        </div>
      </li>
      <li class="media">
        <a class="pull-right" href="#">
          <img class="media-object" src="http://www.placehold.it/64x64" alt="media-object">
        </a>
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
        </div>
      </li>
    </ul>

navbar

Ver fonte Voltar ao topo
Copy Source
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

navs

Tabs

Justified Tabs

Pills

Stacked Pills

Tabs with dropdowns

Ver fonte Voltar ao topo
Copy Source
<h3>Tabs</h3>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
  <li class="disabled"><a href="#">Disabled</a></li>
</ul>
<h4>Justified Tabs</h4>
<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

<h3>Pills</h3>
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

<h4>Stacked Pills</h4>
<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>
<h3>Tabs with dropdowns</h3>

    <ul class="nav nav-tabs">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Help</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>

page header

Example page header Subtext for header

Ver fonte Voltar ao topo
Copy Source
<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

pager

Ver fonte Voltar ao topo
Copy Source
<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>
<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

pagination

Ver fonte Voltar ao topo
Copy Source
<ul class="pagination pagination-lg">
    <li> <a href="#">Prev</a> 
    </li>
    <li class="active"> <a href="#">1</a> 
    </li>
    <li> <a href="#">2</a> 
    </li>
    <li> <a href="#">3</a> 
    </li>
    <li> <a href="#">4</a> 
    </li>
    <li> <a href="#">Next</a> 
    </li>
</ul>

<ul class="pagination">
    <li> <a href="#">Prev</a> 
    </li>
    <li class="active"> <a href="#">1</a> 
    </li>
    <li> <a href="#">2</a> 
    </li>
    <li> <a href="#">3</a> 
    </li>
    <li> <a href="#">4</a> 
    </li>
    <li> <a href="#">Next</a> 
    </li>
</ul>

<ul class="pagination pagination-sm">
    <li> <a href="#">Prev</a> 
    </li>
    <li class="active"> <a href="#">1</a> 
    </li>
    <li> <a href="#">2</a> 
    </li>
    <li> <a href="#">3</a> 
    </li>
    <li> <a href="#">4</a> 
    </li>
    <li> <a href="#">Next</a> 
    </li>
</ul>

panels

Panel title

Panel content
Panel footer

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title (Home)

Panel content
Panel footer
Ver fonte Voltar ao topo
Copy Source
<div class="row">
    <div class="col-sm-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
            <div class="panel-footer">Panel footer</div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-danger">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>    
</div>
<div class="row">
    <div class="col-sm-4">
        <div class="panel panel-default panel--matriz">
            <div class="panel-heading">
                <h2 class="panel-title">Panel title (Home)</h2>
            </div>
            <div class="panel-body">
                Panel content
            </div>
            <div class="panel-footer">
                <a title="seguir @perfil" href="#">Panel footer</a>
            </div>
      </div>
    </div>
</div>

thumbnails

100%x180
100%x180
100%x180
100%x180
Ver fonte Voltar ao topo
Copy Source
<div class="row">
     <div class="col-xs-6 col-md-3">
       <a href="#" class="thumbnail">
         <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
       </a>
     </div>
     <div class="col-xs-6 col-md-3">
       <a href="#" class="thumbnail">
         <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
       </a>
     </div>
     <div class="col-xs-6 col-md-3">
       <a href="#" class="thumbnail">
         <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
       </a>
     </div>
     <div class="col-xs-6 col-md-3">
       <a href="#" class="thumbnail">
         <img data-src="holder.js/100%x180" alt="100%x180" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4=" style="height: 180px; width: 100%; display: block;">
       </a>
     </div>
   </div>

Componentes - Componentes padronizados do Matriz 2.0.

Modal

Ver fonte Voltar ao topo
Copy Source
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Abrir modal de demonstração
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Título do Modal</h4>
      </div>
      <div class="modal-body">
          <h4>Text in a modal</h4>
          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
          <h4>Tooltips in a modal</h4>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <hr>

          <h4>Overflowing text to show scroll behavior</h4>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Ver fonte Voltar ao topo
Copy Source
<div class="artigo__texto">
<div class="panel-group accordion" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">
          Item de Grupo Retrátil #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">
         Item de Grupo Retrátil #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed">
          Item de Grupo Retrátil #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
</div>

arquivos anexos

Arquivos anexos

Ver fonte Voltar ao topo
Copy Source
<div class="artigo">
<div class="panel panel-default panel--matriz">
    <div class="panel-heading">
        <h3 class="panel-title">Arquivos anexos</h3>
    </div>
    <div class="panel-body">
        <ul class="list-group lista-texto">
            <li class="list-group-item"><a href="#"><span class="glyphicon glyphicon-paperclip"></span> Título do arquivo anexo <small>(.odt 150Kb)</small></a><br>
                <small>Descrição do arquivo anexo logo abaixo para entendimento</small></li>
        </ul>
    </div>    
</div>
</div>

busca voz

Ver fonte Voltar ao topo
Copy Source
<div class="center-block">
    <button type="button" data-toggle="modal" data-target="#buscaVoz" class="btn btn-default" aria-label="Pesquisar por voz" title="Pesquisar por voz" alt="Pesquisar por voz">
        <span class="fa fa-microphone"></span><span class="sr-only">Pesquisar por voz</span>
    </button>
</div>
<!-- Modal -->
<div class="modal fade" id="buscaVoz" tabindex="-1" role="dialog" aria-labelledby="buscaVoz" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fechar</span></button>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-sm-6">
                    <div class="box-busca-voz">
                        <h2>Ouvindo...</h2>
                    </div>                    
                </div>
                <div class="col-sm-6">
                    <div class="box-busca-voz"><dotlottie-wc src="../images/outros/ondas-sonoras.lottie" background="transparent" speed="1" style="width: 200px; height: 150px" autoplay loop></dotlottie-wc></div>
                </div>
                <div class="col-xs-12">
                    <button type="button" class="btn btn-link center-block">
                        <i class="fa fa-3x fa-stop-circle"></i>
                    </button>
                </div>
            </div>                                    
          </div>
      </div>
    </div>
  </div>
  <script type="module" src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"></script>

notificacoes

Notificações

Folha do Executivo será paga em dia amanhã, 26/02
25/02/2021
O contracheque de fevereiro está disponível para consulta no Portal RHE e no seu APP Servidor RS
24/02/2021
Folha do funcionalismo será paga em dia até abril, anuncia o governo do RS
28/01/2021
Mais notificações Ligado ao sistema AviseMe
Ver fonte Voltar ao topo
Copy Source
<div class="panel panel--painel notificacoes">
    <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-bell" aria-hidden="true"></i> Notificações</h3>
    </div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table">
                <tbody>
                    <tr>
                        <td>
                            <a class="naolido" role="button" data-toggle="collapse" href="#collapse342479" aria-expanded="false" aria-controls="collapse342479">
                            Folha de fevereiro
                            </a>
                            <div id="collapse342479" class="notificacoes__texto collapse">
                                Folha do Executivo será paga em dia amanhã, 26/02
                            </div>
                        </td>
                        <td scope="row" class="table_date">
                            25/02/2021
                        </td>
                        <td class="table_exclusao"><button data-toggle="modal" data-target="#excluiNotificacao" class="btn btn-link btn-sm"><span class="fa fa-trash"></span> Excluir</button></td>                              
                    </tr>
                    <tr>                                
                        <td>
                            <a class="" role="button" data-toggle="collapse" href="#collapse331342" aria-expanded="false" aria-controls="collapse342479">
                            Contracheque fevereiro 2021
                            </a>
                            <div id="collapse331342" class="notificacoes__texto collapse">
                                O contracheque de fevereiro está disponível para consulta no Portal RHE e no seu APP Servidor RS
                            </div>
                        </td>
                        <td scope="row" class="table_date">
                            24/02/2021
                        </td>
                        <td class="table_exclusao"><button data-toggle="modal" data-target="#excluiNotificacao" class="btn btn-link btn-sm"><span class="fa fa-trash"></span> Excluir</button></td>
                    </tr>
                    <tr>                                
                        <td>
                            <a class="naolido" role="button" data-toggle="collapse" href="#collapse305411" aria-expanded="false" aria-controls="collapse342479">
                            Salários do executivo em dia
                            </a>
                            <div id="collapse305411" class="notificacoes__texto collapse">
                                Folha do funcionalismo será paga em dia até abril, anuncia o governo do RS
                            </div>
                        </td>
                        <td scope="row" class="table_date">
                            28/01/2021
                        </td>
                        <td class="table_exclusao"><button data-toggle="modal" data-target="#excluiNotificacao" class="btn btn-link btn-sm"><span class="fa fa-trash"></span> Excluir</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="panel-footer">
        <a href="/painel/avisos" type="button" class="btn btn-primary">
            Mais notificações
        </a>
        <span class="sistema">
            <small> Ligado ao sistema
                <a href="https://aviseme.rs.gov.br" target="_new">
                    AviseMe
                </a>
            </small>
        </span>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="excluiNotificacao" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title" id="myModalLabel">Exclusão de notificação</h4>
        </div>
        <div class="modal-body">
            <p>Confirma a exclusão da notificação?</p>
          </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-primary">Excluir</button>
        </div>
      </div>
    </div>
  </div>

solicitacoes

Minhas solicitações

605635/0064
Concluída sem Resposta 		Atualizado em
22/12/2020 		Criada em
24/06/2020 		Canal
Ouvidoria DETRAN
730445/0064
Concluída com Resposta 		Atualizado em
22/12/2020 		Criada em
18/12/2020 		Canal
Fale Conosco - Site DETRAN
Todas as solicitações Ligado ao sistema Central da Informação
Ver fonte Voltar ao topo
Copy Source
<div class="panel panel--painel solicitacoes">
    <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-check" aria-hidden="true"></i> Minhas solicitações</h3>
    </div>
    <div class="panel-body">
        <div class="table-responsive">
<table class="table table-borderless">
  <tbody>
      <tr>
          <th scope="row" class="solicitacao__protocolo">
              <a href="/painel/solicitacao/376096F7-0DB3-4FDE-8F3D-192D92B5EF81">
                  605635/0064
              </a><br>
              <span class="solicitacao__situacao">Concluída sem Resposta</span>
          </th>
          <td><span class="solicitacao__label">Atualizado em</span><br>
              22/12/2020
          </td>
          <td><span class="solicitacao__label">Criada em</span><br>
              24/06/2020
          </td>                                
          <td><span class="solicitacao__label">Canal</span><br>
              Ouvidoria DETRAN
          </td>
      </tr>
      <tr>
          <th scope="row" class="solicitacao__protocolo">
              <a href="/painel/solicitacao/059A229A-B958-4AF1-8795-6D504772C1D4">
                  730445/0064
              </a><br>
              <span class="solicitacao__situacao">Concluída com Resposta</span>
          </th>
          <td><span class="solicitacao__label">Atualizado em</span><br>
              22/12/2020
          </td>
          <td><span class="solicitacao__label">Criada em</span><br>
              18/12/2020
          </td>                                
          <td><span class="solicitacao__label">Canal</span><br>
              Fale Conosco - Site DETRAN
          </td>
      </tr>
  </tbody>
</table>
</div>
<div class="panel-footer">
    <a href="/painel/solicitacoes" type="button" class="btn btn-primary">Todas as solicitações</a>
    <span class="sistema">
        <small> Ligado ao sistema
            <a href="https://www.centraldocidadao.rs.gov.br/inicial" target="_new">
                Central da Informação
            </a>
        </small>
    </span>
</div>