2015-06-04

Il presente articolo è stato tradotto automaticamente.

Sviluppo Web

Creazione di siti Web reattive con Bootstrap

È solo una questione di tempo prima che un cliente rubinetti URL del tuo sito sul proprio dispositivo mobile. Will Se è così, che l'utente si muoverà molto probabilmente su un sito più mobile-friendly. Se tale utente potrebbe invece incontrano un UX progettato specificamente per un fattore di forma mobile e godere di interagire facilmente con il tuo sito?

In passato, un sito Web supportato desktop e mobile codice richiesto diverso basi. Oggi, tuttavia, ci sono quadri di interfaccia utente che consentono di pagine Web di un sito per il supporto mobile, tablet, desktop e anche grande schermo desktop — tutto con una singola base di codice. Anche se questi strumenti non sono una panacea per gli sviluppatori Web mobili, essi possono notevolmente facilitare il processo di sviluppo. Ancora, il pensiero deve essere dato per determinare se uno è giusto per il tuo sito.

Questo articolo presenta una panoramica di uno di questi strumenti, Bootstrap, che è incluso in molti dei modelli di applicazione Web Visual Studio 2013. Bootstrap è un framework che consente responsive Web design (RWD) — un approccio alla progettazione di siti Web che mira a fornire un'esperienza di visione accettabile attraverso tutti i fattori di forma, con una singola base di codice. Dopo la panoramica, io considerano alcuni fattori che possono aiutare a decidono se un framework come Bootstrap è giusto per il tuo sito.

All'inizio

Ha preso una certa evoluzione per portare l'industria del software per il punto dove emerge una soluzione come Bootstrap. Dopo un inizio incostante, a partire dal 1998, in cui emerse Wireless Markup Language (WML), Compact HTML e XHTML Mobile Profile e poi scomparve, HTML5 finalmente è diventato lo standard HTML di nuova generazione per tutti i dispositivi nel 2009. Ma standard da soli non sono sufficienti. Mentre lo standard per il markup di Web mobile era in evoluzione, significativi progressi anche si è verificato con l'hardware, il browser mobile e banda. Processori più veloci, è diventato mobile browser avanzato al punto dove si potrebbe visualizzare qualsiasi pagina Web (anche se la pagina non fosse stata progettata per un dispositivo mobile) e la larghezza di banda aumentata. Questo ha creato un ambiente per gli sviluppatori di prendere in consegna.

Gli sviluppatori amano fare strumenti per altri sviluppatori e Web mobile non è un'eccezione. Ci sono più di una dozzina di quadri UI differenti sul mercato oggi. Sarebbe ingiusto all'etichetta di uno di questi quadri "il meglio" perché ci sono diversi approcci e siti Web hanno esigenze diverse. Ho scelto il Bootstrap per questo articolo perché ha un solido livello di adozione, è completamente documentato ed è inclusa nei modelli di applicazione Web ASP.NET .

Che cosa è Bootstrap?

Bootstrap è un framework di interfaccia utente sensibile per la costruzione di siti Web. Il quadro di Bootstrap, come molti altri Framework di interfaccia utente per lo sviluppo Web, è un insieme di classi CSS, componenti UI e JQuery plug-in. Bootstrap è considerato un framework leggero. In altre parole, esso utilizza CSS più di JavaScript per fare il suo lavoro. Anche se Bootstrap è considerato leggero, una pagina Web che utilizza utensili Bootstrap richiede ancora maggiore elaborazione per eseguire il rendering di una pagina scritta appositamente per un determinato form factor. Per questo motivo, prestazioni dovrebbero essere una considerazione importante quando la progettazione, sviluppo e testing di pagine che utilizzano qualsiasi parte della struttura del Bootstrap.

