Senta Scusi Prof

Un simpatico repertorio di risorse per la didattica

This is a simple template with a collapsible menu and a one-column layout.

Cheatsheet Bootstrap 5.3

Tipografia

Display 1

Display 2

Display 3

Display 4

Lead

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Testo Muto

Testo Primario

Testo Successo

Testo Pericolo

Testo Avvertimento

Testo Informazioni

Bottoni

Griglia

Colonna 1
Colonna 2
Colonna 3

Componenti

Badge
Cinema - Lumiere
Titolo Card

Testo Card

Pulsante

Forme




Bootstrap Color Examples

Background Colors

Primary Background
Secondary Background
Success Background
Danger Background
Warning Background
Info Background
Light Background
Dark Background

Text Colors

Primary Text

Secondary Text

Success Text

Danger Text

Warning Text

Info Text

Light Text

Dark Text

Buttons

Alerts


Bootstrap Article Example

Introduction

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec leo semper, vestibulum mauris et, consequat sem. Quisque eu sapien ac elit placerat placerat. Donec sem nunc, ullamcorper ac tempor sed, dignissim eu dolor. Curabitur in rutrum est. Donec sagittis ultricies diam, sed scelerisque odio mollis non. Praesent fermentum viverra massa id finibus. Nullam malesuada massa sed semper lobortis.

Main Section

Aliquam a consectetur turpis. In id posuere mi. Sed ac ligula eget sapien scelerisque volutpat quis sed lorem. Etiam vitae nulla id velit volutpat varius eget id sem. Phasellus consectetur auctor sem. Pellentesque mattis tellus et ante aliquet, non tempor enim volutpat. Integer ut ultrices ligula. Quisque congue metus id dui condimentum auctor.

Image
Nelson Mandela

Subsection

Vestibulum ut dui quam. Nam vel sapien eu ex sollicitudin faucibus. Duis vel ante tincidunt, convallis erat a, gravida ex. Vestibulum non ante libero. Proin at interdum eros, eget finibus nisi. Fusce at eros eget orci semper consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris ut dapibus justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis dolor sodales, venenatis turpis id, consectetur justo.

Quote Source

Nulla convallis interdum semper. Donec semper feugiat risus. Nam ultricies auctor elit, eu eleifend lacus posuere at. Quisque vitae rhoncus velit. Vestibulum blandit, ipsum nec eleifend dignissim, nunc enim vulputate lectus, at consectetur quam ex a felis. Phasellus vitae lacus dictum, vehicula orci id, tincidunt libero.

 

Nell'esempio sopra, ho utilizzato le classi di Bootstrap per semplificare l'impaginazione dell'articolo:

  • Ho utilizzato gli elementi di intestazione (<h1>, <h2>, <h3>) per creare i titoli e i sottotitoli dell'articolo.
  • Ho utilizzato l'elemento <p> per il testo del paragrafo.
  • Ho utilizzato l'elemento <figure> e la classe figure per inserire un'immagine con didascalia.
  • Ho utilizzato la classe figure-img per rendere l'immagine responsiva.
  • Ho utilizzato l'elemento <figcaption> e la classe figure-caption per la didascalia dell'immagine.
  • Ho utilizzato l'elemento <blockquote> e la classe blockquote per creare un blocco di citazione.
  • Ho utilizzato l'elemento <footer> e la classe blockquote-footer per la fonte della citazione.

Questi sono solo alcuni esempi di come Bootstrap può semplificare l'impaginazione di un articolo, offrendo una serie di classi e componenti predefiniti per creare una struttura pulita e responsiva.

Bootstrap Card Examples

Image 1
Card Title 1

Some quick example text to build on the card title and make up the bulk of the card's content.

Read More
Image 2
Card Title 2

Some quick example text to build on the card title and make up the bulk of the card's content.

Read More
Image 3
Card Title 3

Some quick example text to build on the card title and make up the bulk of the card's content.

Read More

Nell'esempio sopra, ho utilizzato le classi di Bootstrap per creare tre card:

  • Ho utilizzato la classe card per creare l'elemento di card.
  • Ho utilizzato la classe card-img-top per inserire un'immagine nella parte superiore della card.
  • Ho utilizzato la classe card-body per il contenuto principale della card.
  • Ho utilizzato la classe card-title per il titolo della card.
  • Ho utilizzato la classe card-text per il testo della card.
  • Ho utilizzato la classe btn e btn-primary per creare un pulsante di "Read More" all'interno della card.

Le card di Bootstrap offrono molte altre opzioni e componenti, come l'aggiunta di header, footer, griglie e molto altro. Puoi personalizzare ulteriormente le card utilizzando le classi e le opzioni offerte da Bootstrap.

Bootstrap Accordion and More Examples

Accordion

Content for Section 1.

Content for Section 2.

Content for Section 3.

Popover

Spinner

Loading...

Badge

Primary Badge Secondary Badge Success Badge Danger Badge

Bootstrap Popover Examples

Popover Example 1

Popover Example 2




Titolo del div

Descrizione dell'immagine
Il poeta Giacomo Leopardi -(1798-1837)

Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo, eget congue urna fringilla et. Nulla facilisi. Vestibulum ut metus a turpis volutpat rutrum. Quisque finibus. Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo, eget congue urna fringilla et. Nulla facilisi. Vestibulum ut metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo, eget congue urna fringilla et. Nulla facilisi. class = "float-right pe-sm-4 pb-sm-4" Vestibulum ut metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo,
eget congue urna fringilla et. Nulla facilisi. Vestibulum ut metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo, eget congue urna fringilla et. Nulla facilisi. Vestibulum ut metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo, eget congue urna fringilla et. Nulla facilisi. Vestibulum ut metus a turpis volutpat rutrum. Quisque finibus Sed non pulvinar nibh. Donec dapibus vehicula leo, eget congue urna fringilla et. Nulla facilisi. Vestibulum ut
metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo,
eget congue urna fringilla et. Nulla facilisi. Vestibulum ut metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo, eget congue urna fringilla et. Nulla facilisi. Vestibulum ut


metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo,
eget congue urna fringilla et. Nulla facilisi. Vestibulum ut metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo, eget congue urna fringilla et. Nulla facilisi. Vestibulum ut metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo,

eget congue urna fringilla et. Nulla facilisi. Vestibulum ut metus a turpis volutpat rutrum. Quisqu

Descrizione dell'immagine
Il poeta Giacomo Leopardi -(1798-1837)

e finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo,
eget congue urna fringilla et. Nulla facilisi. Vestibulum ut metus a turpis volutpat rutrum.

Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consec
tetur adipiscing elit. metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo,
eget congue urna fringilla et. Nulla facilisi. Vestibulum ut metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo,
eget congue urna fringilla et. Nulla facilisi. Vestibulum ut metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non pulvinar nibh. Donec dapibus vehicula leo,
eget congue urna fringilla et. Nulla facilisi. Vestibulum ut metus a turpis volutpat rutrum. Quisque finibus Testo del div che contiene una descrizione. Lorem ipsum dolor sit amet, consectetur adipiscing elit.