154 / 478
Table Styling
The table text also looks too small compared to the rest of the page now. Adding the
Bootstrap
table
class improves things:
lists/templates/list.html (ch07l011).
<table
id=
"id_list_table"
class=
"table"
>
Using Our Own CSS
Finally I’d like to just offset the input from the title text slightly. There’s no ready-made
fix for that in Bootstrap, so we’ll make one ourselves. That will require specifying our
own CSS file:
lists/templates/base.html.
<head>
<title>
To-Do lists
</title>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<link
href=
"/static/bootstrap/css/bootstrap.min.css"
rel=
"stylesheet"
media=
"screen"
>
<link
href=
"/static/base.css"
rel=
"stylesheet"
media=
"screen"
>
</head>
We create a new file at
lists/static/base.css
, with our new CSS rule. We’ll use the
id
of the
input element,
id_new_item
, to find it and give it some styling:
lists/static/base.css.
#id_new_item {
margin-top: 2ex;
}
All that took me a few goes, but I’m reasonably happy with it now
( Figure 7-3).
If you want to go further with customising Bootstrap, you need to get into compiling
LESS. I
definitely
recommend taking the time to do that some day. LESS and other
pseudo-CSS-alikes like SCSS are a great improvement on plain old CSS, and a useful
tool even if you don’t use Bootstrap. I won’t cover it in this book, but you can find
resources on the Internets.
Here’s one ,for example.
A last run of the functional tests, to see if everything still works OK?
$
python3 manage.py test functional_tests
Creating test database for alias 'default'...
..
---------------------------------------------------------------------
Ran 2 tests in 10.084s
OK
Destroying test database for alias 'default'...
126
|
Chapter 7: Prettification: Layout and Styling, and What to Test About It