Bootstrap fa molto per voi automaticamente. Inoltre consente di personalizzare facilmente il comportamento predefinito per un fattore di forma specifica, mantenendo la tua pagina cercando bene su altri fattori di forma. Versione 3 del Bootstrap è dotato di classi CSS che colpiscono specificamente larghezze browser comunemente trovate su browser mobile, tablet browser, browser desktop e browser anche in esecuzione su grandi schermi desktop. È possibile utilizzare le classi CSS di Bootstrap per annotare gli elementi HTML5. Le classi CSS più comunemente utilizzate coinvolgono il sistema griglia Bootstrap, un insieme di classi che organizzare il layout di una pagina utilizzando le righe e colonne. Descriverò il sistema griglia più dettagliatamente più avanti in questo articolo.

Bootstrap ha un numero di componenti dell'interfaccia utente per la creazione dell'interfaccia utente di un sito, compreso pulsante a discesa, il gruppo di pulsanti, menu a discesa, Navbar, navigazione, Media dell'oggetto, l'impaginazione e Progress bar, solo per citarne alcuni. Molti di questi componenti sono sensibili se stessi, il che significa che rendono in modo diverso in base alla larghezza del browser. Ad esempio, la barra di navigazione è un componente potente che passa automaticamente da una barra di menu che visualizza le opzioni di menu su tutta la larghezza dello schermo sul desktop per una gradevole versione compatta che presenta opzioni tramite una barra dei menu a discesa che viene attivato quando l'utente tocca la barra di navigazione.

Per funzioni più avanzate di interfaccia utente, Bootstrap ha anche un insieme di messaggi di muffin e JQuery plug-in personalizzati, tra cui il carosello, Pannello comprimibile, finestra di dialogo modale richiede.

Guida introduttiva

Il file JavaScript e CSS Bootstrap sono automaticamente inclusi nel progetto quando si utilizza il modello di applicazione Web ASP.NET per Visual Studio 2013 per creare il progetto. Finestra di dialogo Nuovo progetto per i modelli di applicazione Web è mostrato Figura 1. Bootstrap richiede anche JQuery. Quando ottenete Bootstrap dal modello di applicazione Web Visual Studio 2013, si ottiene il Bootstrap v 3.0.0 con JQuery v1.10.2. Se si utilizzano i modelli per Visual Studio 2012, questi file non vengano inclusi nel progetto. Inoltre, Bootstrap non è incluso automaticamente se si crea un nuovo sito Web usando File | Nuovo sito Web.

Figura 1 Visual Studio 2013 nuovo progetto finestra di dialogo per il modello di applicazione Web ASP.NET

Se si preferisce utilizzare le versioni più recenti e più di Bootstrap e JQuery, utilizzare NuGet per aggiornare il vostro progetto. E utilizzare NuGet per ottenere Bootstrap se avete una versione di Visual Studio prima Visual Studio 2013. Il sito di Bootstrap (getbootstrap.com) illustra come link a una versione hosted CDN di Bootstrap, che può fornire un vantaggio significativo delle prestazioni.

Sperimentando con il sistema di griglia Bootstrap

Bootstrap fornisce ciò che è noto come un layout di colonna 12 sensible a reagire. Si può stendere pagine utilizzando un numero qualsiasi di righe, ma è necessario utilizzare 12 colonne. Questi 12 colonne sono dimensionate ugualmente su tutta la larghezza del browser e si utilizzano le classi CSS di Bootstrap per specificare quante colonne dovrebbe occupare un elemento HTML. Questo è un diverso tipo di sistema di griglia che gli sviluppatori XAML per Windows Phone e Windows 8 sono abituati a. Il sistema di griglia XAML consente un layout di pagina avere un numero qualsiasi di righe e colonne. Gli sviluppatori quindi inserire ogni controllo in una cella, specificando un numero di riga e un numero di colonna. Ciò che rende il sistema griglia Bootstrap particolarmente potente è che è possibile specificare un intervallo di colonna diversa per grandi desktop, desktop normale, tablet e telefoni. Ad esempio, un modello di layout comune è di creare una serie di div e per ogni div specificare che dovrebbero occupare 2 colonne su un grande desktop (questo significa che si adatterebbe 6 divs su ogni riga), 3 colonne su un desktop normale, 4 colonne su una tavoletta e 6 colonne su un telefono (che produrrebbe 2 divs per riga). Questo scenario è codificato in Figura 2 utilizzando le classi col * che compongono il sistema di griglia di Bootstrap. Le classi di colore (grigio, arancio e così via) semplicemente colorare lo sfondo di un div. Figura 3 e Figura 4 Visualizza questa pagina sarebbe essere rendering su un desktop e un telefono, rispettivamente.

