pagina que navbar y encabezado
Aquí te muestro un ejemplo básico de cómo crear una página con navbar y encabezado utilizando Python con el framework Flask. **Requisitos** * Instalar Flask: `pip install flask` * Instalar Bootstrap: `pip install flask-bootstrap` **Estructura del proyecto** * `app.py`: archivo principal que crea la aplicación Flask * `templates`: carpeta que contiene los archivos HTML * `static`: carpeta que contiene los archivos CSS y JavaScript **app.py** ```python from flask import Flask, render_template from flask_bootstrap import Bootstrap app = Flask(__name__) Bootstrap(app) @app.route("/") def index(): return render_template("index.html") if __name__ == "__main__": app.run(debug=True) ``` **templates/index.html** ```html <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Página con navbar y encabezado</title> <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <header> <h1>Página con navbar y encabezado</h1> </header> <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p> </div> <script src="{{ url_for('static', filename='script.js') }}"></script> </body> </html> ``` **static/styles.css** ```css body { font-family: Arial, sans-serif; } .navbar { background-color: #f0f0f0; padding: 1rem; } .navbar-brand { font-size: 1.5rem; } .navbar-nav { margin-right: 1rem; } .nav-item { margin-right: 1rem; } .nav-link { color: #333; } .nav-link:hover { color: #00698f; } .dropdown-menu { background-color: #f0f0f0; } .dropdown-item { color: #333; } .dropdown-item:hover { color: #00698f; } .form-inline { margin-right: 1rem; } .form-control { width: 50%; } .btn-outline-success { background-color: #f0f0f0; border-color: #00698f; color: #00698f; } .btn-outline-success:hover { background-color: #00698f; border-color: #00698f; color: #f0f0f0; } ``` **static/script.js** ```javascript // Agregar evento de click a los enlaces de la navbar document.querySelectorAll('.nav-link').forEach(function(link) { link.addEventListener('click', function() { // Agregar clase active al enlace seleccionado document.querySelector('.nav-link.active').classList.remove('active'); link.classList.add('active'); }); }); ``` **Ejecutar la aplicación** * Ejecutar `python app.py` en la terminal * Abrir el navegador y acceder a `http://localhost:5000` De esta manera, deberías ver una página con navbar y encabezado que se ajusta a la estructura básica de Bootstrap.