Indice pagine

Contenuto: COMPONENTI-1

Contenuto: COMPONENTI-2

Collegamenti Interni

01. Collapse
02. Collapse pulsanti
03. Collapse multipli
04. Carousel dissolvenza
05. Carousel diapositiva
06. Jumbotron
07. Oggetto multimediale
08. Elenco media
09. Componente modale
10. Modale a scorrimento
11. Modelli modali
12. Moduli
13. Gruppo di input
14. Barra avanzamento

01. Popover

Un modo per inizializzare tutti i popover in una pagina sarebbe selezionarli in base al loro data-toggle attributo:

Come nel seguente codice

  
$(function () {
  $('[data-toggle="popover"]').popover()
})

Codice


<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Titolo Popover" data-content="E questo è il contenuto del popover: riclicca per disattivare">Clicca per attivare il popover</button>

02. Tooltips

Un modo per inizializzare tutti i tooltip su una pagina sarebbe selezionarli in base al loro data-toggle attributo:

Come nel seguente codice

  
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Codice


<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip a sinistra">
  Tooltip a sinistra
</button>    
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip sopra">
  Tooltip sopra
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip sotto">
  Tooltip sotto
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip a destra">
  Tooltip a destra
</button>

03. Border spinner

Bootstrap "spinners" può essere usato per mostrare lo stato di caricamento nei tuoi progetti.
Sono costruiti solo con HTML e CSS, il che significa che non è necessario alcun JavaScript per crearli.

Codice


<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>
<br><br>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

04. Pagination

L'impaginazione è costruita con un elenco di elementi HTML in modo che gli screen reader possano annunciare il numero di collegamenti disponibili.

Codice


<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Precedente</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Seguente</a></li>
  </ul>
</nav>

05. Pulsanti

Bootstrap include diversi stili di pulsanti predefiniti, ciascuno con il proprio scopo semantico,
con alcuni extra inseriti per un maggiore controllo.

Codice


<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

06. Pulsanti con bordo

Se si vuole un pulsante leggero, sostituire le classi predefinite con .btn-outline-* per rimuovere i colori disfondo su qualsiasi pulsante.

Codice


<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

07. Gruppo di pulsanti

Raggruppa una serie di pulsanti su una singola riga con il gruppo di pulsanti

Codice


<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Sinistra</button>
  <button type="button" class="btn btn-secondary">Centro</button>
  <button type="button" class="btn btn-secondary">Destra</button>
</div>

08. Barra di pulsanti

Combinare gruppi di pulsanti in barre di strumenti pulsanti per componenti più complessi.
Utilizzare le classi di utilità necessarie per distanziare gruppi, pulsanti e altro.

Codice


<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

09. Menù a discesa

I dropdown di Bootstrap, sono progettati per essere generici e applicabili a una varietà di situazioni e strutture di markup.
Ad esempio, è possibile creare elenchi a discesa contenenti input e controlli di moduli aggiuntivi, come campi di ricerca o moduli di accesso.

Codice


<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
  aria-haspopup="true" aria-expanded="false">
    Menù a discesa
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Elemento 1</a>
    <a class="dropdown-item" href="#">Elemento 2</a>
    <a class="dropdown-item" href="#">Elemento 3</a>
  </div>
</div>

10. Dimensionamento Menù

I menu a discesa dei pulsanti funzionano con i pulsanti di tutte le dimensioni, inclusi i pulsanti a discesa predefiniti e suddivisi.

Codice


<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Pulsante grande
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Elemento 1</a>
    <a class="dropdown-item" href="#">Elemento 2</a>
    <a class="dropdown-item" href="#">Elemento 3</a>
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Split pulsante grande
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Elemento 1</a>
    <a class="dropdown-item" href="#">Elemento 2</a>
    <a class="dropdown-item" href="#">Elemento 3</a>
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Pulsante piccolo
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Elemento 1</a>
    <a class="dropdown-item" href="#">Elemento 2</a>
    <a class="dropdown-item" href="#">Elemento 3</a>
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Split pulsanta piccolo
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Elemento 1</a>
    <a class="dropdown-item" href="#">Elemento 2</a>
    <a class="dropdown-item" href="#">Elemento 3</a>
  </div>
</div>

11. Barra di menù a discesa

Cambia lo stile del componente .nav con i modificatori e utilità. Mescola e abbina secondo necessità o costruisci un tema. Cambia l'allineamento orizzontale del tuo.nav con le utility flexbox . Per impostazione predefinita, i nav sono allineati a sinistra, ma puoi facilmente cambiarli al centro o allineati a destra.

