Elysia Tools

Explore ferramentas, exemplos, explicações visuais e guias temáticos em um espaço claro.

Categorias populares

Temas

Idioma
ZHDERUPTENFRES

Elysia Tools

Navegação

Frameworks CSS

Exemplos Bootstrap 5

Exemplos do framework CSS Bootstrap 5 incluindo componentes, utilitários, sistema de layout e padrões de design responsivo

Exemplos

Entradas desta coleção

CódigohtmlSimples

Sistema de Grade Bootstrap

Exemplos completos do sistema de grade Bootstrap 5 com breakpoints responsivos e utilitários de layout

Dificuldade

3/10

Tempo estimado

20 min

Etiquetas

bootstrap, grid, layout, responsive

Pré-requisitos

HTML basics, CSS basics

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Grid System</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .demo-cell {
            background-color: #007bff;
            color: white;
            border: 1px solid rgba(255,255,255,0.3);
            padding: 1rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1>Bootstrap 5 Grid System Examples</h1>

        <!-- Basic Grid -->
        <h2 class="mt-4">Basic Grid</h2>
        <div class="row">
            <div class="col demo-cell">Column 1</div>
            <div class="col demo-cell">Column 2</div>
            <div class="col demo-cell">Column 3</div>
        </div>

        <!-- Grid with Column Sizing -->
        <h2 class="mt-4">Column Sizing</h2>
        <div class="row">
            <div class="col-4 demo-cell">col-4</div>
            <div class="col-4 demo-cell">col-4</div>
            <div class="col-4 demo-cell">col-4</div>
        </div>

        <div class="row mt-2">
            <div class="col-6 demo-cell">col-6</div>
            <div class="col-6 demo-cell">col-6</div>
        </div>

        <!-- Responsive Grid -->
        <h2 class="mt-4">Responsive Grid</h2>
        <div class="row">
            <div class="col-12 col-md-6 col-lg-4 demo-cell">
                12 on mobile, 6 on tablet, 4 on desktop
            </div>
            <div class="col-12 col-md-6 col-lg-4 demo-cell">
                12 on mobile, 6 on tablet, 4 on desktop
            </div>
            <div class="col-12 col-md-12 col-lg-4 demo-cell">
                12 on mobile/tablet, 4 on desktop
            </div>
        </div>

        <!-- Auto Layout Columns -->
        <h2 class="mt-4">Auto Layout Columns</h2>
        <div class="row">
            <div class="col demo-cell">Auto column</div>
            <div class="col demo-cell">Auto column</div>
            <div class="col demo-cell">Auto column</div>
        </div>

        <!-- Nested Grid -->
        <h2 class="mt-4">Nested Grid</h2>
        <div class="row">
            <div class="col-8 demo-cell" style="background-color: #28a745;">
                <div class="row">
                    <div class="col-6" style="background-color: #17a2b8;">Nested 1</div>
                    <div class="col-6" style="background-color: #17a2b8;">Nested 2</div>
                </div>
            </div>
            <div class="col-4 demo-cell">Column</div>
        </div>

        <!-- Offset Columns -->
        <h2 class="mt-4">Offset Columns</h2>
        <div class="row">
            <div class="col-4 demo-cell">Column</div>
            <div class="col-4 offset-4 demo-cell">Offset 4</div>
        </div>

        <!-- Gutter Utilities -->
        <h2 class="mt-4">Gutter Utilities</h2>
        <div class="row g-0">
            <div class="col-6 demo-cell">No gutter</div>
            <div class="col-6 demo-cell">No gutter</div>
        </div>

        <div class="row g-3 mt-2">
            <div class="col-6 demo-cell">Gutter 3</div>
            <div class="col-6 demo-cell">Gutter 3</div>
        </div>

        <!-- Row and Column Utilities -->
        <h2 class="mt-4">Row and Column Utilities</h2>
        <div class="row justify-content-center">
            <div class="col-4 demo-cell">Centered</div>
        </div>

        <div class="row justify-content-end">
            <div class="col-4 demo-cell">Right aligned</div>
        </div>

        <div class="row justify-content-between">
            <div class="col-3 demo-cell">Left</div>
            <div class="col-3 demo-cell">Right</div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CódigohtmlIntermediário

Componentes Bootstrap 5

Componentes UI essenciais Bootstrap 5 incluindo botões, cards, modais, navegação e formulários

Dificuldade

4/10

Tempo estimado

30 min

Etiquetas

bootstrap, components, ui

Pré-requisitos

HTML basics, CSS basics, Bootstrap grid system

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Components</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
    <div class="container mt-4">
        <h1>Bootstrap 5 Components</h1>

        <!-- Buttons -->
        <h2 class="mt-5">Buttons</h2>
        <div class="mb-3">
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-secondary">Secondary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-light">Light</button>
            <button type="button" class="btn btn-dark">Dark</button>
        </div>

        <div class="mb-3">
            <button type="button" class="btn btn-outline-primary">Primary Outline</button>
            <button type="button" class="btn btn-outline-secondary">Secondary Outline</button>
            <button type="button" class="btn btn-outline-success">Success Outline</button>
        </div>

        <div class="mb-3">
            <button type="button" class="btn btn-primary btn-lg">Large button</button>
            <button type="button" class="btn btn-primary btn-sm">Small button</button>
        </div>

        <!-- Alerts -->
        <h2 class="mt-5">Alerts</h2>
        <div class="alert alert-primary" role="alert">
            A simple primary alert—check it out!
        </div>
        <div class="alert alert-secondary" role="alert">
            A simple secondary alert—check it out!
        </div>
        <div class="alert alert-success" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i>
            Success! Your changes have been saved.
        </div>
        <div class="alert alert-danger" role="alert">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>
            Danger! Something went wrong.
        </div>

        <!-- Cards -->
        <h2 class="mt-5">Cards</h2>
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card image">
                    <div class="card-body">
                        <h5 class="card-title">Card Title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        Featured
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Special Title Treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                    <div class="card-footer text-muted">
                        2 days ago
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-white bg-primary">
                    <div class="card-body">
                        <h5 class="card-title">Primary Card</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Badges -->
        <h2 class="mt-5">Badges</h2>
        <div class="mb-3">
            <h1>Example heading <span class="badge bg-secondary">New</span></h1>
            <h2>Example heading <span class="badge bg-secondary">New</span></h2>
            <h3>Example heading <span class="badge bg-secondary">New</span></h3>
            <h4>Example heading <span class="badge bg-secondary">New</span></h4>
            <h5>Example heading <span class="badge bg-secondary">New</span></h5>
            <h6>Example heading <span class="badge bg-secondary">New</span></h6>
        </div>

        <div class="mb-3">
            <button type="button" class="btn btn-primary">
                Notifications <span class="badge bg-secondary">4</span>
            </button>
        </div>

        <div class="mb-3">
            <span class="badge bg-primary">Primary</span>
            <span class="badge bg-secondary">Secondary</span>
            <span class="badge bg-success">Success</span>
            <span class="badge bg-danger">Danger</span>
            <span class="badge bg-warning text-dark">Warning</span>
            <span class="badge bg-info text-dark">Info</span>
            <span class="badge bg-light text-dark">Light</span>
            <span class="badge bg-dark">Dark</span>
        </div>

        <!-- Progress -->
        <h2 class="mt-5">Progress</h2>
        <div class="progress mb-3">
            <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress mb-3">
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
        </div>
        <div class="progress mb-3">
            <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
        </div>
        <div class="progress mb-3">
            <div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
        </div>

        <!-- List Groups -->
        <h2 class="mt-5">List Groups</h2>
        <div class="row">
            <div class="col-md-4">
                <ul class="list-group">
                    <li class="list-group-item">An item</li>
                    <li class="list-group-item">A second item</li>
                    <li class="list-group-item">A third item</li>
                    <li class="list-group-item">A fourth item</li>
                    <li class="list-group-item">And a fifth one</li>
                </ul>
            </div>
            <div class="col-md-4">
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
                        The current link item
                    </a>
                    <a href="#" class="list-group-item list-group-item-action">A second link item</a>
                    <a href="#" class="list-group-item list-group-item-action">A third link item</a>
                    <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
                    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
                </div>
            </div>
            <div class="col-md-4">
                <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        A list item
                        <span class="badge bg-primary rounded-pill">14</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        A second list item
                        <span class="badge bg-primary rounded-pill">2</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        A third list item
                        <span class="badge bg-primary rounded-pill">1</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CódigohtmlIntermediário

Formulários Bootstrap 5

Componentes de formulário Bootstrap 5 incluindo inputs, validação, checkboxes, radio buttons e layouts de formulário

Dificuldade

5/10

Tempo estimado

35 min

Etiquetas

bootstrap, forms, validation, ui

Pré-requisitos

HTML forms, Bootstrap basics, JavaScript basics

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Forms</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h1>Bootstrap 5 Forms</h1>

        <!-- Basic Form -->
        <h2 class="mt-5">Basic Form</h2>
        <form>
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
            </div>
            <div class="mb-3">
                <label for="exampleInputPassword1" class="form-label">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1">
            </div>
            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>

        <!-- Form Controls -->
        <h2 class="mt-5">Form Controls</h2>
        <form>
            <div class="mb-3">
                <label for="exampleFormControlInput1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
            </div>
            <div class="mb-3">
                <label for="exampleFormControlSelect1" class="form-label">Select dropdown</label>
                <select class="form-select" id="exampleFormControlSelect1">
                    <option selected>Choose...</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="exampleFormControlSelect2" class="form-label">Multiple select</label>
                <select multiple class="form-select" id="exampleFormControlSelect2">
                    <option selected>Choose...</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                    <option value="4">Four</option>
                    <option value="5">Five</option>
                </select>
            </div>
            <div class="mb-3">
                <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
            <div class="mb-3">
                <label for="formFile" class="form-label">Default file input example</label>
                <input class="form-control" type="file" id="formFile">
            </div>
            <div class="mb-3">
                <label for="formFileMultiple" class="form-label">Multiple files input example</label>
                <input class="form-control" type="file" id="formFileMultiple" multiple>
            </div>
        </form>

        <!-- Sizing -->
        <h2 class="mt-5">Form Sizing</h2>
        <div class="mb-3">
            <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
        </div>
        <div class="mb-3">
            <input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
        </div>
        <div class="mb-3">
            <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
        </div>

        <!-- Checkboxes and Radios -->
        <h2 class="mt-5">Checkboxes and Radios</h2>
        <div class="row">
            <div class="col-md-6">
                <h5>Checkboxes</h5>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                    <label class="form-check-label" for="flexCheckDefault">
                        Default checkbox
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
                    <label class="form-check-label" for="flexCheckChecked">
                        Checked checkbox
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
                    <label class="form-check-label" for="flexCheckDisabled">
                        Disabled checkbox
                    </label>
                </div>
            </div>
            <div class="col-md-6">
                <h5>Radio buttons</h5>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
                    <label class="form-check-label" for="flexRadioDefault1">
                        Default radio
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
                    <label class="form-check-label" for="flexRadioDefault2">
                        Default checked radio
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDisabled" disabled>
                    <label class="form-check-label" for="flexRadioDisabled">
                        Disabled radio
                    </label>
                </div>
            </div>
        </div>

        <!-- Inline Checkboxes and Radios -->
        <h2 class="mt-5">Inline Checkboxes and Radios</h2>
        <div class="mb-3">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                <label class="form-check-label" for="inlineCheckbox1">1</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
                <label class="form-check-label" for="inlineCheckbox2">2</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
                <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
            </div>
        </div>

        <div class="mb-3">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">1</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                <label class="form-check-label" for="inlineRadio2">2</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
                <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
            </div>
        </div>

        <!-- Form Validation -->
        <h2 class="mt-5">Form Validation</h2>
        <form class="row g-3 needs-validation" novalidate>
            <div class="col-md-6">
                <label for="validationCustom01" class="form-label">First name</label>
                <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
                <div class="valid-feedback">
                    Looks good!
                </div>
            </div>
            <div class="col-md-6">
                <label for="validationCustom02" class="form-label">Last name</label>
                <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
                <div class="valid-feedback">
                    Looks good!
                </div>
            </div>
            <div class="col-md-6">
                <label for="validationCustomUsername" class="form-label">Username</label>
                <div class="input-group has-validation">
                    <span class="input-group-text" id="inputGroupPrepend">@</span>
                    <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
                    <div class="invalid-feedback">
                        Please choose a username.
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <label for="validationCustom03" class="form-label">City</label>
                <input type="text" class="form-control" id="validationCustom03" required>
                <div class="invalid-feedback">
                    Please provide a valid city.
                </div>
            </div>
            <div class="col-md-6">
                <label for="validationCustom04" class="form-label">State</label>
                <select class="form-select" id="validationCustom04" required>
                    <option selected disabled value="">Choose...</option>
                    <option>...</option>
                </select>
                <div class="invalid-feedback">
                    Please select a valid state.
                </div>
            </div>
            <div class="col-md-6">
                <label for="validationCustom05" class="form-label">Zip</label>
                <input type="text" class="form-control" id="validationCustom05" required>
                <div class="invalid-feedback">
                    Please provide a valid zip.
                </div>
            </div>
            <div class="col-12">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                    <label class="form-check-label" for="invalidCheck">
                        Agree to terms and conditions
                    </label>
                    <div class="invalid-feedback">
                        You must agree before submitting.
                    </div>
                </div>
            </div>
            <div class="col-12">
                <button class="btn btn-primary" type="submit">Submit form</button>
            </div>
        </form>

        <!-- Input Groups -->
        <h2 class="mt-5">Input Groups</h2>
        <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">@</span>
            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
        </div>

        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
            <span class="input-group-text" id="basic-addon2">@example.com</span>
        </div>

        <div class="input-group mb-3">
            <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
            <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
        </div>

        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="button-addon2">
            <button class="btn btn-outline-secondary" type="button" id="button-addon2">Search</button>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function () {
            'use strict'
            var forms = document.querySelectorAll('.needs-validation')
            Array.prototype.slice.call(forms).forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
        })()
    </script>
