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>