13: Bootstrap
È arrivato ora il momento di iniziare a parlare di Bootstrap. Come abbiamo già accennato, tratta di un framework per lo sviluppo front-end, talvolta definito come una delle più grandi librerie di componenti HTML e CSS, che ci facilita il lavoro di creazione dell'aspetto grafico del nostro sito. Questo perché bootstrap ci fornisce CSS, HTML e plugin jQuery pronti ad essere impiegati e personalizzati in base alle nostre esigenze.
Diamo uno sguardo alle varie sezioni del sito ufficiale: a breve utilizzeremo le componenti di Bootstrap per creare la nostra pagina html. La prima cosa da fare è tornare nel template base.html e iniziare ad allestirlo per ricevere i componenti, integrando i link alle varie CDN (Content-Delivery-Network).
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block head_title %}My Django Blog{% endblock head_title %}</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<!-- Blog CSS -->
<link rel="stylesheet" href="{% static 'css/blog.css' %}" type="text/css" />
</head>
<body> <!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
<footer></footer>
</body>
</html>Nella prossima lezione aggiungeremo una barra di navigazione al nostro sito utilizzando Bootstrap nel nostro template base.html.