Bootstrap 3 : Création de Panel.

Dans cette vidéo nous allons apprendre comment créer un panel sur Bootstrap 3

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 class="panel panel-primary">
          <div class="panel-heading">Quoi de 9</div>
          <div class="panel-body">
            <div class="media">
              <div class="media-left">
                <a href="#">
                  <img class="media-object" src="img/cms-logo_panel.png" alt="news cms">
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Drupal Theming</h4>
                <p>Une nouvelle sur le theming de Drupal 8. Nous allons créer un simple template, ensuite nous allons les ajouter dans le dossier theme.... <a href="#">Plus</a></p>
              </div>
            </div>
            <div class="media">
              <div class="media-left">
                <a href="#">
                  <img class="media-object" src="img/programmation-logo_panel.png" alt="apprendre php">
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Nouvelle formation de PHP</h4>
                <p>Dans la partie de cette formation nous allons apprendre comment manipuler les tableaux. Ensuite on va passer à la programmation orienté objet de php...<a href="#">Plus</a></p>
              </div>
            </div>
            <div class="media">
              <div class="media-left">
                <a href="#">
                  <img class="media-object" src="img/erp-logo_panel.png" alt="apprendre erp">
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Odoo</h4>
                <p>Un nouveau tutoriel sur odoo, la dernière fois nous avons vu comment l'insttalé sur Debian 8, cette fois-ci nous allons apprendre l'installation sur Ubuntu server 14.04.... <a href="#">Plus</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>