[SOLUCIONADO] Bootstrap3 en Django

stormearth · #1 (**permalink**) 03/01/2014, 22:55

Hola todos, tengo un problema que no comprendo por más que he intentado e investigado bastante. Tal vez se me pasa algo simple por alto.

Estoy tratando de que funcione bien Bootstrap en un proyecto de django que estoy desarrollando. Entonces para que django encuentre las static files hago lo siguiente, como se sugiere:

en settings.py:

Código:

INSTALLED_APPS = ('django.contrib.staticfiles')
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
STATIC_URL = '/static/'

en urls.py:

Código:

urlpatterns = patterns('',
...
) +static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

en el template:

Código:

{% load staticfiles %}
<link href = "{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

Parece que django sí encuentra el css de bootstrap ya que el link y los fonts están con los típicos fonts de bootstrap. Lo que no puedo lograr que funcione son los grids de bootstrap (class="col-md-8", class="col-md-4")

Este es el codigo html, muy simple:

Código:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "utf-8"/>
	<title> Inicio </title>
	{% load staticfiles %}
	<link href = "{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
</head>

<body>
<div id = "page" class = "container">

	<div id = "body" class = "col-md-8">
	Lorem ipsum ...

	</div>


	<div id = "sidebar" class ="col-md-4">
	Lorem ipsum...
	</div>

</div>

<a href = "{% url 'inicio:dos' %}"> Continuar </a>

</body>
</html>

El primer div debería tener 8 columnas y el segundo 4 columnas pero no funciona. Ubico esta pregunta en este foro y no en el foro de html/css porque SI FUNCIONA FUERA DE DJANGO, es decir en una carpeta aparte con el mismo html. El status que me da el servidor (python manage.py runserver) es de 304.. es decir que sí encuentra los archivos estáticos, y los fonts y el link a 'inicio_dos' tienen la aparencia de Bootstrap. Estoy severamente confundido, le agradezco cualquier ayuda.

razpeitia · #2 (**permalink**) 04/01/2014, 02:18

1. Clamas que posiblemente no este sirviendo los archivos estáticos.
2. Dices que el html/css es perfecto
3. Contradices el punto 1, diciendo que si sirve los archivos estáticos.

Si elimino el punto 1 y 3 solo me queda el punto 2. Lo cual parece ser bastante lógico.

Ahora, no soy un experto en bootstrap ni mucho menos en todo lo que usa como css, less, html, etc...

Pero si veo la guía, dice que esos cols deben de estar dentro de un row. http://getbootstrap.com/css/#grid-intro

Y en los ejemplos que pone también hay rows, ahora los rows dicen que deben de estar dentro de un container. Lo que nos quedaría algo así.

Código:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "utf-8"/>
	<title> Inicio </title>
	{% load staticfiles %}
	<link href = "{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
</head>

<body>
<div id = "page" class = "container">

  <div class="row">

    <div id = "body" class = "col-md-8">
      Lorem ipsum ...
    </div>

    <div id = "sidebar" class ="col-md-4">
      Lorem ipsum...
    </div>

  </div>

</div>

<a href = "{% url 'inicio:dos' %}"> Continuar </a>

</body>
</html>

stormearth · #3 (**permalink**) 04/01/2014, 15:15

Griacas Razpetia por tu respuesta. El error era de lo más extraño. Probé con "row" como señalas, no funcionó. El código era exactamente el mismo solo que en django no funcionaban las grids de Bootstrap (el resto sí, o por lo menos los fonts y los márgentes). A la final instalé el paquete Bootrstrap3 .. hay que sumarlo a "INSTALLED_APS" en settings y luego en el template {% load bootstrap3 %} y funciona.

Espero que si alguien tiene el mismo problema encuentre este post.