Lesson 21 - Bootstrap

LEARN

Office Hours

• Half-way point -- Check your grades
• If you need help please attend office hours
• Connect in person of via zoom
• Check the Canvas page for details
• Wednesday Lab Session 2:30-3:20 in Kepner 0090

Django for Beginners - Chapter 10 - Bootstrap

• JavaScript
• CSS
• Crispy Forms
• Bootstrap Basics

Today

• Styling with Bootstrap
• Bootstrap Typography & Components
• Static Web Server

W3Schools

• Getting Started
• Typography
• Components
• Grid

Adjusting form styles

• Run developer tools (F12 in Firefox)
• Find the classes used on elements
• Set the styles in a custom stylesheet

Building a Theme

• Create a theme as a template
• Extend this template for each page you create
• Never style each element or page
• Leverage your previous work

Using Bootstrap

Use both the Bootstrap and custom CSS

templates/unc.html

html <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/static/style.css" rel="stylesheet">

Component Styling

• Buttons
• Colors
• Spacing

CSS Color Classes

Set accent colors using a stylesheet

unc.css

```css .unc-dark { color: #F6B018; background-color: #0E3D65; }

.unc-light { color: #0E3D65; background-color: #F6B018; } ```

templates/unc.html

html <header class="unc-dark">UNC HEADER<header> <table class="unc-light"> ... <table>

CSS Color Classes

Bootstrap uses named color as classes

templates/unc.html

html <header class="bg-dark text-light">UNC HEADER<header> <div class="bg-light text-dark"> <button class="btn-primary">It worked</button> <p class="bg-dark text-light">This is a dark background with white text.</p> </div>

CSS Color Classes

Bootstrap uses named color as classes

/*    --primary:#007bff;      --secondary:#6c757d;*/
/*    --success:#28a745;      --info:#17a2b8;*/
/*    --warning:#ffc107;      --danger:#dc3545;*/
/*    --light:#f8f9fa;        --dark:#343a40;*/

Margin and Padding

Bootstrap uses classes in HTML to set spacing

templates/unc.html

```html

```

BUILD

HTML Files

• Built Bootstrap demo files
• Need to build a simple web server to show demo

. ├── lesson │ ├── 21.md │ ├── 22.md │ └── 23.md └── templates ├── components.html ├── grid.html ├── index.html ├── template.html └── typography.html

Lessons Django Project

• Build an app that can display static HTML files
• Demo Bootstrap templates using new app

Build a fresh demo project

$ django-admin startproject config .
$ python manage.py migrate
$ python manage.py runserver

Browse http://127.0.0.1:8000

config/urls.py

urlpatterns = [
    path('', TemplateView.as_view(template_name="index.html")),
]

Error no template for 'index.html'

config/settings.py

TEMPLATES = [
    {
        ...
        'DIRS': [BASE_DIR / 'templates'],
        ...
        },
    },
]

Error no template for 'typography.html'

![(img/404-template.png)]

Get the template name from URL

config/urls.py

class PageView(TemplateView):
    def get_template_names(self):
        return self.kwargs.get('page')


urlpatterns = [
    path('<str:page>', PageView.as_view()),
]

Error no template for 'index.html'