# BootStrap Cenas Fixes ::: success Icons de BootStrap - https://icons.getbootstrap.com/ :::spoiler ![](https://i.imgur.com/eDhio5h.png) :::::: - BreakPoint são importantes - https://getbootstrap.com/docs/5.0/layout/breakpoints/ :::spoiler ![](https://i.imgur.com/tZxqcmx.png) ::: - **Ponto Chave**: The hierarchy of Bootstrap’s grid goes from container to row to column to your content. - https://getbootstrap.com/docs/5.0/layout/columns/ :::spoiler ![](https://i.imgur.com/QEDC5MX.png) ::: - Propriedade de Display para facilitar design responsivo - https://getbootstrap.com/docs/5.0/utilities/display/ :::spoiler ![](https://i.imgur.com/ZVUp5QZ.png) ::: - Abreviações pode dar jeito para página de register - https://getbootstrap.com/docs/5.0/content/typography/#abbreviations :::spoiler ![](https://i.imgur.com/khh99Do.png) ::: - Coisas inspiracionais - https://getbootstrap.com/docs/5.0/content/typography/#naming-a-source :::spoiler ![](https://i.imgur.com/UkOBiZv.png) ::: - Isto pode dar jeito para key-values - https://getbootstrap.com/docs/5.0/content/typography/#description-list-alignment :::spoiler ![](https://i.imgur.com/5jpDKib.png) ::: - File input fica nice - https://getbootstrap.com/docs/5.0/forms/form-control/?#file-input :::spoiler ![](https://i.imgur.com/3lomFij.png) ::: - Floating Labels Siiiiiim - https://getbootstrap.com/docs/5.0/forms/floating-labels/ :::spoiler ![](https://i.imgur.com/XrLc884.png) ::: - Validação - https://getbootstrap.com/docs/5.0/forms/validation/#server-side :::spoiler ![](https://i.imgur.com/rkK6uG6.png) ::: - Dismissing Alerts, pode ser útil - https://getbootstrap.com/docs/5.0/components/alerts/#dismissing :::spoiler ![](https://i.imgur.com/GcbAci7.png) ::: - Pills e Números de notificações - https://getbootstrap.com/docs/5.0/components/badge/ :::spoiler ![](https://i.imgur.com/G9B5jQz.png) ::: - Another Pill - https://getbootstrap.com/docs/5.0/components/list-group/#with-badges :::spoiler ![](https://i.imgur.com/uapLgnI.png) ::: - Texto animado com botões nice - https://getbootstrap.com/docs/5.0/components/list-group/#javascript-behavior :::spoiler ![](https://i.imgur.com/S69b72R.png) ::: - Popover é fixe, não sei onde usar thou - https://getbootstrap.com/docs/5.0/components/popovers/ :::spoiler ![](https://i.imgur.com/vIH3oe6.png) ::: - Navbar atualiza com scrolling - https://getbootstrap.com/docs/5.0/components/scrollspy/ :::spoiler ![](https://i.imgur.com/R7Z99X7.png) ::: - Tooltips, pode dar jeito - https://getbootstrap.com/docs/5.0/components/tooltips/ :::spoiler ![](https://i.imgur.com/eq4um3S.png) ::: - Shadows - https://getbootstrap.com/docs/5.0/utilities/shadows/ :::spoiler ![](https://i.imgur.com/IX34qLa.png) ::: - BackGround Color - https://getbootstrap.com/docs/5.0/utilities/background/ ## Exemplos para Projeto - Para usar no CheckOut - https://getbootstrap.com/docs/5.0/components/breadcrumb/#dividers - Para filtros, escolha entre supplier e product - https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups - Para os produtos - https://getbootstrap.com/docs/5.0/components/card/ - Para a definição dos produtos - https://getbootstrap.com/docs/5.0/helpers/text-truncation/ - Para os produtos ficarem como link - https://getbootstrap.com/docs/5.0/helpers/stretched-link/ - Para fazer lista de Produtos - https://getbootstrap.com/docs/5.0/layout/gutters/ - https://getbootstrap.com/docs/5.0/content/images/#image-thumbnails - https://getbootstrap.com/docs/5.0/components/card/#grid-cards - Para navegação no Perfil - - https://getbootstrap.com/docs/5.0/components/card/#navigation - https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior - Texto dentro de imagem, muito nice - https://getbootstrap.com/docs/5.0/components/card/#image-overlays - Carrosel nice - https://getbootstrap.com/docs/5.0/components/carousel/#dark-variant - Para Login maybe? - https://getbootstrap.com/docs/5.0/components/dropdowns/?#forms - Para **footer** - https://getbootstrap.com/docs/5.0/components/list-group/#flush - https://getbootstrap.com/docs/5.0/components/list-group/#javascript-behavior - Para Pop Ups - https://getbootstrap.com/docs/5.0/components/modal/#vertically-centered - Para Pop Ups obrigatórios - https://getbootstrap.com/docs/5.0/components/modal/ - Para páginas de produtos maybe? Pode ser infinita ou com isto - https://getbootstrap.com/docs/5.0/components/pagination/ - Para simular que um carregamento está a ser feito - https://getbootstrap.com/docs/5.0/components/spinners/ - Para quando se adiciona aos favoritos - https://getbootstrap.com/docs/5.0/components/toasts/ - Para pôr as coisas redondinhas - https://getbootstrap.com/docs/5.0/utilities/borders/#border-radius - Para a navbar ficar fixa no topo - https://getbootstrap.com/docs/5.0/helpers/position/#fixed-top - Para as secções de checkout - https://getbootstrap.com/docs/5.0/utilities/position/#examples - Para a Search Bar - https://getbootstrap.com/docs/5.0/forms/form-control/?#datalists ![](https://i.imgur.com/mKkAM2o.png) - Para os filtros - https://getbootstrap.com/docs/5.0/forms/checks-radios/#radio-toggle-buttons