Twitter Bootstrap 101 Introduction

Twitter Bootstrap est un excellent ensemble d’éléments d’interface utilisateur, de mises en page et d’outils javascript conçus avec soin, que vous pouvez librement utiliser dans votre prochain projet de conception Web. Cette série de vidéos a pour but de vous présenter Bootstrap. du téléchargement des ressources à la création d’un site Web complet basé sur Bootstrap.

Lorsque Mark Otto (@mdo) et Jacob Thornton (@fat) ont publié Twitter Bootstrap pour le monde entier en août 2011, leur annonce expliquait quelle serait sa valeur: permettre aux développeurs front-end de lancer des projets plus efficacement..

La feuille de style Bootstrap fournit une grille 960 facile à mettre en œuvre pour une mise en page efficace, ainsi que des styles conçus avec soin pour la typographie, la navigation, les tableaux, les formulaires, les boutons, etc. Bootstrap fournit un ensemble bien construit de plug-ins jQuery pour les menus déroulants, les onglets, les boîtes modales, les info-bulles, les messages d'alerte, etc..

Ensemble, ces éléments d’interface offrent tout l’apparence d’un site Web HTML5 conforme aux normes, convivial et conçu par des professionnels, et ce, dès la première utilisation. Comme @mdo l'a mis dans le message d'origine:

Bootstrap est un moyen très simple de promouvoir des applications rapides, propres et très utilisables… offrant une solution propre et uniforme aux tâches d’interface quotidiennes les plus courantes rencontrées par les développeurs..

Et pourtant, rien ne s'oppose à une personnalisation plus poussée. Encore une fois, selon les mots de @mdo, bien que Twitter Bootstrap "soit très étendu, il reste néanmoins" suffisamment flexible pour pouvoir répondre à de nombreux besoins de conception uniques ". Ainsi,

Vous pouvez utiliser Bootstrap pour assembler des prototypes rapides ou guider l’exécution de conceptions plus sophistiquées et de plus grands efforts d’ingénierie..

Les conditions de licence libérales, sous la licence Apache 2.0, offrent une grande liberté de création. Tant que vous accordez votre crédit à ceux qui travaillent chez Twitter, vous êtes libre d’accepter, de modifier et de tout personnaliser à votre guise, puis tournez et lancez le site Web créé pour vous-même ou pour un client, gratuitement. ou à but lucratif. (Pour en savoir plus, consultez ce fil de discussion, où les utilisateurs de Twitter ont expliqué comment rester en conformité avec la licence tout en personnalisant le code.)

Compte tenu de la valeur évidente de son offre et des conditions libérales de sa licence, il n’est pas surprenant que de nombreux développeurs aient commencé à en tirer pleinement parti. Le site Tumblr, "Construit avec Bootstrap", a documenté un certain nombre de sites construits par Bootstrap, notamment:

  • CodeAcademy.com
  • CodeCards.com
  • Codesprint
  • Le magasin de cycle de hub
  • Concerts dans la clairière
  • Et même le nouveau site de MSNBC: BreakingNews.com

Dans tous ces exemples, vous remarquerez une grille épurée et une interface évocatrice de professionnalisme. Vous remarquerez également beaucoup de variété dans les détails. Et vous pourriez être frappé par le fait que des développeurs de sociétés respectées telles que Code Academy et MSNBC ont choisi de construire avec Bootstrap.

Si vous êtes comme moi, vous serez extrêmement tenté de le vérifier par vous-même - et vous devriez!

En fait, je l'ai vérifié récemment. Laisse moi te montrer les alentours.

Dans les deux brèves vidéos ci-dessous, je vais vous présenter le site de base de Twitter Bootstrap, vous guider dans le téléchargement du code, après quoi nous le décompresserons et nous commencerons à organiser des choses pour préparer notre propre site Bootstrap.


Obtenez le code

  • Aller sur la page d'accueil de Bootstrap
  • Téléchargez Bootstrap v. 1.4.0 (utilisé dans ce tutoriel)

Vidéo 1: Introduction

Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes.!

Étapes couvertes dans cette vidéo:

  1. Visitez la page d'accueil de la documentation en ligne de Bootstrap
  2. Afficher des sites construits avec Bootstrap
  3. Téléchargez le code de Github
  4. Décompressez

Vidéo 2: Déballer et organiser

Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes.!

Étapes couvertes dans cette vidéo:

Nous allons faire ce qui suit, mais pas précisément dans cet ordre:

  1. Organiser le CSS
  2. Organiser le JavaScript
  3. Débarrassez-vous des fichiers inutiles (enregistrez LESS pour un autre jour)
  4. Conservez le fichier de licence Apache 2.0, conformément aux conditions de licence de Twitter Bootstrap.
  5. Préparez-vous à développer notre propre site Bootstrap

Prochaines étapes?

Dans les prochains tutoriels, je vous expliquerai les principales fonctionnalités de Bootstrap, et je vous aiderai à utiliser Bootstrap pour créer votre propre référentiel personnalisé d'extraits de Bootstrap. Ce faisant, nous allons connaître Bootstrap, acquérir une expérience de l’utilisation et de la personnalisation de celui-ci et nous préparer à travailler avec une efficacité encore accrue sur nos futurs projets Bootstrap-based.