Quest: CSS vs Bootstrap

przez
HTML CSS CMS

Osobiście nie lubię dopracowywać wyglądu stron i aplikacji. Jeśli masz podobnie – może Ci się spodobać Bootstrap.

  1. Przeanalizuj kod poniżej
  2. Możesz też przeanalizować kodziki z questa Bootstrap – start
  3. Dopytaj AI czym jest Bootstrap, ale koniecznie przyznaj się, że uczysz się dopiero HTML i CSS, żeby nie popłynął w funkcjonalność JS. Poproś o wyjaśnienie klas z przykładów albo o wygenerowanie tabeli najpotrzebniejszych klas Bootstrapa
  4. Przerób poniższy kod tak, żeby wyglądał jak sensowna strona internetowa. Przerabiaj samodzielnie traktując AI jako asystenta a nie jako guru!
  5. Powstałą stronę dodaj do portfolio 🙂
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap – Zakładki i Karty</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 5 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container my-4">
    <div class="row">

        <!-- GŁÓWNA KOLUMNA -->
        <div class="col-lg-8 mb-4">

            <!-- Zakładki -->
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabela" type="button">
                        Tabela
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#galeria" type="button">
                        Galeria
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#karuzela" type="button">
                        Karuzela
                    </button>
                </li>
            </ul>

            <!-- Zawartość zakładek -->
            <div class="tab-content border border-top-0 p-3">

                <!-- TAB 1: TABELA -->
                <div class="tab-pane fade show active" id="tabela">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a vulputate est. Donec tristique placerat finibus. Praesent arcu sapien, aliquam quis massa ullamcorper, feugiat dignissim libero. In consectetur mauris non finibus sollicitudin. Quisque vitae facilisis urna, vel sodales massa. Cras tortor nunc, pellentesque quis augue ac, euismod scelerisque tellus. Etiam purus tellus, posuere a aliquet nec, posuere et diam.</p>
                    <p>Aliquam posuere dignissim orci, ut venenatis eros sollicitudin id. Morbi pharetra aliquet eleifend. Mauris sollicitudin feugiat quam dignissim bibendum. Integer congue risus hendrerit risus ullamcorper, sed semper ligula sodales. Proin nisl enim, faucibus ut ornare id, varius id nibh. Nulla lorem tortor, tincidunt quis nulla egestas, feugiat egestas sem. Nunc sollicitudin auctor odio, ut luctus elit malesuada eu. Maecenas suscipit augue et libero commodo porta. </p>
                    <table class="table table-striped table-responsive">
                        <thead>
                          <tr><th>#</th><th>Nazwa</th><th>Status</th></tr>
                        </thead>
                        <tbody>
                          <tr><td>1</td><td>Element A</td><td>Aktywny</td></tr>
                          <tr><td>2</td><td>Element B</td><td>Nieaktywny</td></tr>
                          <tr><td>3</td><td>Element C</td><td>Aktywny</td></tr>
                        </tbody>
                    </table>
                    <p>Aliquam posuere dignissim orci, ut venenatis eros sollicitudin id. Morbi pharetra aliquet eleifend. Mauris sollicitudin feugiat quam dignissim bibendum. Integer congue risus hendrerit risus ullamcorper, sed semper ligula sodales. Proin nisl enim, faucibus ut ornare id, varius id nibh. Nulla lorem tortor, tincidunt quis nulla egestas, feugiat egestas sem. Nunc sollicitudin auctor odio, ut luctus elit malesuada eu. Maecenas suscipit augue et libero commodo porta. </p>
                </div>

                <!-- TAB 2: GALERIA -->
                <div class="tab-pane fade" id="galeria">
                    <div class="row g-3">
                        <div class="col-6 col-md-4">
                            <img src="https://picsum.photos/300?1" class="img-fluid rounded">
                            <h6>Lorem</h6>
                        </div>
                        <div class="col-6 col-md-4">
                            <img src="https://picsum.photos/300?2" class="img-fluid rounded">
                            <h6>Dolor</h6>
                        </div>
                        <div class="col-6 col-md-4">
                            <img src="https://picsum.photos/300?3" class="img-fluid rounded">
                            <h6>Ipsum</h6>
                        </div>
                    </div>
                </div>

                <!-- TAB 3: KARUZELA -->
                <div class="tab-pane fade" id="karuzela">
                    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="https://picsum.photos/800/300?4" class="d-block w-100">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a vulputate est. Donec tristique placerat finibus. Praesent arcu sapien, aliquam quis massa ullamcorper, feugiat dignissim libero. In consectetur mauris non finibus sollicitudin. Quisque vitae facilisis urna, vel sodales massa. Cras tortor nunc, pellentesque quis augue ac, euismod scelerisque tellus. Etiam purus tellus, posuere a aliquet nec, posuere et diam.</p>
                            </div>
                            <div class="carousel-item">
                                <img src="https://picsum.photos/800/300?5" class="d-block w-100">
                                <p>Aliquam posuere dignissim orci, ut venenatis eros sollicitudin id. Morbi pharetra aliquet eleifend. Mauris sollicitudin feugiat quam dignissim bibendum. Integer congue risus hendrerit risus ullamcorper, sed semper ligula sodales. Proin nisl enim, faucibus ut ornare id, varius id nibh. Nulla lorem tortor, tincidunt quis nulla egestas, feugiat egestas sem. Nunc sollicitudin auctor odio, ut luctus elit malesuada eu. Maecenas suscipit augue et libero commodo porta. </p>
                            </div>
                            <div class="carousel-item">
                                <img src="https://picsum.photos/800/300?6" class="d-block w-100">
                                <p>Quisque scelerisque rhoncus cursus. Donec in fringilla lorem, eu molestie orci. Praesent diam odio, cursus in elit vitae, suscipit convallis mi. Mauris aliquam purus a tempus lobortis. Maecenas quam mauris, condimentum ac elementum sit amet, finibus id sapien. Vestibulum ac rutrum quam. Phasellus scelerisque varius enim nec euismod. Quisque pretium dolor nec orci condimentum, consectetur porta diam pretium.</p>
                            </div>
                        </div>

                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </button>
                    </div>
                </div>

            </div>
        </div>

        <!-- BOCZNA KOLUMNA -->
        <div class="col-lg-4">

            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title">Karta 1</h5>
                    <p class="card-text">Krótki opis pierwszej karty.</p>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title">Karta 2</h5>
                    <p class="card-text">Krótki opis drugiej karty.</p>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Karta 3</h5>
                    <p class="card-text">Krótki opis trzeciej karty.</p>
                </div>
            </div>

        </div>
    </div>
</div>

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

Twój komentarz

Zapisz moje dane, adres e-mail i witrynę w przeglądarce aby wypełnić dane podczas pisania kolejnych komentarzy.