150 / 478
Rows and Columns
Finally, let’s actually use some of the Bootstrap magic! You’ll have to read the docu‐
mentation yourself, but should be able to use a combination of the grid system and the
text-center
class to get what we want:
lists/templates/base.html (ch07l007).
<body>
<div
class=
"container"
>
<div
class=
"row"
>
<div
class=
"col-md-6 col-md-offset-3"
>
<div
class=
"text-center"
>
<h1>
{% block header_text %}{% endblock %}
</h1>
<form
method=
"POST"
action=
"{% block form_action %}{% endblock %}"
>
<input
name=
"item_text"
id=
"id_new_item"
placeholder=
"Enter a to-do item"
/>
{% csrf_token %}
</form>
</div>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col-md-6 col-md-offset-3"
>
{% block table %}
{% endblock %}
</div>
</div>
</div>
</body>
(If you’ve never seen an HTML tag broken up over several lines, that
<input>
may be
a little shocking. It is definitely valid, but you don’t have to use it if you find it offensive. ;)
Take the time to browse through the
Bootstrap documentation ,if
you’ve never seen it before. It’s a shopping trolley brimming full of
useful tools to use in your site.
Does that work?
AssertionError: 110.0 != 512 within 5 delta
Hmm. No. Why isn’t our CSS loading?
Static Files in Django
Django, and indeed any web server, needs to know two things to deal with static files:
122
|
Chapter 7: Prettification: Layout and Styling, and What to Test About It