Figura 2 schema comune Layout utilizzando il sistema di griglia Bootstrap

<body>
  <div class="container">
    <hr />
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">11</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">12</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">13</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">14</div>
  </div> <!-- /container -->
</body>

Figura 3 l'esempio dalla figura 2 il rendering su un Desktop utilizzando la classe col-md-3

Figura 4 l'esempio dalla figura 2 il rendering su un telefono cellulare tramite la classe col-xs-6

È importante notare che il Bootstrap effettivamente non rileva il tipo di dispositivo. Piuttosto, Bootstrap utilizza media query per determinare se una classe CSS dovrebbe essere applicata. Le quattro categorie di classi sono mostrate Figura 5, insieme con le gamme di larghezza che farà sì che ogni categoria da applicare.

Figura 5 griglia di Bootstrap di sistema classe categorie

Prefisso di categoria	Fattore di forma	Larghezza in pixel
col - xs-*	Telefono	Meno di 768
col - sm-*	Tavoletta	768 a 991
col - md-*	Desktop	768 a 991
col - lg-*	Grande Desktop	Maggiore di 1.200

Quando si stabilisce un elemento HTML specifico, è possibile utilizzare qualsiasi combinazione di queste categorie. Ad esempio, la seguente riga di codice utilizza una classe da ogni categoria:

<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> {Other HTML elements here.} </div>

Questo è equivalente al seguente pseudo codice:

Se la larghezza del browser è meno di 768 pixel, quindi questo div sarà campata 6 delle 12 colonne disponibili, che riprende una metà (6/12) dello schermo.

Altrimenti se la larghezza del browser è tra 768 pixel e 991 pixel, questo div si abbracciano 4 delle 12 colonne disponibili, riprendendo un terzo (4/12) dello schermo.

Altrimenti se la larghezza del browser è tra 992 pixel e 1.200 pixel, questo div si abbracciano 3 di 12 colonne disponibili, riprendendo un quarto (3/12) dello schermo.

Altrimenti se la larghezza del browser è superiore a 1.200 pixel, questo div si abbracciano 2 di 12 colonne disponibili, riprendendo un sesto (2/12) dello schermo.

Non devi specificare in modo esplicito un numero di colonne per ogni categoria. Se non si specifica una determinata categoria, la categoria successiva giù nella dimensione verrà utilizzata. Ad esempio, se desideri un layout unico per i telefoni, ma è OK per tablet, desktop e grandi desktop per avere lo stesso layout, basta specificare una classe per telefono e tablet. in questo modo:

<div class="col-xs-6 col-sm-4"> {HTML elements here.} </div>

Bootstrap utilizzerà l'impostazione di tavoletta per entrambi i fattori di forma desktop desktop e grandi. Inoltre, la classe predefinita per telefono è col-xs-12, che colloca ogni div sulla propria riga. Se questo è un layout accettabile per un telefono, la riga di codice precedente può essere ulteriormente ridotto:

<div class="col-sm-4"> {HTML elements here.} </div>

Si noti che nel Figura 2 che le righe non sono specificati. Il sistema di griglia Bootstrap si sposterà automaticamente un div alla riga successiva se la riga corrente è già stata utilizzata in su o se non c'è abbastanza spazio per il div. È possibile forzare una nuova riga utilizzando la classe di riga come questa:

<div class="row">
  {Place columns here.}
</div>

