Dashboard de entrada - minimal ou simple dahsboard para boostrap 5


Dashboard de entrada - minimal ou simple dahsboard para #boostrap 5 é uma simples estrutura que demonstra como é possível montrar simples #dashboards responsivos com o bootstrap. 

Este é apenas um modelo de entrada com dados de testes para telas inciais com #tabelas gráficos ou #resumos  

Outros componentes podem ser adicionados sempre que forem necessários e os tamanhos das colunas podem ser ajustados com o auxílio de javascript ou css media query

 

<div class="container-full">
	<div class="row g-0">
 
 	<div class="col-12 col-sm-9">
 	<div class="row h-100 g-0">
 	<div class="col-12 col-sm-6 p-1">
 <div class="bg-info h-100 rounded p-1"> col-3 <br> Resumo do mês</div>
 </div>
 <div class="col-12 col-sm-6 p-1">
 <div class="bg-info h-100 rounded p-1">
 col-9 1 <br> Vendas mês passado R$ 12.313,000</div>
 </div>
 
 <div class="col-12 p-1">
 <div class="bg-info h-100 rounded p-1"> col-9 2 <br> Eventos pendentes...</div>
 </div>
 
 <div class="col-12 p-1">
 <div class="bg-info h-100 rounded p-1 px-3">
 col-9 3
 <table class="table table-dark table-striped-columns">
 <thead>
 <tr>
 <th scope="col">#</th>
 <th scope="col">Primeiro</th>
 <th scope="col">Último</th>
 <th scope="col">Lidar com</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th scope="row">1</th>
 <td>Marca</td>
 <td>Otto</td>
 <td>@mdo</td>
 </tr>
 <tr>
 <th scope="row">2</th>
 <td>Jacó</td>
 <td>Thornton</td>
 <td>@gordo</td>
 </tr>
 <tr>
 <th scope="row">3</th>
 <td colspan="2">Larry o pássaro</td>
 <td>@Twitter</td>
 </tr>
 </tbody>
 </table>
 <hr>
 </div>
 </div>
 
 </div>
 </div>
 
 <div class="col-12 col-sm-3 p-1">
 	<div class="bg-warning h-100 rounded p-1">
 <strong>Melhores vendedores</strong>
 <br>
 Ana - 100%
 <br>
 Exemplo - 85%
 <br>
 Ana - 100%
 <br>
 Ana - 100%
 <br>
 Ana - 100%
 <br>
 Ana - 100%
 <br>
 Ana - 100%
 <br>
 Ana - 100%
 <br>
 Ana - 100%
 </div>
 </div>
 
 </div>
</div>

 


Veja nossa página de indicação de cursos https://www.codesnippets.dev.br/cursos