Introduction Bootstrap - Javascript

Introduction Bootstrap - Javascript
LexiWills Profile Pic
LexiWills,United Kingdom,Professional
Published Date:31-07-2017
Your Website URL(Optional)
Comment
Simplon Boulogne - Bootstrap Introduction Bootstrap - JavascriptBootstrap ? Twitter Bootstrap (3.3.6 actuelle), de son vrai nom, est une collection d’outils en téléchargement gratuit favorisant le développement web Mélangeant des fichiers css et js externes, il permet de créer plus rapidement et plus facilement des sites / applications web avec une approche plus intuitive et responsive. Composition de Bootstrap bootstrap.min.css JS CSS Fonts bootstrap.min.jsNotion de template Les templates sont des thèmes prédéfinis définissant les outils / composants de bases d’un site. Exemples : Menu, boutons, footer, carousels etc…Installation par CDN (Content Delivery Network) https://maxcdn.bootstrapcdn.com/bootstrap/ 3.3.6/css/bootstrap.min.css https://maxcdn.bootstrapcdn.com/bootstrap/ 3.3.6/js/bootstrap.min.jsInstallation par CDN (Content Delivery Network) • Avantages : rapidité de chargement, si modification en ligne vous aurez la dernière version. • Inconvénient : dépend d’un serveur externeUtilisation de normalize.css Un projet créé par Nicolas Gallagher et Jonathan Neal. Permet de « resetter » avec une approche récente tous les éléments de rendus html pour obtenir un standard plus moderne, on « normalise »Grid Bootstrap intègre un fonctionnement par colonne pour permettre une approche plus responsive. Une classe spécifique est spécifiée pour chaque colonne en fonction du type d’écran utilisé par l’utilisateur, ainsi donc nous pouvons simplement définir à l’avance le rendu des colonnes par rapport au type d’écran.Types d’écrans Smartphone Tablettes Ordinateurs Écrans HD -xs -sm -md -lgColonnesColonnes Attention, dépassé 12 colonnes, Bootstrap mettra automatiquement la 13ème colonne à la ligne Il faut donc bien définir le nombre de colonnes souhaitées par type d’écran pour plus de simplicité.Colonnes Exemple div class="row" div class="col-xs-12 col-sm-6 col-md-8"/div div class="col-xs-12 col-sm-6 col-md-4"/div /divJavascript Components Découverte de quelques plugins • affix.js • carousel.js • collapse.js • modal.js • dropdown.jsJavascript Components Activation des librairies Pour activer ces librairies : jquery.min.js + bootstrap.min.js Deux méthodes pour activer chaque librairies, soit : • via Javascript • via les « Data Attributes » grâce au HTML 5Javascript Components affix.js Permet de fixer un élément sur une zone de la page. Souvent utilisé pour les menus ou encore pour les sidebars (navigation dans la page)Javascript Components affix.js div data-spy="affix" data-offset-top="60" data-offset- bottom="200"/div Position top Position bottom Définir l’affix pour fixer pour fixerJavascript Components carousel.js Permet de créer un « slideshow » avec l’apparition d’éléments un par un qui sont mis en avant sur la page, on parle alors d’un effet « carousel ».carousel.js code Carousel div id="myCarousel" class="carousel slide" data- ride="carousel" Carousel Indicators li data-target="myCarousel" data-slide-to="1"/li Carousel Controls a class="left carousel-control" href="myCarousel" data- slide="prev"Javascript Components collapse.js Sert à afficher ou cacher du contenu à l’aide d’un bouton ou d’un lien, utilisé pour afficher / cacher des informations supplémentaires en toute simplicité.collapse.js - code obligatoire button type="button" data-toggle="collapse" data-target="Exemple" Bouton d’action /button div class="collapse" id="Exemple" Texte à afficher / cacher /div cible id élément d’action élément à cacher

Advise: Why You Wasting Money in Costly SEO Tools, Use World's Best Free SEO Tool Ubersuggest.