Quantos tipos de layouts existem no Bootstrap?
Os contêineres são o elemento de layout mais básico no Bootstrap e são necessários ao usar o sistema de grade padrão. Existem dois layouts principais para Bootstrap: Layout fluido e Layout fixo.
- Layout fluido : usa a classe bootstrap .container-fluid para o layout. Este layout usa valores proporcionais, como unidades de medida para um bloco de conteúdo, imagens ou qualquer outro item. Usado para criar um elemento que é 100% mais largo e cobre todas as larguras de tela. O layout fluido é redimensionado continuamente conforme você altera a largura do seu navegador em qualquer valor, não deixando nenhum espaço vazio extra nas laterais. Por isso, é denominado “layout fluido”.
- Layout fixo : usa a classe bootstrap .container para o layout. O layout fixo tem valores de largura de pixel específicos que mudam seu valor de largura com a ajuda de consultas de mídia. Ele fornece um contêiner de largura fixa responsivo. O layout fixo é redimensionado em pedaços em várias larguras conforme os valores dos pixels são especificados.
Guia passo a passo para a implementação:
Passo 1: Inclua Bootstrap e jQuery CDN na tag <head> antes de todas as outras folhas de estilo para carregar nosso CSS.
<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 / 1.12.4 / jquery.min.js ”> </script>
<script src =” https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js ” > </script>
Etapa 2: adicione a tag <style> e as propriedades CSS de que você precisa.
Etapa 3 : Crie um novo <div> para adicionar diferentes classes de layout.
Etapa 4: As informações devem ser colocadas em uma classe .container (layout fixo) ou .container-fluid (layout fluido) para alinhamento e preenchimento adequados.
Exemplo 1: Este exemplo mostra o layout fixo.
<!DOCTYPE html>
<html>
<head>
<title>Fixed Layout</title>
<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/1.12.4/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style type="text/css">
body {
padding-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<!-- for page header -->
<div class="jumbotron">
<h1>Fixed Layout</h1>
<p>
Also known as a .container layout. Fixed
layout has specific pixel width values
that change its width value with the help
of media queries. It provides a responsive
fixed width container. Fixed layout resizes
in chunks at several certain widths so
that's why its called as “fixed width”
because pixels values are specified.
</p>
</div>
</div>
</body>
</html>Saída:
Layout fixo
Exemplo 2: Este exemplo mostra o funcionamento do layout fluido.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Fluid Layout</title>
<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/1.12.4/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="jumbotron">
<h1>Fluid Layout</h1>
<p>
Also known as the .container-fluid
layout. This layout uses proportional
values such as measuring unit for a
block of content, images or any other
item. Used for creating an element that
is 100 % wider and covers all the screen
width. Fluid layout continuously resizes
as you change the width of your browser
by any amount, leaving no extra empty
space on the sides ever Hence it is named
as “fluid layout”.
</p>
</div>
</div>
</body>
</html>Saída:
Exemplo 3: Este exemplo nos mostra a diferença entre layouts fixos e fluidos. Saídas diferentes são obtidas para diferentes tamanhos de tela para layouts fixos e fluidos.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Layouts</title>
<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/1.12.4/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="jumbotron">
<h1 style="color: green">Fluid Layout</h1>
<p style="color: #000">
A Computer Science portal for geeks. It
contains well written, well thought and
well explained computer science and
programming articles. If you’re preparing
out for a tech interview with a product-
based company or planning to do the same?
Are you looking for a DSA Course? Don’t
know how to begin with data structures and
algorithms? .. Then you are at the right
place.
</p>
</div>
</div>
<div class="container">
<div class="jumbotron">
<!-- for page header -->
<h1 style="color: green">Fixed Layout</h1>
<p style="color: #000">
A Computer Science portal for geeks. It
contains well written, well thought and
well explained computer science and
programming articles. If you’re preparing
out for a tech interview with a product-
based company or planning to do the same?
Are you looking for a DSA Course? Don’t
know how to begin with data structures and
algorithms? .. Then you are at the right
place.
</p>
</div>
</div>
</body>
</html>Saída:
Nota: O layout fixo é redimensionado em pedaços em várias larguras, enquanto o layout fluido é redimensionado continuamente conforme você altera a largura do seu navegador em qualquer valor.
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva
