# Designsystem .italia

## Designsystem .italia-Oberflächenvorschau

Durchlaufe einen realistischen dreistufigen lokalen Plan, finde nach einer leeren Auswahl zurück und kehre zurück, ohne deine Notiz zu verlieren.

## Designsystem .italia-Designreferenz

Installiertes Paket von Bootstrap Italia 2.18.3 und offizielle Dokumentation; natives CSS und Schriftwiedergabe bei drei Breiten geprüft.

### Typografie und Schriftarten

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Main family | Titillium Web | Die nativen WOFF2-Schriftschnitte 400/600/700 sind in der Vorschau enthalten. |
| Long reading / code | Lora / Roboto Mono | font-serif und font-monospace; verwende Monospace nicht für die gesamte Oberfläche. |
| Body | 16px / 1.5 | Seit der Typografieüberarbeitung 2.7 die standardmäßige Basis. |
| H1 mobile | 40px / 48px | Tatsächliches CSS Italia 2.18.3 unter 576px. |
| H1 from 576px | 48px / 56px | Am nativen CSS gemessen; in der Dokumentationstabelle steht weiterhin ein Zeilenabstand von 60px. |
| Responsive typography | 576px threshold | Unterscheidet sich vom kompakten Stepper-Schwellenwert von 992px. |
### Native semantische Tokens

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --bs-primary | hsl(210,100%,40%) = #0066cc | Farbe für primäre Aktionen und Links. |
| --bs-body-color | hsl(0,0%,10%) | Standardfarbe für Fließtext. |
| --bs-success | hsl(160,100%,25%) | Bedeutung für Erfolg, kein automatischer Abschlusszustand. |
| --bs-danger | hsl(350,60%,50%) | Bedeutung für Fehler oder destruktive Aktionen. |
| --bs-warning | hsl(36,100%,30%) | Warnfunktion, getrennt vom Gelb der Palette. |
| --bs-border-radius | 4px | Es gibt auch Varianten mit 2px und 8px. |
### Abstände und Layout

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Utility sizes 0–5 | 0, 4, 8, 16, 24, 48px | Bei einer normalen Root-Größe von 16px; z. B. p-3=1rem, p-5=3rem. |
| Responsive thresholds | 576 / 768 / 992 / 1200 / 1400px | sm bis xxl. |
| Container maxima | 540 / 720 / 960 / 1176 / 1320px | Tatsächliches CSS von Italia; xl weicht vom Standard-Bootstrap mit 1140px ab. |
| Preview width | 900px maximum | Anwendungsentscheidung für einen kurzen lokalen Plan, kein offizielles Container-Token. |
| Stepper compact mode | Below 992px | Nur die aktive Beschriftung und der Textindex sind sichtbar. |
### Aufbau des Steppers

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Root/header | steppers / steppers-header | Der Header enthält eine Liste der Schritte. |
| Stage states | confirmed / active | Der Anwendungscode muss sie nach der Validierung aktualisieren. |
| Mobile index | steppers-index | Stelle sicher, dass n/total mit dem aktiven Schritt übereinstimmt. |
| Body | steppers-content; aria-live=polite | Kündigt Änderungen am Inhalt der Einzelseite an. |
| Navigation | steppers-nav; steppers-btn-prev / steppers-btn-next | Klassen legen die Darstellung fest, nicht die automatische Formularnavigation. |
## Designsystem .italia-Vollständiger Leitfaden

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## Designsystem .italia-System und Implementierung

### Designers Italia und seine Codebibliothek

> Designers Italia umfasst mehr als ein CSS-Paket: Dazu gehören Leitlinien für Service Design, Kits und Implementierungsressourcen. Dieses Beispiel konzentriert sich auf die dokumentierte Implementierung von Bootstrap Italia, festgelegt auf Version 2.18.3. Es suggeriert weder, dass die Installation der Bibliothek das Design eines öffentlichen Dienstes abschließt, noch dass damit alle Anforderungen an eine kommunale Website erfüllt sind.

Bootstrap Italia enthält in der geprüften Version Bootstrap 5.2.3 und passt es an. Binde nicht zusätzlich ein zweites Standard-Bootstrap-Bundle ein. Die Vorschau nutzt das native CSS und lokal bereitgestellte Schriftdateien von Titillium Web sowie einen eigens entwickelten dreistufigen Ablauf zur Planung eines Bibliotheksbesuchs.

Unterstützende Spezifikation lesen