</body>
</html>
CódigohtmlIntermediário

Navegação Bootstrap 5

Componentes de navegação Bootstrap 5 incluindo barra de navegação, navs, breadcrumbs, paginação e offcanvas

Dificuldade

5/10

Tempo estimado

30 min

Etiquetas

bootstrap, navigation, ui, layout

Pré-requisitos

HTML basics, Bootstrap components, JavaScript basics

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Navigation</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
    <!-- Basic Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Dropdown
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li>
                </ul>
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-light" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <h1>Bootstrap 5 Navigation Examples</h1>

        <!-- Color Schemes -->
        <h2 class="mt-5">Navbar Color Schemes</h2>
        <div class="row">
            <div class="col-12 mb-3">
                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <div class="container-fluid">
                        <a class="navbar-brand" href="#">Light</a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarLight" aria-controls="navbarLight" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarLight">
                            <ul class="navbar-nav">
                                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                                <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>

            <div class="col-12 mb-3">
                <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                    <div class="container-fluid">
                        <a class="navbar-brand" href="#">Dark</a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDark" aria-controls="navbarDark" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarDark">
                            <ul class="navbar-nav">
                                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                                <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>

        <!-- Navs and Tabs -->
        <h2 class="mt-5">Navs and Tabs</h2>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
            </li>
        </ul>

        <!-- Pills -->
        <h3 class="mt-4">Pills</h3>
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
            </li>
        </ul>

        <!-- Fill and Justify -->
        <h3 class="mt-4">Fill and Justify</h3>
        <ul class="nav nav-pills nav-fill">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Much longer nav link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
            </li>
        </ul>

        <!-- Tabs with Dropdown -->
        <h3 class="mt-4">Tabs with Dropdown</h3>
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
            </li>
        </ul>

        <!-- Breadcrumbs -->
        <h2 class="mt-5">Breadcrumbs</h2>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active" aria-current="page">Home</li>
            </ol>
        </nav>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Library</li>
            </ol>
        </nav>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Library</a></li>
                <li class="breadcrumb-item active" aria-current="page">Data</li>
            </ol>
        </nav>

        <!-- Pagination -->
        <h2 class="mt-5">Pagination</h2>
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item active"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">Next</a></li>
            </ul>
        </nav>

        <!-- Pagination with Icons -->
        <h3 class="mt-4">Pagination with Icons</h3>
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item active"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- Disabled and Active States -->
        <h3 class="mt-4">Disabled and Active States</h3>
        <nav aria-label="...">
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link">Previous</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item active" aria-current="page">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>

        <!-- Sizing -->
        <h3 class="mt-4">Sizing</h3>
        <div class="mb-3">
            <nav aria-label="Page navigation example">
                <ul class="pagination pagination-lg">
                    <li class="page-item active" aria-current="page">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                </ul>
            </nav>

            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item active" aria-current="page">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                </ul>
            </nav>

            <nav aria-label="Page navigation example">
                <ul class="pagination pagination-sm">
                    <li class="page-item active" aria-current="page">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                </ul>
            </nav>
        </div>

        <!-- Offcanvas -->
        <h2 class="mt-5">Offcanvas</h2>
        <div class="d-grid gap-2 d-md-flex justify-content-md-start">
            <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                Toggle left offcanvas
            </button>
            <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
                Toggle right offcanvas
            </button>
        </div>

        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div>
                    Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
                </div>
                <div class="dropdown mt-3">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
                        Dropdown button
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas Right</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div>
                    Content for the offcanvas that appears from the right side.
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CódigohtmlSimples

