<!DOCTYPE html> <html xmmls="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <meta http-equiv="content-type"  content="text/html";charset=utf-8/> <title>essai du bootstrap twiter</title>   <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body>     <div class="navbar">      <div  class="navbar-inner">                <a  class="brand" href="/">Mon site</a>                                 <ul class="nav">                   <li ><a href="#">contact</a></li>                   <li ><a href="#">utilisateur</a></li>                   <li><a href="#">recherche</a></li>                      <li><form class="action">                   <input  type="text" class="search-query" placeholder="recherche un article">                   </form></li>                              <li class="dropdown" >               <a href="#" class="dropdown-toggle" data-toggle="dropdown">                 la liste des articles                 <b class="caret"></b>               </a>               <ul class="dropdown-menu">                   <li ><a href="#">contact</a></li>                       <li ><a href="#">utilisateur</a></li>                       <li><a href="#">recherche</a></li>               </ul>               </li>                  </ul>                    </div>     </div> <div class="center">  <center>  <h1>   j'aimerai creer une petite projet   </h1>    <img src="http://lorempixum.com/900/200/nature/" alt=""></center>  </div>   </div class ="container" bgcolor="red">   <!--   <script src="http://code.jquery.com/jquery.js"></script>     <script src="js/bootstrap.min.js"></script>   -->     <form  class="form-horizontal">   <fieldset>   <legend> <p> mais par défaut tout est moche</p> </legend>   <div class="container">        <div class="control-group">         <p>           <label   class="control-label" for="test" > par exemple</label>                      <div class="controls">              <input type="text" name="test" id="test"/>            </div>         </p>           <p>             <label class="control-label"  for="test2" >une serie d'input </label>             <div class="controls">               <input type="text" name="test" id="test"/>             </div>           </p>           <p>             <label  class="control-label" for="test3" > un textarea </label>             <TEXTAREA name="test3"  id="test3" cols="30" rows="10"></TEXTAREA>            </p>       </div>   </div> </fieldset> </form>  <div>   <div class="modal">     <div class="modal-header">         <h3>allert</h3>         <a href="#"   class="close">*</a>     </div>   <div class="modal-body"> <p>vous pouvez pas fermer cette boite</p></div>    </div>   <div class="modal-footer">            <a href="#" class="btn">annuler</a>     <a href="#" class="btn btn-primary">ok</a>    </div> </div>    </body>  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/lib/jquery/1.6.2/jquery.min/js"></script> <script type="text/javascript" > jquery(function($){ $(".allert-message.close").live('click',function(){ $(this).parent().slideUp(); return false;  }); $('.modal .close').live('click',function(){ $('.modal-backdrop').fadeOut(); return false;  });   });   </script>   </html>