## Designsystem .italia-Typografie und exakte Werte

### Schriften mit unterschiedlichen Aufgaben

Titillium Web ist die Standardschrift für die Oberfläche. Lora ist die Serifenschrift für längere Texte, Roboto Mono eignet sich für Code oder Inhalte mit fester Zeichenbreite. Die Vorschau lädt die tatsächlich verwendeten Schriftschnitte von Titillium Web und berücksichtigt die Schriftlizenz, statt unbemerkt eine Systemschrift einzusetzen.

Der Fließtext bleibt bei 16px. Die Überschriften ändern sich bei 576px: Auf kleinen Bildschirmen ist H1 40px groß und hat einen Zeilenabstand von 48px; im installierten CSS ist H1 48px groß und hat einen Zeilenabstand von 56px. In der Dokumentationstabelle wird für den Desktop ein Zeilenabstand von 60px angegeben. Die Referenztabelle hier dokumentiert die geprüfte Version und erläutert die Abweichung, statt Werte aus zwei Quellen zu vermischen.

Unterstützende Spezifikation lesen

## Designsystem .italia-Responsive Stufen und Abstände

### Zwei Breakpoints erfüllen unterschiedliche Aufgaben

Die Typografie wechselt bei 576px, während sich die Darstellung des Stepper-Headers unter 992px ändert. Auf kompakten Bildschirmen bleiben die aktuelle Beschriftung und der Index n/total sichtbar. Die anderen Schrittnamen werden nicht in unleserlich schmale Spalten gequetscht. Auch auf Mobilgeräten muss der aktuelle Schritt angekündigt werden; das Beispiel setzt dies mit Fokus auf die Überschrift und barrierefreiem Statustext um.

Die Abstands-Utilities folgen der geprüften rem-Skala: 4, 8, 16, 24 und 48px für die Größen 1 bis 5 bei normaler Root-Größe. Die maximalen Breiten des Grid-Containers umfassen 1176px bei xl und weichen damit vom Standardwert Bootstrap ab, der oft aus dem Gedächtnis übernommen wird. Der eigenständige Plan verwendet als bewusste Anwendungsentscheidung eine engere Begrenzung auf 900px.

Unterstützende Spezifikation lesen

## Designsystem .italia Stepper: Aufbau und Zuständigkeiten

### Der Header steuert den Ablauf nicht

Die dokumentierte Struktur trennt steppers-header, steppers-content und steppers-nav. Listenelemente im Header erhalten die Klassen confirmed und active; der Index gibt die Position an. Die Schaltflächen für Zurück und Weiter erhalten ihre jeweiligen Klassen. Diese Klassen beschreiben die Darstellung. Die Anwendung muss entscheiden, ob das aktuelle Formular gültig ist und ob ein späterer Schritt aufgerufen werden kann.

Das Beispiel verwendet gewöhnliche Abschnitte für die einzelnen Schritte und lässt die Steuerelemente im DOM, während inaktive Abschnitte ausgeblendet werden. Wenn Sie zum Schritt mit der Zugangsbemerkung zurückkehren, bleibt die Bemerkung daher erhalten. Ein Prüfschritt liest die vorhandenen Steuerelemente aus; er erstellt sie nicht anhand eines vermuteten Serverergebnisses neu.

```
<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>
```

Code-Referenz

Unterstützende Spezifikation lesen

## Designsystem .italia Validierung und aussagekräftiger Fortschritt

### Erst nach Auswahl der erforderlichen Option fortfahren

Die Besuchsart ist erforderlich. Wird ohne Auswahl fortgefahren, bleibt der erste Schritt aktiv, eine spezifische Fehlermeldung wird angezeigt und der Fokus wird auf das erste Optionsfeld gesetzt. Wird eine Besuchsart ausgewählt und fortgefahren, wird der erste Schritt als abgeschlossen markiert. Die optionale Bemerkung kann leer bleiben; in diesem Fall steht in der Übersicht, dass keine Bemerkung hinzugefügt wurde.

Mit Zurück gelangen Sie zum vorherigen Schritt, ohne die Auswahl oder Bemerkung zu löschen. Mit Erneut beginnen werden beide bewusst gelöscht und der Ablauf auf den Anfang zurückgesetzt. Der letzte Bildschirm heißt „Lokaler Plan“: Er behauptet niemals, dass eine Buchung übermittelt, genehmigt oder gespeichert wurde.

