Bootstrap Model

by megaadriano

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<script src="https://unpkg.com/[email protected]/dist/split-grid.js"></script>
<div>
  <div class="row gx-1 m-1  w-100">
    <div class="dropdown  col-sm-3">
  <button class="w-100 btn  btn-outline-secondary btn-sm dropdown-toggle " type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Arquivo
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Novo</a></li>
    <li><a class="dropdown-item" href="#">Abrir</a></li>
    <li><a class="dropdown-item" href="#">Salvar</a></li>
     <li><a class="dropdown-item" href="#">Sair</a></li>
  </ul>
</div>
    <div class="dropdown  col-sm-3">
  <button class="w-100 btn btn-outline-secondary btn-sm dropdown-toggle " type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Editar
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Copiar</a></li>
    <li><a class="dropdown-item" href="#">Recortar</a></li>
    <li><a class="dropdown-item" href="#">Colar</a></li>
    <li><a class="dropdown-item" href="#">Excluir</a></li>
     <li><a class="dropdown-item" href="#">Seleciona</a></li>
        <li><a class="dropdown-item" href="#">Seleciona Todos</a></li>
  </ul>
</div>
    <div class="dropdown  col-sm-3">
  <button class="w-100 btn btn-outline-secondary btn-sm dropdown-toggle " type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Preferências
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Propriedades</a></li>
   ...

CSS

body{
  background-color:#F4F4F4;
  overflow-x:hidden;
}
.icon-dv{
  width:40px;
  margin-left:2px;
}
.text-dv{
  width:82px;
  margin-left:2px;
}
.pag-text-menu{
  height:30px;
}


.grid {
  height:80vh;
  
  display: grid;
  grid-template-columns: 0.4fr 4px 2.0fr 4px 0.7fr;
  grid-template-rows: 1fr;
  
  overflow-y:hidden;
}

.vertical-gutter-1 {
  grid-area: 1 / 2 / 4 / 2;
  background-color:#b0afab;


}
.vertical-gutter-2 {
  grid-area: 1 / 4 / 4 / 4;
    
    background-color:#b0afab;

}

JavaScript

Split({
	columnGutters: [{
    track: 1,
    element: document.querySelector('.vertical-gutter-1'),
  },
  {
    track: 3,
    element: document.querySelector('.vertical-gutter-2'),
  }
  ],
  
})