twitter-bootstrap Tutorial
Iniziare con twitter-bootstrap
Ricerca…
Osservazioni
Bootstrap è un framework HTML, CSS e JavaScript utilizzato per creare siti Web creati utilizzando un paradigma mobile-first e responsive web design (RWD). Usa una combinazione di classi CSS premesse e JavaScript per creare una varietà di cose sul web. Include elementi come una griglia reattiva e personalizzata che consente di visualizzare i siti Web su qualsiasi schermo, una barra di navigazione a discesa che è in grado di essere reattiva e anche le cose più semplici che possono richiedere molto tempo come pulsanti premediti, moduli e fisarmoniche per nominare un pochi.
Bootstrap può essere utile per i seguenti motivi:
Risparmio di tempo : Bootstrap presenta molte cose che sono pre-costruite e che devono semplicemente essere richiamate durante la scrittura del codice. Ciò consente di risparmiare una notevole quantità di tempo e può ridurre notevolmente il tempo necessario per codificare un sito Web.
Creato con responsive web design in mente : Bootstrap consente agli sviluppatori web di non preoccuparsi di creare oggetti che si adattino alle dimensioni del loro schermo, dato che Bootstrap utilizza un design reattivo e mobile che consente loro di costruire cose che funzioneranno su qualsiasi schermo taglia.
Semplifica il processo di progettazione : Bootstrap viene pre-assemblato con elementi che hanno buone pratiche di progettazione. Questo può essere utile per coloro le cui abilità nel web design non sono così grandi, o per coloro che considerano il design un compito noioso, poiché molte delle classi Bootstrap sono esteticamente gradevoli e belle da guardare.
Questa sezione dovrebbe menzionare qualsiasi argomento di grandi dimensioni all'interno di twitter-bootstrap e collegarsi agli argomenti correlati. Poiché la documentazione per twitter-bootstrap è nuova, potrebbe essere necessario creare versioni iniziali di tali argomenti correlati.
Versioni
| Versione | Data di rilascio |
|---|---|
| 4.0 | 2999/01/01 |
| 3.3.7 | 2016/07/25 |
| 3.3.6 | 2015/11/24 |
| 3.3.5 | 2015/06/15 |
| 3.3.4 | 2015/03/16 |
| 3.3.1 | 2014/11/12 |
| 3.3.0 | 2014/10/29 |
| 3.2.0 | 2014/06/26 |
| 3.1.0 | 2014/01/30 |
| 3.0 | 2013/08/19 |
| 2.3 | 2013/02/07 |
| 2.2 | 2012/10/29 |
| 2.1 | 2012/08/20 |
| 2.0 | 2012-02-01 |
| 1.0 | 2011-08-18 |
Installazione / Configurazione
Download:
- Scarica Bootstrap direttamente o clona, ecc. Dal repository GitHub
- Scarica la versione personalizzata di Bootstrap da documenti ufficiali
- Installa con bower:
bower install bootstrap - Installa con npm:
npm install bootstrap - Installa con il compositore: il
composer require twbs/bootstrap
La struttura del file 
Installazione:
All'interno della tua pagina HTML, includi CSS di Bootstrap, JS e la dipendenza di jQuery (pre versione 3, almeno fino all'ultima versione di Bootstrap). Tieni presente che se prevedi di utilizzare le funzionalità JavaScript di Bootstrap, il tuo riferimento jQuery deve precedere il tuo riferimento bootstrap.js all'interno del codice HTML.
È possibile utilizzare i file Bootstrap installati dalla sezione precedente o fare riferimento a un CDN fornito dai creatori di Bootstrap (collegamenti presi da Guida introduttiva a Bootstrap ):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Una pagina web Bootstrap molto semplice:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Modello base
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title> <!-- The title of the Website -->
<!-- Reference to Bootstrap's CSS file -->
<!-- This is the line to reference the bootstrap's Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- [if lt IE 9] -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!--[endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- Referencing jQuery (necessary for Bootstrap JavaScript plugins(bootstrap.min.js) to work) -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Referencing Javascript Bootstrap Plugin to Facilitate Bootstrap Animations and functionalities. -->
<!-- (Necessary to run Bootstrap) -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Quando usare Bootstrap
Bootstrap è un framework supponente per HTML, CSS e Javascript. Contiene lo stile e le funzionalità di base per elementi che sono diventati elementi [Interfaccia utente] accettati, come elementi del modulo, pulsanti, finestre modali ed elementi di navigazione.
Bootstrap è un framework web reattivo, il che significa che è progettato per adattare layout e design a schermi di dimensioni grandi e piccole, come dispositivi mobili, tablet e computer desktop, il tutto in un unico codice base.
Uno dei concetti fondamentali di Bootstrap è il framework della griglia. Applicando le classi agli elementi HTML, è possibile creare layout complessi utilizzando una griglia di base di dodici colonne. Ad esempio, un layout a quattro colonne potrebbe adattarsi a due colonne su dispositivi tablet e una colonna su dispositivi mobili. La griglia utilizza media queries , un metodo CSS per il targeting di dimensioni dello schermo specifiche, per raggiungere questo obiettivo.
Bootstrap si comporta particolarmente bene se:
- Il design personalizzato non è una priorità assoluta
- Sei più a tuo agio nel modificare l'HTML e aggiungere classi piuttosto che creare CSS personalizzati
- Ti senti a tuo agio nell'utilizzare una struttura che presenterà molte somiglianze visive con molti altri siti web
Bootstrap può essere utilizzato da coloro che sono nuovi in HTML, CSS e Javascript, poiché la documentazione è eccellente. Tuttavia, esiste una curva di apprendimento per coloro che non sono del tutto a proprio agio con le tre tecnologie di base utilizzate da Bootstrap (HTML, CSS e Javascript).
È possibile acquistare o scaricare temi Bootstrap per modificare lo stile o la funzionalità di Bootstrap. È anche possibile utilizzare Bootstrap come punto di partenza, con la personalizzazione di CSS e Javascript.
Pagina Web di base che utilizza componenti di bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>