Arquivos Javascript e React - Rotamáxima - Especialistas em resultados https://blog.rotamaxima.com/category/desenvolvimento/javascript-e-react/ Conteúdos, cursos e consultoria para sua empresa gerar mais leads e vendas Mon, 05 Jul 2021 19:32:28 +0000 pt-BR hourly 1 https://wordpress.org/?v=6.8.3 https://blog.rotamaxima.com/wp-content/uploads/2022/07/cropped-logo_clean-32x32.png Arquivos Javascript e React - Rotamáxima - Especialistas em resultados https://blog.rotamaxima.com/category/desenvolvimento/javascript-e-react/ 32 32 Bootstrap 4, guia de referência com os elementos mais utilizados https://blog.rotamaxima.com/bootstrap-4-guia-de-referencia-dos-elementos-mais-utilizados/ Wed, 06 May 2020 15:59:04 +0000 https://www.rotamaxima.com.br/?p=6400 Bootstrap é um framework web com código-fonte aberto para desenvolvimento de componentes de interface e front-end para sites e aplicações web usando HTML, CSS e JavaScript, baseado em modelos de design para a tipografia, melhorando a experiência do usuário em um site amigável e responsivo. O projeto foi originalmente desenvolvido pelo Twitter, pelos programadores Mark Otto e Jacó Thornton. A utilização do Bootstrap torna mais simples a tarefa de construir sites responsivos e com código mais facilmente legível, tornando a manutenção evolutiva e corretiva mais rápida. Para começar a usar o Bootstrap, tudo o que é necessário fazer é importar os arquivos CSSs e JSs para o seu projeto. Adicione a referência abaixo no cabeçalho do seu documento HTML: Insira também os arquivos JSs (Javascript), ao final do código, antes do fechamento do <body> Feito isso, sua página já está pronta para receber os primeiros códigos Bootstrap. Mas antes de partir para os exemplos e referências, é importante salientar que o Bootstrap possui um sistema de resoluções de tela. São eles: sm = 576 pxmd = 768 pxlg = 992 pxxl = 1200 px Confira a lista de recursos mais utilizados: 1 Margin & Padding2 Text Alignment3 Text Transforms4 Font Weight & Italics5 Fancy Heading Text6 Fancy Paragraph Text7 Text Colors8 Background Colors9 Display Properties10 Border-Radius11 Box Shadow12 Width & Height13 Buttons14 Cards & Cards Groups15 Carousel16 Collapse Content17 DropDown Content18 Forms19 Jumbotron20 Nav21 NavBar22 Grid System Margin & Padding Margin on all sides – .m .m-1 (margin: 4px;) .m-2 (margin: 8px;) .m-3 (margin: 16px;) .m-4 (margin: 24px;) .m-5 (margin: 48px;) Margin left – .ml .ml-1 (margin-left: 4px;) .ml-2 (margin-left: 8px;) .ml-3 (margin-left: 16px;) .ml-4 (margin-left: 24px;) .ml-5 (margin-left: 48px;) Margin right – .mr .mr-1 (margin-right: 4px;) .mr-2 (margin-right: 8px;) .mr-3 (margin-right: 16px;) .mr-4 (margin-right: 24px;) .mr-5 (margin-right: 48px;) Margin top – .mt .mt-1 (margin-top: 4px;) .mt-2 (margin-top: 8px;) .mt-3 (margin-top: 16px;) .mt-4 (margin-top: 24px;) .mt-5 (margin-top: 48px;) Margin bottom – .mb .mb-1 (margin-bottom: 4px;) .mb-2 (margin-bottom: 8px;) .mb-3 (margin-bottom: 16px;) .mb-4 (margin-bottom: 24px;) .mb-5 (margin-bottom: 48px;) Margin auto – .m-auto .m-auto (margin: auto;) Responsive Margin Example Screen sizes: extra small .ml-5 | small .ml-0 | medium .ml-5 | large .ml-0 | extra large .m-5 padding on all sides – .p .p-1 (padding: 4px;) .p-2 (padding: 8px;) .p-3 (padding: 16px;) .p-4 (padding: 24px;) .p-5 (padding: 48px;) padding left – .pl .pl-1 (padding-left: 4px;) .pl-2 (padding-left: 8px;) .pl-3 (padding-left: 16px;) .pl-4 (padding-left: 24px;) .pl-5 (padding-left: 48px;) padding right – .pr .pr-1 (padding-right: 4px;) .pr-2 (padding-right: 8px;) .pr-3 (padding-right: 16px;) .pr-4 (padding-right: 24px;) .pr-5 (padding-right: 48px;) padding top – .pt .pt-1 (padding-top: 4px;) .pt-2 (padding-top: 8px;) .pt-3 (padding-top: 16px;) .pt-4 (padding-top: 24px;) .pt-5 (padding-top: 48px;) padding bottom – .pb .pb-1 (padding-bottom: 4px;) .pb-2 (padding-bottom: 8px;) .pb-3 (padding-bottom: 16px;) .pb-4 (padding-bottom: 24px;) .pb-5 (padding-bottom: 48px;) Responsive padding Example Screen sizes: Extra small pl-5 | small pl-0 | medium pr-5 | large ml-0 | extra large p-5 Código de MARGIN & PADDING: Text Alignment .text-left (Left aligned text on all viewport sizes.) .text-center (Center aligned text on all viewport sizes.) .text-right (Right aligned text on all viewport sizes.) Responisve text alignment example .text-sm-left (Left aligned text on screens sized SM (small) or wider.) .text-md-right (Right aligned text on screens sized MD (medium) or wider.) .text-lg-right (Right aligned text on screens sized LG (large) or wider.) .text-xl-right (Right aligned text on screens sized XL (extra-large) or wider.) Código para Text Alignment Text transforms .text-lowercase (Lowercased text.) .text-uppercase (Uppercased text.) .text-capitalized (First letter of each word capitalized.) Código para TEXT TRANSFORMS Font weight & italics .font-weight-bold (Bold text.) .font-weight-normal (Normal weight text.) .font-weight-light (Light weight text.) .font-italic (Italic text.) Código para Font weight and italics Fancy heading text .display-1 .display-2 .display-3 .display-4 Código para Fancy Heading Text Fancy paragraph text normal paragraph – Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. .lead (Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor). Código para Fancy paragraph Text Text colors .text-primary .text-secondary .text-success .text-danger .text-warning .text-info .text-light .text-dark .text-body .text-muted .text-white .text-black-50 .text-white-50 Código para TEXT COLORS Background colors .bg-primary .bg-secondary .bg-success .bg-danger .bg-warning .bg-info .bg-light .bg-dark .bg-white .bg-transparent Código para BACKGROUND COLORS Display properties .d-inline .d-block .d-inline-block Responsive example – show extra small (default) – hide on small – show large – hide extra large .d-flex Flexbox – Direction .flex-row .flex-row .flex-row .flex-column .flex-column .flex-column Flexbox – Justify Content .justify-content-start .justify-content-end .justify-content-center .justify-content-between .justify-content-between .justify-content-around .justify-content-start Flexbox – Align Items .justify-content-start .justify-content-end .justify-content-center Learn more about other Flexbox Properties Código para Display property Border-radius .rounded-top (Border radius on top) .rounded-bottom (border radius on bottom) .rounded-left (radius left side) .rounded-right (border radius right side) .rounded (border radius all around) .rounded-cirlce Código para Border-radius Box Shadow .shadow-sm (Small shadow) .shadow (Regular shadow) .shadow-lg (Larger shadow) Código para Box Shadow Width & Height .w-25 (Width 25%) .w-50 (Width 50%) .w-75 (Width 75%) .w-100 (Width 100%) .w-auto (Width auto) .h-25 (Height 25%) .h-50 (Height 50%) .75 (Height 75%) .h-100 (Height 100%) .h-auto (Height auto) Código para width e Height Buttons .btn (default button styles) .btn .btn-link .btn .btn-outline-danger .btn .btn-sm (Large button) .btn .btn-lg (Large button) Button Groups .btn-group Left Middle Right Código para Buttons Cards & Card groups Card title This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. Last updated 3 mins ago Card title This card has supporting text below as a natural lead-in to additional content. Last updated 3 mins ago Card title This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. Last updated 3 mins ago Código para Cards Carousel Código para Carousel Collapse content Link with href Button with data-target Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Código para Collapse Dropdown content Dropdown link Action Another action Something else here Código para

O post Bootstrap 4, guia de referência com os elementos mais utilizados apareceu primeiro em Rotamáxima - Especialistas em resultados.

]]>