Bootstrap 2.0, par Twitter

Posté par (page perso) . Édité par Nÿco, Bruno Michel, Xavier Claude, Brndan, Florent Zara et baud123. Modéré par Lucas Bonnet. Licence CC by-sa
19
2
fév.
2012
Internet

Bootstrap est une boîte à outils HTML, CSS et JavaScript permettant de créer rapidement et efficacement des applications web. Il vient de sortir en version 2. Il est publié sous licence Apache 2.0. Tous les détails dans la seconde partie de la dépêche.

Présentation

Bootstrap est un framework destiné aux applications web. Développé par Twitter et distribué sous licence Apache 2, c'est un outil à considérer lors du développement rapide d'applications web. L'utilisation combinée du HTML, du CSS, et du JavaScript propose au développeur des méthodes de développement très efficaces. De nouveaux plugins JavaScript utilisant jQuery sont présents. D'autres sont retirés, comme le merveilleux « table-sorter ».

Par exemple, la création d'une barre de navigation en tête de page, très similaire à celle de Twitter, se fera par l'utilisation de cette structure HTML (ici simplifiée) :

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      ...
    </div>
  </div>
</div>

Il est quand même important de constater que si l'utilisateur ne souhaite pas utiliser de CSS ou de JavaScript, l'application continuera de fonctionner correctement. Dans la plupart des cas, la structure sera quand même beaucoup plus simple. Voici le code pour transformer un simple lien en gros bouton rouge.

<a class="btn btn-large btn-danger" href="#">Une action quelconque</a>

L'inconvénient majeur est qu'une application développée avec ce framework en devient très dépendante, malgré l'utilisation de classes pour styliser l'application, changer l'apparence semble difficile sans une réécriture du HTML.

Nouveautés

Les nouveautés de cette version sont nombreuses. Une grande partie du code a été réorganisée, ce qui implique de devoir réécrire de grandes parties des applications développées avec les versions précédentes.

  • Un support des différentes tailles d'écrans, pour les applications mobiles, est maintenant présent. L'apparence des formulaires a été retravaillée, pour une présentation plus organisée.
  • Les icônes glyphish sont incluses par défaut, et leur utilisation est très facile. Glyphish est une collection d'icônes libres et très sobres. Il existe cependant une version plus complète payante, et destinée à la base pour les applications iOS.
  • De nouveaux blocs sont présents, comme un bloc de navigation stylisé rappelant les menus de gauche de Nautilus ou Thunderbird.
  • # Grammar nazi à la rescousse

    Posté par (page perso) . Évalué à 1.

    Une grande partie du code a été réorganisée

    Merci.

    Commentaire sous licence LPRAB - http://sam.zoy.org/lprab/

  • # Zurb Foundation

    Posté par (page perso) . Évalué à 4.

    J'aime bien Twitter Bootstrap : l'UI est sympa.

    Mais je lui préfère Zurb Foundation pour son côté Responsive Design. Ils mettent vraiment l'accent dessus et c'est appréciable de pouvoir faire un site qui se "dégrade" très bien sur un smartphone ou une tablette. La doc est exhaustive et l'équipe derrière est réactive et accessible (on peut leur parler et échanger avec eux).

    Voici un exemple de ce que j'ai pu faire avec (no pub, hein, c'est pour l'exemple). Réduisez la largeur de la fenêtre de votre navigateur pour admirer la version smartphone.

    J'ai vu que la version 2.0 de Twitter Bootstrap incluait quelque chose dans ce sens, mais la doc est très pauvre sur ce sujet, donc il faut que je regarde ça de plus près.

    • [^] # Re: Zurb Foundation

      Posté par (page perso) . Évalué à 1.

      Tu as créé ta boite? Tu peux nous en dire plus (cf la série d'interviews d'entrepreneurs du logiciel libre., par exemple l'entretien avec Guillaume Libersat, indépendant au sein d'une CAE? A moins que ton CRM ne soit pas libre.

      • [^] # Re: Zurb Foundation

        Posté par (page perso) . Évalué à 1.

        Oui, j'ai créé ma boite. J'utilise exclusivement des logiciels/briques libres mais ça collera pas forcément avec votre série d'interviews, le CRM que je fais n'étant pas libre.

        Ton commentaire m'a fait réfléchir et en fait, si j'avais dû utiliser que des solutions propriétaires (IDE/framework/OS serveur/DB/ORM/serveur/...) je me serais déjà pendu / mon banquier m'aurait déjà mangé / j'en serais pas là (rayer la mention inutile).
        Donc, c'est un plaisir que de contribuer à ces projets que j'utilise. Même si je trouve que je le fais pas assez (j'aimerais être du niveau de Github !).

  • # Puissant !

    Posté par (page perso) . Évalué à 5.

    Moi qui déteste faire du css et de la mise en page, je découvre cet outil et j'aime beaucoup. En partant d'un site sans css en quelques minutes on peut faire un truc presque potable, c'est bluffant.

    Il existe deux catégories de gens : ceux qui divisent les gens en deux catégories et les autres.

  • # pour quelques liens en plus …

    Posté par . Évalué à 3.

    Pour ceux qui utilisent bootstrap et jquery-ui, voici un thème pour que les 2 ne jurent pas l'un à côté de l'autre :

    JQuery UI bootstrap theme

    Pour les rubyistes et leur rails : intégrer rails et bootstrap

    Et pour des choses similaires à bootstrap :
    HTML Kickstart similaire et un peu plus joli, par contre ce n'est pas du less
    Skeleton plus basique

    • [^] # Re: pour quelques liens en plus …

      Posté par (page perso) . Évalué à 1.

      Aucun de ces frameworks ne propose une taille de police correcte par défaut... Kickstart est le seul à proposer une taille relative, les autres donnent des tailles absolues en pixels -> selon la finesse de l'écran ces sites vont de « illisibles sans loupe » à « ridiculement gros ». Mais Kickstart utilise une taille trop petite.

      Je rappelle que la seule taille acceptable pour le corps du texte est « medium » parce que c'est la taille qui correspond au réglage de l'utilisateur dans les préférences de son navigateur. Tout autre réglage est assuré d'être mauvais pour certains.

      A ce propos, mauvais point pour LinuxFr qui serait illisible sans Stylish puisqu'il utilise « small » pour tous le texte des dépêches et des commentaires...

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.