Bootstrap3 : Page web avec Tableau

Création d'une page simple avec un tableau en utilisant 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 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>

<footer>
    <div class="container">    
        <div class="row">     

                     <div class="col-xs-6 col-sm-4 col-md-2">   
                        <div class="h3">Language</div>
                        <ul >
                                <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>
                    </div>    

                     <div class="col-xs-6 col-sm-4 col-md-2">
                        <div class="h3">Framework PHP</div>
                        <ul>
                              <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>
                    </div>  
                    <div class="clearfix visible-xs-block"></div>  
                    <div class="col-xs-6 col-sm-4 col-md-2">
                        <div class="h3">Framework JS </div>
                        <ul>
                              <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>
                    </div>    
                    
                    <div class="clearfix visible-sm-block"></div>
                    <div class="col-xs-6 col-sm-4 col-md-2">
                        <div class="h3">CMS </div>
                        <ul>
                              <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>
                    </div>

                    <div class="clearfix visible-xs-block"></div>
                    <div class="col-xs-6 col-sm-4 col-md-2">
                        <div class="h3">ERP </div>
                        <ul>
                              <li><a href="#">Odoo</a></li>
                              <li><a href="#">Dolibarr</a></li>
                        </ul>
               
                    </div>
                     <div class="col-xs-6 col-sm-4 col-md-2">
                        <div class="h3">Logiciel </div>
                        <ul>
                              <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>
                    </div>    
        </div>                
    </div>  
</footer>

<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> 

Fichier java.html :

 <!DOCTYPE html>
<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">
  <link rel="stylesheet" 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>  <a href="index.html">Accueil</a> </li>
                <li class="dropdown active">  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language <span class="sr-only">(current)</span><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>
  <img src="img/JAVA_bootstrap.jpg" alt="Tutoriel Java" class="img-responsive">
</div>
<ol class="breadcrumb">
  <li><a href="index.html">Accueil</a></li>
  <li><a href="#">Language de programmation</a></li>
  <li class="active">Java</li>
</ol>

