Comment diviser un site Web en 2 colonnes en utilisant le bootstrap?
Je veux diviser une page Web créée avec JSF en deux colonnes, mais j'ai des problèmes car elle ne s'affiche pas comme je le souhaite. Je vais te montrer ce que j'ai.
<h:panelGrid id="panelPpal" columns="2" style="width: 100%">
<h:panelGrid style="width: 100%">
<h:form id="projectForm" class="form-horizontal">
<div class="form-group">
<h:outputLabel id="lblProjectName"
value="#{rDisenyo['seccion.crea.nombre']}"
for="projectName"
class="col-md-3 control-label"/>
<div class="col-md-6">
<h:inputText id="projectName" label="Nombre"
value="#{newProjectBacking.nombreProyecto}"
class="form-control"/>
</div>
</div>
<div class="form-group">
<h:outputLabel for="grosorCristal" value="#{rDisenyo['dialog.avanzadas.grosorCristal']}"
class="col-md-3 control-label"/>
<div class="col-md-6">
<h:selectOneMenu id="grosorCristal"
class="form-control"
label="Grosor del Cristal"
value="#{newProjectBacking.grosorCristal}"
required="true" >
<f:selectItem itemLabel="----------" itemValue="0"/>
<f:selectItem itemLabel="8 #{rDisenyo['grosor.cristal.milimetro']}" itemValue="8"/>
<f:selectItem itemLabel="10 #{rDisenyo['grosor.cristal.milimetro']}" itemValue="10"/>
<f:selectItem itemLabel="12 #{rDisenyo['grosor.cristal.milimetro']}" itemValue="12"/>
</h:selectOneMenu>
</div>
</div>
<div class="form-group">
<h:outputLabel for="ralMenu" id="ralLbl"
value="#{rDisenyo['proyecto.opcionesprevias.ral']}"
class="col-md-3 control-label"/>
<div class="col-md-6">
<h:selectOneMenu id="ralMenu" class="form-control"
value="#{newProjectBacking.ral}"
>
<f:selectItem itemLabel="" itemValue="0"/>
<f:selectItem itemLabel="#{rDisenyo['proyecto.opcionesprevias.ral.blanco']}" itemValue="1"/>
<f:selectItem itemLabel="#{rDisenyo['proyecto.opcionesprevias.ral.crudo']}" itemValue="2"/>
<f:selectItem itemLabel="#{rDisenyo['proyecto.opcionesprevias.ral.anodizado']}" itemValue="3"/>
</h:selectOneMenu>
</div>
</div>
</h:form>
</h:panelGrid>
<h:panelGrid style="width: 100%">
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">#{rDisenyo['instrucciones.title']}</h3>
</div>
<div class="panel-body">
<div class="subtitulo-instruciones">
#{rDisenyo['instrucciones.angulos.grados']}
</div>
#{rDisenyo['instrucciones.angulos.linea1']}<br/>
#{rDisenyo['instrucciones.angulos.linea2']}<br/>
<div class="subtitulo-instruciones">
#{rDisenyo['instrucciones.longitud.title']}
</div>
#{rDisenyo['instrucciones.longitud.linea1']}<br/>
<div class="subtitulo-instruciones">
#{rDisenyo['instrucciones.altura.title']}
</div>
#{rDisenyo['instrucciones.altura.linea1']}<br/>
<div class="subtitulo-instruciones">
#{rDisenyo['instrucciones.recogenizq.title']}
</div>
#{rDisenyo['instrucciones.recogenizq.linea1']}<br/>
</div>
</div>
</div>
<div class="col-md-8">
Eliga el tipo de proyecto:
<h:selectOneRadio id="tipoProyectoRadioButton" value="#{newProjectBacking.tipoProyecto}">
<div class="radio">
<f:selectItem itemValue="1" itemLabel="Proyecto A" />
</div>
<div class="radio">
<f:selectItem itemValue="2" itemLabel="Proyecto B" />
</div>
<div class="radio">
<f:selectItem itemValue="3" itemLabel="Proyecto C" />
</div>
</h:selectOneRadio>
</div>
</h:panelGrid>
</h:panelGrid>
Comme vous pouvez le voir, mon application comprend deux parties: celle de gauche est un formulaire et celle de droite a des instructions et un formulaire différent (je sais qu'elle n'est pas encore dans un formulaire h:). Je veux que le panneau de droite commence au centre de la fenêtre, mais je ne sais pas comment le faire. Merci!
J'ai trouvé une solution ici: Comment diviser un Twitter bootstrap modal en 2 parties
<div class="modal-body row">
<div class="col-md-6">
<!-- Your first column here -->
</div>
<div class="col-md-6">
<!-- Your second column here -->
</div>
</div>
Bootstrap est configuré sur un système de grille, vous pouvez donc couvrir un total de 12 grilles. La façon la plus simple de penser à cela est de diviser votre écran en 3 sections de quantités égales de 4. Tant que votre total de colonnes s'élève à 12, il s'équilibrera et s'affichera correctement à l'écran. Pour centrer la colonne, utilisez la classe bootstrap appelée "text-center". Cela rend tout le contenu de ce centre div dans la colonne lui-même. Exemple:
<div class = "col-md-6 text-center">
<!-- Content goes here -->
</div>
<div class = "col-md-6 text-center">
<!-- Content goes here -->
</div>
Ce qui précède divisera votre contenu en deux colonnes égales et centrera tout le contenu inclus dans le div.
Pour une représentation plus visuelle du système de grille (je recommande de vérifier ceci), regardez ici: http://getbootstrap.com/2.3.2/scaffolding.html