22/01/2014, 10:49
|
| | Fecha de Ingreso: mayo-2010
Mensajes: 5
Antigüedad: 14 años, 6 meses Puntos: 0 | |
Respuesta: class"box", class"box-content", class"container", class"container-fluid", Hola gracias, si me falto decir que es bootstrap, y en ese orden de ideas, esas clases que mencione, tienen ya alguns caracteristicas predefinidas?, es decir, por ejemplo el class"box-content", tiene en bootstra ciertos parametros de tamaño y ubicación ya predefinidos?, pre establecidos?, o los debo definir yo, te voy a enviar un ejemplo de un formulario que me dieron de base para otrs, y el punto es que me llamaron la atencio porqu segun el jefe, use divs innecesarios, si no te molesta, agradezco cualquier orientación, por ejemplo mira este formulario:
<!doctype html>
<html>
<head>
</head>
<body>
<div class="container">
<form class="fill-up">
<!-- Inicio del contenido principal de la pagina -->
<div class="main-content">
<!-- Inicio Titulo y subtitulo de la pagina o seccion -->
<div class="container-fluid">
<div class="row-fluid">
<div class="area-top clearfix">
<div class="pull-left header">
<h3 class="title"><i class="icon-th-large"></i> Causación de Pagos </h3>
<h5> Contabilidad </h5>
</div>
</div>
</div>
</div>
<!-- Final Titulo y subtitulo de la pagina o seccion -->
<!-- Inicio del espacio para formularios y controles de la pagina -->
<div class="container-fluid">
<div class="row-fluid">
<div class="">
<div class="box">
<!-- Inicio Titulo de la caja -->
<div class="box-header">
<div class="title">
Consultar Causación de pagos
</div>
<ul class="box-toolbar">
<li class="toolbar-link">
<a data-toggle="modal" href="#modal-anular-confirmacion" class=""><i class="icon-refresh"></i> Actualizar</a>
</li>
<li class="toolbar-link">
<a data-toggle="modal" href="#modal-anular-confirmacion" class=""><i class="icon-file"></i> Nuevo</a>
</li>
<li class="toolbar-link">
<a href="http://www.google.com" class="" data-toggle=""><i class="icon-print"></i> Imprimir</a>
</li>
</ul>
</div>
<!-- Final Titulo de la caja -->
<!-- Inicio ejemplo Caja con una sola columna -->
<div class="box-content">
<div class="row-fluid padded">
<div class="row-fluid">
<div class="span3">
<div class="accordion" id="accordion2">
<!--INICIO FILTROS PRINCIPALES-->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Filtros Principales </a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<br />
<div class="control-group">
<label class="control-label" for="">No. Orden de Pago</label>
<div class="controls">
<input type="text" placeholder=""/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="">No. de Compromiso</label>
<div class="controls">
<input type="text" placeholder=""/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="">No. de Registro Presupuestal</label>
<div class="controls">
<input type="text" placeholder=""/>
</div>
</div>
</div>
</div>
</div>
<!--FIN FILTROS PRINCIPALES-->
<!--INICIO FILTROS SECUNDARIOS-->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> Filtros Secundarios </a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<br />
<div class="control-group">
<label class="control-label" for="">Periodo Presupuestal</label>
<div class="controls">
<select class="select2-container chzn-select" name="colors">
<option value="Alloy orange">Periodo 1</option>
<option value="Antique brass">Periodo 2</option>
<option value="Alabama Crimson">Periodo 3</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="">Tipo de Presupuesto</label>
<div class="controls">
<select class="select2-container chzn-select" name="colors">
<option value="Alloy orange">Tipo 1</option>
<option value="Antique brass">Tipo 2</option>
<option value="Alabama Crimson">Tipo 3</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for=""><br />Imputación</label>
<div class="input-prepend">
<input type="text" placeholder=""readonly>
<a class="add-on" href="#"> <i class="icon-search"></i> </a>
</div>
</div>
<div class="search-dropdown box" >
<div class="box-section">
<div class="news-text">
<span><strong> <!--texto del globo--> </strong></span>
</div>
</div>
</div>
<label class="control-label" for="">Fecha</label>
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<label class="control-label" for=""></label>
<div class="controls">
<input class="datepicker fill-up" type="text" placeholder="Fecha Inicial">
</div>
</div>
</div>
<div class="span6">
<div class="control-group">
<label class="control-label" for=""></label>
<div class="controls">
<input class="datepicker fill-up" type="text" placeholder="Fecha Final">
</div>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="">Centro de Costos</label>
<div class="controls">
<select class="select2-container chzn-select" name="colors2">
<option value="Alloy orange">CC 1</option>
<option value="Antique brass">CC 2</option>
<option value="Alabama Crimson">CC 3</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="">Estado</label>
<div class="controls">
<select class="select2-container chzn-select" name="colors">
<option value="Alloy orange">Estado 1</option>
<option value="Antique brass">Estado 2</option>
<option value="Alabama Crimson">Estado 3</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="">No. de Disponibilidad</label>
<div class="controls">
<input type="text" placeholder=""/>
</div>
</div>
<label class="control-label" for="">Objeto</label>
<div class="controls">
<textarea class="anchoConcepto" placeholder=""></textarea>
</div>
</div>
</div>
</div>
<!--FIN POR IMPUTACION-->
</div>
</div>
<div class="span9">
<div id="dataTables">
<table cellpadding="0" cellspacing="0" border="0" class="dTable responsive">
<thead >
<tr>
<th id="ORDEN">
<div>
No. Orden
</div></th>
<th id="FECHA">
<div>
Fecha
</div></th>
<th id="OBJETO">
<div>
Objeto
</div></th>
<th id="VALOR">
<div>
Valor
</div></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="center"><a href="#">Editar</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Final ejemplo Caja con una sola columna -->
</div>
</div>
</div>
</div>
<!-- Final del espacio para formularios y controles de la pagina -->
</div>
<!-- Final del contenido principal de la pagina -->
</form>
</div>
</body>
</html>
me llamaron la atención por usar </br>, y que hay divs innecesarios, y talvez si, pero como te digo, como no se bien para que sirve cada uno, es posible que halla puesto algunos demas para tratar de conservar la estructura o formato original del formulario. Gracias por la explicacion y la paciencia. |