Codice


<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Menu attivo</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Menu 2 a discesa</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Elemento 1</a>
      <a class="dropdown-item" href="#">Elemento 2</a>
      <a class="dropdown-item" href="#">Elemento 3</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Elemento 4 separato</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 3</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Menu 4 disabilitato</a>
  </li>
</ul>

12. barra di navigazione colorata

Barra di navigazione con la combinazione di classi tematiche e le utilità background-color.
Scegliere .navbar-light per l'uso con colori di sfondo chiari o .navbar-dark per i colori di sfondo scuri.
Personalizzare con le classi .bg-*

Codice


<nav class="navbar navbar-expand-lg  navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

13. Tabs

Puoi attivare una navigazione con tabulazioni o pulsanti senza scrivere alcun JavaScript semplicemente specificando data-toggle="tab" o data-toggle="pill" su un elemento.
Utilizzare questi attributi di dati su .nav-tabs o .nav-pills

Prende il nav di base e aggiunge la classe .nav-tabs per generare un'interfaccia a schede.

Tab-01
Raw denim probabilmente non hai mai sentito parlare di loro pantaloncini jean Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Il cliché dei baffi tempor, williamsburg carles vegan helvetica. Sintetizzatore del dreamcatcher del kefiah del retro del macellaio di Reprehenderit. Cosby maglione eu banh mi, qui irure terry richardson ex calamaro. Aliquip placeat salvia cillum iphone.

Tab-02
Raw denim probabilmente non hai mai sentito parlare di loro pantaloncini jean Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Il cliché dei baffi tempor, williamsburg carles vegan helvetica. Sintetizzatore del dreamcatcher del kefiah del retro del macellaio di Reprehenderit.

Tab-03
Raw denim probabilmente non hai mai sentito parlare di loro pantaloncini jean Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Il cliché dei baffi tempor, williamsburg carles vegan helvetica.

Codice


<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
   Tab-01<br>
   Raw denim probabilmente non hai mai sentito parlare di loro pantaloncini jean Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Il cliché dei baffi tempor, williamsburg carles vegan helvetica. Sintetizzatore del dreamcatcher del kefiah del retro del macellaio di Reprehenderit. Cosby maglione eu banh mi, qui irure terry richardson ex calamaro. Aliquip placeat salvia cillum iphone.
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
   Tab-02<br>
   Raw denim probabilmente non hai mai sentito parlare di loro pantaloncini jean Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Il cliché dei baffi tempor, williamsburg carles vegan helvetica. Sintetizzatore del dreamcatcher del kefiah del retro del macellaio di Reprehenderit. 
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
   Tab-03<br>
   Raw denim probabilmente non hai mai sentito parlare di loro pantaloncini jean Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Il cliché dei baffi tempor, williamsburg carles vegan helvetica.
  </div>
</div>

14. Tabs verticale

Utilizzando la navigazione verticale

Home Profile Messages Settings

1. La codifica del linguaggio HtmL e fondata sul concetto di:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Secutus quod suaviter quando liquidae sapientia desideraturam intelleges efficiatur. Certissimam suum praetulerit scipio ferentur ludus.

2. La codifica del linguaggio HtmL e fondata sul concetto di:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Secutus quod suaviter quando liquidae sapientia desideraturam intelleges efficiatur.

3. La codifica del linguaggio HtmL e fondata sul concetto di:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

4. La codifica del linguaggio HtmL e fondata sul concetto di:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Codice


<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
         1. La <em>codifica del linguaggio HtmL</em> e fondata sul concetto di:<br>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Secutus quod suaviter quando liquidae sapientia desideraturam intelleges efficiatur. Certissimam suum praetulerit scipio ferentur ludus.
      </div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
         2. La <em>codifica del linguaggio HtmL</em> e fondata sul concetto di:<br>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Secutus quod suaviter quando liquidae sapientia desideraturam intelleges efficiatur.
      </div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
         3. La <em>codifica del linguaggio HtmL</em> e fondata sul concetto di:<br>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
         4. La <em>codifica del linguaggio HtmL</em> e fondata sul concetto di:<br>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
    </div>
  </div>
</div>

15. Le Card (schede)

Una carta è un contenitore di contenuti flessibile ed estensibile. Include opzioni per intestazioni e piè di pagina, un'ampia varietà di contenuti, colori di sfondo contestuali e potenti opzioni di visualizzazione. le carte sostituiscono i nostri vecchi pannelli e miniature.

