• Registrati
Benvenuto su codeinvaders.net la community italiana dedicata agli sviluppatori!
Puoi partecipare alle discussioni anche attraverso facebook, twitter e google+.
JS Day
  • google plus
  • facebook
  • twitter
Codeinvaders.net, domande e risposte per sviluppatori!
Partecipa a questa community rispettando tutti i suoi membri che, per il puro piacere di condividere, forniscono risposte e suggerimenti.
Classifica migliori utenti del mese 10/2017
  1. 4240 Punti

  2. 3980 Punti

  3. 3480 Punti

  4. Luca Rainone

    2400 Punti

I premi del mese
Posizione 1: Buono Amazon da 10 euro
Posizione 2: Sconto 40% su un libro O'Reilly

twitter bootstrap tutorial

ciao a tutti mi sono appena imbattuto nel magnifico twitter bootstrap. qualcuno sa consigliarmi qualche buon tutorial? lo chiedo perchè è pieno di tutorial in rete e sicuramente ne esiste qualcuno migliore di qualcun altro

se non sapete cos'è, vi rimando a questo: http://www.adobe.com/devnet/html5/articles/twitter-bootstrap.html

quesito posto 27 Dicembre 2012 da anonimo
   

1 Risposta

+2 voti
 
Risposta migliore

Ha poco senso parlare di tutorial di Bootstrap. La pagina ufficiale è questa e non penso sia opportuno andare a cercare altrove, in quanto di sicuro la pagina ufficiale è la più aggiornata.

Tuttavia mi sento di consigliare un approccio alternativo a Bootstrap dovuto al fatto che con esso si mischia logica di template (pull-left|right, spanN ecc) con il CSS che teoricamente dovrebbe esserne esente.

Spiego meglio. E' sconveniente usare per un blocco in una certa posizione la classe "span4", perché se un domani volessimo farlo più lunoa o più corto, dovremmo cambiare la classe nell'HTML piuttosto che associare un diverso stile alla classe. E questo è esattamente ciò che il CSS, agli albori, voleva evitare.

Classico esempio bootstrap:

<div class="span8">
     <article class="span7">
        <img src="/images/article-image.jpg" class="pull-left main-image" />
            <p>
                 content here
            </p>
    </article>
</div>

In questo caso nell'HTML ci sono informazioni sulla larghezza dei div e sul posizionamento dell'immagine. Non buono.

Un approccio che è possibile adottare è quello di mischiare Bootstrap con un qualsiasi layer CSS (Less o CSScaffold) che supporti i css Mixins in modo tale da avere una struttura HTML indipendente dalla logica di template e con gli stili completamente separati. Come nell'esempio:

HTML

<div class="content-container">
    <article class="article">
           <img src="/images/article-image.jpg" class="main-image" />
            <p>
                 content here
            </p>
    </article>
</div>

CSS

 .content-container  {
     .span8;
}

.article  {
      .span7;
}

.main-image {
     .pull-left;
     margin:10px;
}

In questo modo hai separato logica di template dall'html che diventa più manutenibile.

Ovviamente questo approccio richiede un po' di lavoro dietro per costruirsi i mixin. Avevo trovato un tutorial con questo metodo, ma non lo trovo più. Appena lo trovo lo metto su.

Mi sono sentito di rispondere perché ho già avuto esperienza con Bootstrap, ed ho già avuto questo problema. Volevo evitare che altri ripetessero la mia cattiva esperienza :-)

risposta inviata 27 Dicembre 2012 da Luca Rainone (2,400 punti)
Selezionata 27 Dicembre 2012 da anonimo
grazie, effettivamente hai proprio ragione, anche solo a pensare all'html5.. è stato fatto per evitare questi problemi!
beh fare siti che rispondano bene sia al resize della viewport sia al resize del testo (cmd+ e cmd-) senza usare questi framework per grid system per me sta diventando difficile (parlo da neofita del web però!)...
Infatti Bootstrap è un ottimo strumento per questo. E il responsive design è solo una parte. Tuttavia con questa piccola accortezza hai secondo me un progetto basato su un sistema più lungimirante. Tutto qui :-)
Puoi partecipare alle discussioni anche attraverso facebook e twitter.
...