`. Se assegure de usar escape, nos colchetes do HTML.
12 |
13 | {% capture example %}
14 | Por exemplo, isso deve ser envolto em uma linha: <section>.
15 | {% endcapture %}
16 | {% include example.html content=example %}
17 |
18 | ## Bloco de códigos
19 |
20 | Use tags `` para diversas linhas de código. Mais uma vez: tenha certeza de usar escape em qualquer colchete HTML, para que tudo seja renderizado adequadamente. Opcionalmente, você pode adicionar a classe `.pre-scrollable`, a qual vai usar `max-height` com valor de `340px` e criar uma barra de rolagem vertical.
21 |
22 | {% capture example %}
23 | <p>Exemplo de texto aqui...</p>
24 | <p>Outro exemplo de texto aqui...</p>
25 | `.
32 |
33 | {% capture example %}
34 | y = m x + b
35 | {% endcapture %}
36 | {% include example.html content=example %}
37 |
38 | ## Input do usuário
39 |
40 | Use o `` para indicar um input típico de entrada via teclado.
41 |
42 | {% capture example %}
43 | Para trocar diretórios, digite cd seguido pelo nome do diretório.ctrl + , `.
51 |
52 | {% capture example %}
53 | Este texto deve ser tratado como uma amostra output de um programa de computadores.
54 | {% endcapture %}
55 | {% include example.html content=example %}
56 |
--------------------------------------------------------------------------------
/site/docs/4.1/content/figures.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Figuras
4 | description: Documentação e exemplos para mostrar imagens e textos relacionados usando o componente figure, no Bootstrap.
5 | group: content
6 | ---
7 |
8 | Sempre que você precisar mostrar algum tipo de conteúdo como uma imagem com legenda, considere usar o ``.
9 |
10 | Use as classes `.figure`, `.figure-img` e `.figure-caption` para conseguir alguns estilos bases para os elementos HTML5 `` e ``. Imagens na tag `` não possuem tamanhos explícitos, por isso, tenha certeza de colocar a classe `.img-fluid` no elemento `
14 | Uma legenda para a imagem acima.
16 |
17 | {% endcapture %}
18 | {% include example.html content=example %}
19 |
20 | Alinhar a legenda de uma figura é fácil com nossos [utilitários de textos]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
21 |
22 | {% capture example %}
23 |
24 | Uma legenda para a imagem acima.
26 |
27 | {% endcapture %}
28 | {% include example.html content=example %}
29 |
--------------------------------------------------------------------------------
/site/docs/4.1/examples/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "es6": false,
4 | "jquery": true
5 | },
6 | "parserOptions": {
7 | "ecmaVersion": 5,
8 | "sourceType": "script"
9 | },
10 | "extends": "../../../js/tests/unit/.eslintrc.json"
11 | }
12 |
--------------------------------------------------------------------------------
/site/docs/4.1/examples/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../.stylelintrc",
3 | "rules": {
4 | "at-rule-no-vendor-prefix": null,
5 | "comment-empty-line-before": null,
6 | "media-feature-name-no-vendor-prefix": null,
7 | "property-no-vendor-prefix": null,
8 | "selector-no-qualifying-type": null,
9 | "selector-no-vendor-prefix": null,
10 | "value-no-vendor-prefix": null
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/site/docs/4.1/examples/album/album.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --jumbotron-padding-y: 3rem;
3 | }
4 |
5 | .jumbotron {
6 | padding-top: var(--jumbotron-padding-y);
7 | padding-bottom: var(--jumbotron-padding-y);
8 | margin-bottom: 0;
9 | background-color: #fff;
10 | }
11 | @media (min-width: 768px) {
12 | .jumbotron {
13 | padding-top: calc(var(--jumbotron-padding-y) * 2);
14 | padding-bottom: calc(var(--jumbotron-padding-y) * 2);
15 | }
16 | }
17 |
18 | .jumbotron p:last-child {
19 | margin-bottom: 0;
20 | }
21 |
22 | .jumbotron-heading {
23 | font-weight: 300;
24 | }
25 |
26 | .jumbotron .container {
27 | max-width: 40rem;
28 | }
29 |
30 | footer {
31 | padding-top: 3rem;
32 | padding-bottom: 3rem;
33 | }
34 |
35 | footer p {
36 | margin-bottom: .25rem;
37 | }
38 |
--------------------------------------------------------------------------------
/site/docs/4.1/examples/blog/blog.css:
--------------------------------------------------------------------------------
1 | /* stylelint-disable selector-list-comma-newline-after */
2 |
3 | .blog-header {
4 | line-height: 1;
5 | border-bottom: 1px solid #e5e5e5;
6 | }
7 |
8 | .blog-header-logo {
9 | font-family: "Playfair Display", Georgia, "Times New Roman", serif;
10 | font-size: 2.25rem;
11 | }
12 |
13 | .blog-header-logo:hover {
14 | text-decoration: none;
15 | }
16 |
17 | h1, h2, h3, h4, h5, h6 {
18 | font-family: "Playfair Display", Georgia, "Times New Roman", serif;
19 | }
20 |
21 | .display-4 {
22 | font-size: 2.5rem;
23 | }
24 | @media (min-width: 768px) {
25 | .display-4 {
26 | font-size: 3rem;
27 | }
28 | }
29 |
30 | .nav-scroller {
31 | position: relative;
32 | z-index: 2;
33 | height: 2.75rem;
34 | overflow-y: hidden;
35 | }
36 |
37 | .nav-scroller .nav {
38 | display: -ms-flexbox;
39 | display: flex;
40 | -ms-flex-wrap: nowrap;
41 | flex-wrap: nowrap;
42 | padding-bottom: 1rem;
43 | margin-top: -1px;
44 | overflow-x: auto;
45 | text-align: center;
46 | white-space: nowrap;
47 | -webkit-overflow-scrolling: touch;
48 | }
49 |
50 | .nav-scroller .nav-link {
51 | padding-top: .75rem;
52 | padding-bottom: .75rem;
53 | font-size: .875rem;
54 | }
55 |
56 | .card-img-right {
57 | height: 100%;
58 | border-radius: 0 3px 3px 0;
59 | }
60 |
61 | .flex-auto {
62 | -ms-flex: 0 0 auto;
63 | flex: 0 0 auto;
64 | }
65 |
66 | .h-250 { height: 250px; }
67 | @media (min-width: 768px) {
68 | .h-md-250 { height: 250px; }
69 | }
70 |
71 | /*
72 | * Nome do blog e descrição
73 | */
74 | .blog-title {
75 | margin-bottom: 0;
76 | font-size: 2rem;
77 | font-weight: 400;
78 | }
79 | .blog-description {
80 | font-size: 1.1rem;
81 | color: #999;
82 | }
83 |
84 | @media (min-width: 40em) {
85 | .blog-title {
86 | font-size: 3.5rem;
87 | }
88 | }
89 |
90 | /* Paginação */
91 | .blog-pagination {
92 | margin-bottom: 4rem;
93 | }
94 | .blog-pagination > .btn {
95 | border-radius: 2rem;
96 | }
97 |
98 | /*
99 | * Posts do blog
100 | */
101 | .blog-post {
102 | margin-bottom: 4rem;
103 | }
104 | .blog-post-title {
105 | margin-bottom: .25rem;
106 | font-size: 2.5rem;
107 | }
108 | .blog-post-meta {
109 | margin-bottom: 1.25rem;
110 | color: #999;
111 | }
112 |
113 | /*
114 | * Footer
115 | */
116 | .blog-footer {
117 | padding: 2.5rem 0;
118 | color: #999;
119 | text-align: center;
120 | background-color: #f9f9f9;
121 | border-top: .05rem solid #e5e5e5;
122 | }
123 | .blog-footer p:last-child {
124 | margin-bottom: 0;
125 | }
126 |
--------------------------------------------------------------------------------
/site/docs/4.1/examples/carousel/carousel.css:
--------------------------------------------------------------------------------
1 | /* ESTILOS GLOBAIS
2 | -------------------------------------------------- */
3 | /* Padding abaixo do footer e texto mais suave no */
4 |
5 | body {
6 | padding-top: 3rem;
7 | padding-bottom: 3rem;
8 | color: #5a5a5a;
9 | }
10 |
11 |
12 | /* CUSTOMIZA O CAROUSEL
13 | -------------------------------------------------- */
14 |
15 | /* Classe base do carousel */
16 | .carousel {
17 | margin-bottom: 4rem;
18 | }
19 |
20 | /* Já que usamos posicionamento de imagens, precisaremos fazer alguns ajustes na legenda */
21 | .carousel-caption {
22 | bottom: 3rem;
23 | z-index: 10;
24 | }
25 |
26 | /* Declaramos alturas, devido ao posicionamento do elemento img */
27 | .carousel-item {
28 | height: 32rem;
29 | background-color: #777;
30 | }
31 | .carousel-item > img {
32 | position: absolute;
33 | top: 0;
34 | left: 0;
35 | min-width: 100%;
36 | height: 32rem;
37 | }
38 |
39 |
40 | /* CONTEÚDO DO MARKETING
41 | -------------------------------------------------- */
42 |
43 | /* Alinha, centralmente, o texto dentro das três colunas abaixo do carousel */
44 | .marketing .col-lg-4 {
45 | margin-bottom: 1.5rem;
46 | text-align: center;
47 | }
48 | .marketing h2 {
49 | font-weight: 400;
50 | }
51 | .marketing .col-lg-4 p {
52 | margin-right: .75rem;
53 | margin-left: .75rem;
54 | }
55 |
56 |
57 | /* Featrurezinhas
58 | ------------------------- */
59 |
60 | .featurette-divider {
61 | margin: 5rem 0; /* Espaça o elemento Template de capa, usando Bootstrap.
11 |
12 |
13 |
22 |
32 |
33 |
34 | Faça uma página de capa.
35 | Capas são templates de uma única página para construir home pages simples e lindas. Baixe, edite o texto e adicione seu próprio background fullscreen, de maneira que tudo fique com a sua cara.
36 |
37 | Saiba mais
38 |
39 |
40 |
41 |
46 |
Exemplo de labels flutuantes, usando Bootstrap.
11 |
12 |
13 | {{ entry.category | capitalize }}
11 | {{ entry.description }}
12 | {% for example in entry.examples %}
13 | {% if forloop.first %}{% endif %}
14 |
21 | {% if forloop.last %}
Template de login, usando Bootstrap.
11 |
12 |
13 | Template para sticky footer, usando Bootstrap.
11 |
12 |
13 |
23 |
24 |
Sticky footer
25 |
Fixe um footer na parte inferior da viewport, em navegadores desktop, com estes HTML e CSS customizados.
26 |
Use o sticky footer com uma navbar fixa se for necessário, também.
27 |
29 |
30 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/site/docs/4.1/examples/sticky-footer/sticky-footer.css:
--------------------------------------------------------------------------------
1 | /* Custom page CSS
2 | -------------------------------------------------- */
3 | /* Not required for template or sticky footer method. */
4 |
5 | .container {
6 | width: auto;
7 | max-width: 680px;
8 | padding: 0 15px;
9 | }
10 |
11 | .footer {
12 | background-color: #f5f5f5;
13 | }
14 |
--------------------------------------------------------------------------------
/site/docs/4.1/examples/tooltip-viewport/tooltip-viewport.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 1200px;
3 | }
4 | .tooltip {
5 | min-width: 250px;
6 | max-width: 500px;
7 | }
8 | .tooltip .tooltip-inner {
9 | min-width: 250px;
10 | max-width: 500px;
11 | min-height: 100px;
12 | text-align: left;
13 | }
14 | .container-viewport {
15 | position: absolute;
16 | top: 100px;
17 | right: 250px;
18 | left: 250px;
19 | height: 300px;
20 | background-color: #eee;
21 | }
22 | .btn-bottom {
23 | position: absolute;
24 | bottom: 0;
25 | left: 0;
26 | }
27 |
--------------------------------------------------------------------------------
/site/docs/4.1/examples/tooltip-viewport/tooltip-viewport.js:
--------------------------------------------------------------------------------
1 | $(function () {
2 | 'use strict'
3 |
4 | $('.tooltip-right').tooltip({
5 | placement: 'right',
6 | viewport: {
7 | selector: 'body',
8 | padding: 2
9 | }
10 | })
11 | $('.tooltip-bottom').tooltip({
12 | placement: 'bottom',
13 | viewport: {
14 | selector: 'body',
15 | padding: 2
16 | }
17 | })
18 | $('.tooltip-viewport-right').tooltip({
19 | placement: 'right',
20 | viewport: {
21 | selector: '.container-viewport',
22 | padding: 2
23 | }
24 | })
25 | $('.tooltip-viewport-bottom').tooltip({
26 | placement: 'bottom',
27 | viewport: {
28 | selector: '.container-viewport',
29 | padding: 2
30 | }
31 | })
32 | })
33 |
--------------------------------------------------------------------------------
/site/docs/4.1/extend/icons.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Ícones
4 | description: Guia e sugestões para uso de bibliotecas de ícones externas ao Bootstrap.
5 | group: extend
6 | ---
7 |
8 | Bootstrap não possui uma biblioteca de ícones, por padrão, mas nós temos várias recomendações para você. Enquanto muitos pacotes de ícones incluem diversos formatos de arquivos, nós preferimos implementações em SVG devido a melhor acessibilidade e suporte vetorial.
9 |
10 | ## Preferidos
11 |
12 | Nós mesmos testamos e usamos estes pacotes de ícones:
13 |
14 | - [Font Awesome](https://fontawesome.com/)
15 | - [Iconic](https://github.com/iconic/open-iconic)
16 | - [Octicons](https://octicons.github.com/)
17 |
18 | ## Mais opções
19 |
20 | Apesar de nós não termos testado estes, parecem promissores e incluem múltiplos formatos (incluindo SVG).
21 |
22 | - [Bytesize](https://github.com/danklammer/bytesize-icons)
23 | - [Google Material icons](https://material.io/icons/)
24 | - [Ionicons](https://ionicons.com/)
25 | - [Feather](https://feathericons.com/)
26 | - [Dripicons](http://demo.amitjakhu.com/dripicons/)
27 | - [Ikons](http://ikons.piotrkwiatkowski.co.uk/)
28 | - [Glyph](https://glyph.smarticons.co/)
29 | - [Icons8](https://icons8.com/)
30 |
--------------------------------------------------------------------------------
/site/docs/4.1/extend/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Extend
4 | ---
5 |
6 | todo: this entire page
7 |
--------------------------------------------------------------------------------
/site/docs/4.1/getting-started/best-practices.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Boas práticas
4 | description: Aprenda sobre algumas das melhores práticas que nós reunimos, depois de anos trabalhando com o Bootstrap.
5 | group: getting-started
6 | ---
7 |
8 | Nós desenhamos e criamos o Bootstrap para que funcione em diferentes ambientes. Aqui estão algumas das melhores práticas que nós reunimos, depois de anos trabalhando com o Bootstrap.
9 |
10 | {% capture callout %}
11 | **Atenção!** Esta cópia é um trabalho em progresso.
12 | {% endcapture %}
13 | {% include callout.html content=callout type="info" %}
14 |
15 | ### Resumo
16 |
17 | - Trabalhando com CSS
18 | - Trabalhando arquivos Sass
19 | - Cornstruindo novos componentes CSS
20 | - Trabalhando com flexbox
21 | - Dúvidas no [Slack](https://bootstrap-slack.herokuapp.com/)
22 |
--------------------------------------------------------------------------------
/site/docs/4.1/layout/utilities-for-layout.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Utilitários para layout
4 | description: Para um desenvolvimento responsivo, mobile-friendly, mais rápido, Bootstrap possui uma dúzia de classes utilitárias para exibir, esconder, alinha e espaçar conteúdo.
5 | group: layout
6 | toc: true
7 | ---
8 |
9 | ## Alterando `display`
10 |
11 | Use nossos [utilitários de display]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/) para, responsivamente, alternar valores comuns da propriedade `display`. Misture-os com nosso sistema grid, conteúdo e componentes a serem exibidos ou ocultos, em viewports específicos.
12 |
13 | ## Opções flexbox
14 |
15 | Bootstrap 4 é feito com flexbox, mas nem todo `display` de elementos foram altreados para `display: flex`, já que isso faria muitas sobrescrições desnecessárias e mudanças inesperadas em comportamentos chaves de browsers. A maior parte de [nossos componentes]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/alerts/) são feitos com flexbox ativado.
16 |
17 | Se precisar ativar `display: flex` em um elemento, faça colocando `.d-flex` ou uma das variações responsivas (ex: `.-sm-flex`). Você precisará desta classe ou valor `display` para conseguir usar o resto de nossos [utilitários flexbox]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/flex/) para dimensionamento, alinhamento, espaçamento, etc.
18 |
19 | ## Margem e padding
20 |
21 | Use os [utilitários de espaçamento]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) de `margin` e `padding` para controlar como elementos e componentes são espaçados e dimensionados. Bootstrap 4 possui uma escala de cinco níveis para utilitários de espaçamento, baseado no valor padrão `1rem` da variável `$spacer`. Escolha valores para todas viewports (`.mr-3`, no caso `margin-right: 1rem`) ou variações responsivas para mirar em viewports específicas (`.mr-md-3` para `margin-right: 1rem` em viewports do breakpoint `md`).
22 |
23 | ## Alternar `visibility`
24 |
25 | Quando alternar o valor da `display` não é necessário, você pode alternar o valor da `visibility` de algum elemento, usando nossos [utilitários de visibilidade]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/). Elementos invisíveis vão continuar a afetar o layout da página, mas são ocultos dos usuários, visualmente.
26 |
--------------------------------------------------------------------------------
/site/docs/4.1/utilities/clearfix.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Clearfix
4 | description: Rapido e facilmente usar a propriedade clear em elementos flutuando, usando o utilitário clearfix.
5 | group: utilities
6 | toc: true
7 | ---
8 |
9 | Facilmente limpa a `float`, usando a classe `.clearfix`, no **elemento pai**. Além do mais, também pode ser usado como um mixin.
10 |
11 | {% highlight html %}
12 | ...
13 | {% endhighlight %}
14 |
15 | {% highlight scss %}
16 | // O mixin, em si.
17 | @mixin clearfix() {
18 | &::after {
19 | display: block;
20 | content: "";
21 | clear: both;
22 | }
23 | }
24 |
25 | // Como usar o mixin.
26 | .element {
27 | @include clearfix;
28 | }
29 | {% endhighlight %}
30 |
31 | O exemplo a seguir mostra como o clearfix pode ser usado. Sem ele, a div envoltando não se expandiria ao redor dos botões, oquê causaria um layout quebrado.
32 |
33 | {% capture example %}
34 |
35 | Exemplo de botão flutuando à esquerda
36 | Exemplo de botão flutuando à direita
37 |
38 | {% endcapture %}
39 | {% include example.html content=example %}
40 |
--------------------------------------------------------------------------------
/site/docs/4.1/utilities/close-icon.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Ícone de dispensa
4 | description: Use um botão genérico, para dispensar conteúdos como modais e alertas.
5 | group: utilities
6 | toc: true
7 | ---
8 |
9 | **Certifique-se de incluir texto para os leitores de telas**, como fizemos no atributo `aria-label`.
10 |
11 | {% capture example %}
12 |
13 | ×
14 |
15 | {% endcapture %}
16 | {% include example.html content=example %}
17 |
--------------------------------------------------------------------------------
/site/docs/4.1/utilities/embed.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Incorporações
4 | description: Crie incorporações de vídeos ou slideshows, baseando-se na largura do pai, criando uma proporção que escala em qualquer dispositivo.
5 | group: utilities
6 | toc: true
7 | ---
8 |
9 | ## Sobre
10 |
11 | Regras são, diretamente, aplicadas a elementos `
22 |
23 | {% endcapture %}
24 | {% include example.html content=example %}
25 |
26 | ## Proporções de telas
27 |
28 | Proporções de telas podem ser personalizadas com classes modificadoras.
29 |
30 | {% highlight html %}
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | {% endhighlight %}
51 |
--------------------------------------------------------------------------------
/site/docs/4.1/utilities/float.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Float
4 | description: Utilize float em qualquer elemento, em quaquer breakpoint, usando nossos utilitários responsivos.
5 | group: utilities
6 | toc: true
7 | ---
8 |
9 | ## Sobre
10 |
11 | Estas classes utilitárias flutuam um elemento à esquerda e direita ou desativa a flutuação, baseando-se no tamanho da atual viewport e usando a [propriedade CSS `float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float). Além do mais, a *flag* `!important` é utilizada para evitar problemas de especificidade.
12 |
13 | Também, não esqueça que essas classes usam os mesmos breakpoints que nosso sistema de grid e que não afetam flex items.
14 |
15 | ## Classes
16 |
17 | Alterne entre flutuação ou não, usando as seguintes classes:
18 |
19 | {% capture example %}
20 | Flutua à esquerda em todos os tamanhos de viewport.
Flutua à direita em todos os tamanhos de viewport.
Nunca flutua, independente do tamanho da viewport.
23 | {% endcapture %}
24 | {% include example.html content=example %}
25 |
26 | ## Mixins
27 |
28 | Também é possível utilizar os mixins Sass:
29 |
30 | {% highlight scss %}
31 | .elemento {
32 | @include float-left;
33 | }
34 | .outro-elemento {
35 | @include float-right;
36 | }
37 | .mais-outro {
38 | @include float-none;
39 | }
40 | {% endhighlight %}
41 |
42 | ## Responsividade
43 |
44 | Cada valor da propriedade `float` possui variantes responsivas:
45 |
46 | {% capture example %}
47 | Flutua à esquerda, em viewports de tamanho SM (pequena) ou maior.
Flutua à esquerda, em viewports de tamanho MD (média) ou maior.
Flutua à esquerda, em viewports de tamanho LG (grande) ou maior.
Flutua à esquerda, em viewports de tamanho XL (extra-grande) ou maior.
Cabeçalho personalizado
19 | {% endhighlight %}
20 |
21 | {% highlight scss %}
22 | // Exemplo de uso do mixin
23 | .heading {
24 | @include text-hide;
25 | }
26 | {% endhighlight %}
27 |
28 | A classe `.text-hide` é usada para esconder o texto e manter os benefícios de acessibilidade e SEO das tags de cabeçalho, enquanto utiliza-se uma imagem de background.
29 |
30 | {% capture example %}
31 | Bootstrap
32 | {% endcapture %}
33 | {% include example.html content=example %}
34 |
--------------------------------------------------------------------------------
/site/docs/4.1/utilities/position.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Posicionamento
4 | description: Use estes utilitários de atalho, para definir o tipo de posicionamento de um elemento, rapidamente.
5 | group: utilities
6 | toc: true
7 | ---
8 |
9 | ## Valores comuns
10 |
11 | Apesar de termos classes para definir o tipo de posicionamento, elas não são responsivas.
12 |
13 | {% highlight html %}
14 | ...
15 | ...
16 | ...
17 | ...
18 | ...
19 | {% endhighlight %}
20 |
21 | ## Fixed top
22 |
23 | Posicione um elemento no topo da viewport, de ponta a ponta, usando a seguinte classe:
24 |
25 | {% highlight html %}
26 | ...
27 | {% endhighlight %}
28 |
29 | _Ps: certifique-se de entender a influência de elementos posicionados de tal forma, em seu projeto, pois, você pode precisar de CSS adicional._
30 |
31 | ## Fixed bottom
32 |
33 | Posicione um elemento na parte inferior da viewport, de ponta a ponta, usando a seguinte classe:
34 |
35 | {% highlight html %}
36 | ...
37 | {% endhighlight %}
38 |
39 | _Ps: certifique-se de entender a influência de elementos posicionados de tal forma, em seu projeto, pois, você pode precisar de CSS adicional._
40 |
41 | ## Sticky top
42 |
43 | Posicione um elemento no topo da viewport, de ponta a ponta, mas só depois que o usuário rolar sobre ele. O utilitário `.sticky-top` usa a declaração `position: sticky`, a qual não é suportada em todos browsers, completamente.
44 |
45 | **IE11 e IE10 vão renderizar `position: sticky` como se fosse `position: relative`**. Devido a isso, precisamos usar uma query `@supports`, para usar tal comportamento só em browsers que suportam isso, adequadamente.
46 |
47 | {% highlight html %}
48 | ...
49 | {% endhighlight %}
50 |
--------------------------------------------------------------------------------
/site/docs/4.1/utilities/screenreaders.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Leitores de tela
4 | description: Use estes utilitários para esconder elementos em todos os dispositivos, com exceção dos próprios leitores de tela.
5 | group: utilities
6 | toc: true
7 | ---
8 |
9 | Com os utilitários você poderá esconder um elemento em todos os dispositivos, **exceto em leitores de tela**. Também, combinando as classes `.sr-only` e `.sr-only-focusable`, é possível mostrar um elemento, novamente, quando ele recebe foco. Isso tudo é possível usando mixins, também.
10 |
11 | {%- comment -%}
12 | É necessário para seguir as [melhores práticas de acessibilidade]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/#accessibility).
13 | {%- endcomment -%}
14 |
15 | {% capture example %}
16 | Pular para o conteúdo principal
17 | {% endcapture %}
18 | {% include example.html content=example %}
19 |
20 | {% highlight scss %}
21 | // Exemplo de uso com mixin
22 | .pula-navegacao {
23 | @include sr-only;
24 | @include sr-only-focusable;
25 | }
26 | {% endhighlight %}
27 |
--------------------------------------------------------------------------------
/site/docs/4.1/utilities/shadows.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Sombras
4 | description: Adicione ou remova sombras de elementos, usando os utilitários box-shadows.
5 | group: utilities
6 | toc: false
7 | ---
8 |
9 | ## Exemplos
10 |
11 | Apesar de sombras em componentes estarem desativadas por padrão, no Bootstrap, e poderem ser ativadas alterando o valor da variável `$enable-shadows`, também é possível adicionar e remover sombras, rapidamente, usando nossas classes utilitárias `box-shadow`. Essas classes são `.shadow-none` e três outras, para diferentes tamanhos de sombras.
12 |
13 | {% capture example %}
14 | Sem sombra
15 | Sombra pequena
16 | Sombra média
17 | Sombra grande
18 | {% endcapture %}
19 | {% include example.html content=example %}
20 |
--------------------------------------------------------------------------------
/site/docs/4.1/utilities/sizing.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Dimensionamento
4 | description: Facilmente, é possível fazer um elemento ser tão largo e alto quanto seu pai, usando nossos utilitários de largura e altura.
5 | group: utilities
6 | toc: true
7 | ---
8 |
9 | Utilitáiros de largura e altura são gerados a partir do mapa Sass `$sizes`, no arquivo `_variables.scss`. Por padrão, as classes dão suporte para valores de `25%`, `50%`, `75%`, `100%` e `auto`. Também é possível modificar esses valores, se for necessário gerar novos utilitários com novos valores.
10 |
11 | {% capture example %}
12 | Largura de 25%
13 | Largura de 50%
14 | Largura de 75%
15 | Largura de 100%
16 | Largura automática
17 | {% endcapture %}
18 | {% include example.html content=example %}
19 |
20 | {% capture example %}
21 |
22 |
Altura de 25%
23 |
Altura de 50%
24 |
Altura de 75%
25 |
Altura de 100%
26 |
Altura automática
27 |
39 |
Max-height 100%
40 |
baseline
16 | top
17 | middle
18 | bottom
19 | text-top
20 | text-bottom
21 | {% endcapture %}
22 | {% include example.html content=example %}
23 |
24 | Uso em células de tabelas:
25 |
26 | {% capture example %}
27 |
28 |
29 |
30 | baseline
31 | top
32 | middle
33 | bottom
34 | text-top
35 | text-bottom
36 |
37 |
38 |
39 | {% endcapture %}
40 | {% include example.html content=example %}
41 |
--------------------------------------------------------------------------------
/site/docs/4.1/utilities/visibility.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Visibilidade
4 | description: Controle a visibilidade de elementos, sem modificar a propriedade display, usando os utilitários de visibilidade.
5 | group: utilities
6 | ---
7 |
8 | Altere o valor da propriedade `visibility` dos elementos usando as classes utilitárias de visibilidade. Elas não modificam o valor da propriedade `display` para não impactar no layout - elementos `.invisible` ainda deixam o espaço na página. São úteis para esconder o conteúdo da maioria dos usuários, com excessão dos usuários com leitores de telas.
9 |
10 | Use as classes `.visible` ou `.invisible`, como quiser.
11 |
12 | {% highlight html %}
13 | ...
14 | ...
15 | {% endhighlight %}
16 |
17 | {% highlight scss %}
18 | // Como são as classes
19 | .visible {
20 | visibility: visible;
21 | }
22 | .invisible {
23 | visibility: hidden;
24 | }
25 |
26 | // Modo de uso com mixins
27 | .elemento {
28 | @include invisible(visible);
29 | }
30 | .outro-elemento {
31 | @include invisible(hidden);
32 | }
33 | {% endhighlight %}
34 |
--------------------------------------------------------------------------------
/site/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bootstrapbrasil/bootstrap/be9355e29e212fa898cf77c46920d71ce60a7e09/site/favicon.ico
--------------------------------------------------------------------------------
/site/robots.txt:
--------------------------------------------------------------------------------
1 | ---
2 | ---
3 |
4 | # www.robotstxt.org/
5 |
6 | # Allow crawling of all content
7 | User-agent: *
8 | Disallow:
9 | Sitemap: {{ site.url }}/sitemap.xml
10 |
--------------------------------------------------------------------------------
/site/sw.js:
--------------------------------------------------------------------------------
1 | /* global workbox:false */
2 |
3 | self.importScripts('docs/4.1/assets/js/vendor/{fileName}')
4 |
5 | workbox.precaching.precacheAndRoute([])
6 |
--------------------------------------------------------------------------------