Gli ultimi tutorial di sviluppo web
 

Bootstrap Get Started

❮ Precedente Successivo Capitolo ❯

Che cosa è Bootstrap ?

  • Bootstrap è un framework front-end libero per lo sviluppo web più semplice e veloce
  • Bootstrap include HTML e CSS modelli di progettazione basati per la tipografia, le forme, pulsanti, tabelle, la navigazione, modali, caroselli di immagini e molti altri, così come i plugin JavaScript opzionali
  • Bootstrap ti dà anche la possibilità di creare facilmente i disegni responsive

Qual è Responsive Web Design?

Il responsive web design è sulla creazione di siti web che si adattano automaticamente a guardare bene su tutti i dispositivi, dalle piccole alle grandi telefoni desktop.

Bootstrap Storia

Bootstrap è stato sviluppato da Mark Otto e Jacob Thornton a Twitter, e rilasciato come un prodotto open source nell'agosto 2011 su GitHub.

Nel giugno 2014 Bootstrap è stato il progetto numero 1 su GitHub!

Perché usare Bootstrap ?

Vantaggi di Bootstrap :

  • Facile da usare: Chiunque con una conoscenza solo di base di HTML e CSS può iniziare a utilizzare Bootstrap
  • Caratteristiche Responsive: Bootstrap reattivo CSS s 'adatta ai telefoni, tablet e desktop
  • Mobile-primo approccio: In Bootstrap 3, gli stili di mobili-prima sono parte del quadro di base
  • Compatibilità del browser: Bootstrap è compatibile con tutti i browser moderni (Chrome, Firefox, Internet Explorer, Safari e Opera)

Dove trovare Bootstrap ?

Ci sono due modi per iniziare a utilizzare Bootstrap sul proprio sito web.

Puoi:

  • Scarica Bootstrap da getbootstrap.com
  • Includere Bootstrap da un CDN

Il download Bootstrap

Se volete scaricare e conduttore Bootstrap da soli, andare a getbootstrap.com , e seguire le istruzioni riportate.

Bootstrap CDN

Se non si desidera scaricare e ospitare Bootstrap te stesso, è possibile includere da un CDN (Content Delivery Network).

MaxCDN fornire supporto CDN per Bootstrap CSS s 'e JavaScript. Anche includere jQuery:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Uno dei vantaggi di utilizzare il Bootstrap CDN :
Molti utenti hanno già scaricato Bootstrap da MaxCDN quando si visita un altro sito. Di conseguenza, esso verrà caricato dalla cache quando visitano il tuo sito, che porta a tempi di caricamento più veloce. Inoltre, la maggior parte CDN's farà in modo che una volta che un utente richiede un file da esso, sarà servito dal server più vicino a loro, che porta anche al tempo di caricamento più veloce.

Creare prima pagina web con Bootstrap

1. Aggiungere il DOCTYPE HTML5

Bootstrap utilizza elementi HTML e le proprietà CSS che richiedono il doctype HTML5.

Sempre includere il doctype HTML5 all'inizio della pagina, insieme con l'attributo lang e il set di caratteri corretto:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 è mobile-first

Bootstrap 3 è stato progettato per essere sensibile ai dispositivi mobili. Mobile primi stili sono parte del quadro di base.

Per assicurare una corretta rappresentazione e toccare lo zoom, aggiungere il seguente <meta> tag all'interno del <head> elemento:

<meta name="viewport" content="width=device-width, initial-scale=1">

Il width=device-width parte imposta la larghezza della pagina a seguire lo schermo-larghezza del dispositivo (che variano a seconda del dispositivo).

La initial-scale=1 parte imposta il livello di zoom iniziale quando la pagina viene caricata prima dal browser.

3. I contenitori

Bootstrap richiede anche un elemento che contiene per avvolgere i contenuti del sito.

Ci sono due classi di container tra cui scegliere:

  1. Il .container classe fornisce un contenitore a larghezza fissa reattivo
  2. Il .container-fluid classe fornisce un contenitore pieno di larghezza, che copre l'intera larghezza della finestra

Nota: I contenitori non sono inseribili (non si può mettere un contenitore all'interno di un altro contenitore).

Due di base Bootstrap Pagine

L'esempio seguente mostra il codice per una base Bootstrap pagina (con un contenitore di larghezza fissa reattivo):

Esempio

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Prova tu stesso "

L'esempio seguente mostra il codice per una base Bootstrap pagina (con un contenitore pieno di larghezza):

Esempio

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Prova tu stesso "

❮ Precedente Successivo Capitolo ❯