Jumat, 19 Januari 2024

Navbar bootstrap


code

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="javascript:void(0)">Akaa Lenathea</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="mynavbar">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:void(0)">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:void(0)">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:void(0)">Contact Me</a>
                    </li>
                </ul>
            </div>

        </div>
    </nav>
    <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-dark" type="button">Search</button>
    </form>

    <div class="container-fluid mt-3">
        <h3>contoh penggunaan Navbar pada bootstrap</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt inventore harum molestiae aliquam facere a
            aut, ducimus cum esse, saepe soluta corrupti! Fuga, quia. Incidunt sit corrupti laboriosam facilis
            voluptatibus.</p>
    </div>
</body>

</html>

di Tidak ada komentar:

Jumat, 05 Januari 2024

grid bootstrap


code:
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>

    <div class="container-fluid mt-3">
        <h1>Three equal width columns</h1>
        <p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.
        </p>
        <div class="row">
            <div class="col p-3 bg-dark text-white">3</div>
            <div class="col p-2 bg-warning text-white">2</div>
            <div class="col p-4 bg-primary text-white">4</div>
            <div class="col p-3 bg-danger text-white">3</div>
        </div>
        <div class="row">
            <div class="col p-4 bg-danger text-white">4</div>
            <div class="col p-4 bg-warning text-white">4</div>
            <div class="col p-2 bg-primary text-white">2</div>
            <div class="col p-2 bg-info text-white">2</div>
        </div>

        <div class="row">
            <div class="col p-6 bg-info text-white">6</div>
            <div class="col p-3 bg-black text-white">3</div>
            <div class="col p-3 bg-warning text-white">3</div>
           
        </div>
    </div>

</body>

</html>


di Tidak ada komentar:

first Bootstrap

 

My First Bootstrap Page

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Menara eiffel

Dinamai sesuai nama perancangnya, Gustave Eiffel, Menara Eiffel adalah bangunan tertinggi di Paris dan salah satu struktur terkenal di dunia.[1] Lebih dari 200.000.000 orang telah mengunjungi menara ini sejak pembangunannya tahun 1889,[2] termasuk 6.719.200 orang tahun 2006,[3] menjadikannya monumen berbayar yang paling banyak dikunjungi di dunia.[4][5] Termasuk antena setinggi 24 m (79 kaki), struktur ini memiliki tinggi 325 m (1.063 kaki) sejak 2000, yang sama dengan bangunan konvensional bertingkat 81.

Dark Striped Table

Combine .table-dark and .table-striped to create a dark, striped table:

FirstnameLastnameEmail
JohnDoejohn@example.com
MaryMoemary@example.com
JulyDooleyjuly@example.com


code:
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 5 Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container-fluid p-5 bg-dark text-white text-center">
        <h1>My First Bootstrap Page</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="container mt-3">
        <img src="paris.jpg" class="mx-auto d-block" style="width:45%">
        <h2>Menara eiffel</h2>
        <p>Dinamai sesuai nama perancangnya, Gustave Eiffel, Menara Eiffel adalah bangunan tertinggi di Paris dan salah
            satu struktur terkenal di dunia.[1] Lebih dari 200.000.000 orang telah mengunjungi menara ini sejak
            pembangunannya tahun 1889,[2] termasuk 6.719.200 orang tahun 2006,[3] menjadikannya monumen berbayar yang
            paling banyak dikunjungi di dunia.[4][5] Termasuk antena setinggi 24 m (79 kaki), struktur ini memiliki
            tinggi 325 m (1.063 kaki) sejak 2000, yang sama dengan bangunan konvensional bertingkat 81.
        </p>
    </div>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    </head>

    <body>

        <div class="container mt-3">
            <h2>Dark Striped Table</h2>
            <p>Combine .table-dark and .table-striped to create a dark, striped table:</p>
            <table class="table table-dark table-striped">
                <thead>
                    <tr>
                        <th>Firstname</th>
                        <th>Lastname</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>john@example.com</td>
                    </tr>
                    <tr>
                        <td>Mary</td>
                        <td>Moe</td>
                        <td>mary@example.com</td>
                    </tr>
                    <tr>
                        <td>July</td>
                        <td>Dooley</td>
                        <td>july@example.com</td>
                    </tr>
                </tbody>
            </table>
        </div>

    </body>

    </html>

</body>

</html>
di Tidak ada komentar:
Langganan: Komentar (Atom)

Trigger

Apasih trigger itu? Trigger di MySQL adalah program tersimpan yang berjalan secara otomatis sebagai respons terhadap peristiwa tertentu sepe...