API tools faq
paste
Guest User

Untitled

a guest
Nov 17th, 2017
90
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <meta name="description" content="">
  8.   <meta name="author" content="">
  9.   <link rel="stylesheet" href="css/bootstrap.min.css">
  10.   <link rel="stylesheet" href="css/style.css">
  11.   <title>Tests Bootstrap</title>
  12. </head>
  13. <body>
  14. <div class="container">
  15.  
  16.   <nav class="navbar navbar-default navbar-fixed-top">
  17.     <div class="container">
  18.       <div class="navbar-header">
  19.         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#monmenu">
  20.           <span class="sr-only">Naviguer dans les menus</span>
  21.           <span class="icon-bar"></span>
  22.           <span class="icon-bar"></span>
  23.           <span class="icon-bar"></span>
  24.         </button>
  25.         <a href="#" class="navbar-brand">Mon Site</a>
  26.       </div>
  27.       <div class="collapse navbar-collapse" id="monmenu">
  28.         <ul class="nav navbar-nav">
  29.           <li class="active"><a href="#">Qui suis-je</a></li>
  30.           <li><a href="#">Mon Parcours</a></li>
  31.           <li><a href="#">Mes hobbies</a></li>
  32.         </ul>
  33.       </div>
  34.     </div>
  35.   </nav>
  36.  
  37.   <div class="row carousel-holder">
  38.     <div class="">
  39.       <div id="jolicarousel" class="carousel slide" data-ride="carousel">
  40.         <ol class="carousel-indicators">
  41.           <li data-target="jolicarousel" data-slide-to="0" class="active"></li>
  42.           <li data-target="jolicarousel" data-slide-to="1"></li>
  43.           <li data-target="jolicarousel" data-slide-to="2"></li>
  44.         </ol>
  45.         <div class="carousel-inner">
  46.           <div class="item active">
  47.             <img src="http://www.lappset.fr/loader.aspx?id=9787929a-3f9a-4fae-b73d-bee3f25e1bdc&w=1600&crop=left,top,1600,600" class="slide-image" alt="Slide 1">
  48.           </div>
  49.           <div class="item">
  50.             <img src="http://www.librairie-papeterie-2000.com/img/librairie-papeterie-senlis.jpg" class="slide-image" alt="Slide 2">
  51.           </div>
  52.           <div class="item">
  53.             <img src="http://www.celio.com/medias/sys_master/images/images/h1a/he5/9009565466654/organisation-EVG.jpg?frz-v943" class="slide-image" alt="Slide 3">
  54.           </div>
  55.         </div>
  56.         <a href="#jolicarousel" class="left carousel-control" data-slide="prev">
  57.           <span class="glyphicon glyphicon-chevron-left"></span>
  58.         </a>
  59.         <a href="#jolicarousel" class="right carousel-control" data-slide="next">
  60.           <span class="glyphicon glyphicon-chevron-right"></span>
  61.         </a>
  62.       </div>
  63.     </div>
  64.   </div>
  65.  
  66.     <h2>Glyphicons</h2>
  67.     <span class="glyphicon glyphicon-bitcoin"></span>
  68.  
  69.     <h2>Système de grille</h2>
  70.     <div class="row">
  71.       <div class="col-md-6 bordure">col-md-6</div>
  72.     </div>
  73.  
  74.     <br/>
  75.  
  76.     <div class="row">
  77.       <div class="col-md-4 col-md-offset-1 bordure">Colonne de gauche</div>
  78.       <div class="col-md-4 col-md-offset-2 bordure">Colonne de droite</div>
  79.     </div>
  80.  
  81.     <br/>
  82.  
  83.     <div class="row">
  84.       <div class="col-md-3">3 Emplacement</div>
  85.       <div class="col-md-4">4 Emplacement</div>
  86.       <div class="col-md-5">5 Emplacement</div>
  87.     </div>
  88.  
  89.     <h2>Classes Row Imbriquées</h2>
  90.     <div class="row">
  91.       <div class="col-md-6">col-6 niveau 1
  92.         <div class="row">
  93.           <div class="col-md-8 bordure">Col-8 Niveau 2</div>
  94.           <div class="col-md-4 bordure">Col-4 Niveau 2</div>
  95.         </div>
  96.       </div>
  97.  
  98.       <div class="col-md-6">Col-6 niveau 1
  99.         <div class="row">
  100.           <div class="col-md-3 bordure">Col-3 Niveau 2</div>
  101.           <div class="col-md-9 bordure">Col-9 Niveau 2</div>
  102.         </div>
  103.       </div>
  104.     </div>
  105.  
  106.     <br/>
  107.  
  108.     <h2>Vignette</h2>
  109.     <div class="row">
  110.       <div class="col-lg-3 col-md-4 col-sm-6">
  111.         <div class="thumbnail">
  112.           <img src="./img/img1.jpg" class="img-responsive img-circle" alt="image 1">
  113.           <div class="caption">
  114.             <p>Legende</p>
  115.           </div>
  116.         </div>
  117.       </div>
  118.  
  119.       <div class="col-lg-3 col-md-4 col-sm-6">
  120.         <div class="thumbnail">
  121.           <img src="./img/img2.jpg" class="img-responsive img-circle" alt="image 2">
  122.           <div class="caption">
  123.             <p>Legende</p>
  124.           </div>
  125.         </div>
  126.       </div>
  127.  
  128.       <div class="col-lg-3 col-md-4 col-sm-6">
  129.         <div class="thumbnail">
  130.           <img src="./img/img3.jpg" class="img-responsive img-circle" alt="image 3">
  131.           <div class="caption">
  132.             <p>Legende</p>
  133.           </div>
  134.         </div>
  135.       </div>
  136.  
  137.       <div class="col-lg-3 col-md-4 col-sm-6">
  138.         <div class="thumbnail">
  139.           <img src="./img/img4.jpeg" class="img-responsive img-circle" alt="image 4">
  140.           <div class="caption">
  141.             <p>Legende</p>
  142.           </div>
  143.         </div>
  144.       </div>
  145.     </div>
  146.  
  147.     <h2>Alignement des textes</h2>
  148.     <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quasi placeat, maiores fugiat illo quas, excepturi sequi? Repudiandae tempore eveniet eum, officia amet accusamus, asperiores dignissimos nemo quaerat officiis soluta.</p>
  149.     <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptas impedit et magnam aliquam nam aliquid dolor esse possimus vel quaerat modi sint tempore sapiente, facere quibusdam, laboriosam omnis maiores!</p>
  150.     <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas maxime atque, ipsam optio quam, eos maiores perspiciatis, saepe assumenda quaerat blanditiis tempore voluptatem molestias doloremque aspernatur nisi similique aut fugiat.</p>
  151.     <p class="text-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos optio quisquam perferendis rem omnis ipsam natus fugit odio dolores delectus esse ipsa, aliquid odit, quam neque! Laudantium dolorum expedita accusamus.</p>
  152.  
  153.     <h2>Coloration de texte</h2>
  154.     <p class="text-warning">Texte d'avertissement</p>
  155.     <p class="text-danger">TexteTexte d'erreur</p>
  156.     <p class="text-info">Texte d'information</p>
  157.     <p class="text-success">Texte de réussite</p>
  158.  
  159.     <h2>Coloration Div</h2>
  160.     <div class="alert alert-warning" role="alert">Message Avertissement</div>
  161.     <div class="alert alert-danger" role="alert">Message Erreur</div>
  162.     <div class="alert alert-info" role="alert">Message Information</div>
  163.     <div class="alert alert-success" role="alert">Message Reussite</div>
  164.  
  165.     <h2>Coloration span</h2>
  166.     <span class="label label-default">Dafault</span>
  167.     <span class="label label-primary">Primary</span>
  168.     <span class="label label-warning">Avertissement</span>
  169.     <span class="label label-danger">Erreur</span>
  170.     <span class="label label-info">Information</span>
  171.     <span class="label label-success">Réussite</span>
  172.  
  173.     <br/><br/><br/>
  174.  
  175.     <h2>Lien notification</h2>
  176.     <a href="#">Message <span class="badge">42</span></a>
  177.     <button type="button" class="btn btn-success" name="button"> Cadeaux <span class="badge">4</span></button>
  178.  
  179.     <h2>Menu Dropdown</h2>
  180.     <div class="dropdown">
  181.       <button type="button"  class="btn btn-default dropdown-toggle" name="button" id="dropdownmenu1" data-toggle="dropdown">
  182.         <span class="glyphicon glyphicon-home"></span>Maison <span class="caret"></span>
  183.       </button>
  184.       <ul class="dropdown-menu" aria-labelledby="dropdownmenu1">
  185.         <li><a href="#">Lannister</a>  </li>
  186.         <li><a href="#">Stark</a></li>
  187.         <li><a href="#">Targaryen</a></li>
  188.         <li href="#" class="divider" role="separator"></li>
  189.         <li><a href="#">Barathéon</a></li>
  190.       </ul>
  191.     </div>
  192.  
  193.     <h2>Onglets</h2>
  194.       <ul class="nav nav-justified nav-tabs">
  195.         <li><a href="#">Films</a></li>
  196.         <li><a href="#">Séries</a></li>
  197.         <li><a href="#">Jeux vidéos</a></li>
  198.       </ul>
  199.     <br><br><br>
  200. </div>
  201.   <!-- Fin de container -->
  202.  
  203.   <script src="js/jquery-3.2.1.min.js"></script>
  204.   <script src="js/bootstrap.js"></script>
  205. </body>
  206. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!