Le schede sono costruite con il flexbox e il minor numero possibile di annotazioni e stili,
per fornire un maggior controllo di personalizzazione e una facile combinazione con altri componenti Bootstrap.
Non hanno margin di default.

Di seguito è riportato un esempio di una scheda base con contenuto misto e larghezza fissa.
Le carte non hanno una larghezza fissa per iniziare, quindi riempiranno naturalmente tutta la larghezza del suo elemento genitore.

Titolo Scheda

Alcuni esempi di testo da mettere sotto il titolo della carta che costituirà la maggior parte del contenuto della scheda.

un link di collegamento

Codice


<div class="card" style="width: 18rem;">
  <img src="img/img00.png" class="card-img-top" alt="img">
  <div class="card-body">
    <h5 class="card-title">Titolo Scheda</h5>
    <p class="card-text">Alcuni esempi di testo da mettere sotto il titolo della carta che costituirà la maggior parte del contenuto della scheda.</p>
    <a href="#" class="btn btn-primary">un link di collegamento</a>
  </div>
</div>

16. Le schede con la griglia

Utilizzando la griglia, avvolgere le carte in colonne e righe secondo necessità.

Un Titolo speciale

Con il testo di supporto sottostante come lead per contenuti aggiuntivi.

Un collegamento

Un Titolo speciale

Con il testo di supporto sottostante come lead per contenuti aggiuntivi.

Un collegamento

Codice


<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Un Titolo speciale</h5>
        <p class="card-text lead">Con il testo di supporto sottostante come lead per contenuti aggiuntivi.</p>
        <a href="#" class="btn btn-primary">Un collegamento</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Un Titolo speciale</h5>
        <p class="card-text lead">Con il testo di supporto sottostante come lead per contenuti aggiuntivi.</p>
        <a href="#" class="btn btn-primary">Un collegamento</a>
      </div>
    </div>
  </div>
</div>

17. Una scheda colorata

Le schede includono varie opzioni per personalizzare i loro sfondi, bordi e colori.

Intestazione

Titolo Informazioni

Il testo da mettere sotto il titolo della carta costituirà la maggior parte del contenuto della scheda.

Codice


<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Intestazione</div>
  <div class="card-body">
    <h5 class="card-title">Titolo Informazioni</h5>
    <p class="card-text">Il testo da mettere sotto il titolo della carta costituirà la maggior parte del contenuto della scheda.</p>
  </div>
</div>

18. Mazzi di carte

Usa i gruppi di carte per rendere le carte come un singolo elemento collegato con colonne di larghezza e altezza uguali.
I gruppi di carte usano display: flex; per ottenere il loro dimensionamento uniforme.
Se si ha bisogno di un set di carte di uguale larghezza e altezza che non siano attaccate l'una all'altra, usare i mazzi di carte.
Proprio come con i gruppi di carte, i footer delle carte nei mazzi si allineano automaticamente.

Titolo SCHEDA-Card

Testo del contenuto caratterizzato appositamente da lunghezze diverse, testo del contenuto caratterizzato appositamente da lunghezze diverse.

PieDiPagina allineato

Titolo SCHEDA-Card

Testo del contenuto caratterizzato appositamente da lunghezze diverse.

PieDiPagina allineato

Titolo SCHEDA-Card

Testo del contenuto caratterizzato appositamente da lunghezze diverse, testo del contenuto caratterizzato appositamente da lunghezze diverse, testo del contenuto caratterizzato appositamente da lunghezze diverse.

PieDiPagina allineato

Codice


<!doctype html>
<html lang="it">
  <head>
    <title>Ciao, mondo!</title>
  </head>
  <body>
  
    <h1>Ciao, mondo!</h1>

  </body>
</html>

19. Gruppo di elenchi

Il gruppo di elenchi più semplice è un elenco non ordinato con voci di elenco e classi appropriate.
Su l'esempio di base con le opzioni appropriate si può costruire una moltitudine di altri modelli.

Elemento della lista 1
Elemento della lista 2
Elemento della lista 3
Elemento della lista 4
Elemento della lista 5

Codice


<ul class="list-group">
  <li class="list-group-item">Elemento della lista colorato 1</li>
  <li class="list-group-item">Elemento della lista 2</li>
  <li class="list-group-item">Elemento della lista 3</li>
  <li class="list-group-item">Elemento della lista 4</li>
  <li class="list-group-item">Elemento della lista 5</li>
</ul>

20. Gruppo di elenchi colorati

