Flask Bootstrap

Resumen

Framework: es un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de índole similar.

Daniel Sánchez

teacher•

Josue Zafra

student•

noice

Alejandro Andrade Soriano

student•

gracias!

Nietsnie Alberto Perez cruz

student•

creación de menú en flask con bootstrap 4

&lt;div class=&quot;navbar navbar-expand-lg navbar-dark bg-dark&quot; role=&quot;navigation&quot;&gt;
        &lt;div class=&quot;navbar-brand&quot; href=&quot;{{ url_for('index') }}&quot;&gt;
            &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarNavAltMarkup&quot; aria-controls=&quot;navbarNavAltMarkup&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
                &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
              &lt;/button&gt;
          
            &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNavAltMarkup&quot;&gt;
                &lt;div class=&quot;navbar-nav&quot;&gt;
                    &lt;a class=&quot;navbar-brand&quot; &gt;
                        &lt;img src=&quot;{{ url_for('static', filename='images/platzi.png') }}&quot;
                             style=&quot;max-width: 48px&quot;
                             alt=&quot;Platzi logo&quot;&gt;
                    &lt;/a&gt;
                  &lt;a class=&quot;nav-item nav-link active&quot; href=&quot;{{ url_for('index') }}&quot;&gt;Inicio&lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
                  &lt;a class=&quot;nav-item nav-link&quot; href=&quot;https://platzi.com&quot; target=&quot;_blank&quot;&gt;Platzi&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;

Diego Casillas Duarte

student•

Utilizando el curso de la terminal en linux aproveché para pasarles el comando para tirar todo lo que tenemos instalado en el ambiente virtual al requirements.txt, de esta manera lo único que hay que hacer es correr el siguiente comando: pip freeze > requirements.txt y automáticamente todo lo que tenga el ambiente en ese momento se va a volcar a requirements.txt, quedando algo más o menos así:

astroid==2.3.3
click==7.1.1
colorama==0.4.3
dominate==2.5.1
Flask==1.1.1
Flask-Bootstrap==3.3.7.1
isort==4.3.21
itsdangerous==1.1.0
Jinja2==2.11.1
lazy-object-proxy==1.4.3
MarkupSafe==1.1.1
mccabe==0.6.1
pylint==2.4.4
six==1.14.0
typed-ast==1.4.1
visitor==0.1.3
Werkzeug==1.0.0
wrapt==1.11.2

De nada :)

Jose Domingo Trejo Fernandez

student•

ya habia hecho algo parecido en otro curso, lo que observo de ese método es que el del curso solo maneja dos textos en las dependencias y tu ahi tienes 17, al subirlo a heroku tuve que eliminar unas de esa 17 dependencias

Francisco Garcia [C6]

student•

gracias por el aporte

Hector Esau M

student•

Bueno atualmente ya es soprtado Bootstrap4 solo que lo tienes que especificar a la hora de hacer pip install

pip install Flask-Bootstrap4

Pueden consultarlo aquì

Andrés David Ríos Ramirez

student•

Nota Si instalas Flask-Bootstrap4 el código que coloca el profesor en el video no funciona, si alguien puede agregar como sería el código para Bootstrap4 se lo agradecería.

Noldia Chavez Cavero

student•

a mi me funciono, gracias !

Juan David Sánchez

student•

Al día de hoy (Junio 11, 2022) ya estamos en Bootstrap 5, por lo que como reto personal me puse de objetivo implementar esto mismo del profesor usando Bootstrap5.

Hice uso de Bootstrap-Flask 2.0.2.

Pueden instalarlo de la siguiente forma:

pip uninstall flask-bootstrap bootstrap-flask
pip install bootstrap-flask==2.0.2

Es necesario primero eliminar flask-bootstrap en caso de que lo hubieran instalado, pues el nuevo paquete utiliza el mismo namespace.

Después de instalarlo, en base.html debemos agregar manualmente los scripts de Bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
  {% block head %}
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Flask Example - {% endblock %}</title>

    {% block styles %}
      {{ bootstrap.load_css() }}
      <link rel="stylesheet" href="{{ url_for("static", filename="css/main.css") }}" />
    {% endblock %}
  {% endblock %}
</head>
<body>
  {% block body %}
    {% block navbar %}
      {% include "navbar.html" %}
    {% endblock %}
    {% block content %}{% endblock %}

    {% block scripts %}
      {{ bootstrap.load_js() }}
    {% endblock %}
  {% endblock %}
