Dans cette vidéo nous allons apprendre comment crée des blocs sur bootstrap
Fichier index.html :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/styles.css"> <title>Apprendre DEV</title> </head> <body> <nav class="navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="index.html">Apprendre DEV</a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bar-nav-principale" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-menu-hamburger color-mob-navbar"></span> </button> </div> <div class="collapse navbar-collapse" id="bar-nav-principale"> <ul class="nav navbar-nav"> <li class="active"> <a href="index.html">Accueil<span class="sr-only">(current)</span></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">PHP</a></li> <li><a href="#">JAVA</a></li> <li><a href="#">C</a></li> <li><a href="#">C++</a></li> <li><a href="#">C#</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Framework PHP <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Symfony</a></li> <li><a href="#">Laravel</a></li> <li><a href="#">Cakephp</a></li> <li><a href="#">Yii</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Framework JS <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Backbone.js</a></li> <li><a href="#">AngularJS</a></li> <li><a href="#">React</a></li> <li><a href="#">Meteor</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CMS <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Drupal</a></li> <li><a href="#">Wordpress</a></li> <li><a href="#">Joomla</a></li> <li><a href="#">Prestashop</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ERP<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Odoo</a></li> <li><a href="#">Dolibarr</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Logiciel<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Adobe Premier</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">InDesign</a></li> <li><a href="#">Gimp</a></li> <li><a href="#">Sublimtext</a></li> <li><a href="#">Notepad++</a></li> </ul> </li> </ul> </div> </div> </nav> <div id="carousel-appdev" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-appdev" data-slide-to="0" class="active"></li> <li data-target="#carousel-appdev" data-slide-to="1"></li> <li data-target="#carousel-appdev" data-slide-to="2"></li> <li data-target="#carousel-appdev" data-slide-to="3"></li> <li data-target="#carousel-appdev" data-slide-to="4"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/drupal-8_carousel.png" alt="apprendre drupal8"> <div class="carousel-caption"> Drupal8 Devenir le Maitre </div> </div> <div class="item"> <img src="img/JAVA_carousel.jpg" alt="apprendre JAVA"> <div class="carousel-caption"> Apprendre la POO avec JAVA </div> </div> <div class="item"> <img src="img/gimp_carousel.png" alt="apprendre gimp"> <div class="carousel-caption"> FAire ces premiers pas avec Gimp </div> </div> <div class="item"> <img src="img/laravel_carousel.png" alt="apprendre laravel"> <div class="carousel-caption"> Découvrir les secrets de Laravel </div> </div> <div class="item"> <img src="img/prestashop_carousel.png" alt="apprendre prestashop"> <div class="carousel-caption"> Votre premier E-commerce en 2 click </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-appdev" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Précédent</span> </a> <a class="right carousel-control" href="#carousel-appdev" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Suivant</span> </a> </div> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="img/programmation-logo_thumbnail.png" alt="programmation"> <div class="caption"> <h3>Programmer</h3> <p>Découvrez la joie de la programmation du php au java en passant par le C.</p> <p class="text-right"> <a href="#" class="btn btn-primary" role="button">Détail</a> </p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="img/frameworkphp-logo_thumbnail.png" alt="framework php"> <div class="caption"> <h3>Framework PHP</h3> <p>Vous voulez développer efficacement avec PHP, utiliser un Framework</p> <p class="text-right"><a href="#" class="btn btn-primary" role="button">Détail</a> </p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="img/frameworkjs-logo_thumbnail.png" alt="Framework javascript"> <div class="caption"> <h3>Framework JS</h3> <p>Technologie du moment! Apprendre un Framewok JS est indisponsable</p> <p class="text-right"><a href="#" class="btn btn-primary" role="button">Détail</a> </p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="img/erp-logo_thumbnail.png" alt="ERP"> <div class="caption"> <h3>ERP</h3> <p>Vos applications de gestion d'entreprise. De la gestion de caisse au RH</p> <p class="text-right"><a href="#" class="btn btn-primary" role="button">Détail</a> </p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="img/cms-logo_thumbnail.png" alt="Sytème de gestion de contenu"> <div class="caption"> <h3>CMS</h3> <p>Créer un site web en trois click, il suffit d'utiliser un CMS</p> <p class="text-right"> <a href="#" class="btn btn-primary" role="button">Détail</a> </p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="img/logiciel-logo_thumbnail.png" alt="Logiciel de développement"> <div class="caption"> <h3>Logiciel</h3> <p>Pour développer il faut des outils. Explorer vos logiciels préférés!</p> <p class="text-right"><a href="#" class="btn btn-primary" role="button">Détail</a> </p> </div> </div> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html>