fbpx

Come creare una schermata di login in Bootstrap

Blog News Pubblicato il Scritto da
Come creare una schermata di login in Bootstrap
Fonte immagine: Come creare una schermata di login in Bootstrap

Bootstrap è un framework di sviluppo front-end gratuito e open source per la creazione di siti Web e app Web.

In parole semplici è una libreria HTML, CSS e JS che si concentra sulla semplificazione dello sviluppo di pagine Web.

Per portare a termine un progetto dinamico oltre a Bootstrap è necessario utilizzare altri linguaggi di programmazione.

Bootstrap è perfettamente integrabile con qualsiasi di programmazione sia lato client che lato server e con moltissimi CMS o Framework come ad esempio WordPress, Prestashop, Joomla!, Magento, OpenCart, ecc.

Per partire da zero ed iniziare a costruire la tua prima pagina in Bootstrap ti basterà seguire questi semplici passi.

Per prima cosa è necessario scaricare l’ultima release di Bootstrap disponibile, che puoi trovare qui, attualmente siamo alla versione 5.13.

Il passo successivo quello di collegare i vari file scaricati all’interno del file HTML che andrà a contenere la struttura dalla pagina del login.

Di seguito un esempio di codice perfettamente funzionante e pronto all’uso.

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.88.1">
<title>Signin Template · Bootstrap v5.1</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link href="/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="signin.css" rel="stylesheet">
</head>
<body class="text-center">
<main class="form-signin">
<form>
<img class="mb-4" src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p>
</form>
</main>
</body>
</html>

Il risultato sarà molto simile a questo.

Come creare una schermata di login in Bootstrap

Hai trovato qualcosa di interessante nel sito? Hai bisogno di un consiglio o di una consulenza gratuita?
Realizza il tuo progetto ora!

Chiama il numero verde Contatto Telefonico 800 281 715 per parlare direttamente con uno specialista!
HardGroup eleva il tuo business alla massima potenza.

Richiedi informazioni
Condividilo su Facebook Twitter Whatsapp

Leggi più articoli su: Community, Programmazione - Approfondisci di più su: - Scopri tutti gli articoli di: Redazione HardGroup.

You must be logged in to post a comment.

HardGroup si impegna a essere leader in Italia
Grazie al vostro supporto siamo Official Partner:

Aruba Business Partner