</body>
</html>

Y por último modificamos el navbar.html haciendo uso de las clases de Bootstrap 5

{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Flask Example</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="{{ url_for('hello') }}">
            Inicio
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://twitter.com/d4vsanchez" target="_blank">
            @d4vsanchez
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>
{% endblock %}

Juan Agustin Di Pasquo

student•

Maravilloso aporte, gracias por compartirlo 💚

Edwin David Sánchez Balbín

student•

Buen día, para la version 4.5 de bootstrap esta el paquete Flask-BS4

$ pip install Flask-BS4

Lo demas es igual a como lo muestra el profe. Saludos.

Lautaro Cabral

student•

y para importar ese módulo es:

from flask_bs4 import Bootstrap```

Cristian Camilo Hernández Ramirez

student•

Funcionó perfecto muchachos, muchas gracias por su aporte

ALDO MATUS MARTINEZ

student•

Para automatizar el inicio de flask con todo y entornos virtuales, librerias, enviroments variables. Creamos el siguiente script

Crea un archivo con el nombre que gustes y extension sh ejemplo run .sh
Agrega el codigo de abajo, solo cambia el nombre de tu entorno virtual, el mio tiene el nombre de .env tu sólo agrega el tuyo.
Una vez hecho lo anterior corre desde la carpeta raiz con source nombre_archivo.sh

Código a copiar

#!/bin/bash
source .env/bin/activate
pip install -r requirements.txt

export FLASK_APP=main.py
export FLASK_DEBUG=1
export FLASK_ENV=development

flask run

Para ejecutarlo

source nombre_archivo.sh

Victoriano Emilio Juárez Tacam

student•

Esto es genial.

Vicente Xavier Martínez Fernández

student•

Para los que están viendo este curso a mediados del 2022, hay una extensión llamada "bootstrap-flask" (no "flask-bootstrap"), la cual soporta a Bootstrap5, lo cual es recomendado por los cambios que han hecho entre la versión 4 a la 5, he aquí la documentación por si se animan :) https://bootstrap-flask.readthedocs.io/en/stable/

Renato Mercado Luna

student•

Dejo mi versión del código del profesor en Bootstrap4 👇

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ url_for('index') }}">
        <img src="{{ url_for('static', filename='images/platzi.png') }}"
             style="max-width: 48px"
             alt="AWESOME LOGO">
    </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="{{ url_for('index') }}">Inicio <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://platzi.com" target="_blank">Platzi</a>
            </li>
        </ul>
    </div>
</nav>

Nicolas Agustin Juanico

student•

Para los que esten viendo 4/4/19, se puede bajar bootstrap4 ya a flask. Dato no menor, es la version 4.0.0, a la fecha de hoy ya esta la 4.3. Para mayor comodidad, se puede recurrir a crear uno mismo el template de Bootstrap, aparte en un ".html" e incorporarlo al "base.html" De este modo podes; Incluir los archivos descargados de manera loca. Incluir el CMD Distintos modos de mantener todo actualizado a la fecha, con pocos ajustes desde uno mismo.

Francisco Javier Antúnez Durán

student•

¿Como así?, ¿podrías explicarlo mas detallado por favor?. Gracias de antemano.

Luis Mendoza

student•

Para llamarlos de forma local, sería igual que en PHP, con link?

Francisco Leví Méndez Delgado

student•

Traté de probar flask-bootstrap y flask-bootstrap4 y aunque incialmente tuve problemas finalmente pude usarlos sin problemas desde mi entorno virtual; sin embargo me marcaba error al tartar de cargar un css que no existe. Buscando documentación me encontré con bootstrap-flask, así es solo cambian la posición de las palabras.

Aunque bootstrap-flask es más sencillo funciona muy bien y hace uso de Bootstrap v4.3.1, y por lo que veo buscan mejorarlo entonces se me hace una buena opción. Dejo la liga de la docuemntación para que pueda revisarla y analizarlo.

bootstrap-flask

Karen Lorena Pineda Albarracín

student•

Aquí la barra de navegación:

<div class="navbar navbar-inverse" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button"
                        class="navbar-toggle"
                        data-toggle="collapse"
                        data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="{{ url_for('hello') }}" class="navbar-brand">

                </a>
            </div>

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <ul><a href="{{ url_for('hello') }}">Inicio</a></ul>
                    <ul><a href="https://platzi.com" target="_blank">Platzi</a></ul>
                </ul>
            </div>
        </div>
    </div>

Carlos A. Lobo R.

student•

Por favor actualizen el curso, flask-boostrap esta descontinuado

Jose Flores

student•

Ando tomando el curso y es la primera vez que usaré bootstrap si se html y css no de manera muy experimentada, pero porque dices que está discontinuado, donde puedo ver eso? (ya le di una búsqueda rápida a lo que dijiste y no me encontré algo al respecto)

Julio César Zaravia Paredes

student•

Hola.

Bueno, quizá el término está mal utilizado, flask-bootstrap no está descontinuado, sucede que existen versiones más recientes que podemos utilizar.

Varios compañeros han dejado en la parte de aportes la manera en cómo puedes actualizar tu versión de flask-bootstrap:

Por mi parte estoy trabajando con la misma versión del profesor y he podido levantar el menú de navegación sin problema.

Espero los enlaces te sirvan para actualizar tu versión.

¡Saludos!

Jose Domingo Trejo Fernandez

student•

Dato curioso plazi no usa bootstrap, usaron un diseño desde 0 ?

Roger Carlos Ariel Alba

student•

Y el CSS es en Stylus.

Jose Flores

student•

Tengo una duda, y es que tenía entendido que el frontend y backend son dos ramas distintas, pero con este curso veo que la dos se trabajan casi en el mismo espacio, yo sé que los archivos .py son que le corresponde al backend y que lo guardado en templates y static será el frontend, lo que me da a entender es que tanto el frontend y el backend se aloja en el mismo servidor?, o hay algo de lo cual no me estoy enterando bien?

Juan H

student•

Hola! Si. Ambos archivos se estaran alojando en el servidor que elijas. La diferencia esta en que los archivos del backend. Nunca seran enviados a tu cliente, es decir tu frontend.

Cuando entras a un sitio, tu navegador va a pedirle al servidor que le entregue el html principal de tu aplicacion, (index.html, en la gran mayoria) ese html llamara a los estilos y al javascript. esto se descarga para poder ejecutarse

Cuando quieras validar un usuario, tu frontend, el javascript para ser mas especifficio, se va a comunicar con tu backend, por una direccion URL normalmente, y ahi es cuando se ejecuta tu archivo .py para validar ese usuario. y se ejecuta en el servidor. No en el cliente

Juan H

student•

Cliente servidor

te lo dejo por las dudas por que no veo que cargue

Carlos Alfredo López Zavarce

student•

Hola

para los que no les funciona el flask_bootstrap al encender el server con un error de que no ha resuelto la importacion desactiven el enviorement en instalen con lo siguiente

python -m pip install flask-bootstrap

Luego activen de nuevo , enciendan el server y deberia funcionar =D

Jhon Milton Arevalo Locarno

student•

Esto si me sirvió

Diego Andrés Rojas González

student•

Hiii 👋 Si te encuentras en el 2023 y no logras replicar el contenido de la clase te recomiendo las siguientes opciones.

Utiliza el CDN de bootstrap de tal manera que no tengas que instalar la dependencia a tu proyecto. Tal que tu archivo base.html quede en el head similar a

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title%} PFlask | {% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>

Si ya quieres subir de nivel en tu proyecto y quieres descargar una dependencia te recomiendo bootstrap-flask que es la dependencia que actualmente se emplea. te comparto el link de la documentación bootstrap-flask

Mariano Gobea Alcoba

student•

No pueden dejar un cuso así de desactualizado!!! Un horror la cantidad de errores que se presentan al correr el codigo de la clase porque estamos usando una versión de bootstrap que ya no se usa!

Nicolás Moreno

student•

Deberían ser más cuidadosos con los cursos que incluyen en las rutas, estoy seguro que este curso es para una persona con conocimientos de html y python, sin embargo dentro de la ruta de backend de python es la primera vez que trabajamos con html. Parece ser muy interesante la herramienta, pero se convierte en una clase anecdótica porque el profesor poco o nada explica del funcionamiento y estamos copiando código como si fuese receta de cocina.

Reinaldo Mendoza

student•

El html que esta usando es anecdotico, apenas es un "hello world" de html

Juan Camilo Gómez Tabares

student•

Comencé este curso con la ilusión de aprender back, pero todo lo que he visto es enfocado al frontend....

Michael Nassee Buritica Ortega

student•

Nada mas es conectarla con SQL Alchemy