Utilizzare le classi contestuali per definire gli elementi dell'elenco con uno sfondo e un colore di stato.

Gruppo di elenchi colorati
Elemento della lista colorato 1
Elemento della lista colorato 2
Elemento della lista colorato 3
Elemento della lista colorato 4
Elemento della lista colorato 5
Elemento della lista colorato 6
Elemento della lista colorato 7
Elemento della lista colorato 8

Codice


<ul class="list-group">
  <li class="list-group-item">Gruppo di elenchi colorati</li>  
  <li class="list-group-item list-group-item-primary">Elemento della lista colorato 1</li>
  <li class="list-group-item list-group-item-secondary">Elemento della lista colorato 2</li>
  <li class="list-group-item list-group-item-success">Elemento della lista colorato 3</li>
  <li class="list-group-item list-group-item-danger">Elemento della lista colorato 4</li>
  <li class="list-group-item list-group-item-warning">Elemento della lista colorato 5</li>
  <li class="list-group-item list-group-item-info">Elemento della lista colorato 6</li>
  <li class="list-group-item list-group-item-light">Elemento della lista colorato 7</li>
  <li class="list-group-item list-group-item-dark">Elemento della lista colorato 8</li>
</ul>

01. Collapse

Utilizzando il componente della scheda , è possibile estendere il comportamento di compressione predefinito per creare una fisarmonica.
Per ottenere correttamente lo stile della fisarmonica, assicurarsi di utilizzare .accordion come involucro.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Codice


<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Gruppo collapse Elemento 01
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
           Gruppo collapse Elemento 02
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
           Gruppo collapse Elemento 03
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit.
      </div>
    </div>
  </div>
</div>

02. Collapse pulsanti

Fare clic sui pulsanti qui sotto per mostrare e nascondere un altro elemento tramite le modifiche di classe:
.collapse nasconde il contenuto
.collapsing viene applicato durante le transizioni
.collapse.show mostra il contenuto
È possibile utilizzare un collegamento con l'attributo href o un pulsante con l'attributo data-target.
In entrambi i casi, data-toggle="collapse" è richiesto.

Due pulsanti stesso contenuto.

Collegamento con href

STESSO-CONTENUTO stesso contenuto, stesso contenuto, stesso contenuto, stesso contenuto, stesso contenuto, stesso contenuto, stesso contenuto, stesso contenuto, stesso contenuto, stesso contenuto.

Codice


<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Collegamento con href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Pulsante con data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    STESSO-CONTENUTO   stesso contenuto, stesso contenuto, stesso contenuto, stesso contenuto, stesso contenuto, stesso contenuto, stesso contenuto, stesso contenuto, stesso contenuto, stesso contenuto.
  </div>
</div>

03. Collapse multipli

Collapse può mostrare o nascondere più elementi simultaneamente facendo riferimento a un selettore JQuery

Attiva il primo elemento

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Codice


<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Attiva il primo elemento</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Attiva/disattiva il secondo elemento</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Attiva entrambi gli elementi</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

04. Carousel dissolvenza

Aggiungere .carousel-fade al carosello per animare le diapositive con una transizione di dissolvenza anziché una diapositiva.

Codice


<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/01slide.png" class="d-block w-100" alt="img">
    </div>
    <div class="carousel-item">
      <img src="img/02slide.png" class="d-block w-100" alt="img">
    </div>
    <div class="carousel-item">
      <img src="img/03slide.png" class="d-block w-100" alt="img">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

05. Carousel diapositiva

Un componente di presentazione per scorrere tra elementi, immagini o diapositive di testo, come un carosello.

Codice


<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="img/01slide.png" class="d-block w-100" alt="img">
    </div>
    <div class="carousel-item">
      <img src="img/02slide.png" class="d-block w-100" alt="img">
    </div>
    <div class="carousel-item">
      <img src="img/03slide.png" class="d-block w-100" alt="img">
    </div>
  </div>
</div>

06. Jumbotron

Componente leggero e flessibile per la presentazione di grandi contenuti in stile.

Ciao, mondo!

Questa è una unità in style, un semplice componente Jumbotron per richiamare un'attenzione particolare al contenuto o alle informazioni in primo piano.

Utilizza le classi di utilità per la tipografia e la spaziatura per il contenuto dello spazio all'interno del contenitore più grande.

Per saperne di più

Codice


