153 / 478
At this point, Windows users may see some (harmless, but distract‐
ing) error messages that say
socket.error: [WinError 10054] An
existing connection was forcibly closed by the remote host
.
Add a
self.browser.refresh()
just before the
self.brows
er.quit()
in
tearDown
to get rid of them. The issue is being tracked
in this
bug on the Django tracker.
Hooray!
Using Bootstrap Components to Improve the Look of the
Site
Let’s see if we can do even better, using some of the other tools in Bootstrap’s panoply.
Jumbotron!
Bootstrap has a class called
jumbotron
for things that are meant to be particularly
prominent on the page. Let’s use that to embiggen the main page header and the input
form:
lists/templates/base.html (ch07l009).
<div class="col-md-6 col-md-offset-3 jumbotron">
<div class="text-center">
<h1>{% block header_text %}{% endblock %}</h1>
<form method="POST" action="{% block form_action %}{% endblock %}">
[...]
When hacking about with design and layout, it’s best to have a win‐
dow open that we can hit refresh on, frequently. Use
python3 man
age.py runserver
to spin up the dev server, and then browse to
http://localhost:8000
to see your work as we go.
Large Inputs
The jumbotron is a good start, but now the input box has tiny text compared to every‐
thing else. Thankfully, Bootstrap’s form control classes offer an option to set an input
to be “large”:
lists/templates/base.html (ch07l010).
<input
name=
"item_text"
id=
"id_new_item"
class=
"form-control input-lg"
placeholder=
"Enter a to-do item"
/>
Using Bootstrap Components to Improve the Look of the Site
|
125