bootstrap
plain_text
2 months ago
10 kB
2
Indexable
Never
<!DOCTYPE html> <html> <head> <title>Example with Bootstrap Navigation Bar</title> <!-- Link to Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">My Website</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open Modal </button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> This is the modal content. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile">Profile</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#contact">Contact</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home"> <h3>Home content</h3> </div> <div class="tab-pane" id="profile"> <h3>Profile content</h3> </div> <div class="tab-pane" id="contact"> <h3>Contact content</h3> </div> </div> <button type="button" class="btn btn-primary">Primary Button</button> <button type="button" class="btn btn-secondary">Secondary Button</button> <button type="button" class="btn btn-success">Success Button</button> <button type="button" class="btn btn-danger">Danger Button</button> <button type="button" class="btn btn-warning">Warning Button</button> <button type="button" class="btn btn-info">Info Button</button> <button type="button" class="btn btn-light">Light Button</button> <button type="button" class="btn btn-dark">Dark Button</button> <br> <div class="container"> <div class="row"> <div class="col-md-4">Column 1</div> <div class="col-md-4">Column 2</div> <div class="col-md-4">Column 3</div> </div> </div> <table class="table"> <thead> <tr> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">Age</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>John Doe</td> <td>30</td> </tr> <tr> <th scope="row">2</th> <td>Jane Smith</td> <td>25</td> </tr> </tbody> </table> <form> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" placeholder="Enter your name"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" placeholder="Enter your email"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> <div class="card" style="width: 20rem; text-align: center; display: block;"> <img src="https://i.pinimg.com/236x/c8/0f/7b/c80f7ba34d815e7586c5dd19435e9886.jpg" style="width: 200px;" class="card-img-top" alt="Image"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">This is a sample card with some text content.</p> <a href="#" class="btn btn-primary">Read More</a> </div> </div> <div id="myCarousel" class="carousel slide" data-ride="carousel" style="width: 200px;"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://i.pinimg.com/564x/4b/db/87/4bdb87dd1b162e1cbfb3c12ab0324919.jpg" class="d-block w-100" alt="Image 1"> </div> <div class="carousel-item"> <img src="https://i.pinimg.com/236x/80/22/95/8022956ec62ec85a7ef960bf6edf7c51.jpg" class="d-block w-100" alt="Image 2"> </div> <div class="carousel-item"> <img src="https://i.pinimg.com/236x/2f/e0/61/2fe061efad1c814e78a12a5aae576575.jpg" class="d-block w-100" alt="Image 3"> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> <div id="accordion"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Section 1 </button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> Content for Section 1 </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Section 2 </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body"> Content for Section 2 </div> </div> </div> </div> <nav aria-label="Page navigation"> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> </li> <li class="page-item"><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> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> <!-- Link to Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>