1. Klicken Sie ohne ausgewähltes Optionsfeld auf Weiter und prüfen Sie die Fehlermeldung.

2. Wählen Sie eine Besuchsart aus, fügen Sie eine kurze Bemerkung hinzu und öffnen Sie die Übersicht.

3. Kehren Sie zur Bemerkung zurück und prüfen Sie, ob ihr Wert erhalten bleibt. Setzen Sie anschließend den Plan mit „Erneut beginnen“ zurück.

Unterstützende Spezifikation lesen

## Designsystem .italia Zugänglicher Status und Fokus

### Visuelle und gesprochene Positionsangaben aufeinander abstimmen

Das aktive Listenelement erhält aria-current="step" und eine visuell ausgeblendete Beschriftung für den aktuellen Schritt. Frühere Schritte erhalten zusätzlich zur Klasse confirmed einen Abschlusstext. Der kompakte numerische Index wird vor Hilfstechnologien verborgen, da die aktuelle Überschrift und die Semantik des Schritts die Position bereits vermitteln. Zur visuellen Orientierung bleibt er sichtbar.

Der wechselnde Inhaltsbereich verwendet aria-live="polite", wie in den offiziellen Empfehlungen für eine einseitige Schrittfolge vorgesehen. Im Beispiel wird außerdem die neue Überschrift fokussiert, damit Tastaturnutzende einen vorhersehbaren Einstiegspunkt zum Lesen haben. Testen Sie diese Kombination mit den von Ihnen unterstützten Hilfstechnologien, um bei komplexeren Formularen übermäßig häufige Ankündigungen zu vermeiden.

- Verwenden Sie für den Schrittwechsel echte Schaltflächen. Deaktivieren Sie die Schaltfläche Zurück im ersten Schritt mit disabled.

- Verknüpfen Sie Beschriftungen mit den Optionsfeldern und dem Textfeld; Platzhaltertext ist keine Beschriftung.

- Geben Sie aktuelle und abgeschlossene Zustände durch Text an, nicht nur durch blaue Farbe oder ein Symbol.

Unterstützende Spezifikation lesen

## Designsystem .italia Native Assets und Initialisierung

### CSS, Schriftarten und optionales JavaScript

Das Paket enthält CSS, ein gebündeltes Skript, Schriftdateien und einen SVG-Sprite. Dieses Stepper-Beispiel benötigt CSS und die ausgewählten Schriftarten; die Navigation ist Anwendungslogik. Andere Widgets werden für die automatische Initialisierung über data-bs-toggle oder die dokumentierten Datenattribute eingebunden. Kombinieren Sie die automatische Initialisierung nicht mit einer zweiten manuellen Instanz desselben Widgets.

Bei Verwendung von Modulen sollten Sie nur die Komponenten importieren, die die Anwendung benötigt. Die offiziellen Hinweise besagen, dass Übergangsmethoden zurückkehren, bevor der Übergang beendet ist, und dass Aufrufe während eines Übergangs ignoriert werden können. Warten Sie bei diesen Komponenten auf das entsprechende Abschlussereignis, bevor Sie abhängige Aktionen ausführen. Dieser einfache Stepper erfindet keine nativen Übergänge mit API.

Unterstützende Spezifikation lesen

## Designsystem .italia Integrationsgrenzen

### Nutzen Sie das Kit, ohne einen abgeschlossenen Service vorzutäuschen

Die Bibliotheksdokumentation empfiehlt, die Version aktuell zu halten, und rät von einer öffentlichen CDN-Abhängigkeit in der Produktion ab. In der Einrichtung ist die geprüfte Version festgelegt; das lokale Beispiel enthält eigene Assets und Lizenzen. Ein echter Service benötigt weiterhin Content Design, Datenverarbeitung, serverseitige Validierung und eine bestätigte Übermittlungsantwort.

Das Beispiel zeigt einen allgemeinen Bibliotheksbesuch ohne kommunales Logo oder Hoheitszeichen. Es handelt sich um ein OpenDesign Lehrbeispiel, nicht um einen Service einer Behörde. Machen Sie diesen Unterschied auch in jedem Prototyp deutlich, damit eine visuell ausgefeilte Übersichtsansicht nicht für einen echten Antrag gehalten wird.

Unterstützende Spezifikation lesen

## Designsystem .italia Komponentenbeispiele des Designsystems

### Stepper-Aufbau im zweiten Schritt

