Bootstrap3 : Conlusion

Récapitulatif sur le framework 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>
<!-- ********************* -->
<!-- Barre de menu -->
<!-- ********************* -->
<nav class="navbar navbar-inverse">
    <div class="container">

        <div class="navbar-header ">
            
            <!-- AMELIORATION A AJOUTER POUR LE BOUTON DE RECHERCHE -->    
            <button class="align-search-nav-bar navbar-toggle collapsed" aria-expanded="false" data-target="#SearchMenu" data-toggle="collapse">
                <i class="glyphicon glyphicon-search color-mob-navbar" aria-hidden="true"></i> 
            </button>
            <!-- /AMELIORATION A AJOUTER POUR LE BOUTON DE RECHERCHE -->    
            <a class="navbar-brand title-site" href="#">Apprendre DEV</a>                  
           
            <button class="navbar-toggle collapsed" aria-expanded="false" type="button" data-target="#MainMenu" data-toggle="collapse">
                <span class="glyphicon glyphicon-menu-hamburger color-mob-navbar" aria-hidden="true"></span>
 
            </button>
        </div>

            <!-- formulaire recherche -->
          
        <!-- AMELIORATION A AJOUTER POUR LE FORMULAIRE DE RECHERCHE -->  
        <form class="navbar-form collapse" id="SearchMenu" role="search" aria-expanded="false">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button" data-original-title="" title="">Go!</button>
                </span>
            </div>
        </form>
        <!-- /AMELIORATION A AJOUTER POUR LE FORMULAIRE DE RECHERCHE -->

        <div class="navbar-collapse collapse" id="MainMenu" aria-expanded="false" style="height: 1px;">

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

<!-- ********************* -->
<!-- Carrousel-->
<!-- ********************* -->
<div id="carousel-appdev" class="carousel slide m-t-20" 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">
        <h1>Drupal8 Devenir le Maitre</h1>
      </div>
    </div>
    <div class="item">
      <img src="img/JAVA_carousel.jpg" alt="apprendre JAVA">
      <div class="carousel-caption">
        <h1>Apprendre la POO avec JAVA</h1>
      </div>
    </div>
    <div class="item">
      <img src="img/gimp_carousel.png" alt="apprendre gimp">
      <div class="carousel-caption">
        <h1>FAire ces premiers pas avec Gimp</h1>
      </div>
    </div>
    <div class="item">
      <img src="img/laravel_carousel.png" alt="apprendre laravel">
      <div class="carousel-caption">
        <h1>Découvrir les secrets de Laravel</h1>
      </div>
    </div>
    <div class="item">
      <img src="img/prestashop_carousel.png" alt="apprendre prestashop">
      <div class="carousel-caption">
        <h1>Votre premier E-commerce en 2 click</h1>
      </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>

<!-- ********************* -->
<!-- Contenu-->
<!-- ********************* -->
<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><span class="label label-success">Nouveau</span></p>
                <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 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;
}

.navbar {
    border-radius: 0px;
}

.nav > li > a {
    padding: 10px 14px;
}

.align-search-nav-bar{
	float: left;
	margin-left: 16px;
	z-index: 20
}

.title-site{

    position: absolute;
    text-align: center;
    width: 100%;
    display: block;
}

.m-t-20{
	margin-top:-20px 
}

.carousel-caption
{
	background: #4445C5;
opacity: 0.8;
width: 100%;
left: 0px;
bottom: 0px;
}

.carousel-indicators {

    bottom: -9px;
}