3

Fala galera, gostaria de saber oque é mais recomendado para usar em um site: Bootstrap, Grid-template ou flexbox.

Tenho essa dúvida porque ao ver os sites que usaram Bootstrap o código fica cheeeeio de classes

<div class="row">
  <div class="col col-md-4"></div>
  <div class="col col-md-4"></div>
  <div class="col col-md-8"></div>
</div>

Com grid-template nem precisa de classe

<div class="container">
  <header></header>
  <nav></nav>
  <footer></footer>
</div>

Com flex-box n precisa especificar tanto...

<div class="container">
  <header>
    <div class="flexbox"></div>
    <div class="flexbox"></div>
  </header>
  <nav></nav>
  <footer></footer>
</div>

Ainda andei vendo que o normal quando usa-se grid-template é usar flexbox juntamente com ele. Masss... Há problemas no Bootstrap 'poluindo' o código om tantas classes? Vale a pena usar Bootstrap por ele estar pronto, mas encher o html de classes, ou vale a pena usar grid-template + flexbox (dando umpouco mais de trabalho) porém não enchendo de tantas classes?

1
  • na verdade não tem problema em utilizar bootstrap, conheço programadores que utilizam tanto bootstrap, quando alguns que criam seu estilo manualmente. Então varia de acordo com o que você pretende fazer, e o que atenderá suas necessidades, o bootstrap facilita muitas coisas, devido ter muitas class que são úteis para diversos assuntos. Eu particularmente, utilizo bootstrap e acho super fácil atualmente em trabalhar com ele, e não acho que ele polui o código. Pelo contrário, consigo estilizar uma tabela, criar rapidamente uma tela, e quando você pegar o jeito do bootstrap irá ver como é simples
    – user92870
    Commented 6/11/2017 às 22:52

1 Resposta 1

2

Utilizando Bootstrap você otimiza seu tempo poupando-o de ter que ficar alterando tanto o CSS ou criando estilos de CSS, diferente do Grid-Template, vou mostrar abaixo o que eu entendo e a diferença

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}
<section id="page">
  <header>Cabeçalho</header>
  <nav>Navegador</nav>
  <main>Area</main>
  <footer>Rodapé</footer>
</section>

Repare que você não tem que utilizar class isto você está correto, mas pense o tempo que gastaria para criar esse css em cima destas tags, fato que aumentaria seu tempo. Já o Bootstrap mesmo utilizando class diversas, não o enxergo como um 'poluidor de código' como citou na pergunta, portanto vou tentar mostrar uma diferença do boostrap abaixo, a facilidade com que se separa as coisas, utilizando as próprias classes já existentes. Certo que é um exemplo diferente, mas enxergue também a facilidade de apenas colocar o link do bootstrap em meu código e isso já faz com que não seja necessário que eu faça download da pasta ou nenhum arquivo, fazendo com que eu consiga trabalhar com o Bootstrap somente inserindo estes links que estão criados dentro da tag <head>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">Está é uma primeira linha onde você poderia criar um input, select textares</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">Está é uma segunda linha onde você poderia criar um input, select textares</div>
    <div class="col-sm-4" style="background-color:lavender;">Está é uma terceira linha onde você poderia criar um input, select textares</div>
  </div>
</div>

</body>
</html>

Espero ter ajudado e mostrado talvez um pouco da diferença, para lhe dar um norte

6
  • Na hora de criação da estrutura do layout em si (header,nav,footer,section, tals, sem estilizar os detalhes, tipo um input), o bootstrap nao complica mais que grid-template? Commented 6/11/2017 às 23:44
  • Não, basta você saber identar seu código e não terá nenhuma complicação, pode ter certeza, vejo grandes programadores até mesmo aqui do fórum utilizando bootstrap
    – Victor
    Commented 7/11/2017 às 1:20
  • nao falo da estrutura de identação do código, e sim da parte de declarar os elementos como serão Commented 7/11/2017 às 1:30
  • Utilize bootstrap não ira se arrepender, para declarar elementos basta chamar as class dentro das divs e facilitara sua vida
    – Victor
    Commented 7/11/2017 às 2:20
  • vlw :P vou por como aceita Commented 7/11/2017 às 2:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .