Tutorial Bootstrap

Twitter Bootstrap è il framework front-end più popolare negli ultimi tempi. È un framework front-end mobile elegante, intuitivo e potente per uno sviluppo web più rapido e semplice. Utilizza HTML, CSS e Javascript. Questo tutorial ti insegnerà le basi di Bootstrap Framework utilizzando il quale puoi creare facilmente progetti web. Il tutorial è diviso in sezioni come Bootstrap Basic Structure, Bootstrap CSS, Bootstrap Layout Components e Bootstrap Plugins. Ciascuna di queste sezioni contiene argomenti correlati con esempi semplici e utili.

Perché imparare Bootstrap?

Mobile first approach - Bootstrap 3, il framework consiste di stili Mobile first nell'intera libreria invece che in file separati.
Browser Support - È supportato da tutti i browser più diffusi.

Easy to get started- Con la sola conoscenza di HTML e CSS chiunque può iniziare con Bootstrap. Anche il sito ufficiale di Bootstrap ha una buona documentazione.
Responsive design- Il CSS reattivo di Bootstrap si adatta a desktop, tablet e cellulari. Maggiori informazioni sul responsive design si trovano nel capitolo Bootstrap Responsive Design.

Fornisce una soluzione pulita e uniforme per la creazione di un'interfaccia per gli sviluppatori.
Contiene componenti integrati belli e funzionali che sono facili da personalizzare.
Fornisce inoltre personalizzazione basata sul web.
E soprattutto è un open source.

Hello World usando Bootstrap.

Solo per darti un po 'di entusiasmo su Bootstrap, ti darò un piccolo programma Bootstrap Hello World convenzionale, puoi provarlo usando il link Demo.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Applicazioni di Bootstrap

Scaffolding- Bootstrap fornisce una struttura di base con Grid System, stili di collegamento e sfondo. Questo è trattato in dettaglio nella sezioneBootstrap Basic Structure
CSS- Bootstrap viene fornito con la funzionalità delle impostazioni CSS globali, elementi HTML fondamentali in stile e migliorati con classi estensibili e un sistema di griglia avanzato. Questo è trattato in dettaglio nella sezioneBootstrap with CSS.
Components- Bootstrap contiene oltre una dozzina di componenti riutilizzabili costruiti per fornire iconografia, menu a discesa, navigazione, avvisi, pop-over e molto altro. Questo è trattato in dettaglio nella sezioneLayout Components.
JavaScript Plugins- Bootstrap contiene oltre una dozzina di plugin jQuery personalizzati. Puoi facilmente includerli tutti o uno per uno. Questo è trattato in dettaglio nella sezioneBootstrap Plugins.
Customize - Puoi personalizzare i componenti di Bootstrap, le variabili LESS e i plugin jQuery per ottenere la tua versione personale.

Pubblico

Questo tutorial è stato preparato per chiunque abbia una conoscenza di base di HTML e CSS e abbia voglia di sviluppare siti web. Dopo aver completato questo tutorial ti troverai a un livello moderato di esperienza nello sviluppo di progetti web utilizzando Twitter Bootstrap.

Prerequisiti

Prima di iniziare a procedere con questo tutorial, presumiamo che tu sia già a conoscenza delle basi di HTML e CSS. Se non sei a conoscenza di questi concetti, ti suggeriremo di seguire il nostro breve tutorial su HTML Tutorial e CSS Tutorial.