Perché 12 colonne? 12 può suonare come un numero scelto a caso per questo sistema di griglia, ma non è. Il numero 12 fornisce un sacco di divisibilità e un sacco di spazio per componibilità. Ad esempio, i numeri 1, 2, 3, 4, 6 e 12 che tutti dividere equamente in 12. Utilizzando questi valori per campate colonna può produrre un layout contenuto di 12 colonne, 6 colonne, 4 colonne, 2 colonne e 1 colonna, rispettivamente. Inoltre, combinazioni come 3 + 9, 9 + 3, 4 + 8 e 8 + 4 sono visivamente accattivanti combinazioni per posa i contenuti.

Componenti di bootstrap

Bootstrap contiene più di 20 componenti, che possono essere utilizzati nel loro stato attuale o può essere facilmente esteso. Controllare il sito Bootstrap per una descrizione di ogni componente e un esempio di utilizzo. La documentazione per i media di oggetti fa anche uso di un video musicale di REO Speedwagon per dimostrare il suo utilizzo. Anche se non crescerai durante gli anni ' 80, considerare dandogli un ascolto.

Prenderò un'occhiata più da vicino la componente Navbar, che viene utilizzata per creare una barra dei menu nella parte superiore di una pagina. Figura 6 viene illustrato come utilizzare il componente barra di navigazione per creare un semplice menu che contiene il marchio di un sito e alcune opzioni di menu. Quando larghezza di un browser è più ampio di 768 pixel, la barra di navigazione viene eseguito il rendering come mostrato Figura 7. Se la larghezza del browser è più piccola di 768 pixel, la barra di navigazione viene eseguito il rendering come mostrato Figura 8. In questo caso, le opzioni di menu vengono visualizzate quando l'utente tocca il pulsante contenente le linee orizzontali.

Figura 6 utilizzando il componente Navbar Bootstrap

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
        data-target="#bs-example-navbar-collapse-1">
        <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="#">Brand</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 1
          <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Figura 7 la Navbar resi per larghezze di Browser uguale o maggiore di 768 pixel

Figura 8 la Navbar resi per larghezze di Browser meno di 768 pixel

Ovviamente, questo è un esempio molto semplice. La Navbar può contenere anche i pulsanti di menu a discesa, e si può anche integrare la funzionalità di ricerca nella barra di navigazione. Inoltre, la porzione di marchio della barra di navigazione, che è testo nell'esempio, può essere un'immagine.

JQuery Plug-in

Bootstrap ha circa una dozzina JQuery plug-in, che sono documentati nella scheda JavaScript nel sito Bootstrap. A prima vista sembrano simili in funzione ai componenti descritti nella sezione precedente, in quanto sono le classi CSS che vengono utilizzate per aumentare gli elementi HTML5. Tuttavia, queste classi CSS innescano attività JQuery quando viene eseguito il rendering dell'elemento HTML o vari eventi fuoco spento l'elemento HTML. Pagine che fanno uso pesante di questi plug-in devono essere testate per problemi di prestazioni, specialmente su dispositivi con CPU più lenta e limitata memoria.

Il codice JavaScript necessario per eseguire che questi plug-in si trova in bootstrap.js. Ogni plug-in è disponibile anche come file standalone, che consente di includere solo i plug-nell'app deve, con conseguente più velocemente di prima pagina rendering.

Figura 9 viene illustrato come utilizzare il plug-in, carosello, che fornisce funzionalità di presentazione. Se la pagina ha già un link a bootstrap.js o bootstrap.min.js, siete tutti insieme. Oppure si può collegare a carousel.js se il carosello plug-in è l'unico plug-in richiede la pagina.

Figura 9 utilizzando il plug-in carosello

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0"
      class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slide content -->
  <div class="carousel-inner" role="listbox">
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ... Only one slide for brevity.
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button"
    data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button"
    data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Figura 10 illustrato il carosello plug-in per Windows Phone. Carosello plug-in sé si estende in modo appropriato per tablet, fattori di forma desktop desktop e grandi.

Figura 10 il rendering dell'esempio di carosello nell'emulatore di Windows Phone

Considerazioni