Utilitários Bootstrap 5

Classes de utilidade Bootstrap 5 para espaçamento, tipografia, cores, bordas, exibição e design responsivo

Dificuldade

3/10

Tempo estimado

25 min

Etiquetas

bootstrap, utilities, css, helper-classes

Pré-requisitos

CSS basics, Bootstrap basics

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Utilities</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .demo-box {
            background-color: #e9ecef;
            border: 1px solid #dee2e6;
            min-height: 2rem;
        }
        .demo-text {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            padding: 0.5rem;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1>Bootstrap 5 Utilities Examples</h1>

        <!-- Spacing -->
        <h2 class="mt-5">Spacing Utilities</h2>
        <h3>Margin</h3>
        <div class="demo-box m-0">m-0 (no margin)</div>
        <div class="demo-box m-1">m-1 (0.25rem)</div>
        <div class="demo-box m-2">m-2 (0.5rem)</div>
        <div class="demo-box m-3">m-3 (1rem)</div>
        <div class="demo-box m-4">m-4 (1.5rem)</div>
        <div class="demo-box m-5">m-5 (3rem)</div>

        <h4 class="mt-4">Directional Margins</h4>
        <div class="demo-box mt-3">mt-3 (margin-top)</div>
        <div class="demo-box me-3">me-3 (margin-end)</div>
        <div class="demo-box mb-3">mb-3 (margin-bottom)</div>
        <div class="demo-box ms-3">ms-3 (margin-start)</div>
        <div class="demo-box mx-3">mx-3 (margin left & right)</div>
        <div class="demo-box my-3">my-3 (margin top & bottom)</div>

        <h3 class="mt-4">Padding</h3>
        <div class="demo-box p-0">p-0 (no padding)</div>
        <div class="demo-box p-1">p-1 (0.25rem)</div>
        <div class="demo-box p-2">p-2 (0.5rem)</div>
        <div class="demo-box p-3">p-3 (1rem)</div>
        <div class="demo-box p-4">p-4 (1.5rem)</div>
        <div class="demo-box p-5">p-5 (3rem)</div>

        <!-- Typography -->
        <h2 class="mt-5">Typography Utilities</h2>
        <h3>Headings</h3>
        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
        <h1 class="display-5">Display 5</h1>
        <h1 class="display-6">Display 6</h1>

        <h4 class="mt-4">Lead and Font Size</h4>
        <p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>
        <p class="fs-1">fs-1 text</p>
        <p class="fs-2">fs-2 text</p>
        <p class="fs-3">fs-3 text</p>
        <p class="fs-4">fs-4 text</p>
        <p class="fs-5">fs-5 text</p>
        <p class="fs-6">fs-6 text</p>

        <h4 class="mt-4">Font Weight and Style</h4>
        <p class="fw-bold">Bold text</p>
        <p class="fw-bolder">Bolder text</p>
        <p class="fw-normal">Normal weight text</p>
        <p class="fw-light">Light text</p>
        <p class="fw-lighter">Lighter text</p>
        <p class="fst-italic">Italic text</p>
        <p class="fst-normal">Normal style text</p>

        <h4 class="mt-4">Text Alignment</h4>
        <p class="text-start">Start aligned text.</p>
        <p class="text-center">Center aligned text.</p>
        <p class="text-end">End aligned text.</p>

        <h4 class="mt-4">Text Transform</h4>
        <p class="text-lowercase">Lowercased text.</p>
        <p class="text-uppercase">Uppercased text.</p>
        <p class="text-capitalize">Capitalized text.</p>

        <!-- Colors -->
        <h2 class="mt-5">Color Utilities</h2>
        <h3>Text Colors</h3>
        <p class="text-primary">Primary text</p>
        <p class="text-secondary">Secondary text</p>
        <p class="text-success">Success text</p>
        <p class="text-danger">Danger text</p>
        <p class="text-warning text-dark">Warning text</p>
        <p class="text-info text-dark">Info text</p>
        <p class="text-light bg-dark">Light text</p>
        <p class="text-dark">Dark text</p>
        <p class="text-body">Body text</p>
        <p class="text-muted">Muted text</p>
        <p class="text-white bg-dark">White text</p>

        <h4 class="mt-4">Background Colors</h4>
        <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
        <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
        <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
        <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
        <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
        <div class="p-3 mb-2 bg-info text-white">.bg-info</div>
        <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
        <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
        <div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
        <div class="p-3 mb-2 bg-white border">.bg-white</div>
        <div class="p-3 mb-2 bg-transparent border">.bg-transparent</div>

        <!-- Borders -->
        <h2 class="mt-5">Border Utilities</h2>
        <h3>Border Additive</h3>
        <div class="demo-box border">.border</div>
        <div class="demo-box border-top">.border-top</div>
        <div class="demo-box border-end">.border-end</div>
        <div class="demo-box border-bottom">.border-bottom</div>
        <div class="demo-box border-start">.border-start</div>

        <h4 class="mt-4">Border Subtractive</h4>
        <div class="demo-box border border-0">.border-0</div>
        <div class="demo-box border border-top-0">.border-top-0</div>
        <div class="demo-box border border-end-0">.border-end-0</div>
        <div class="demo-box border border-bottom-0">.border-bottom-0</div>
        <div class="demo-box border border-start-0">.border-start-0</div>

        <h4 class="mt-4">Border Color</h4>
        <div class="demo-box border border-primary">.border-primary</div>
        <div class="demo-box border border-secondary">.border-secondary</div>
        <div class="demo-box border border-success">.border-success</div>
        <div class="demo-box border border-danger">.border-danger</div>
        <div class="demo-box border border-warning">.border-warning</div>
        <div class="demo-box border border-info">.border-info</div>
        <div class="demo-box border border-light">.border-light</div>
        <div class="demo-box border border-dark">.border-dark</div>

        <h4 class="mt-4">Border Width</h4>
        <div class="demo-box border border-1">.border-1</div>
        <div class="demo-box border border-2">.border-2</div>
        <div class="demo-box border border-3">.border-3</div>
        <div class="demo-box border border-4">.border-4</div>
        <div class="demo-box border border-5">.border-5</div>

        <h4 class="mt-4">Border Radius</h4>
        <div class="demo-box border rounded">.rounded</div>
        <div class="demo-box border rounded-top">.rounded-top</div>
        <div class="demo-box border rounded-end">.rounded-end</div>
        <div class="demo-box border rounded-bottom">.rounded-bottom</div>
        <div class="demo-box border rounded-start">.rounded-start</div>
        <div class="demo-box border rounded-circle">.rounded-circle</div>
        <div class="demo-box border rounded-pill">.rounded-pill</div>
        <div class="demo-box border rounded-0">.rounded-0</div>

        <!-- Display -->
        <h2 class="mt-5">Display Utilities</h2>
        <div class="demo-box d-block">d-block</div>
        <div class="demo-box d-inline">d-inline</div>
        <span class="demo-box d-inline-block">d-inline-block</span>

        <h4 class="mt-4">Hiding Elements</h4>
        <div class="demo-box d-none">d-none (hidden)</div>
        <div class="demo-box d-inline d-none d-lg-block">Only visible on large screens and up</div>

        <h4 class="mt-4">Flexbox Utilities</h4>
        <div class="d-flex p-2 bg-light mb-3">
            <div class="p-2 bg-primary text-white flex-fill">Flex item</div>
            <div class="p-2 bg-secondary text-white flex-fill">Flex item</div>
            <div class="p-2 bg-info text-white flex-fill">Flex item</div>
        </div>

        <div class="d-flex p-2 bg-light mb-3">
            <div class="p-2 bg-primary text-white me-auto">Flex item with margin auto</div>
            <div class="p-2 bg-secondary text-white">Flex item</div>
            <div class="p-2 bg-info text-white">Flex item</div>
        </div>

        <!-- Position -->
        <h2 class="mt-5">Position Utilities</h2>
        <div class="position-relative p-3 bg-light" style="height: 200px;">
            <div class="position-absolute top-0 start-0">Top left</div>
            <div class="position-absolute top-0 end-0">Top right</div>
            <div class="position-absolute top-50 start-50 translate-middle">Center</div>
            <div class="position-absolute bottom-0 start-0">Bottom left</div>
            <div class="position-absolute bottom-0 end-0">Bottom right</div>
        </div>

        <!-- Sizing -->
        <h2 class="mt-5">Sizing Utilities</h2>
        <div class="demo-box w-25">Width 25%</div>
        <div class="demo-box w-50">Width 50%</div>
        <div class="demo-box w-75">Width 75%</div>
        <div class="demo-box w-100">Width 100%</div>
        <div class="demo-box w-auto">Width auto</div>

        <h4 class="mt-4">Height</h4>
        <div class="demo-box" style="height: 25vh;">Height 25vh</div>
        <div class="demo-box" style="height: 50vh;">Height 50vh</div>
        <div class="demo-box" style="height: 75vh;">Height 75vh</div>
        <div class="demo-box" style="height: 100vh;">Height 100vh</div>

        <!-- Shadow -->
        <h2 class="mt-5">Shadow Utilities</h2>
        <div class="demo-box shadow-none">No shadow</div>
        <div class="demo-box shadow-sm">Small shadow</div>
        <div class="demo-box shadow">Regular shadow</div>
        <div class="demo-box shadow-lg">Large shadow</div>

        <!-- Overflow -->
        <h2 class="mt-5">Overflow Utilities</h2>
        <div class="demo-box overflow-auto" style="height: 100px;">
            This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions.
            By design, this content will vertically scroll if the content exceeds the defined height of the element.
        </div>

        <div class="demo-box overflow-hidden mt-3" style="height: 100px;">
            This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
            By design, this content will be clipped to the dimensions of the element.
        </div>

        <!-- Responsive Utilities -->
        <h2 class="mt-5">Responsive Utilities</h2>
        <h3>Display Responsive</h3>
        <div class="d-none d-sm-block d-md-none">Hidden on mobile, visible only on tablet</div>
        <div class="d-none d-md-block d-lg-none">Hidden on tablet, visible only on desktop</div>
        <div class="d-none d-lg-block">Hidden on tablet and mobile, visible only on large screens</div>

        <h4 class="mt-4">Flex Direction Responsive</h3>
        <div class="d-flex flex-column flex-md-row">
            <div class="demo-box flex-fill">Item 1</div>
            <div class="demo-box flex-fill">Item 2</div>
            <div class="demo-box flex-fill">Item 3</div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Ferramentas

Ferramentas frequentemente usadas com este exemplo

Relacionado

Coleções de exemplos relacionadas

Relacionado

Temas relacionados

Tema

Criação de CSS, layout e cascata

Crie e revise CSS com formatação, diagnóstico de seletores, trechos responsivos, efeitos visuais e verificações renderizadas.

Tema

Fluxo de sistema de cores e efeitos CSS

Extrair uma paleta, construir relacoes acessiveis, gerar tokens e aplicar efeitos CSS coerentes em estados reais de interface.

Tema

Verificação de Assinatura Destacada e Integridade de Arquivos

Gere ou reproduza o hash de um arquivo conhecido, compare-o com um checksum publicado e verifique uma assinatura Ed25519 destacada usando uma chave pública confiável por confirmação independente.

Tema

Inventário visual de sites e entrega de tokens de design revisados

Capture uma página pública autorizada, confira as observações de CSS na imagem e entregue propostas de tokens revisadas, com evidências, decisões e limitações registradas.

Início
Ferramentas3212
Bancada
Exemplos593
Visualizações471
Visualizadores de arquivos103
Temas239
Etiquetas333
Imagens, áudio e vídeo657

Ferramentas de processamento, conversão e otimização de imagens, áudio e vídeo

Matemática, datas e finanças647

Calculadoras, ferramentas numéricas, lógica de datas, estatística e finanças

Design e cor298

Ferramentas de cor, layout, gráficos, estilo visual e apoio ao design

Texto e escrita209

Ferramentas de escrita, limpeza, formatação, extração e análise de texto

Desenvolvimento e Web193

Utilitários para desenvolvedores, rede, depuração web e automação

Conversão e codificação175

Ferramentas de conversão de formatos, arquivos, unidades, arquivos compactados e codificação

Lançamento de quiz de captação e transferência de contatos
Textos memoriais: revisão familiar e entrega para impressão
Hábitos privados: backup, restauração e revisão para partilha
De artigo a rascunhos de X e LinkedIn: revisão factual e entrega
Revisão de aula Markdown interativa e entrega offline

© 2026 Elysia Tools. Todos os direitos reservados.

DocumentaçãoPreçosSobreTermos de serviçoPolítica de privacidadeCookiesContato

Media

Conversor de AVI para MP4

Converte arquivos de vídeo AVI para formato MP4

Media

Conversor de MP4 para AVI

Converte arquivos de vídeo MP4 para formato AVI

Media

Conversor de Video em Lote

Converta múltiplos arquivos de video entre diferentes formatos como MP4, WebM, MKV, AVI, MOV com configurações de qualidade e processamento em lote

Media

Cortador de Vídeo

Cortar e aparar clipes de vídeo com precisão, suportando múltiplos formatos e configurações de qualidade

Media

Vídeo para APNG

Converter clipes de vídeo para formato APNG (PNG Animado) com suporte a transparência e melhor qualidade que GIF

Media

Vídeo para GIF Otimizado

Converte vídeos em formato GIF otimizado com configurações avançadas de compressão

Media

Vídeo para Sequência de Imagens

Extrair quadros do vídeo como sequência de imagens com taxa de quadros, qualidade e formato personalizáveis

Media

Cortar Vídeo

Cortar clipes de vídeo rapidamente - extrair segmentos com processamento rápido sem perdas

Frameworks CSS

Exemplos do Framework CSS Bulma

Exemplos do framework CSS Bulma incluindo colunas, componentes, controles de formulário, sistema de layout e padrões de design modernos baseados em CSS

Frameworks CSS

Exemplos do Framework CSS Milligram

Exemplos do framework CSS Milligram incluindo tipografia, formulários, grids e componentes

Mídia

Exemplos SVG

Exemplos de Gráficos Vetoriais Escaláveis (SVG) demonstrando vários recursos e técnicas SVG

Testes

BDD with Cucumber - Práticas de Desenvolvimento Orientado a Comportamento

Exemplos abrangentes de Cucumber BDD incluindo arquivos de feature, definições de passo, tabelas de dados, hooks e padrões BDD avançados para desenvolvimento colaborativo

Frameworks CSS

Exemplos do TailUI

Exemplos de componentes do framework CSS TailUI e padrões de UI

Frameworks Web

Exemplos Preact

Exemplos do framework Preact incluindo componentes, hooks, routing e padrões modernos do Preact