<div class="jumbotron">
  <h1 class="display-4">Ciao, mondo!</h1>
  <p class="lead">Questa è una unità in style, un semplice componente Jumbotron per richiamare un'attenzione particolare al contenuto o alle informazioni in primo piano.</p>
  <hr class="my-4">
  <p>Utilizza le classi di utilità per la tipografia e la spaziatura per il contenuto dello spazio all'interno del contenitore più grande.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Per saperne di più</a>
</div>

07. Oggetto multimediale

L' oggetto multimediale aiuta a costruire componenti complessi e ripetitivi dove alcuni media sono posizionati accanto a contenuti che non si avvolgono attorno a tali supporti.
Inoltre, lo fa con solo due classi .media e .media-boby grazie a Flexbox.

Intestazione media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Codice


<div class="media border p-3">
  <img src="img/imgx64.png" class="mr-3" alt="img">
  <div class="media-body">
    <h5 class="mt-0">Intestazione media</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

08. Elenco media

Poiché l'oggetto multimediale ha così pochi requisiti strutturali, Si possono usare queste classi sugli elementi HTML dell'elenco.

Oggetto multimediale basato su elenco
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Oggetto multimediale basato su elenco
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Oggetto multimediale basato su elenco
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Codice


<ul class="list-unstyled border p-3">
  <li class="media">
    <img src="img/imgx64.png" class="mr-3" alt="img">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Oggetto multimediale basato su elenco</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
    </div>
  </li>
  <li class="media my-4">
    <img src="img/imgx64.png" class="mr-3" alt="img">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Oggetto multimediale basato su elenco</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
    </div>
  </li>
  <li class="media">
    <img src="img/imgx64.png" class="mr-3" alt="img">
    <div class="media-body">
      <h5 class="mt-0 mb-1">Oggetto multimediale basato su elenco</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
    </div>
  </li>
</ul>

09. Componente modale

Nel componente modale sono inclusi l'intestazione, il corpo e il piè di pagina modale (facoltativo).

Codice


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Lancia la demo modale
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Titolo Modale</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        Una demo modale molto semplice
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
        <button type="button" class="btn btn-primary">Salva i cambiamenti</button>
      </div>
    </div>
  </div>
</div>

10. Modale a scorrimento

Quando le modali diventano troppo lunghe per il viewport o il dispositivo dell'utente, scorrono indipendentemente dalla pagina stessa.

È inoltre possibile creare una modal scorrevole che consente di scorrere il corpo modale aggiungendo .modal-dialog-scrollable a .modal-dialog.
Prova la demo qui sotto per vedere cosa si intende.

Codice


<!-- pulsante -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Lancia la demo lunga
</button>
<!-- Modale -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Titolo modale</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum all'eros.</p>
<p>Commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Consacrata senese di Lacinia bibendum nulla sed. Commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum all'eros.</p>
<p>Commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Consacrata senese di Lacinia bibendum nulla sed. Commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum all'eros.</p>
<p>Commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Consacrata senese di Lacinia bibendum nulla sed. Commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum all'eros.</p>
<p>Commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Consacrata senese di Lacinia bibendum nulla sed. Commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum all'eros.</p>
<p>Commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Consacrata senese di Lacinia bibendum nulla sed. Commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum all'eros.</p>
<p>Commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Consacrata senese di Lacinia bibendum nulla sed. Commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
        <button type="button" class="btn btn-primary">Cambia e salva</button>
      </div>
    </div>
  </div>
</div>

11. Modelli modali

La nostra modale predefinita senza classe modificatore costituisce la modale "media" ma può essere anche più grande o più piccola

Codice


<!-- Modale grande -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Modale grande</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Titolo modale grande</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
     <p>     ...</p>
    </div>
  </div>
</div>
<!-- Modale media -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Modale media</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Titolo modale media</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
     <p>     ...</p>
    </div>
  </div>
</div>
<!-- Modale piccola -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Modale piccola</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Titolo modale piccola</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
     <p>     ...</p>
    </div>
  </div>
</div>

12. Moduli

Stili di controllo moduli, opzioni di layout e componenti personalizzati per la creazione di un'ampia varietà di moduli.
si consiglia di visitare la documentazione di bootstrap nel collegamento che segue
Link a bootstrap forms

Codice


<form class="border p-3">
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

13. Gruppo di input

Controlli dei moduli imput per aggiungere testo, (come sopra visitare la documentazione bootstrap)

piccolo

Default

grande

Codice


<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">piccolo</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">grande</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>

14. Barra avanzamento

Aggiungi etichette alle barre di avanzamento posizionando il testo all'interno del .progress-bar.

(come sopra visitare la documentazione bootstrap)

25%

Codice


<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>