<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <form class="form-horizontal"> <h2>Paramètres généraux</h2> <fieldset> <!-- Form Name --> <legend>Modifiez ci-dessous l'emplacement des différents éléments de votre site</legend> <div class="row"> <!-- Text input--> <div class="control-group span6"> <label class="control-label" for="Titre1">Titre de la page</label> <div class="controls"> <input id="Titre1" name="Titre1" placeholder="SeliwebCom" class="input-medium" type="text"> <p class="help-block">titre affiché dans l'onglet de la page</p> </div> </div> <!-- Button Drop Down --> <div class="control-group span6"> <label class="control-label span6" for="choix_langue">Choix de la langue</label> <div class="controls"> <div class="input-append"> <input id="choix_langue" name="choix_langue" class="input-medium" placeholder="Français" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Choix <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Français</a></li> <li><a href="#">Anglais</a></li> </ul> </div> </div> </div> </div> </div> <!-- Multiple Radios --> <div class="control-group"> <label class="control-label" for="radios">Affichage de la page</label> <div class="controls"> <label class="radio" for="radios-0"> <input name="radios" id="radios-0" value="Plein écran" checked="checked" type="radio"> Plein écran </label> <label class="radio" for="radios-1"> <input name="radios" id="radios-1" value="80%" type="radio"> 80% </label> </div> </div> <!-- File Button --> <div class="control-group"> <label class="control-label" for="image_banniere">Image qui sera affichée dans la bannière</label> <div class="controls"> <input id="image_banniere" name="image_banniere" class="input-file" type="file"> </div> </div> <!-- Multiple Radios (inline) --> <div class="control-group"> <label class="control-label" for="choix_defilement">Affichage du texte défilant</label> <div class="controls"> <label class="radio inline" for="choix_defilement-0"> <input name="choix_defilement" id="choix_defilement-0" value="Oui" checked="checked" type="radio"> Oui </label> <label class="radio inline" for="choix_defilement-1"> <input name="choix_defilement" id="choix_defilement-1" value="Non" type="radio"> Non </label> </div> </div> <!-- Textarea --> <div class="control-group"> <label class="control-label" for="texte_defilant">Contenu du texte défilant</label> <div class="controls"> <textarea id="texte_defilant" name="texte_defilant">Bienvenue sur notre site !</textarea> </div> </div> <!-- Multiple Radios (inline) --> <div class="control-group"> <label class="control-label" for="baniere">Nombre de blocs</label> <div class="controls"> <label class="radio inline" for="baniere-0"> <input name="baniere" id="baniere-0" value="1" checked="checked" type="radio"> 1 </label> <label class="radio inline" for="baniere-1"> <input name="baniere" id="baniere-1" value="2" type="radio"> 2 </label> <label class="radio inline" for="baniere-2"> <input name="baniere" id="baniere-2" value="3" type="radio"> 3 </label> <label class="radio inline" for="baniere-3"> <input name="baniere" id="baniere-3" value="4" type="radio"> 4 </label> </div> </div> <!-- Button Drop Down --> <div class="control-group"> <label class="control-label" for="position_menu_compte">Position du menu "Compte"</label> <div class="controls"> <div class="input-append"> <input id="position_menu_compte" name="position_menu_compte" class="input-xlarge" placeholder="comme sous-menu de la barre de menu" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Choix <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">comme sous-menu de la barre de menu</a></li> <li><a href="#">dans la colonne de gauche de la section</a></li> <li><a href="#">dans la colonne de droite de la section</a></li> </ul> </div> </div> </div> </div> <!-- Button Drop Down --> <div class="control-group"> <label class="control-label" for="placement_annonces">Placement des annonces</label> <div class="controls"> <div class="input-append"> <input id="placement_annonces" name="placement_annonces" class="input-small" placeholder="sur 2 colonnes" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Choix <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">sur 2 colonnes</a></li> <li><a href="#">sur 3 colonnes</a></li> <li><a href="#">sur 4 colonnes</a></li> </ul> </div> </div> </div> </div> <!-- Button Drop Down --> <div class="control-group"> <label class="control-label" for="notifications">Position des notifications</label> <div class="controls"> <div class="input-append"> <input id="notifications" name="notifications" class="input-small" placeholder="à gauche" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Choix <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">à gauche</a></li> <li><a href="#">à droite</a></li> </ul> </div> </div> </div> </div> <!-- Button Drop Down --> <div class="control-group"> <label class="control-label" for="couleur_fond_banniere">Couleur de fond</label> <div class="controls"> <div class="input-append"> <input id="couleur_fond_banniere" name="couleur_fond_banniere" class="input-small" placeholder="blanc" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Choix <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">blanc</a></li> <li><a href="#">bleu clair</a></li> <li><a href="#">vert clair</a></li> </ul> </div> </div> </div> </div> <!-- Button Drop Down --> <div class="control-group"> <label class="control-label" for="couleur_texte_banniere">Couleur du texte</label> <div class="controls"> <div class="input-append"> <input id="couleur_texte_banniere" name="couleur_texte_banniere" class="input-small" placeholder="noir" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Choix <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">noir</a></li> <li><a href="#">rouge</a></li> <li><a href="#">bleu</a></li> </ul> </div> </div> </div> </div> <!-- Button Drop Down --> <div class="control-group"> <label class="control-label" for="place_menu">Position du menu</label> <div class="controls"> <div class="input-append"> <input id="place_menu" name="place_menu" class="input-large" placeholder="menu en haut/login en bas" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Choix <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">menu en haut/login en bas</a></li> <li><a href="#">login en bas/menu en haut</a></li> </ul> </div> </div> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="control-group"> <label class="control-label" for="menu_footer">Composition du menu de pied de page</label> <div class="controls"> <label class="checkbox inline" for="menu_footer-0"> <input name="menu_footer" id="menu_footer-0" value="Logo de l'association" type="checkbox"> Logo de l'association </label> <label class="checkbox inline" for="menu_footer-1"> <input name="menu_footer" id="menu_footer-1" value="Licence" type="checkbox"> Licence </label> <label class="checkbox inline" for="menu_footer-2"> <input name="menu_footer" id="menu_footer-2" value="Version" type="checkbox"> Version </label> <label class="checkbox inline" for="menu_footer-3"> <input name="menu_footer" id="menu_footer-3" value="logos des technologies" type="checkbox"> logos des technologies </label> <label class="checkbox inline" for="menu_footer-4"> <input name="menu_footer" id="menu_footer-4" value="lien de contact" type="checkbox"> lien de contact </label> </div> </div> <!-- Button (Double) --> <div class="control-group"> <label class="control-label" for="valider"></label> <div class="controls"> <button id="valider" name="valider" class="btn btn-success">Valider</button> <button id="Annuler" name="Annuler" class="btn btn-danger">Annuler</button> </div> </div> </fieldset> </form> </div> </div> </div>

.colonne { display:block; }