<div class="content-fluid container-fluid">
    <div class="row">
      <div class="col-md-9">
        <h1>Java (langage)</h1>
          <p>
            Le langage Java est un langage de programmation informatique orienté objet créé par James Gosling et Patrick Naughton, employés de Sun Microsystems, avec le soutien de Bill Joy (cofondateur de Sun Microsystems en 1982), présenté officiellement le 23 mai 1995 au SunWorld.

            La société Sun a été ensuite rachetée en 2009 par la société Oracle qui détient et maintient désormais Java.

            La particularité et l'objectif central de Java est que les logiciels écrits dans ce langage doivent être très facilement portables sur plusieurs systèmes d’exploitation tels que UNIX, Windows, Mac OS ou GNU/Linux, avec peu ou pas de modifications. Pour cela, divers plateformes et frameworks associés visent à guider, sinon garantir, cette portabilité des applications développées en Java.


          </p>

        <h1>Historique</h1>
          <h2>L'origine du langage</h2>
            <p>
              Le langage Java est issu d’un projet de Sun Microsystems datant de 1990 : l’ingénieur Patrick Naughton n’était pas satisfait par le langage C++ utilisé chez Sun, ses interfaces de programmation en langage C, ainsi que les outils associés. Alors qu’il envisageait une migration vers NeXT, on lui proposa de travailler sur une nouvelle technologie et c’est ainsi que le Projet Stealth (furtif) vit le jour.
            </p>
           <h2>Versions successives</h2> 
            <p>
              Nota 1 : Deux versions peuvent parfois être proposées simultanément, telles que 8u65 & 8u66 : la différence consiste généralement en des corrections de bugs mineurs (sans incidence de sécurité notamment), pour lesquelles la mise à jour à la toute dernière version n'est pas critique et est de ce fait laissée au choix des administrateurs (JRE) ou développeurs (JDK).

              Nota 2 : Les versions publiques de Java peuvent être suivies de versions non publiques, dites Advanced, réservées à des usages commerciaux; ainsi Java 1.6u45 est la dernière version publique de Java6, mais 6u113 l'ultime version disponible fin mars 2016.
            </p>

            <div  class="table-responsive">
              <table class="table table-striped table-condensed"> 
                    <thead> 
                      <tr> 
                        <th>Version</th> 
                        <th>Last update</th> 
                        <th>Dénomination JSE/JRE</th> 
                        <th>Nom de code</th> 
                        <th>Spécifications</th> 
                        <th>JDK</th> 
                        <th>Statut fin mars 2016</th> 
                        <th>Période de maintenance</th> 
                        <th>Support étendu</th> 
                      </tr> 
                    </thead> 
                    <tbody> 
                      <tr> 
                        <th>1.0</th> 
                        <td>1.0.2</td> 
                        <td>Java 1.0</td> 
                        <td>Oak</td> 
                        <td>(en) JSR 52</td> 
                        <td>JDK 1.0.2</td> 
                        <td>N'est plus soutenu de façon active</td> 
                        <td>1996-2000</td> 
                        <td></td> 
                      </tr> 
                      <tr> 
                        <th>1.1</th> 
                        <td>8_16</td> 
                        <td>Java 1.1</td> 
                        <td></td> 
                        <td>(en) JSR 52</td> 
                        <td>1.1.8_16</td> 
                        <td>N'est plus soutenu de façon active</td> 
                        <td>1997-2000</td> 
                        <td></td> 
                      </tr> 
                      <tr> 
                        <th>1.2</th> 
                        <td>2_017</td> 
                        <td>J2SE 1.2</td> 
                        <td>Playground</td> 
                        <td>JSR 52</td> 
                        <td>1.2.2_11</td> 
                        <td>N'est plus soutenu de façon active</td> 
                        <td>2000-2006</td> 
                        <td>l</td> 
                      </tr> 
                      <tr> 
                        <th>1.3</th> 
                        <td>1_29</td> 
                        <td>J2SE 1.3</td> 
                        <td>Kestrel</td> 
                        <td>JSR 58</td> 
                        <td>1.3.1_29</td> 
                        <td>Obsolète</td> 
                        <td>2000-2001</td> 
                        <td></td> 
                      </tr>
                      <tr> 
                        <th>1.4</th> 
                        <td>2_30</td> 
                        <td>J2SE 1.4</td> 
                        <td>Merlin</td> 
                        <td>JSR 59</td> 
                        <td>1.4.2_30</td> 
                        <td>Obsolète</td> 
                        <td>2000-20082</td> 
                        <td></td> 
                      </tr>
                      <tr> 
                        <th>1.5</th> 
                        <td>0_22/0_85</td> 
                        <td>J2SE 5.0</td> 
                        <td>Tiger</td> 
                        <td>JSR 176</td> 
                        <td>1.5.0_22</td> 
                        <td>Obsolète - 5u51 à 5u85 uniquement disponibles avec un support Oracle spécifique</td> 
                        <td>2002-20092</td> 
                        <td>Mai 2015</td> 
                      </tr>
                      <tr> 
                        <th>1.6</th> 
                        <td>0_45/0_111</td> 
                        <td>Java SE 6</td> 
                        <td>Mustang</td> 
                        <td>JSR 270</td> 
                        <td>6u113</td> 
                        <td>Obsolète - 6u51 à 6u111 uniquement disponibles avec un support Oracle spécifique2</td> 
                        <td>2005-2013</td> 
                        <td>Déc. 2018</td> 
                      </tr>
                      <tr> 
                        <th>1.7</th> 
                        <td>0_79/0_80</td> 
                        <td>Java SE 7</td> 
                        <td>Dolphin</td> 
                        <td>JSR 336</td> 
                        <td>1.7.0_79</td> 
                        <td>Stable, actuel, version 1.7.0_79 proposée aux utilisateurs2</td> 
                        <td>2011- 2015</td> 
                        <td>Juillet 2022</td> 
                      </tr>
                      <tr> 
                        <th>1.8</th> 
                        <td>0_91</td> 
                        <td>Java SE 8</td> 
                        <td>Kenai</td> 
                        <td>(en) JSR 337</td> 
                        <td>1.8.0_91</td> 
                        <td>Stable, actuel, version 1.8.0_9126 proposée aux utilisateurs</td> 
                        <td>2014-2017</td> 
                        <td></td> 
                      </tr>
                </tbody> 
              </table>                                    
            </div>
      </div>      
      <div class="col-md-3">
        <div class="panel  panel-primary">
          <div class="panel-heading ">Quoi de 9 
          </div>
          <div class="panel-body">
              <div data-example-id="media-alignment"> 
                <div class="media"> 
                  <div class="media-left"> 
                    <a href="#"> <img class="media-object img-rounded" alt="Apprendre cms" src="img/cms-logo_panel.png"> </a> 
                  </div> 
                  <div class="media-body"> 
                    
                    <p>Une nouvelle série 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 img-rounded" alt="Apprendre programmation" src="img/programmation-logo_panel.png"> </a> 
                  </div>
                  <div class="media-body"> 
                    <h4 class="media-heading">Nouvelle Formation en PHP</h4> 
                    <p>Dans la partie de cette formation nous allons apprendre comment manipuler les tableaux. Ensuite on va passer à la partie de 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 img-rounded" alt="Apprendre erp" src="img/erp-logo_panel.png"> </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'installé 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>
      </div>
</div>

<footer>
    <div class="container">    
        <div class="row">     

                     <div class="col-xs-6 col-sm-4 col-md-2">   
                        <div class="h3">Language</div>
                        <ul >
                                <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>
                    </div>    

                     <div class="col-xs-6 col-sm-4 col-md-2">
                        <div class="h3">Framework PHP</div>
                        <ul>
                              <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>
                    </div>  
                    <div class="clearfix visible-xs-block"></div>  
                    <div class="col-xs-6 col-sm-4 col-md-2">
                        <div class="h3">Framework JS </div>
                        <ul>
                              <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>
                    </div>    
                    
                    <div class="clearfix visible-sm-block"></div>
                    <div class="col-xs-6 col-sm-4 col-md-2">
                        <div class="h3">CMS </div>
                        <ul>
                              <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>
                    </div>

                    <div class="clearfix visible-xs-block"></div>
                    <div class="col-xs-6 col-sm-4 col-md-2">
                        <div class="h3">ERP </div>
                        <ul>
                              <li><a href="#">Odoo</a></li>
                              <li><a href="#">Dolibarr</a></li>
                        </ul>
               
                    </div>
                     <div class="col-xs-6 col-sm-4 col-md-2">
                        <div class="h3">Logiciel </div>
                        <ul>
                              <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>
                    </div>    
        </div>                
    </div>  
</footer>

<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> 

Fichier style.css :

 .color-mob-navbar{
	color: white;
}
.position-carousel{
	margin-top: -20px;
}
footer{
    background: #222222;
    color: #ffffff;
}

footer li{
	list-style-type: none;
}

footer li a{
	color: #9d9d9d;
}

.content-fluid{
	max-width: 1200px;
}

.nav > li > a {

    padding: 10px 14px;
}
.navbar {
    border-radius: 0px;
}