Hi Thierry,
Thank you very much. The HTML in FIC looks very nice.
>Hi Dmitry,
>
>Attached are 2 screenshots: a sample VFP form and its Bootstrap HTML rendered by FoxInCloud;
>
>You may find similarities with your case.
>
>HTML is below (FoxInCloud adds its own, non-bootstrap CSS classes; just disregard them):
>
><!-- Généré le 03/08/2017 19:07:02 en 2,0 secs. par FoxInCloud version 2.25.0-beta.6 du 18/07/2017 16:08:49 /-->
><div id="div_scx" class="div_scx bootstrap" style="position:relative;">
> <span id="div_scx-waitpic" class="fa fa-2x fa-spinner fa-pulse" aria-hidden="true" style="position:absolute;display:none;">
> </span>
> <nav class="navbar navbar-default navbar-tabs">
> <ul id="div_scx-pageframe1_tabs" class="nav nav-tabs" role="tablist">
> <li role="presentation" id="div_scx-pageframe1-page1_tab" class="active" >
> <a role="tab" data-toggle="tab" href="#div_scx-pageframe1-page1">ETAT-CIVIL</a>
> </li>
> <li role="presentation" id="div_scx-pageframe1-page3_tab" class="" >
> <a role="tab" data-toggle="tab" href="#div_scx-pageframe1-page3">2) ETAT-CIVIL (SUITE)</a>
> </li>
> <li role="presentation" id="div_scx-pageframe1-page2_tab" class="etatciv-archives" disabled >
> <a role="tab" data-toggle="tab" disabled href="#div_scx-pageframe1-page2"></a>
> </li>
> </ul>
> </nav>
> <div class="tab-content">
> <div id="div_scx-pageframe1-page1" class="div_scx-pageframe1-page1 tab-pane active" role="tabpanel">
> <div class="container-fluid">
> <fieldset class="row">
> <div class="form-group awBSgrp010 p002">
> <div class="form-inline awBSgrp010 p002">
> <select id="div_scx-pageframe1-page1-genre1" class="div_scx-pageframe1-page1-genre1 form-control awBS-NGmember" tabindex="34" size="1" autocomplete="off">
> <option>Monsieur</option>
> <option>Madame</option>
> </select>
> <input type="text" id="div_scx-pageframe1-page1-txtnom35" class="div_scx-pageframe1-page1-txtnom35 form-control awBS-NGmember" title="Nom patronymique" tabindex="35" autocomplete="off" placeholder="Nom patronymique">
> <div class="text-left form-group awBSgrp-prenom1">
> <label id="div_scx-pageframe1-page1-lblprenom" class="div_scx-pageframe1-page1-lblprenom control-label awBS-NGmember">Prénom
> </label>
> <input type="text" id="div_scx-pageframe1-page1-prenom1" class="div_scx-pageframe1-page1-prenom1 form-control awBS-NGmember" title="Prénom usuel" tabindex="36" autocomplete="off" placeholder="Prénom usuel">
> </div>
> </div>
> </div>
> <div class="form-horizontal awBSgrp-prenoms1 p003">
> <div class="text-left form-group">
> <label id="div_scx-pageframe1-page1-lblprenoms" class="div_scx-pageframe1-page1-lblprenoms control-label col-sm-2">Prénoms
> </label>
> <div class="col-sm-10">
> <input type="text" id="div_scx-pageframe1-page1-prenoms1" class="div_scx-pageframe1-page1-prenoms1 form-control" title="Autres prénoms" tabindex="37" autocomplete="off" placeholder="Autres prénoms">
> </div>
> </div>
> </div>
> <div class="form-horizontal awBSgrp-txtprofes38 p004">
> <div class="text-left form-group">
> <label id="div_scx-pageframe1-page1-lblprofessi4" class="div_scx-pageframe1-page1-lblprofessi4 control-label col-sm-2">Profession
> </label>
> <div class="col-sm-10">
> <input type="text" id="div_scx-pageframe1-page1-txtprofes38" class="div_scx-pageframe1-page1-txtprofes38 form-control" tabindex="38" autocomplete="off" placeholder="Profession">
> </div>
> </div>
> </div>
> <div class="form-horizontal awBSgrp005 p005">
> <div class="text-left form-group">
> <label id="div_scx-pageframe1-page1-lbldate10" class="div_scx-pageframe1-page1-lbldate10 control-label col-sm-2">Naissance
> </label>
> <div class="col-sm-10">
> <div class="form-inline awBSgrp012">
> <input type="date" id="div_scx-pageframe1-page1-datenaiss1" class="div_scx-pageframe1-page1-datenaiss1 awDate form-control awBS-NGmember" tabindex="39" autocomplete="off" placeholder="Naissance" value=" / /">
> <div class="text-left form-group awBSgrp-lieunaiss">
> <label id="div_scx-pageframe1-page1-lbllieu_de_11" class="div_scx-pageframe1-page1-lbllieu_de_11 control-label awBS-NGmember">Lieu
> </label>
> <input type="text" id="div_scx-pageframe1-page1-lieunaiss" class="div_scx-pageframe1-page1-lieunaiss form-control awBS-NGmember" title="Commune ou code postal" tabindex="40" autocomplete="off" placeholder="Commune ou code postal">
> </div>
> <div class="text-left form-group awBSgrp-nation">
> <label id="div_scx-pageframe1-page1-label1" class="div_scx-pageframe1-page1-label1 control-label awBS-NGmember">Nationalité
> </label>
> <input type="text" id="div_scx-pageframe1-page1-nation" class="div_scx-pageframe1-page1-nation form-control awBS-NGmember" tabindex="41" autocomplete="on" placeholder="Nationalité">
> </div>
> </div>
> </div>
> </div>
> </div>
> <div id="div_scx-pageframe1-page1-testament1" class="div_scx-pageframe1-page1-testament1" style="display:none;">
> <div class="form-horizontal awBSgrp001 p001">
> <div class="text-left form-group">
> <label id="div_scx-pageframe1-page1-testament1-lbltestamen34" class="div_scx-pageframe1-page1-testament1-lbltestamen34 control-label col-sm-1">Testament
> </label>
> <div class="col-sm-9">
> <div class="form-inline awBSgrp-cbotestament42">
> <select id="div_scx-pageframe1-page1-testament1-cbotestament42" class="div_scx-pageframe1-page1-testament1-cbotestament42 form-control awBS-NGmember" tabindex="43" size="1" autocomplete="off">
> <option selected="selected"> </option>
> <option disabled>Authentique</option>
> <option disabled>Olographe</option>
> <option disabled>Mystique</option>
> </select>
> <input type="date" id="div_scx-pageframe1-page1-testament1-txtdatetest43" class="div_scx-pageframe1-page1-testament1-txtdatetest43 awDate form-control awBS-NGmember" title="Date du testament" tabindex="44" autocomplete="off" placeholder="Date du testament" value=" / /">
> </div>
> </div>
> </div>
> </div>
> </div>
> <div class="checkbox" id="div_scx-pageframe1-page1-check1_div">
> <label for="div_scx-pageframe1-page1-check1" id="div_scx-pageframe1-page1-check1_lbl" class="div_scx-pageframe1-page1-check1 standard ChkOptLabel">
> <input type="checkbox" id="div_scx-pageframe1-page1-check1" class="div_scx-pageframe1-page1-check1 standard" tabindex="53" size="2" autocomplete="off">PACS
> </label>
> </div>
> <div class="checkbox" id="div_scx-pageframe1-page1-decesliq1_div">
> <label for="div_scx-pageframe1-page1-decesliq1" id="div_scx-pageframe1-page1-decesliq1_lbl" class="div_scx-pageframe1-page1-decesliq1 standard ChkOptLabel" style="display:none;">
> <input type="checkbox" id="div_scx-pageframe1-page1-decesliq1" class="div_scx-pageframe1-page1-decesliq1 standard" style="display:none;" tabindex="55" size="2" autocomplete="off">Décédé(e)
> </label>
> </div>
> <div class="text-left form-group awBSgrp009 p009">
> <label id="div_scx-pageframe1-page1-lblex_conjo28" class="div_scx-pageframe1-page1-lblex_conjo28 control-label">Ex conjoint
> </label>
> <div class="form-inline awBSgrp011">
> <select id="div_scx-pageframe1-page1-genre2" class="div_scx-pageframe1-page1-genre2 form-control awBS-NGmember" tabindex="56" size="1" autocomplete="off">
> <option>Monsieur
> </option>
> <option>Madame
> </option>
> </select>
> <input type="text" id="div_scx-pageframe1-page1-txtnomconj44" class="div_scx-pageframe1-page1-txtnomconj44 form-control awBS-NGmember" title="Nom patronymique" tabindex="57" autocomplete="off" placeholder="Nom patronymique">
> <div class="text-left form-group awBSgrp-txtprenomscon45">
> <label id="div_scx-pageframe1-page1-lblprenoms13" class="div_scx-pageframe1-page1-lblprenoms13 control-label awBS-NGmember">Prénom
> </label>
> <input type="text" id="div_scx-pageframe1-page1-txtprenomscon45" class="div_scx-pageframe1-page1-txtprenomscon45 form-control awBS-NGmember" tabindex="58" autocomplete="off" placeholder="Prénom">
> </div>
> </div>
> </div>
> <div class="form-horizontal awBSgrp007 p010">
> <div class="text-left form-group">
> <label id="div_scx-pageframe1-page1-lbldivorce14" class="div_scx-pageframe1-page1-lbldivorce14 control-label col-sm-2">Divorce
> </label>
> <div class="col-sm-10">
> <div class="form-inline awBSgrp-txtdatemardiv46">
> <input type="date" id="div_scx-pageframe1-page1-txtdatemardiv46" class="div_scx-pageframe1-page1-txtdatemardiv46 awDate form-control awBS-NGmember" tabindex="59" autocomplete="off" placeholder="Divorce" value=" / /">
> <select id="div_scx-pageframe1-page1-combo1" class="div_scx-pageframe1-page1-combo1 form-control awBS-NGmember" tabindex="60" size="1" autocomplete="off">
> <option>T.G.I.
> </option>
> <option>Appel
> </option>
> </select>
> <input type="text" id="div_scx-pageframe1-page1-txtlieumardiv47" class="div_scx-pageframe1-page1-txtlieumardiv47 form-control awBS-NGmember" tabindex="61" autocomplete="off">
> </div>
> </div>
> </div>
> </div>
> </fieldset>
> <div id="div_scx-pageframe1-page1-adreref1" class="div_scx-pageframe1-page1-adreref1">
> <div id="div_scx-pageframe1-page1-adreref1-adrtype1" class="div_scx-pageframe1-page1-adreref1-adrtype1" title="Adresse type">
> <div class="form-horizontal awBSgrp002 p001">
> <div class="text-left form-group">
> <label id="div_scx-pageframe1-page1-adreref1-adrtype1-label2" class="div_scx-pageframe1-page1-adreref1-adrtype1-label2 control-label col-sm-2">Adresse:
> </label>
> <div class="col-sm-10">
> <div class="input-group awBSgrp-adresse">
> <span class="input-group-addon">
> <div id="div_scx-pageframe1-page1-adreref1-adrtype1-adr_type" class="div_scx-pageframe1-page1-adreref1-adrtype1-adr_type img-responsive">
> <span class="fa fa-address-card fa-lg" aria-hidden="true">
> </span>
> </div>
> </span>
> <input type="text" id="div_scx-pageframe1-page1-adreref1-adrtype1-adresse" class="div_scx-pageframe1-page1-adreref1-adrtype1-adresse form-control" tabindex="45" autocomplete="off" onfocus="this.select();">
> </div>
> </div>
> </div>
> </div>
> </div>
> <div class="form-horizontal awBSgrp-txtadresse244 p002">
> <div class="text-left form-group">
> <label id="div_scx-pageframe1-page1-adreref1-lblsuite6" class="div_scx-pageframe1-page1-adreref1-lblsuite6 control-label col-sm-2">Suite
> </label>
> <div class="col-sm-8">
> <input type="text" id="div_scx-pageframe1-page1-adreref1-txtadresse244" class="div_scx-pageframe1-page1-adreref1-txtadresse244 form-control" tabindex="63" autocomplete="off" placeholder="Suite">
> </div>
> </div>
> </div>
> <div class="form-horizontal awBSgrp003 p003">
> <div class="text-left form-group">
> <label id="div_scx-pageframe1-page1-adreref1-lblcommune7" class="div_scx-pageframe1-page1-adreref1-lblcommune7 control-label col-sm-2">Commune
> </label>
> <div class="col-sm-10">
> <div class="form-inline awBSgrp004">
> <div class="input-group awBSgrp-codepostal">
> <span class="input-group-addon">
> <div id="div_scx-pageframe1-page1-adreref1-googlemaps" class="div_scx-pageframe1-page1-adreref1-googlemaps img-responsive awBS-NGmember">
> <span class="fa fa-map-marker fa-lg" aria-hidden="true">
> </span>
> </div>
> </span>
> <input type="text" id="div_scx-pageframe1-page1-adreref1-codepostal" class="div_scx-pageframe1-page1-adreref1-codepostal form-control awBS-NGmember" tabindex="64" autocomplete="off">
> </div>
> <input type="text" id="div_scx-pageframe1-page1-adreref1-commune" class="div_scx-pageframe1-page1-adreref1-commune form-control awBS-NGmember" tabindex="65" autocomplete="off">
> </div>
> </div>
> </div>
> </div>
> <div class="form-group">
> <input type="text" id="div_scx-pageframe1-page1-adreref1-email" class="div_scx-pageframe1-page1-adreref1-email email form-control" title="Adresse mél" tabindex="69" autocomplete="off" placeholder="Adresse mél" onfocus="this.select();">
> </div>
> <div class="form-group">
> <input type="text" id="div_scx-pageframe1-page1-adreref1-telephone1" class="div_scx-pageframe1-page1-adreref1-telephone1 telephone form-control" title="n° de tél" tabindex="66" autocomplete="off" placeholder="n° de tél" onfocus="this.select();">
> </div>
> <div class="form-group">
> <input type="text" id="div_scx-pageframe1-page1-adreref1-email2" class="div_scx-pageframe1-page1-adreref1-email2 email form-control" title="Adresse mél du conjoint" tabindex="73" autocomplete="off" placeholder="Adresse mél du conjoint" onfocus="this.select();">
> </div>
> <div class="form-group">
> <input type="text" id="div_scx-pageframe1-page1-adreref1-telephone4" class="div_scx-pageframe1-page1-adreref1-telephone4 telephone form-control" title="n° du conjoint" tabindex="70" autocomplete="off" placeholder="n° du conjoint" onfocus="this.select();">
> </div>
> </div>
> </div>
> </div>
> <div id="div_scx-pageframe1-page3" class="div_scx-pageframe1-page3 tab-pane" role="tabpanel">
> <div class="container-fluid">
> </div>
> </div>
> <div id="div_scx-pageframe1-page2" class="div_scx-pageframe1-page2 tab-pane" disabled role="tabpanel">
> <div class="container-fluid">
> <div class="row row-002 row-adjoindre">
> <div class="col col-treeview col-xs-12 col-sm-10 text-left">
> <div id="div_scx-pageframe1-page2-treeview" class="div_scx-pageframe1-page2-treeview" tabindex="74">
> </div>
> </div>
> <div class="col col-adjoindre col-xs-7 col-sm-2 text-left">
> <fieldset class="row">
> <div class="form-group awBSgrp-voir p002">
> <div class="btn-group-vertical awBSgrp-voir p002">
> <button type="button" id="div_scx-pageframe1-page2-voir" class="div_scx-pageframe1-page2-voir doo-visualiser btn-default btn" tabindex="76" accesskey="V" disabled>
> <span class="fa fa-eye" aria-hidden="true">
> </span> Voir
> </button>
> <button type="button" id="div_scx-pageframe1-page2-supprimer" class="div_scx-pageframe1-page2-supprimer btn-default btn" tabindex="75" accesskey="S" disabled>
> <span class="fa fa-times" aria-hidden="true">
> </span> Supprimer
> </button>
> </div>
> </div>
> <div class="form-group">
> <button type="button" id="div_scx-pageframe1-page2-renommer" class="div_scx-pageframe1-page2-renommer doo-visualiser btn-default btn" tabindex="78" accesskey="R" disabled>
> <span class="glyphicon glyphicon-checkfa-lg" aria-hidden="true">
> </span> Renommer
> </button>
> </div>
> <div class="form-group">
> <button type="button" id="div_scx-pageframe1-page2-adjoindre" class="div_scx-pageframe1-page2-adjoindre btn-primary btn" title="Adjoindre un fichier existant au dossier en cours" tabindex="77" accesskey="j">
> <span class="fa fa-plus-square" aria-hidden="true">
> </span> Adjoindre
> </button>
> </div>
> </fieldset>
> </div>
> </div>
> </div>
> </div>
> </div>
> <div class="row row-002 row-fermer">
> <div class="col col-lock col-xs-12 col-sm-1 text-left">
> <div id="div_scx-lock" class="div_scx-lock" style="display:none;" title="Vérouillage / déverrouillage de la zone informations">
> <div class="form-group">
> <div class="checkbox" id="div_scx-lock-bouton_div" data-toggle="buttons">
> <label for="div_scx-lock-bouton" id="div_scx-lock-bouton_lbl" class="div_scx-lock-bouton graphical ChkOptLabel active btn btn-info" title="Vérouillage / déverrouillage de la zone informations">
> <input type="checkbox" id="div_scx-lock-bouton" class="div_scx-lock-bouton graphical" title="Vérouillage / déverrouillage de la zone informations" tabindex="79" size="2" autocomplete="off" checked>
> <span class="fa fa-lock" aria-hidden="true">
> </span>
> </label>
> </div>
> <div id="div_scx-lock-image" class="div_scx-lock-image img-responsive" style="display:none;">
> <span class="fa fa-lock" aria-hidden="true">
> </span>
> </div>
> <div id="div_scx-lock-image_dn" class="div_scx-lock-image_dn img-responsive" style="display:none;">
> <span class="fa fa-unlock" aria-hidden="true">
> </span>
> </div>
> <div id="div_scx-lock-image_d" class="div_scx-lock-image_d img-responsive" style="display:none;">
> <span class="fa fa-lock" aria-hidden="true">
> </span>
> </div>
> <div id="div_scx-lock-fleche" class="div_scx-lock-fleche img-responsive" style="display:none;">
> <span class="fa fa-download" aria-hidden="true">
> </span>
> </div>
> </div>
> </div>
> </div>
> <div class="col col-visuactes1 col-xs-12 col-sm-4 text-left">
> <div class="form-group awBSgrp-visuactes1 p001">
> <div class="btn-group awBSgrp-visuactes1 p001">
> <button type="button" id="div_scx-visuactes1" class="div_scx-visuactes1 btn-default btn" style="display:none;" title="Accéder à la liste des actes du client" tabindex="86" accesskey="A">
> <span class="fa fa-eye" aria-hidden="true">
> </span> Actes
> </button>
> <button type="button" id="div_scx-civil" class="div_scx-civil btn-default btn" style="display:none;" title="Confection et édition de l'état civil d'un client, sous forme de comparution à l'acte" tabindex="87" accesskey="E">
> <span class="fa fa-user" aria-hidden="true">
> </span> Etat civil
> </button>
> </div>
> </div>
> </div>
> <div class="col col-changement col-xs-5 col-sm-2 text-left">
> <div class="form-group">
> <button type="button" id="div_scx-changement" class="div_scx-changement btn-default btn" title="Changement de situation maritale" tabindex="89" accesskey="C">
> <span class="fa fa-users" aria-hidden="true">
> </span> Changement
> </button>
> </div>
> </div>
> <div class="col col-vhccmd1 col-xs-5 col-sm-offset-1 col-sm-2 text-left">
> <div class="form-group">
> <button type="button" id="div_scx-vhccmd1" class="div_scx-vhccmd1 btn-default btn" title="Récupération des informations d'une pièce d'identité scannée" tabindex="90" accesskey="I">
> <span class="fa fa-file-text" aria-hidden="true">
> </span> Identité
> </button>
> </div>
> </div>
> <div class="col col-fermer col-xs-12 col-sm-2 text-right">
> <div class="form-group">
> <button type="button" id="div_scx-fermer" class="div_scx-fermer btn-primary btn" title="Fermer le travail en cours" tabindex="85" accesskey="F">
> <span class="fa fa-window-close" aria-hidden="true">
> </span> Fermer
> </button>
> </div>
> </div>
> </div>
></div>
><!--/ Généré le 03/08/2017 19:07:02 en 2,0 secs. par FoxInCloud version 2.25.0-beta.6 du 18/07/2017 16:08:49 -->
>
>
>>Hi,
>>
>>I have not done HTML design with Bootstrap in a long while and now I am struggling with what should be a simple page (attached).
>>
>>The attached image shows the elements of the page on a regular computer screen. Since Bootstrap in mobile design first I need to apply various classes.
>>
>>Should the Employee ID and Employee Name - since they are on the same line - be in the same div class "form-group"? And then the Equipment ID and Equipment Description in another "form-group"?
>>That is, should each line of the page be in a separate "form-group"?
>>
>>Basically if I can understand what classes and how to apply them to the Employee ID and Employee Name, maybe I will figure out the other elements too.
>>
>>TIA for any help.
"The creative process is nothing but a series of crises." Isaac Bashevis Singer
"My experience is that as soon as people are old enough to know better, they don't know anything at all." Oscar Wilde
"If a nation values anything more than freedom, it will lose its freedom; and the irony of it is that if it is comfort or money that it values more, it will lose that too." W.Somerset Maugham
