1
resposta

bootstrap não funciona

Olá, eu testei o bootstrap em várias versões e nenhuma delas funcionou. Vou enviar o código aqui:

jogoteca

from flask import Flask, render_template, request, redirect

app = Flask(__name__)

class Jogo:
    def __init__(self, nome, categoria, console):
        self.nome = nome
        self.categoria = categoria
        self.console = console

jogo1 = Jogo('Super Mario', 'Aventura', 'SNES')
jogo2 = Jogo('Pokemon Gold', 'RPG', 'GBA')
jogo3 = Jogo('Mortal Kombat', "Luta", 'SNES')
lista = [jogo1, jogo2, jogo3]

@app.route('/')
def index():
    return render_template('lista.html', titulo='Jogos', jogos=lista)

@app.route('/novo')
def novo():
    return render_template('novo.html', titulo='Novo Jogo')

@app.route('/criar', methods=['POST',])
def criar():
    nome = request.form['nome']
    categoria = request.form['categoria']
    console = request.form['console']
    jogo = Jogo(nome, categoria, console)
    lista.append(jogo)
    return redirect('/')

app.run(debug=True)

novo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jogoteca</title>
    <link rel="stylesheet" href="../static/bootstrap.css">
</head>
<body>
    <div class="container">
      <div class="page-header">
          <h1>{{ titulo }}</h1>
      </div>
      <form action="/criar" method="post">
        <fieldset>
          <div class="form-group">
            <label for="nome">Nome</label>
            <input type="text" id="nome" name="nome" class="form-control">
          </div>
          <div class="form-group">
            <label for="categoria">Categoria</label>
            <input type="text" id="categoria" name="categoria" class="form-control">
          </div>
          <div class="form-group">
            <label for="console">Console</label>
            <input type="text" id="console" name="console" class="form-control">
          </div>
          <button type="submit" class="btn btn-primary btn-salvar">Salvar</button>
        </fieldset>
      </form>
    </div>
</body>
</html>

lista

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jogoteca</title>
    <link rel="stylesheet" href="../static/bootstrap.css">
  </head>
  <body>
    <div class="container">
        <div class="page-header">
            <h1>{{ titulo }}</h1>
        </div>
        <table class="table table-striped table-responsive table-bordered">
            <thead class="thead-default">
                <tr>
                    <th>Nome</th>
                    <th>Categoria</th>
                    <th>Console</th>
                </tr>
            </thead>
            <tbody>
            {% for jogo in jogos %}
                <tr>
                    <td>{{ jogo.nome }}</td>
                    <td>{{ jogo.categoria }}</td>
                    <td>{{ jogo.console }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
  </body>
</html>
1 resposta

Oii Douglas, como você está?

Peço desculpas pela demora em obter um retorno.

Isso pode estar ocorrendo por o Flask não conseguir localizar os arquivos bootstrap em sua máquina, porém, um outro modo de utilizar o bootstrap no projeto é através do link de hospedagem remota, o Bootstrap CDN. O Bootstrap CDN é um serviço de distribuição de arquivos do Bootstrap, onde através de um link é possível utilizar o bootstrap no projeto sem a necessidade de baixar arquivos auxiliares.

Sendo assim, nos arquivos novo.html e lista.html exclua a linha que importa o bootstrap da pasta do computador (<link rel="stylesheet" href="../static/bootstrap.css">) e inclua no lugar que houve a exclusão a seguinte linha:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

No código acima, utilizamos a versão 3.3.7 do bootstrap, a mesma utilizada no curso. Após as modificações, reinicie o servidor e verifique se obterá êxito.

Qualquer dúvida fico à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!