No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

0D
23H
19M
27S
Curso de Flask

Curso de Flask

Bernardo Cassina

Bernardo Cassina

Flask Bootstrap

15/36
Recursos

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.

Aportes 59

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

creaci贸n de men煤 en flask con bootstrap 4

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

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 馃槂

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矛

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.

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 %}

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

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

Para los que est谩n viendo este curso a mediados del 2022, hay una extensi贸n llamada 鈥渂ootstrap-flask鈥 (no 鈥渇lask-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/

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.

Por favor actualizen el curso, flask-boostrap esta descontinuado

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>

Hola! Para usar bootstrap 4 y 5 est谩 tambien este paquete pip
https://bootstrap-flask.readthedocs.io/en/stable/basic/#installation

La documentaci贸n indica un proceso distinto al del paquete del curso pero vale la pena!

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>

Para instalar Bootstrap4 en tu programa lo primero que debes hacer es descargarlo:
pip install Flask-Bootstrap4
Luego es ir a la p谩gina de Bootstrap y presionar donde dice Get started, al hacer eso los redireccionar谩 a otra p谩gina y buscas el recuadro con el t铆tulo CSS.

Ahora copias esa l铆nea de c贸digo y lo pegas en la etiqueta head de tu html, (sin modificar nada en cuanto a etiquetas) y listo, tienes Bootstrap4 en tu programa, ahora solo debes entrar y buscar lo que quieres agregar a tu p谩gina y lo pegas en tu html.

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.

Comenc茅 este curso con la ilusi贸n de aprender back, pero todo lo que he visto es enfocado al frontend鈥

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

Me esta ocurriendo un error Unable to import 鈥榝lask_bootstrap鈥 pylint(import-error) [2, 1]

si alguien podr铆a asesorarme como resolver el error puesto que se descargo el archivo pero me aparece ese error.

Les comparto informacion oficial acerca de flask_bootstrap:

A mi si me fall贸 el Bootstrap 4, lo desinstal茅 e instal茅 el 3 de nuevo con pip uninstall Flask-Bootstrap4==4.0.2
y pip install flask-bootstrap

Despues de mucho buscar encontre una mejor manera de manejar el menu haburguesa collapse al redimensionar un navegador con Bootstrap 5:
Primero instalarlo:

pip install Flask-Bootstrap5

Despues toca agragar al template base.html el estilo en el head al igual que en el body quedando:

{% extends 'bootstrap/base.html' %}

{% block head %}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    {{ super() }}
    <title>
        {% block title %}Flask Platzi | {%endblock%}
    </title>
    <link rel="stylesheet" href={{ url_for('static',filename='css/main.css') }}>
{% endblock %}
    

    
{% block body %}
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    {% block navbar %}
        {% include 'navbar.html' %}
    {% endblock %}
    {% block content %}    {% endblock %}
{% endblock %}

Y el navbar.html quedaria:


<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #333497;">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ url_for('index') }}">
            <img src="{{ url_for('static', filename='images/platzi.png') }}"
                 style="max-width: 48px"
                 alt="Platzi logo">
        </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 active" aria-current="page" href="{{ url_for('index') }}">Inicio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="https://platzi.com" target="_blank">Platzi</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Search">
          <button type="button" class="btn btn-outline-success">Buscar</button>
        </form>
      </div>
    </div>
  </nav>

Pueden trabajar con la 3.3 de Bootstrap aunque si como veran, estamos en la 5, hay documentaci贸n para la 4 y 5 y dice que ya no usa base, o eso vi.

La librer铆a que usa el profesor en la clase lleva a帽os son ser mantenida y a煤n usa la versi贸n 3 de Boostrap. Si quieren usar la 煤ltima versi贸n de Bootstrap (la v5 para cuando escribo esto) les recomiendo usar esta extensi贸n para Flask: https://github.com/helloflask/bootstrap-flask

Les comparto el codigo que implemente en el archivo navbar.html con Flask-Bootstrap4==4.0.2.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="{{ url_for('index') }}"><img src="{{ url_for('static', filename='images/platzi.png') }}" alt="Platzi 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') }}">Ir a inicio<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://platzi.com" target="_blank">Ir a Platzi</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button>
        </form>
    </div>
</nav>```
#importar Bootstrap 4 en adelante
from flask_bs4 import Bootstrap

Yo ocupe Bootstrap 4, lo instale as铆:

pip install Flask-Bootstrap4

use esta navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="https://flask.palletsprojects.com/en/2.0.x/">FLASK</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="{{ url_for('index') }}">Home <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="{{ url_for('index') }}">Inicio</a>
        <a class="nav-item nav-link" href="https://platzi.com">Platzi</a>
      </div>
    </div>
  </nav>

y por utimo a帽ad铆 el css y los scipts de Bootstrap a el base.html

{% extends 'bootstrap/base.html' %}

{% block head %}
    {{ super() }}
    <title>
        {% block title %}Flask Platzi |{% endblock %}
    </title>
    <!-- <link rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}"> -->
{% endblock %}

{% block body %}
    {% block navbar %}
        {% include 'navbar.html' %}
    {% endblock %}

    {% block content %}
    {% endblock %}

    {% block scripts %}
        {{ super() }}
    {% endblock %}
{% endblock %}

Me base en este aporte para hacer mi soluci贸n, leanlo aqu铆

c

Flask-bootstrap se qued贸 en la versi贸n 3.3.7 mientras que Bootstrap como tal ya va en la versi贸n 5. Para este caso en particular creo que ya es mejor simplemente importar bootstrap en base.html que usarlo como extensi贸n

Siento que Flask-bootstrap se qued贸 muy anticuado

Es decir, flask-bootstrap si funciona pero no va al d铆a con las actualizaciones del Bootstrap real, por ah铆 veo que lo ultimo que sacaron fue una versi贸n 4.0.2 en flask bootstrap en el a帽o 2018 pero nada m谩s, y la p谩gina oficial de flask bootstrap no da versiones superiores a flask-bootstrap 3.3.7

Considero que es mejor usar Bootstrap directamente sobre nuestra imagen base y listo, incluso aqu铆 les dejo un tutorial a los nuevos LINK.

Les dejo los bloques de botstrap/base.html para que sepan que bloques pueden manipular:

{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
  <head>
    {%- block head %}
    <title>{% block title %}{{title|default}}{% endblock title %}</title>

    {%- block metas %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {%- endblock metas %}

    {%- block styles %}
    <!-- Bootstrap -->
    <link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
    {%- endblock styles %}
    {%- endblock head %}
  </head>
  <body{% block body_attribs %}{% endblock body_attribs %}>
    {% block body -%}
    {% block navbar %}
    {%- endblock navbar %}
    {% block content -%}
    {%- endblock content %}

    {% block scripts %}
    <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
    <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
    {%- endblock scripts %}
    {%- endblock body %}
  </body>
{%- endblock html %}
</html>
{% endblock doc -%}

No me funciona, aparece :
jinja2.exceptions.TemplateNotFound
jinja2.exceptions.TemplateNotFound: bootstrap/base.html

No encuentra el template base.html a pesar de crear la barpeta y el archivo. No s茅 si se instal贸 bootstrap de forma adecuada . Uso Ubuntu.

Si me dec铆a que copie y pegue era mas f谩cil, no explic贸 nada, como funciona? por que funciona as铆? Magia? Por que es mejor este m茅todo de crear el html que el anterior? De hecho el nuevo html pierde sem谩ntica, al no usar el tag <nav>. Y ahora al tener un problema no tenemos como solucionarlo, por ejemplo hay un error en el title dentro del header, que lo repite dos veces, por que aparece? Y como se soluciona? Magia?

Va tomando forma

Recuerden desisntalar y quitar de requirements.txt flask-bootstrap si desean annadir bootstrap-flask, y agregar este ultimo al requirements.txt

buenas tarde tengo un problema al importar flask-bootstrap ya instale y me sale lo sigueinte

tambien ya instancie y me sigue saliendo error
ya tambien instale la ultima version de flask-bootstrap y no me soluciona el error
pip install Flask-Bootstrap4.

Sinceramente prefiero importarlo como CDN en el base y as铆 tengo la 煤ltima versi贸n de bootstrap, creo que se me hizo m谩s f谩cil, pero igual funciona lo de flask-bootstrap, no est谩 mal

Al instalar la librer铆a para trabajar con bootstrap, veo que instala bootstrap en su versi贸n 3.3.7. Habr谩 otra librer铆a que instale un bootstrap m谩s actual?. Gracias.

@app.errorhandler(500)
def exception_found(error):
    return render_template('500.html', error=error)
{% extends 'base.html' %}

{% block title %}
    {{ super() }}
    Error no controlado
{% endblock %}
{% block content %}
    <h1>Se ha detectado un error al cargar el contenido</h1>
    {{ error }}
{% endblock %}

En esta p谩gina encontraras todo relacionado al tema:
https://pythonhosted.org/Flask-Bootstrap/

Pero como carajos nos muestra Bootstrap y luego acaba sacando una plantilla toda x de otro lado :S 馃槙

Ojal谩 actualicen este curso, nos mal acostumbraron con Facundo y su gran manera de explicar y ser coherente con todo. 馃槙

驴Qu茅 diferencia hay de usar Bootstrap directamente con el CDN?

隆Hola! Quer铆a hacer mi aporte. Yo utilic茅 este c贸digo para el navbar con Bootstrap 4.

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #002120;">
    <a class="navbar-brand" href="{{ url_for('index') }}">
        <img src="{{ url_for('static', filename='images/platzi.webp') }}"
             style="max-width: 100px"
             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') }}">Home <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>

El resultado es algo como esto:


no me sale

Hola Comunidad.
.
He visto varias preguntas referentes al tema del actualizaci贸n de versi贸n y del problema con el men煤 responsive y he estado pegando un aporte que hace referencia a eso.
.
Para no hacer spam en los comentarios 馃槮 mejor lo dejo aqu铆 como aporte.
.
https://platzi.com/tutoriales/1540-flask/9216-quieres-actualizar-o-cambiar-tu-version-de-flask-bootstrap-y-reparar-el-problema-del-menu-responsive-lee-esto/
.
Ojal谩 les sirva y si ven que hay algo que corregir me lo comentan.
.
隆Saludos!

Me funciono con la versi贸n 3.4.1 de bootstrap. Pero no me funcionan los botones desplegables. a alguien le pasa lo mismo?

Las extensiones de flask son librer铆as que permiten agregar funcionalidades a flask.

驴Y si yo descargo los archivos de la p谩gina de Bootstrap y luego los linqueo igual que con main.css?

No me funciona flask_boostrap

No me renderiza los botones de Inicio y Platzi. Alguien sabe por que?

No es necesario que se instale ningun bootstrap para poder ser usado y poder usarlo con Flask. De hecho me parece mas incomodo tener que aprenderme toda esa estructura adicional.

Mi soluci贸n es parte de un curso que lleve con anterioridad y es simplemente usar la sintaxis de bootstrpa que viene en su pagina en los archivos html.

Para usar Bootstrap 4 con Flash:

https://pypi.org/project/Flask-Bootstrap4/
Y la documentaci贸n de como usarlo:
https://pythonhosted.org/Flask-Bootstrap/basic-usage.html

A los que le salga el problema unresolved import 鈥榝lask bootstrap鈥 flask puede ser como en mi caso que hacia falta instalar flask-wtf.

Codigo navbar.html

<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 class="navbar-brand" href="{{ url_for('index') }}">
                <img src="{{ url_for('static', filename='images/logo.png') }}"
                     style="max-width: 48px"
                     alt="Platzi logo">
            </a>
        </div>

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

TIP Me pase 1hr buscando cual era el error que tenia acerca de la importacionn de flask_bootstrap para instalarlo y luego importarlo les recomiendo apagar el servidor luego volverlo a encender y de ser necesario hacer un hard reset en el cliente

No es por nada pero me parece que este profesor tiene una excelente metodologia para explicar y va directo a la practica

Quer铆a recomendarles que vayan aprendiendo a utilizar manejadores de dependencias que les facilitar谩n bastante la vida a la hora de instalarlas 馃槂 y ademas tambi茅n facilitan el uso de ambientes virtuales, entre las mas populares est谩n:

Esta 煤ltima es la que utilizo y recomiendo mucho porque es la que m谩s est谩 automatizada, una vez la entiendes ver谩s lo mucho que facilita las cosas!

para version 4 de bootstrap
flask-bootstrap4

alguno pudo hacer que el menu de hamburguesa le funcione? porque bootstrap es responsive, al achicar el menu de hamburguesa aparece pero no se despliega.