Die Zustände „bestätigt“, „aktiv“ und „mobiler Index“ müssen durch Anwendungscode synchronisiert werden.

```
<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>
```

Code-Referenz

### Vollständiger lokaler Planungsablauf

Native CSS/Schriftarten, erforderliche Optionsfeld-Validierung, optionale Bemerkung, Übersicht, Zurück und Zurücksetzen.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Prepare a library visit</title><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/bootstrap-italia.min.css"><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/fonts.css"><style>body{padding:32px 16px}main{max-width:900px;margin:auto}.steppers-content{padding:24px 0}.steppers-nav{display:flex;gap:16px;justify-content:space-between}.form-check{margin-bottom:16px}footer{font-size:14px;margin-top:32px;border-top:1px solid #ccc;padding-top:16px}[hidden]{display:none!important}.error{color:var(--bs-danger)}@media(max-width:575px){body{padding:24px 16px}}</style><main><p class="text-uppercase">Independent service example</p><h1>Prepare a library visit</h1><p class="lead">Choose a visit format, add a note and review your local plan.</p><div class="steppers"><div class="steppers-header"><ul id="steps"><li class="active" aria-current="step">Visit type <span class="visually-hidden">Current step</span></li><li>Access note</li><li>Review</li></ul><span class="steppers-index" id="index" aria-hidden="true">1/3</span></div><div class="steppers-content" aria-live="polite"><section data-step="0"><h2 tabindex="-1">Choose a visit type</h2><fieldset><legend class="visually-hidden">Visit type</legend><div class="form-check"><input id="guided" type="radio" name="visit" value="Guided introduction"><label for="guided">Guided introduction</label></div><div class="form-check"><input id="quiet" type="radio" name="visit" value="Quiet reading visit"><label for="quiet">Quiet reading visit</label></div></fieldset><p id="error" class="error" role="alert" hidden>Choose a visit type before continuing.</p></section><section data-step="1" hidden><h2 tabindex="-1">Add an access note</h2><p id="hint">Optional. Describe what would help you use the space; avoid sensitive personal information.</p><label for="note">Access note</label><textarea id="note" rows="3" class="form-control" aria-describedby="hint" maxlength="200"></textarea></section><section data-step="2" hidden><h2 tabindex="-1">Review your local plan</h2><dl><dt>Visit type</dt><dd id="review-type"></dd><dt>Access note</dt><dd id="review-note"></dd></dl><p>This is a local plan only. No booking or request has been sent.</p></section></div><nav class="steppers-nav" aria-label="Plan steps"><button id="back" class="btn btn-outline-primary steppers-btn-prev" disabled>Back</button><button id="next" class="btn btn-primary steppers-btn-next">Continue</button><button id="reset" class="btn btn-primary" hidden>Start again</button></nav></div><footer>Native Bootstrap Italia 2.18.3 CSS and Titillium Web. Original local planning flow; no municipal identity or booking service.</footer></main><script>let step=0;const labels=['Visit type','Access note','Review'];function render(){document.querySelectorAll('[data-step]').forEach(x=>x.hidden=Number(x.dataset.step)!==step);document.querySelectorAll('#steps li').forEach((li,i)=>{li.className=i===step?'active':i<step?'confirmed':'';li.removeAttribute('aria-current');li.textContent=labels[i];const state=document.createElement('span');state.className='visually-hidden';state.textContent=i===step?' Current step':i<step?' Completed':'';li.append(state);if(i===step)li.setAttribute('aria-current','step')});document.querySelector('#index').textContent=(step+1)+'/3';document.querySelector('#back').disabled=step===0;document.querySelector('#next').hidden=step===2;document.querySelector('#reset').hidden=step!==2;if(step===2){document.querySelector('#review-type').textContent=document.querySelector('[name=visit]:checked').value;document.querySelector('#review-note').textContent=document.querySelector('#note').value.trim()||'No note added'}document.querySelector('[data-step="'+step+'"] h2').focus()}document.querySelector('#next').onclick=()=>{if(step===0&&!document.querySelector('[name=visit]:checked')){document.querySelector('#error').hidden=false;document.querySelector('#guided').focus();return}document.querySelector('#error').hidden=true;step++;render()};document.querySelector('#back').onclick=()=>{step--;render()};document.querySelector('#reset').onclick=()=>{document.querySelectorAll('[name=visit]').forEach(x=>x.checked=false);document.querySelector('#note').value='';step=0;render()};</script></html>
```

Code-Referenz

## Designsystem .italia Einrichtung für Agents

### Ausgangspunkt für die Implementierung

Einrichtung mit nativen CSS und Schriftarten. Die Stepper-Navigation ist Anwendungslogik; ein vollständiges funktionsfähiges Beispiel folgt. Das vollständige ZIP-Beispiel aus den Quellen enthält außerdem die exakten Abhängigkeiten für die Vorschau und das vollständige Dokument. Entpacken Sie es, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie anschließend http://localhost:8080/designers-italia.html. Öffnen Sie modulbasierte Beispiele nicht über file://.

```
npm install bootstrap-italia@2.18.3
# Copy dist/css/bootstrap-italia.min.css into public/vendor.
# Copy the needed src/fonts/Titillium_Web WOFF2 files and declare @font-face.
# CSS is sufficient for the Stepper presentation; application code owns navigation.
# For data-bs-toggle widgets, load dist/js/bootstrap-italia.bundle.min.js once.
```

### Ein Prompt für dein Projekt

```
Verwenden Sie Bootstrap Italia 2.18.3 mit nativen CSS und Titillium Web. Erstellen Sie die dokumentierte Struktur aus steppers/header/content/nav mit aktiven und bestätigten Zuständen sowie einem synchronisierten mobilen Index. Implementieren Sie Validierung und Navigation im Anwendungscode, erhalten Sie Werte bei Zurück und benennen Sie den Endzustand entsprechend der tatsächlichen Antwort des Backends. Binden Sie keine zweite Bootstrap-Laufzeit ein und behaupten Sie nicht, eine lokale Übersicht sei übermittelt worden.
```

## Designsystem .italia Quellen und Geltungsbereich

Eigenständiges OpenDesign-Beispiel mit Schwerpunkt auf Bootstrap Italia. Keine Identität einer Behörde und kein echter Buchungsservice.

- Installation und Assets CSS, Module, Bundle, Schriftarten und Grenzen der Laufzeitumgebung.

- Stepper Native Struktur, Zustände, kompakter Modus und Live-Region.

- Typografie Schriftfamilien und responsive Überschriften.

- Abstände Abstandsskala und Syntax.

- Veröffentlichte Quelle Festgelegte Abmessungen der Version und semantische Variablen.

- Vollständiges funktionsfähiges Beispiel herunterladen ZIP-Datei mit dem vollständigen HTML, lokalen Abhängigkeiten für CSS/JavaScript, mitgelieferten Lizenzen und genauen Startanweisungen. Ein Build-Schritt ist nicht erforderlich.

## Designsystem .italia Verwandte Ressourcen

### Designsystemet

Entdecken Sie die tatsächlichen Theme-Rollen, Größenmodi und das native Verhalten von Eingabefeldern in Designsystemet anhand eines vollständigen Editors für Aufgabenbeschreibungen mit Zeichenfeedback und beibehaltenem Darstellungszustand.

### DSFR

Erfasse die konkrete Typografie, das Raster und das Akkordeon des französischen Staatssystems API innerhalb seines institutionellen Kontexts. Vergleiche verknüpftes und unabhängiges Auf- und Zuklappen in einem klar neutralen Lernbeispiel.

### Europa Component Library

Untersuchen Sie Europas Farb-, Typografie- und Abstandsrollen in EC anhand eines vollständigen nativen Accordion-Briefings – einschließlich Tastaturbedienung, „Alle öffnen“-Verhalten und lesbarem Fallback ohne JavaScript.


- [Implementierungsreferenz](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Quelle](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [Quelle](https://github.com/italia/bootstrap-italia/blob/v2.18.3/dist/css/bootstrap-italia.min.css)
- [Quelle](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [Quelle](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Unterstützende Spezifikation lesen](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/)
- [Unterstützende Spezifikation lesen](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [Unterstützende Spezifikation lesen](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [Code-Referenz](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Unterstützende Spezifikation lesen](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Installation und Assets CSS, Module, Bundle, Schriftarten und Grenzen der Laufzeitumgebung.](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/)
- [Stepper Native Struktur, Zustände, kompakter Modus und Live-Region.](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Typografie Schriftfamilien und responsive Überschriften.](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [Abstände Abstandsskala und Syntax.](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [Veröffentlichte Quelle Festgelegte Abmessungen der Version und semantische Variablen.](https://github.com/italia/bootstrap-italia/blob/v2.18.3/dist/css/bootstrap-italia.min.css)