Bootstrap 5.2.2 - Classe ".alert" non viene visualizzata
Buongiorno a tutti,
ho fatto una ricerca nel forum, ma non trovo nulla a riguardo. Se la tematica fosse già stata presentata, chiedo scusa, eventualmente reindirizzatemi al thread corretto.
Espongo il mio problema e i test che ho fatto. Cerco di spiegare il meglio possibile, ma perdonate errori di lessico/nomenclatura in quanto le mie conoscenze sono amatoriali.
In una pagina di test (test.html) ho "referenziato" il framework Bootstrap 5.2.2, richiamando direttamente l'URL con i link CDN forniti sulla documentazione di Bootstrap stesso. Ho caricato sia il CSS che il JS. Questa pagina l'ho caricata sulla root del mio spazio Altervista.
Funziona tutto correttamente eccetto la classe ".alert".
Quando creo un "div" con la suddetta classe, come da documentazione Bootstrap, esso non viene visualizzato. Ispezionando la pagina, l'oggetto "<div>" viene creato, ma di fatto rimane invisibile, pur avendo tutte le proprietà che dovrebbe avere.
Infatti la stessa pagina, salvata sul PC in locale e lanciata su un browser, funziona correttamente: espone il "<div>" formattato come un ".alert", così come da documentazione Bootstrap.
Prendendo dal .css di Bootstrap la parte che definisce la classe ".alert" (copia-incolla) e ponendola direttamente nella pagina di test all'interno di un tag "<style>", l'anomalia si presenta ugualmente: in locale l'oggetto viene visualizzo correttamente, su Altervista no.
In questa nuova versione della pagina test.html, versione in cui all'interno di un tag "<style>" ho riportato lo stile della classe ".alert", ho provato quindi a definire la classe come ".alerts" e a dare la stesse classe al "<div>".
In questo modo, su Altervista, il "<div>" viene visualizzato correttamente.
Qualcuno ha modo di verificare e confermare che la classe ".alert" del framework Bootstrap 5.2.2 non viene visualizzata qui su Altervista? O se sto sbagliando qualcosa io?
Vi sono dei "conflitti" a causa del nome della classe ("alert" somiglia molto ad una "parola chiave")?
A seguire: il codice della pagina originale (locale: OK, Altervista: KO), il codice con lo stile imposto direttamente sulla pagina (locale: OK, Altervista: KO), il codice con la classe ".alert" modificata in ".alerts" (locale: OK, Altervista: OK)
Grazie per un eventuale aiuto,
buona giornata,
Simone
--
Qui sotto la pagina originale:
Codice:
<!doctype html>
<html class="no-js" lang="it">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="alert alert-primary">
A simple primary alert—check it out!
</div>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Qui sotto la pagina con lo stile imposto:
Codice:
<!doctype html>
<html class="no-js" lang="it">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<!-- Bootstrap CSS -->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> -->
</head>
<body>
<style>
.alert{
--bs-alert-bg:transparent;
--bs-alert-padding-x:1rem;
--bs-alert-padding-y:1rem;
--bs-alert-margin-bottom:1rem;
--bs-alert-color:inherit;
--bs-alert-border-color:transparent;
--bs-alert-border:1px solid var(--bs-alert-border-color);
--bs-alert-border-radius:0.375rem;
position:relative;
padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);
margin-bottom:var(--bs-alert-margin-bottom);
color:var(--bs-alert-color);
background-color:var(--bs-alert-bg);
border:var(--bs-alert-border);
border-radius:var(--bs-alert-border-radius)
}
.alert-primary{
--bs-alert-color:#084298;
--bs-alert-bg:#cfe2ff;
--bs-alert-border-color:#b6d4fe
}
</style>
<div class="alert alert-primary">
A simple primary alert—check it out!
</div>
<!-- Bootstrap JavaScript -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script> -->
</body>
</html>
Qui sotto la pagina con la classe rinominata:
Codice:
<!doctype html>
<html class="no-js" lang="it">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<!-- Bootstrap CSS -->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> -->
</head>
<body>
<style>
.alerts{
--bs-alert-bg:transparent;
--bs-alert-padding-x:1rem;
--bs-alert-padding-y:1rem;
--bs-alert-margin-bottom:1rem;
--bs-alert-color:inherit;
--bs-alert-border-color:transparent;
--bs-alert-border:1px solid var(--bs-alert-border-color);
--bs-alert-border-radius:0.375rem;
position:relative;
padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);
margin-bottom:var(--bs-alert-margin-bottom);
color:var(--bs-alert-color);
background-color:var(--bs-alert-bg);
border:var(--bs-alert-border);
border-radius:var(--bs-alert-border-radius)
}
.alert-primary{
--bs-alert-color:#084298;
--bs-alert-bg:#cfe2ff;
--bs-alert-border-color:#b6d4fe
}
</style>
<div class="alerts alert-primary">
A simple primary alert—check it out!
</div>
<!-- Bootstrap JavaScript -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script> -->
</body>
</html>
