S
M
L
Full

Logo

  •                           
                                <nav class="navbar navbar-default" role="navigation" id="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand logo navbar-left" href="#">
                    <span class="logo-img"></span>
                </a>
            </div>
        </div>
    </nav>
                              
                          

Couleurs

  • Orange 1 :  #FE5400
  • Orange 2 :  #D45129
  • Rose :  #E90036
  • Jaune :  #FE9800
  • Vert :  #00A972
  • Noir : #272727
  • Gris 1 : #9A9A9A
  • Gris 2 : #C4C4C4
  • Gris 3 : #F5F5F5
  • Blanc :  #FFFFFF
  • Succès :  #98d07d
  • Alerte :  #ff9523
  • Erreur :  #ee4e4c

Typographie

  • 
                                        <a class="navbar-brand logo navbar-left" href="#">
                    <span class="title">
                        <span class="header-title">Titre de l'<span class="color">application</span></span>
                        <span class="header-desc">Descriptif de l’application</span>
                    </span>
                </a>
                                    
  • 
                                        <h1>Titre 1</h1>
                                    
  • 
                                        <h2>Titre 2</h2>
                                    
  • 
                                        <h3>Titre 3</h3>
    
        <div class="form">
            <h3 class="form-title right"><span>Titre 3 form</span></h3>
        </div>
                                    
  • 
                                        <h4>Titre 4</h4>
                                    
  • 
                                        <h5>Titre 5</h5>
                                    

Composants

Inputs

  • 
                                        <input class="form-control" type="text" placeholder="Hint Text..." />
                                    
  • 
                                    <input class="form-control active" type="text" placeholder="Hint Text..." />
                                    
  • 
                                        <input class="form-control disabled" type="text" placeholder="Hint Text..." disabled />
                                    
  • 
                                        <input type="text" class="form-control form-control-success">
                                    
  • 
                                        <input type="text" class="form-control form-control-warning">
                                    
  • 
                                        <input type="text" class="form-control form-control-danger">
                                    
  • 
                                     <select class="selectpicker">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                </select>
                                    
  • 
                                    <select class="selectpicker" multiple title="Aucun élément choisi">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                </select>
                                    
  • 
                                        <div class="input-group date">
      <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
                                    
  • 
                                    <input class="form-control" id="password" name="password" type="password" placeholder="Votre mot de passe">
                                    

Boutons

  • 
                                    <button type="button" class="btn btn-default">Default</button>
                                    
  • 
                                    <button type="button" class="btn btn-default inverse">Inverse</button>
                                    
  • 
                                    <button type="button" class="btn btn-default small">Small</button>
                                    
  • 
                                    <button type="button" class="btn btn-default smalldark">Small dark</button>
                                    

  • 
                                    <button type="button" class="btn btn-primary">Primary</button>
                                    
  • 
                                        <button type="button" class="btn btn-secondary">Secondary</button>
                                    
  • 
                                        <button type="button" class="btn btn-disabled" disabled>Disabled</button>
                                    
  • 
                                        <div class="actions" style="float:left">
                                <button class="btn btn-default"><img class="picto svg" src="img/icons/impression-orange.svg" alt="impression">Imprimer</button>
                            </div>
                                    

  • Label 1 Label 2 Label 3
  • Label 1 Label 2 Label 3
  • 
                                        <span id="radiogroupbtn">
    						<div class="btn-group" data-toggle="buttons">
    							<label class="btn btn-default active">
    								<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1
    							</label>
    							<label class="btn btn-default">
    								<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
    							</label>
    							<label class="btn btn-default">
    								<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
    							</label>
    						</div>
    					</span>
                                    
  • 
                                        <input id="radio1" type="radio" name="exampleRadios">
                                        <label for="radio1"><span></span></label>
                                        <span id="label">Label 1</span>
                                        <input id="radio2" type="radio" name="exampleRadios">
                                        <label for="radio2"><span></span></label>
                                        <span id="label">Label 2</span>
                                        <input id="radio3" type="radio" name="exampleRadios">
                                        <label for="radio3"><span></span></label>
                                        <span id="label">Label 3</span>
                                    
  • 
                                    <input id="checkbox1" type="checkbox">
                                    <label for="checkbox1"><span></span></label>
                                    <span id="label">Label 1</span>
                                    <input id="checkbox2" type="checkbox">
                                    <label for="checkbox2"><span></span></label>
                                    <span id="label">Label 2</span>
                                    <input id="checkbox3" type="checkbox">
                                    <label for="checkbox3"><span></span></label>
                                    <span id="label">Label 3</span>
                                    
  • 
                                        <label class="switch">
    						  <input type="checkbox">
    						  <div class="slider round"></div>
    						</label>
    						<label class="switch">
    						  <input type="checkbox" checked>
    						  <div class="slider round"></div>
    						</label><label class="switch green">
    						  <input type="checkbox" checked>
    						  <div class="slider round"></div>
    						</label>
                                    

Chargement

  • 
                                        <div class="progress">
                              <div class="progress-bar" role="progressbar" aria-valuenow="70"
                                   aria-valuemin="0" aria-valuemax="100" style="width:70%">
                              </div>
                            </div>
                                    

Pictogrammes (Cliquer sur un pictogramme pour obtenir son code)

  • add aide annulation back burgermenu calendrier chevronfilariane contact document drapeau dropdown editer erreur exportdocument favoris filtre1 filtre2 flechedouble flechesimple home impression info inscription intervertir lock loupe mail moins notification piecejointe pin plus profile refresh save setting share stat telecharger telephone tooltip upload validation
  •                           
                                <img class="svg" src="img/icons/add.svg" alt="add">
                              
                          
  • add aide annulation back burgermenu calendrier chevronfilariane contact document drapeau dropdown editer erreur exportdocument favoris filtre1 filtre2 flechedouble flechesimple home impression info inscription intervertir lock loupe mail moins notification piecejointe pin plus profile refresh save setting share stat telecharger telephone tooltip upload validation
  •                           
                                <img class="svg" src="img/icons/add-orange.svg" alt="add">
                              
                          

Pictogrammes Fontawesome (Cliquer sur un pictogramme pour obtenir son code)

  •                           
                                  <span class="picto">
                        <i class="fa fa-address-book" aria-hidden="true"></i>
                    </span>