Bootstrap Prise en main 1 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
I) Modifier un thème existant Theme : Site startbootstrap.com Télécharger Agency Code HTML index : page de contenu Style du thème CSS : agency.css titre ligne 12 <title>agency - Start Bootstrap Theme</title> Page du début <div class="intro-text"> <div class="intro-lead-in">welcome To Our Studio! <div class="intro-heading">it's Nice To Meet You <a href="#services" class="page-scroll btn btn-xl">tell Me More</a> Modifier la couleur du bouton : CSS agency classe :page-scroll btn btn-xl CSS Ligne : 120 Etat normal Ligne 136 : Roll over Modifier les couleurs des liens ainsi que du bouton principal 2 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
Service Systeme de grille (bootstrap) <div class="col-md-4"> soit md 1 tres serré jusqu'à md 12 ici md 4 Modifications des icones <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i> ici l'icone shopping cart liste d'icone dans bootstrap : bootstrap favicones. Pour modifier l'icone, changer le nom <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i> ex : Modifier les icones. Portfolio Systeme de grille (taille des images. Specifique boostrap <div class="col-md-4 col-sm-2 portfolio-item"> soit : 1 = petit. 8 = très gros ex : Modifier le système de grille. Il doit avoir sur une ligne 8 images au lieu de 4 Roll over des images : CSS ligne 365 : #portfolio.portfolio-item.portfolio-link.portfolio-hover { 3 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
} position: absolute; width: 100%; height: 100%; opacity: 0; background: rgba(254,209,54,.9); couleur -webkit-transition: all ease.5s;/* vitesse de transition*/ -moz-transition: all ease.5s; /*vitesse de transition sous mozilla*/ transition: all ease.5s; #portfolio.portfolio-item.portfolio-link.portfolio-hover:hover { opacity: 1; } Ex : Modifier les couleur de roll over sur le portfolio. ligne 52 Menu <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden"> <a href="#page-top"></a> </li> <li> <a class="page-scroll" href="#services">services</a> </li> <li> <a class="page-scroll" href="#portfolio">portfolio</a> </li> <li> <a class="page-scroll" href="#about">about</a> </li> <li> <a class="page-scroll" href="#team">team</a> 4 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
</li> <li> <a class="page-scroll" href="#contact">contact</a> </li> </ul> <!-- /.navbar-collapse ex : 1)Changer le couleur des menus : Ligne 37 à 46 a { color: #00F; } a:hover, a:focus, a:active, a.active { color: #fec503; } 2)Changer les titres : h1, h2, h3, h4, h5, h6 { text-transform: uppercase; // ici texte en majuscules font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; //type de typo font-weight: 700; //gras } 5 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
Quelques composants Menus déroulants <div class="btn-group"> <button class="btn btn-danger">danger</button> <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li class="divider"></li> <li><a href="#">separated link</a></li> </ul> Table navigation <div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" datatoggle="tab">meats</a></li> <li><a href="#tab2" data-toggle="tab">more Meat</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>bacon ipsum dolor sit amet jerky flank...</p> <div class="tab-pane" id="tab2"> <p>beef ribs, turducken ham hock...</p> Labels <span class="label">default</span> 6 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
<span class="label label-success">success</span> <span class="label label-warning">warning</span> <span class="label label-important">important</span> <span class="label label-info">info</span> <span class="label label-inverse">inverse</span> Barres de progression <div class="progress"> <div class="bar" style="width: 60%;"> avec des couleurs <div class="progress"> <div class="bar bar-success" style="width: 35%;"> <div class="bar bar-warning" style="width: 20%;"> <div class="bar bar-danger" style="width: 10%;"> 7 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
II Site complet avec bootstrap 8 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
II)Etude du starter template 9 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
Le starter template se trouve a cet emplacement http://getbootstrap.com/examples/starter-template/ ------------------------------------------Partie initialisation--------------------------- <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>starter Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="starter-template.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><! [endif]--> <script src="../../assets/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> ------------------------------------------Partie menu--------------------------- <body> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">project name</a> 10 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
<div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> <!--/.nav-collapse --> </nav> <div class="container"> <div class="starter-template"> <h1>bootstrap starter template</h1> <p class="lead">use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> <!-- /.container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> Explication du code 1) Part 1 : rappels de base HTML Définition de la langue (vous pouvez mettre Fr) <html lang="en"> Balise d'en tête <head> Définition du jeu de caractère (UTF-8= caractères accentués) <meta charset="utf-8"> Comptatibilité pour IE <meta http-equiv="x-ua-compatible" content="ie=edge"> Niveau de zoom navigateur à 1 Plus de renseignements sur http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-webmobile.html 11 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
<meta name="viewport" content="width=device-width, initial-scale=1"> Description du site. Cela apparaîtra dans la définition de google (référencement) <meta name="description" content=""> Définition de l'auteur pour Google <meta name="author" content=""> Icône de votre site qui apparaîtra dans la barre des menus. Extention.ico obtenu grâce a un logiciel de conversion PNG ou JPG en ICO Les.ICO sont des icônes <link rel="icon" href="../../favicon.ico"> Titre du site qui apparaitra dans la barre du navigateur <title>starter Template for Bootstrap</title> <!-- Bootstrap core CSS Chargement de la librairie de boostrap. Vous avez le choix entre 2 librairies : la librairie bootstrap.min.css qui est un css compacté donc impossible a modifier ou bootstrap,css qui est la librairie CSS modifiable. En conséquence : Le CSS min est plus rapide a charger mais non modifiable. Le CSS normale peut être modifié mais le chargement est plus long. A noter que l'on travaille en général avec le CSS normal que l'on compacte par la suite grâce à un logiciel prévu a cet effet pour un chargement plus rapide ainsi que pour protéger votre code <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> Insertion du code CSS du starter template. Celui ci est extrêmement simple. Nous le verrons plus tard <!-- Custom styles for this template --> <link href="starter-template.css" rel="stylesheet"> Compatibilité pour IE. Le mouton noir des navigateurs ne respectant pas la norme W3C mais utilisé par bon nombre d' entres nous... <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><! [endif]--> <script src="../../assets/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> Fin du Head 12 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
2) Part 2 : La base du starter template de boostrap Ci dessous, le schéma représente les 3 parties principales de votre strcuctures 1) Le menu 2) Le contenu 3) Le chargement des librairies Javacript inhérentes à Bootstrap afin de créer un site responsive et d'intégrer les interactions Jquery ------------------------------------------Partie menu--------------------------- On commence le BODY (HTML classique) <body> Votre menu va de <Nav> à </nav> Comme indiqué sur le schéma <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> ici le menu est fixe en haut a gauche. Vous pouvez le fixer en bas en mettant fixed bottom comme propriété <div class="container"> Le container va prendre en compte tout votre site. C'est entre les balises <container> et </container> que vous allez ajouter vos pages 13 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
<div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> Ci dessous en vert, le titre de votre site <a class="navbar-brand" href="#">project name</a> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> Ci dessous en vert, les titres des liens. En bleu #about et #contact, les encres pointant vers les pages. <li class="active"><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> <!--/.nav-collapse --> </nav> fin du menu 2) Le contenu 3) Tout ce qui est entre la balise <container> et </container> sera votre propre contenu. Vous pouvez donc tout modifier et c'est sur cette partie que vous travaillerez <div class="container"> <div class="starter-template"> Balise H1 : un gros titre donc <h1>bootstrap starter template</h1> Du contenu texte, rien de transcendant... pour le moment <p class="lead">use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> <!-- /.container --> fin 4) Les Librairies. 14 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
Ici vous placerez toutes les librairies nécessaires au bon fonctionnement du site. Nous verrons en exemple le placement des fichier javascript du carroussel <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> Fin. III)Ajout de pages et création d'une mise en page simple Mise en page avec des colonnes. Rappels <div class="col-md-6"> <h2>extending Bootstrap</h2> <p><time pubdate="pubdate">1/12/2012 3:36 PM</time> <p>bienvenu sur mon site</p> <p class="read-more"><a href="#">read more</a></p> <ul class="list-inline"> <li><a href="#" class="label label-primary">bootstrap</a></li> <li><a href="#" class="label label-primary">css</a></li> <li><a href="#" class="label label-primary">less</a></li> <li><a href="#" class="label label-primary">javascript</a></li> <li><a href="#" class="label label-primary">grunt</a></li> </ul> <div class="col-md-6"> <img class="sidebar-avatar" src="http://lorempixel.com/400/400/cats" alt="avatar"/> <p class="sidebar-bio">christoffer is a web developer that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, maxime, neque? Assumenda at commodi et eum illum, incidunt ipsa laborum molestias, necessitatibus numquam quod ratione sint vero. Amet, facilis iusto. </p> 15 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
Ici nous avons une structure en deux colonnes. Schémas des différentes colonnes de Boostrap Exemple : <div class="col-md-4"> Contenu <div class="col-md-8"> Contenu donnera les résultat de la ligne n 3 en terme de mise en page. Our l'heure, avec notre code <div class="col-md-6"> <h2>extending Bootstrap</h2> <p><time pubdate="pubdate">1/12/2012 3:36 PM</time> <p>bienvenu sur mon site</p> <p class="read-more"><a href="#">read more</a></p> <ul class="list-inline"> <li><a href="#" class="label label-primary">bootstrap</a></li> <li><a href="#" class="label label-primary">css</a></li> <li><a href="#" class="label label-primary">less</a></li> <li><a href="#" class="label label-primary">javascript</a></li> <li><a href="#" class="label label-primary">grunt</a></li> </ul> 16 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
<div class="col-md-6"> <img class="sidebar-avatar" src="http://lorempixel.com/400/400/cats" alt="avatar"/> <p class="sidebar-bio">christoffer is a web developer that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, maxime, neque? Assumenda at commodi et eum illum, incidunt ipsa laborum molestias, necessitatibus numquam quod ratione sint vero. Amet, facilis iusto. </p> Nous obtenons le résultat suivant : II)Ajouter des pages Nous allons ajouter la page contact et créer un formulaire Voici ci dessous le code pour ajouter une page <div class="featurette" id="contact"> mon contenu de page C'est l'id= «contact» auquel notre ancre du menu principal se réfère Code total. Ci dessous sur la colonne de gauche, l'adresse. <div class="featurette" id="contact"> <h2>me contacter </h2> <address> <strong>stéphane Malachane</strong><br> mon adresse<br> Grenoble<br> 17 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
<abbr title="phone">p:</abbr> (123) 456-7890 <strong>full Name</strong><br> <a href="mailto:steffy3d@hotmail.com">steffy3d@hotmail.com</a> </address> II) le code du formulaire <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputemail3" class="col-sm-2 control-label">email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputemail3" placeholder="email"> <div class="form-group"> <label for="inputpassword3" class="col-sm-2 control-label">password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputpassword3" placeholder="password"> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> se souvenir de moi </label> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">envoyer</button> </form> III) Insertion du carroussel Le carroussel se place au début de la page. Donc juste après le menu. <!-- Carousel ================================================== --> <div id="mycarousel" class="carousel slide" data-ride="carousel"> 18 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
<!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0" class="active"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="data:image/gif;base64,r0lgodlhaqabaiaaahd3dwaaach5baaaaaaalaaa AAABAAEAAAICRAEAOw==" alt="first slide"> <div class="container"> <div class="carousel-caption"> <h1>example headline.</h1> <p>note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">sign up today</a></p> <div class="item"> <img src="data:image/gif;base64,r0lgodlhaqabaiaaagzmzgaaach5baaaaaaalaa AAAABAAEAAAICRAEAOw==" alt="second slide"> <div class="container"> <div class="carousel-caption"> <h1>another example headline.</h1> <p>cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">learn more</a></p> <div class="item"> <img src="data:image/gif;base64,r0lgodlhaqabaiaaafvvvqaaach5baaaaaaalaaa AAABAAEAAAICRAEAOw==" alt="third slide"> <div class="container"> <div class="carousel-caption"> <h1>one more for good measure.</h1> <p>cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">browse gallery</a></p> 19 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
<a class="left carousel-control" href="#mycarousel" role="button" dataslide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">previous</span> </a> <a class="right carousel-control" href="#mycarousel" role="button" dataslide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">next</span> </a> <!-- /.carousel Nous avons un carroussel de 3 images. La structure se compose colle ceci : 1) Définition du nombre d'images entre les balises ol et <ol> et ordre de celles ci <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0" class="active"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> </ol> 2)Définition du type de carroussel. Vous pouvez vois les différents types dans les composants de bootstrap : carroussel <div class="carousel-inner" role="listbox"> 3)Image n 1 <div class="item active"> <img src="data:image/gif;base64,r0lgodlhaqabaiaaahd3dwaaach5baaaaaaalaaa AAABAAEAAAICRAEAOw==" alt="first slide"> <div class="container"> <div class="carousel-caption"> <h1>example headline.</h1> <p>note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">sign up today</a></p> 20 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
Si on décortique : <img src="data:image/gif;base64,r0lgodlhaqabaiaaahd3dwaaach5baaaaaaalaaa AAABAAEAAAICRAEAOw==" alt="first slide"> en vert : le nom de votre image a la place de data:image... mettez le nom de votre image. Veuillez a ce que votre répertoire d'images soit impérativement dans le dossier de votre site et pas ailleurs (sur le bureau...) Suite : <div class="container"> <div class="carousel-caption"> <h1>example headline.</h1> <p>note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">sign up today</a></p> Ici, mettez le lien vers une autre page a la place de "#" <p><a class="btn btn-lg btn-primary" href="#" role="button">visualiser</a></p> III) Insertion du javascript pour faire marcher le carroussel. Nous avons besoin d'un script pour le carroussel. Il le situe comme tout le script javascript, dans la section prévu a cet effet (voir plus haut) <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="./carousel Template for Bootstrap_files/jquery.min.js"></script> <script src="./carousel Template for Bootstrap_files/bootstrap.min.js"></script> <script src="./carousel Template for Bootstrap_files/docs.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="./carousel Template for Bootstrap_files/ie10-viewport-bugworkaround.js"></script> Prenez le zip sur le livre rose comprenant tous les fichiers javascript nécessaire au caroussel. 21 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14
Exercice:complétez votre caroussel;avec vos propres images. III) Faire défiler les pages avec du jquery Nous allons faire défiler nos page en douceur avec une fonction javascript a mettre a la fin de votre programme dans la section III <script> /* Enable smooth scrolling on all links with anchors */ function scrollnav() { $('.nav a').click(function(){ //Toggle Class $(".active").removeclass("active"); $(this).closest('li').addclass("active"); var theclass = $(this).attr("class"); $('.'+theclass).parent('li').addclass('active'); //Animate $('html, body').stop().animate({ scrolltop: $( $(this).attr('href') ).offset().top - 160 }, 400); return false; }); $('.scrolltop a').scrolltop(); } scrollnav(); </script> Nous étudierons pas le javascript (ce n'est pas prévu) 22 Licence 3 HTML / Bootstrap Stéphane Malachane Rel 14/11/14