background preloader

Twiter Bootstrap

Facebook Twitter

BBG - Bootstrap Button Generator. Bootstrap Popover Plugin. The popover is similar to tooltip, offering an extended view complete with a heading.

Bootstrap Popover Plugin

For the popover to activate, a user just needs to hover the cursor over the element. The content of the popover can be populated entirely using the Bootstrap Data API. This method requires a tooltip. If you want to include this plugin functionality individually, then you will need popover.js and it has a dependency of tooltip plugin. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js. Usage The popover plugin generates content and markup on demand, and by default places popover after their trigger element. Via data attributes: To add a popover, add data-toggle="popover" to an anchor/button tag.

Popover plugin is NOT only-css plugins like dropdown or other plugins discussed in previous chapters. Example The following example demonstrates the use of popover plugin via data attributes. Options Methods Events. Bootstrap, from Twitter. Tables are great—for a lot of things.

Bootstrap, from Twitter

Great tables, however, need a bit of markup love to be useful, scalable, and readable (at the code level). Here are a few tips to help. Always wrap your column headers in a <thead> such that hierarchy is <thead> ><tr> ><th>. Similar to the column headers, all your table’s body content should be wrapped in a <tbody> so your hierarchy is <tbody> ><tr> ><td>. Example: Default table styles All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. <table> ... Example: Condensed table For tables that require more data in tighter spaces, use the condensed flavor that cuts padding in half.

Example: Bordered table Make your tables look just a wee bit sleeker by rounding their corners and adding borders on all sides. <table class="bordered-table"> ... Example: Zebra-striped Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped class. <table class="zebra-striped"> ... Tutoriel HTML-CSS : Bootstrap CSS from Twitter. Customize Glyphicon. Tutoriels pour maîtriser « Bootstrap, from Twitter » Présentation de « Bootstrap from Twitter » « Bootstrap from Twitter » est un des nombreux outils du « Responsive Web Design (RWD) » qui viennent bousculer notre confort et nous oblige à un nouvel effort d’adaptation pour ne pas mourir sur le bord de l’autoroute du Web.

Tutoriels pour maîtriser « Bootstrap, from Twitter »

Nous avons déjà parlé de « Bootstrap from Twitter » dans l’article « Responsive Web Design (RWD) » dans SPIP : Intégrer « Bootstrap, from Twitter » dans un CMS..., aujourd’hui nous nous intéressons à son apprentissage car il est particulièrement intéressant. Le framework HTML, CSS, et Javascript « Bootstrap from Twitter », distribué sous license libre Apache v2.0, est l’intégration harmonieuse d’une librairie de tous les éléments d’interface qu’on trouve sur les applications de la compagnie Twitter. « Bootstrap from Twitter » comprend tous les éléments d’interface les plus courants, tels que la navigation, les boutons, les étiquettes, les tableaux, les alertes, les barres d’avancement, les formulaires, etc. Tutoriel vidéos.

jQuery plugin: Tablesorter 2.0 - jQuery UITheme Widget (Bootstrap)