Logo Servizio

Logo Università

Istruzioni

In questa pagina presentiamo il dettaglio dei componenti disponibili per il tema Bootstrap di Unito. Per utilizzare il tema, è necessario conoscere le basi del framework Bootstrap 4 e seguire questi passi:

  1. Installare Bootstrap 4 nel vostro sito / pagina web. Si consiglia di utilizzare il CDN ufficiale del framework:
    • CSS:
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    • Javascript:
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  2. Inserire il riferimento al file CSS del tema Unito:
    • Inserire manualmente il tag:
      <link href="http://cdn.unito.it/temi/bootstrap4/tema_unito.css" type="text/css" rel="stylesheet" /> nella sezione <head> del vostro documento HTML
    • È importante che l'inclusione del file CSS del tema sia inserita dopo il collegamento al foglio di stile principale di Bootstrap.
  3. Per utilizzare i glifi, è necessario includere un ulteriore foglio di stile CSS. In questo tema, consigliamo l'uso della libreria Material. Per utilizzarla, inserire il riferimento a:
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />.
  4. Se necessario, è possibile personalizzare ulteriormente l'aspetto grafico della vostra pagina inserendo un ulteriore file CSS denominato custom.css e salvato all'interno delle cartelle del vostro progetto. Questo file va inserito dopo l'inclusione del tema Unito e può contenere regole CSS aggiuntive, eventualmente integrative o sostitutive delle regole del tema Unito.
  5. Per una corretta applicazione del tema, produrre codice HTML conforme agli esempi presenti in questa pagina. Per visualizzare il codice HTML necessario, cliccare sul riquadro che appare al passaggio del mouse sulle varie sezioni di questa pagina: sarà mostrato il codice sorgente di quella determinata parte, che potete copiare, incollare e personalizzare nel vostro sito.

Pulsanti

Tipografia

Intestazione 1

Intestazione 2

Intestazione 3

Intestazione 4

Intestazione 5
Intestazione 6

Intestazione con testo muto

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Esempio corpo del testo

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

Questo testo è reso in grassetto.

Questo testo è reso corsivo.

Abbreviazione della parola: abbr.

Liste

Liste ordinate

  1. Lorem ipsum door
  2. consectetur adipiscing elit
  3. sed do eiusmod tempor incididunt

Liste non ordinate

  • Esempio di lista nidificata
    • Lorem ipsum dolor
    • nisi ut aliquid
  • consectetur adipiscing elit
  • sed do eiusmod tempor incididunt

Tabelle

Tabella classica

Titolo della tabella
intestazione colonna 1 intestazione colonna 2 intestazione colonna 3 intestazione colonna 4 intestazione colonna 5
testo colonna 1,
riga 1		 testo colonna 2,
riga 1		 testo colonna 3,
riga 1		 testo colonna 4,
riga 1		 testo colonna 5,
riga 1
testo colonna 1,
riga 2		 testo colonna 2,
riga 2		 testo colonna 3,
riga 2		 testo colonna 4,
riga 2		 testo colonna 5,
riga 2

Tabella con tante collonne con scroll

Attenzione!

Fare attenzione la tabella contiene uno scroll orizzontale.

Titolo della tabella
intestazione colonna 1 intestazione colonna 2 intestazione colonna 3 intestazione colonna 4 intestazione colonna 5 intestazione colonna 6 intestazione colonna 7 intestazione colonna 8 intestazione colonna 9 intestazione colonna 10 intestazione colonna 11 intestazione colonna 12 intestazione colonna 13 intestazione colonna 14 intestazione colonna 15 intestazione colonna 16 intestazione colonna 17 intestazione colonna 18 intestazione colonna 19 intestazione colonna 20 intestazione colonna 21
testo colonna 1,
riga 1		 testo colonna 2,
riga 1		 testo colonna 3,
riga 1		 testo colonna 4,
riga 1		 testo colonna 5,
riga 1		 testo colonna 6,
riga 1		 testo colonna 7,
riga 1		 testo colonna 8,
riga 1		 testo colonna 9,
riga 1		 testo colonna 10,
riga 1		 testo colonna 11,
riga 1		 testo colonna 12,
riga 1		 testo colonna 13,
riga 1		 testo colonna 14,
riga 1		 testo colonna 15,
riga 1		 testo colonna 16,
riga 1		 testo colonna 17,
riga 1		 testo colonna 18,
riga 1		 testo colonna 19,
riga 1		 testo colonna 20,
riga 1		 testo colonna 21,
riga 1
testo colonna 1,
riga 2		 testo colonna 2,
riga 2		 testo colonna 3,
riga 2		 testo colonna 4,
riga 2		 testo colonna 5,
riga 2		 testo colonna 6,
riga 2		 testo colonna 7,
riga 2		 testo colonna 8,
riga 2		 testo colonna 9,
riga 2		 testo colonna 10,
riga 2		 testo colonna 11,
riga 2		 testo colonna 12,
riga 2		 testo colonna 13,
riga 2		 testo colonna 14,
riga 2		 testo colonna 15,
riga 2		 testo colonna 16,
riga 2		 testo colonna 17,
riga 2		 testo colonna 18,
riga 2		 testo colonna 19,
riga 2		 testo colonna 20,
riga 2		 testo colonna 21,
riga 2

