Components Available glyphs Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. How to use For performance reasons, all icons require a base class and individual icon class. Don't mix with other components Icon classes cannot be directly combined with other components. Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements. Changing the icon font location Bootstrap assumes icon font files will be located in the .. Change the @icon-font-path and/or @icon-font-name variables in the source Less files. Use whatever option best suits your specific development setup. Accessible icons Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. Examples Error: Enter a valid email address Example Alignment Divider Disabled menu items <! <!
TUTO intégration html5 / css3 d'un portfolio minimaliste avec Dreamweaver CC, HTML 5, CSS 3 sur Tuto.com Voici la suite de la formation Photoshop consacrée à la création des maquettes des pages du site Internet Portfolio minimaliste. Cette 2ème partie sera consacrée à l'intégration HTML5 et CSS3 des maquettes Photoshop. Voici le programme de ce tuto : Page d'accueil : Mise en place d'un moteur de recherche animéEffet d'opacité sur les icônes des réseaux sociauxCréation du menuMise en place d'un slider aux couleurs du siteMise en place des derniers articles à afficher sur la page d'accueilInstallation d'un carrousel pour lister vos clientsCréation du footer Page A propos : Mise en place d'un sliderInstallation de barres de compétences animéesMise en place d'un carrousel pour afficher les membres de l'équipeCréation d'un sidebar et mise en place des éléments qui la constitue (dernier article, dernier projet, newsletter...) Page portfolio : Installation d'un portfolio filtrable fluideEffet au rollover sur les images avec icône superposée Page Singleportfolio : Page blog : Page SingleBlog :
W3Schools Online Web Tutorials Positionnement, static, relative, absolute, fixed Propriété : Position La propriété sert à définir la position des éléments dans une page HTML Héritage : Il n'y pas de notion d'héritage pour les marges (voir notion d'héritage sur ce lien) Syntaxe : position: valeur; Valeurs possibles: La propriété de feuille de style position css est généralement utilisée pour la création de calques (Layer). Valeurs possibles: top left right bottom Exemple : position: absolute; top: 10px; right: 10px; Le principe du positionnement en CSS fait qu'il est possible de positionner un block n'importe. Le positionnement absolu Une balise HTML avec une position absolue ne laisse aucun espace vide après qu'il est positionné. Dans cette exemple, vous allez obtenir une div à chaque coin de votre écran. Le positionnement relatif On place une div en position relative en avec la valeur de la propriété : relative. En d'autres termes, si on déplace l'élément vers la droite, la gauche, le haut ou le bas.
Initiation au positionnement CSS : 3. position absolue et fixe La position absolue et la position fixe permettent de placer une boîte par rapport aux limites de la zone d’affichage ou du conteneur. Comment les utiliser dans une mise en page CSS ? Cet article fait suite à l'initiation au positionnement CSS: 2.position float. Une boîte en positionnement absolu peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix. Ceci s'avère très utile en particulier pour : placer les menus de navigation en fin de page, pour améliorer l'accessibilité de votre site en donnant un accès immédiat à son contenu dans les navigateurs textes, tout en les faisant apparaître en haut de page ou encore dans une colonne pour les navigateurs graphiques ; créer plusieurs colonnes au positionnement indépendant de l'ordre dans lequel elles se trouvent en HTML. Le fonctionnement de la position absolue Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. En CSS :
How To Create a Pure CSS Dropdown Menu With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu. The menu we will be creating features two sub categories that appear once the parent link is activated by a hover. View the pure CSS dropdown menu demo <nav><ul><li><a href="#">Home</a></li><li><a href="#">Tutorials</a></li><li><a href="#">Articles</a></li><li><a href="#">Inspiration</a></li></ul></nav> First up we’ll need to create the HTML structure for our CSS menu. The first sets of sub-menus can then be added under the “Tutorials” and “Articles” links, each one being a complete unordered list inserted within the <li> of its parent menu option. The secondary sub-menu is nested under the “Web Design” option of the first sub-menu.
How to Create a Dropdown Menu in HTML and CSS: 9 Steps Edit Article Edited by D1s1, Teresa, 80_Calo, Jeff and 5 others Two Methods:HTMLCSS A dropdown menu provides clear and hierarchical view of all main sections on the page and subsections contained within them. All you need to do for the subsections to appear is to mouse cursor over the main sections. This is our menu which was created with only HTML code and CSS. Ad Steps Method 1 of 2: HTML 1Create a HTML structure for your CSS menu. 4Add CSS to your HTML. Method 2 of 2: CSS 1Create a CSS file. 5Position your dropdown and align it to list item.
Guide des étapes par étapes à la mise en place d’un forum BBPress - Partie 1 - Bb press français Partie 1- Les instructions de configuration étape par étape du forum BBPress Les instructions de configuration étape par étape de BBPress BBPress est un plugin pour WordPress qui permet d’avoir un forum pour votre site. BBpress utilise le concept de votre site quand c’est possible pour répondre à vos attentes. Cela peut très bien marcher sur certains thèmes, mais ne marchera pas bien sur d’autres, donc différents styles seront nécessaires. En dehors de la boite, il fonctionne bien avec TwentyTen, et je comprends TwentyEleven. La mise en place de WordPress nécessite certaines ou toutes les étapes suivantes en fonction de la manière dont vous voulez qu’il apparaisse. Les instructions ici génèrent un forum qui travail à l’intérieur d’un thème TwentyTen. Qui ressemble à : Cliquer sur cette image pour voir en taille réelle. En résumé vous avez besoin de : La partie 1 traite les étapes de 1 à 8 La partie 2 traite l’étape 9 Installer le plugin
BuddyPress - Le Tutorial complet en mode pas-à-pas Il y a quelques jours, le WordCamp me donnait l’opportunité de parler de mon plugin WordPress préféré : BuddyPress. Lors de ma conférence, je vous ai présenté globalement ce puissant moteur de communautés. Or le WordCamp, c’est aussi une rencontre communautaire, et je suis heureux d’avoir fait la connaissance de Fabrice (WP Formation WordPress) avec qui j’ai beaucoup échangé pendant ces 2 journées dédiées aux amoureux de WordPress. Il m’a notamment proposé de publier des "tutos" sur son site, et c’est pour moi l’opportunité de prendre le temps d’entrer un peu plus dans le détail de BuddyPress et ce de manière très opérationnelle. Je vous propose donc une série d’articles pour découvrir BuddyPress en mode tutorial pas-à-pas. Dans ce 1er épisode, nous allons commençer par créer un annuaire de membres pour notre site... @iMath Episode 1: Mettre en place un annuaire de membres WordPress Out of the box Petit rappel de ce que nous propose WordPress pour organiser les membres de notre blog : Tada !
The Beginner's Guide to BuddyPress (Open Source Social Networking) BuddyPress is plugin that adds social network like abilities to the acclaimed CMS WordPress. Adding features like a better profile for your blogs writers which combined turn it into a fully fledged social networking site. Most of the possibly for this great plugin aren’t even existent yet! As more and more sites start to use BuddyPress its true power, and that of WordPress is astonishing. Despite all this BuddyPress isn’t too hard to set up and use. In its early days a BuddyPress install required WPMU to run on, although since 1.2 that’s all changed, as BuddyPress can now run on a single WordPress install. BuddyPress adds the following functionality to WordPress. Activity Streams: Members can follow the activity of their friends or groups on your site. Extended Profiles: The default WordPress profiles don’t even compare to these ones. Friends: Members can add each other as friends, this allows them to communicate and track each other easily. 10 Extremely Useful BuddyPress Plugins Tweetstream
Social Admin Template Template (v2.0.1-rc1) Overview, structure and usage. 1. Overview Social Admin Template includes a simple PHP version that exposes a basic templating system with a main bootstrap file, header, footer, pages & sub-pages. The PHP version can also handle dynamic loading of skins and assets and includes a php menu builder. Requirements: Setup: Unpack the downloaded package from themeforest in your webserver root directory eg. 2. A breakdown of the php folder structure: Header Include this in every page of your site <! Pages & Footer Automatic Page Loader: The template system can handle the loading of pages from the admin/pages/ directory and sub-pages from the admin/pages/<page-name>/<subpage-name>.php. Footer: Menu Builder Configuration The sidebar menu is being generated from the /config/config.menus.php configuration file. 4. JavaScript files are loaded dynamically by PHP on a per page basis. Header Scripts Loader: This is located in the admin/header.php file. Footer Scripts Loader: 5. <?