Indice argomenti Bootstrap 4 da w3schools:
- Home - Inizia - Griglia - Tipografia - Colori - Tabelle
********************************** Home *****************************************

HOME --> La mia prima pagina Bootstrap

Ridimensiona questa pagina reattiva per vedere l'effetto!

Column 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Column 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Column 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

*********************************** HOME ****************************************

HOME--> Abbiamo creato un modello di avvio reattivo con Bootstrap 4. Sei libero di modificarlo, salvarlo, condividerlo e utilizzarlo nei tuoi progetti:

About Me

Photo of me:
Fake Image

Some text about me in culpa qui officia deserunt mollit anim..

Some Links

Lorem ipsum dolor sit ame.


TITLE HEADING

Title description, Dec 7, 2017
Fake Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


TITLE HEADING

Title description, Sep 2, 2017
Fake Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Footer


************************************* INIZIA **************************************
Torna all'indice
************************************* INIZIA **************************************

My First Bootstrap Page

Questa parte è all'interno di una classe .container.

La classe .container fornisce un contenitore responsive a larghezza fissa.

************************************* GET STARTED - INIZIA **************************************

My First Bootstrap Page

Questa parte è all'interno di una classe .container-fluid.

La classe .container-fluid fornisce un contenitore a larghezza intera, che copre l'intera larghezza della finestra.


************************************* GRIGLIA BASE **************************************
Torna all'indice
************************************* GRID BASIC - GRIGLIA BASE **************************************

Tre colonne di uguale larghezza

Nota: prova ad aggiungere un nuovo div con class = "col" all'interno della classe row - questo creerà quattro colonne di uguale larghezza.

.col
.col
.col

************************************* GRID BASIC - GRIGLIA BASE **************************************

Colonne reattive

Ridimensiona la finestra del browser per vedere l'effetto.

Le colonne si impilano automaticamente una sopra l'altra quando lo schermo ha una larghezza inferiore a 576 px

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3

************************************* GRID BASIC - GRIGLIA BASE **************************************

Due colonne disuguali responsive

Ridimensiona la finestra del browser per vedere l'effetto.

Le colonne si impilano automaticamente una sopra l'altra quando lo schermo ha una larghezza inferiore a 576 px.

.col-sm-4
.col-sm-8

************************************* TIPOGRAFIA **************************************
Torna all'indice
************************************* TIPOGRAFIA - intestazioni**************************************

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)

************************************* TIPOGRAFIA - intestazioni con 4 classi display**************************************

Visualizza intestazioni

Le intestazioni del display vengono utilizzate per risaltare più delle normali intestazioni (dimensioni del carattere maggiori e peso del carattere più leggero):

Display 1

Display 2

Display 3

Display 4


************************************* TIPOGRAFIA - con elemento small**************************************

Testo secondario più leggero

L'elemento piccolo viene utilizzato per creare un testo secondario più chiaro in qualsiasi intestazione:

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text

************************************* TIPOGRAFIA - con elemento mark**************************************

Highlight Text

Use the mark element to highlight text.


************************************* TIPOGRAFIA - con elemento abbr**************************************

Abbreviations

The abbr element is used to mark up an abbreviation or acronym:

The WHO was founded in 1948.


************************************* TIPOGRAFIA - con elemento blockquote **************************************

Blockquotes

L'elemento blockquote viene utilizzato per presentare il contenuto da un'altra fonte:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

************************************* TIPOGRAFIA - con elemento Dl **************************************

Description Lists

L'elemento dl indica un elenco di descrizioni:

Coffee
- black hot drink
Milk
- white cold drink

************************************* TIPOGRAFIA - con elemento Code **************************************

Code Snippets

Inline snippets of code should be embedded in the code element:

The following HTML elements: span, section, and div defines a section in a document.


************************************* TIPOGRAFIA - con elemento Kbd **************************************

Keyboard Inputs

Per indicare l'input che viene generalmente inserito tramite la tastiera, utilizzare l'elemento kbd:

Use ctrl + p to open the Print dialog box.


************************************* TIPOGRAFIA - con elemento Pre **************************************

Più righe di codice

Per più righe di codice, utilizzare l'elemento pre:

				Testo in un elemento pre
				viene visualizzato in una larghezza fissa
				carattere, e conserva
				entrambi gli      spazi e
				interruzioni di riga.
				

************************************* TIPOGRAFIA - .font-weight-bold e altre classi**************************************

Font weight and italics

Bold text.

Bolder text.

Normal weight text.

Light weight text.

Lighter weight text.

Italic text.


************************************* COLORI TESTO **************************************
Torna all'indice
************************************* COLORI TESTO- colori contestuali**************************************

Contextual Colors

Utilizzare le classi contestuali per fornire "significato attraverso i colori":

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

This text is dark grey.

Default body color (often black).


************************************* COLORI TESTO - colori nei link **************************************

************************************* COLORI TESTO - opacità **************************************

Opacity Text Colors

Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

Black text with 50% opacity on white background

White text with 50% opacity on black background


************************************* COLORI TESTO - sfondo **************************************

Contextual Backgrounds

Use the contextual background classes to provide "meaning through colors".

Note that you can also add a .text-* class if you want a different text color:

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.


************************************* TABELLE **************************************
Torna all'indice
************************************* TABELLE - basi**************************************

Basic Table

The .table class adds basic styling (light padding and horizontal dividers) to a table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

************************************* TABELLE - basi a strisce zebrate **************************************

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

************************************* TABELLE - bordate **************************************

Bordered Table

The .table-bordered class adds borders on all sides of the table and the cells:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com