Data-table

Attenzione!

per utilizzare il data-table bisogna inserire la classe datatable nella tabella e importare i due seguenti file js
"js/jquery.dataTables.min.js"
"js/dataTables.bootstrap4.min.js"

Form

Legenda
Non condivideremo questa email con nessuno
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Scelta rapida
Casella di controllo
€
.00
Pulsante di invio form

Navigazione

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.


  1. Home
  1. Home
  2. Libreria
  1. Home
  2. Libreria
  3. Data

Paginazione

Indicatori

Avvisi con pulsante di chiusura

Attenzione!

Fare attenzione bla bla bla, vel scelerisque nisl consectetur et.

Errore!
Messaggio di errore.
Complimenti! Ti sei iscritto con successo. Per continuare clicca qui.
Informazione
Lo sapevi che bla bla bla?.

Avvisi senza pulsante di chiusura

Attenzione!

Fare attenzione bla bla bla, vel scelerisque nisl consectetur et.

Errore!
Messaggio di errore.
Complimenti! Ti sei iscritto con successo. Per continuare clicca qui.
Informazione
Lo sapevi che bla bla bla?.

Notifiche

Default Primario Successo Avviso Errore Informazione
Default Primario Successo Avviso Errore Informazione

Contenitori

In primo piano

Testo che andrà in primo piano.
bla bla bla bla bla
bla bla

Scopri di più

Accordion (light & colorized)

Attenzione: nel caso si vogliano inserire più oggetti Accordion nella stessa pagina, è richiesto l'aggiornamento degli attributi HTML degli elementi che lo compongono:

id, href, aria-expanded, aria-controls, aria-labeledBy, data-parent

Leggere con attenzione il codice sorgente e verificare puntualmente che questi attributi siano stati indicati correttamente.

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.
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.
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.
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.
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.
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.

Box con liste di elementi

  • Elemento selezionato
  • Elemento 2
  • Elemento 3

Titolo elemento 1

Testo elemento 1
etc etc etc

Titolo elemento 2

Testo elemento 2
che va a capo

Finestre

Finestre modali

Clicca per aprire la finestra

Suggerimenti

Clicca i pulsanti per aprire il suggerimento

Didascalie

Passa il mouse (o clicca i pulsanti) per aprire la didascalia

Icone


Generiche

lens
lens
radio_button_unchecked
radio_button_unchecked
keyboard_arrow_left
keyboard_arrow_left
keyboard_arrow_up
keyboard_arrow_up
keyboard_arrow_right
keyboard_arrow_right
keyboard_arrow_down
keyboard_arrow_down

check_box
checkbox
check_box_outline_blank
check_box_outline_blank
save
save
remove_circle_outline
remove_circle_outline
add_circle_outline
add_circle_outline
radio_button_checkedradio_button_checked

file_download
download
mode_edit
mode_edit
check
check
close
close
settings
settings
star
star

mail_outline
mail_outline
location_on
location_on
help_outline
help_outline
info_outline
info_outline
desktop_windows
desktop_windows
phone_android
phone_android

account_circle
account_circle
search
search
phone
phone
block
block
print
print
share
share

Visualizza tutte le icone disponibili: http://google.github.io/material-design-icons/

File

library_booksDocumento word

picture_as_pdfDocumento pdf

Documento html

Documento ppt

Documento xls

Documento eps

library_musicDocumento mp3

Documento zip



Griglie


Layout colonna unica

colonna da 12

Layout con un menù laterale

colonna da 3
colonna da 9

Layout con 2 menù laterali

colonna da 3
colonna da 6
colonna da 3

Layout 2 colonne pari

colonna da 6
colonna da 6

Layout 3 colonne pari

colonna da 4
colonna da 4
colonna da 4