Corso di base Bootstrap4

Layout Flex Bootstrap4 Ascolto della scorrimento Bootstrap4

Strumenti Bootstrap4

Bootstrap4 offre alcune utility che ci permettono di ottenere l'effetto desiderato senza scrivere codice CSS.

Bordi

Utilizzando la classe border è possibile aggiungere o rimuovere i bordi:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="larghezza=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　<style>
　　.border {
　　　　display: inline-block;
　　　　width: 70px;
　　　　height: 70px;
　　　　margin: 6px;
　　}
　　</style>
</head>
<body>
<div class="container">
　　<h2>Bordi</h2>
　　<p>Utilizzando la classe border è possibile aggiungere o rimuovere i bordi:</p>　
　　<span class="border"></span>
　　<span class="border border-0"></span>
　　<span class="border border-top-0"></span>
　　<span class="border border-right-0"></span>
　　<span class="border border-bottom-0"></span>
　　<span class="border border-left-0"></span>
</div>
</body>
</html>

Prova a vedere ‹/›

Impostazione dei colori dei bordi

Bootstrap4 fornisce alcune classi per impostare i colori dei bordi:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="larghezza=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　.border {
　　　　display: inline-block;
　　　　width: 70px;
　　　　height: 70px;
　　　　margin: 6px;
　　}
　　</style>
</head>
<body>
<div class="container">
　　<h2>Impostazione dei colori dei bordi</h2>
　　<p>Bootstrap4 fornisce alcune classi per impostare i colori dei bordi:</p>　
　　<span class="border border-primary"></span>
　　<span class="border border-secondary"></span>
　　<span class="border border-success"></span>
　　<span class="border border-danger"></span>
　　<span class="border border-warning"></span>
　　<span class="border border-info"></span>
　　<span class="border border-light"></span>
　　<span class="border border-dark"></span>
　　<span class="border border-white"></span>
</div>
</body>
</html>

Prova a vedere ‹/›

Impostazione dei bordi arrotondati

Utilizzando la classe "rounded", è possibile aggiungere bordi arrotondati:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="larghezza=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　span {
　　　　display: inline-block;
　　　　width: 70px;
　　　　height: 70px;
　　　　margin: 6px;
　　　　background-color: #555;
　　}
　　</style>
</head>
<body>
<div class="container">
　　<h2>Impostazione dei bordi arrotondati</h2>
　　<p>Utilizzando la classe "rounded", è possibile aggiungere bordi arrotondati:</p>　
　　<span class="rounded"></span>
　　<span class="rounded-top"></span>
　　<span class="rounded-right"></span>
　　<span class="rounded-bottom"></span>
　　<span class="rounded-left"></span>
　　<span class="rounded-circle"></span>
　　<span class="rounded-0"></span>
</div>
</body>
</html>

Prova a vedere ‹/›

Flottazione

.float-right classe viene utilizzata per impostare la flottazione a destra dell'elemento, .float-left imposta la flottazione a sinistra dell'elemento, .clearfix classe viene utilizzata per rimuovere la flottazione:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="larghezza=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Flottazione</h2>
　　<p>.float-right classe viene utilizzata per impostare la flottazione a destra dell'elemento, .float-left imposta la flottazione a sinistra dell'elemento, .clearfix classe viene utilizzata per rimuovere la flottazione:</p>　
　　<div class="clearfix">
　　　　<span class="float-left">Flotta a sinistra</span>
　　　　<span class="float-right">Flotta a destra</span>
　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Flottazione responsiva

Possiamo impostare la direzione della flottazione (.float-*-left|right - * è sm, md, lg o xl) in base alla dimensione dello schermo:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="larghezza=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Flottazione responsiva</h2>
　　<p>Modificare la dimensione del browser per vedere l'effetto.</p>
　　<p>Possiamo impostare la direzione della flottazione (.float-*-left|right - * è sm, md, lg o xl) in base alla dimensione dello schermo:</p>　
　　<div class="float-sm-right">Flotta a destra per schermi superiori a small</div><br>
　　<div class="float-md-right">Flotta a destra per schermi superiori a medium</div><br>
　　<div class="float-lg-right">Flotta a destra per schermi superiori a large</div><br>
　　<div class="float-xl-right">Flotta a destra per schermi superiori a ultra-large</div><br>
　　<div class="float-none">Nessuna flottazione</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Centramento al centro

Utilizzare la classe .mx-auto per impostare l'allineamento al centro:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="larghezza=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Centramento orizzontale</h1>
　　<p>Utilizzare la classe .mx-auto per impostare l'allineamento al centro::</p>
　　<div class="mx-auto bg-warning" style="width:150px">Centrato</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Larghezza

Utilizzare la classe w-* (w-25, .w-50, .w-75, .w-100, .mw-100) sugli elementi per impostare la larghezza:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="larghezza=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Strumento di impostazione della larghezza</h1>
　　<p>Utilizzare la classe w-* (w-25, w-50, w-75, w-100, mw-100) sugli elementi per impostare la larghezza:</p>
　　<div class="w-25 bg-warning">Larghezza 25%</div>
　　<div class="w-50 bg-warning">Larghezza 50%</div>
　　<div class="w-75 bg-warning">Larghezza 75%</div>
　　<div class="w-100 bg-warning">Larghezza 100%</div>
　　<div class="mw-100 bg-warning">Larghezza massima 100%</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Altezza

Usare le classi h-* sugli elementi per impostare l'altezza: (.h-25, .h-50, .h-75, .h-100, .mh-100)

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="larghezza=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Strumento di altezza</h1>
　　<p>Usare le classi h-* sugli elementi per impostare l'altezza: (.h-25, .h-50, .h-75, .h-100, .mh-100)</p>
　　<div style="altezza:200px;background-color:#ddd">
　　　　<div class="h-25 d-inline-block p-2 bg-warning">Altezza 25%</div>
　　　　<div class="h-50 d-inline-block p-2 bg-warning">Altezza 50%</div>
　　　　<div class="h-75 d-inline-block p-2 bg-warning">Altezza 75%</div>
　　　　<div class="h-100 d-inline-block p-2 bg-warning">Altezza 100%</div>
　　　　<div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">Altezza massima 100%</div>
　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Layout Flex Bootstrap4 Ascolto della scorrimento Bootstrap4