Come osservato in precedenza, il Bootstrap non sarà giusto per ogni situazione. Per determinare che se il Bootstrap è giusto per il tuo sito, ci sono un paio di cose, ti consigliamo di prendere in considerazione:

Se avete un sito esistente che è stato sintonizzato prestazioni nel corso degli anni ed è stato ottimizzato per gli utenti, ti consigliamo di procedere con cautela. Pagine di prototipazione complesso, molto usato è anche una buona idea. Se una pagina di Bootstrap non esegue adeguatamente, considerare l'impostazione di un sito di m e codifica tutto te stesso. Dino Articolo di Esposito, "mobilitare un sito Web esistente" (bit.ly/1CaVEWR), viene illustrato come creare un sito di m.
Se si sta costruendo un nuovo sito, prototipo le pagine più complesse e le pagine che ritieni verranno utilizzate più pesantemente. Assicurarsi che funzionino bene su dispositivi di fascia bassa e nelle zone di bassa larghezza di banda. Se una pagina risulta per essere problematico quindi provare a ridisegnare il tale che esso deve svolgere adeguatamente. Una m-site è anche un'opzione per i nuovi siti, ma questo dovrebbe essere fatto solo se una riprogettazione non funzionerà.
Assicurarsi che il sistema di griglia Bootstrap e i componenti utilizzati per la navigazione non sono troppo limitanti rispetto alla progettazione del sito. Verificare con il tuo designer UX presto nel processo di ESAgating Bootstrap. A mio parere, uno strumento come Bootstrap ti obbliga a progettare per il mobile, che ti costringe a tenere le pagine, pulita e ordinata. Tuttavia, la finestra di progettazione UX può confermare se Bootstrap può essere fatto per rappresentare il tuo marchio e fornire un'esperienza adatta per gli utenti correttamente.

Ulteriori informazioni e strumenti

Se avete intenzione di sviluppare il tuo sito utilizzando il Bootstrap, ti consigliamo di esaminare tutti i componenti e plug-in di JQuery documentato sul sito Bootstrap, dove troverete anche molti esempi utili. Si dovrebbe anche verificare:

Bootswatch (bootswatch.com) contiene temi gratuiti per il Bootstrap.
Avvolgere il Bootstrap (wrapbootstrap.com) contiene poco costosi Bootstrap temi e modelli.
Carattere impressionante (fontawesome.io) è un sito che fornisce icone gratis vettoriale scalabile che possono essere facilmente personalizzate con i CSS.
"Distribuire un ASP.NET MVC 5 applicazione Web Mobile su siti Web Azure" (bit.ly/1CMOGwq) viene illustrato come applicare il Bootstrap di un sito Web esistente per renderlo mobile-friendly. L'articolo inoltre illustrato come distribuire un sito di Microsoft Azure.

Conclusioni

Il materiale qui presentato è solo una breve panoramica dei framework dell'interfaccia utente di Bootstrap. Esso descrive affatto completamente tutti i CSS classi, componenti e plug-in che vengono con Bootstrap. Ti consigliamo di visitare il sito Bootstrap per ottenere una completa comprensione di tutti gli strumenti disponibili e di esplorare le pagine di esempio che illustrano i diversi disegni UX. Questi campioni sono un buon punto di partenza se è necessario avere un'idea di ciò che è possibile con Bootstrap.

Prima di andare avanti con uno sforzo di sviluppo serio utilizzando Bootstrap o qualsiasi altri framework, considerare prestazioni e usabilità. Pagine chiave prototipazione è il modo migliore per confermare che il Bootstrap può essere incorporato nel tuo sito e dare i risultati desiderati.

Keith Pijanowski è un ingegnere, imprenditore e business ragazzo Egli ha più di 20 anni di esperienza nel settore del software e ha lavorato per start-up e grandi aziende in ruoli che vanno dalla scrittura di codice per lo sviluppo del business. Contattarlo al keithpij@msn.com o twitter.com/keithpij.

Grazie ai seguenti esperti tecnici Microsoft per la revisione di questo articolo: Rick Anderson e CEFA Lin

Condividi tramite