class"box", class"box-content", class"container", class"container-fluid", class"row"

CALVO_831 · #1 (**permalink**) 22/01/2014, 09:55

Hola, tengo una gran confusion, en mi trabajo debo hacer formularios en html y me exigen usar DIVS con class"box", class"box-content", class"container", class"container-fluid", class"row", class"row-fluid", class"row-fluid padded" y muchos otros, y no se para que sirve cada uno, como se usan, en que momentos y situaciones, y he buscado documentación pero no hay nada claro que realmente explique esto temas, agradezco su orientación.

PHPeros · #2 (**permalink**) 22/01/2014, 09:59

Eeeeee... como si pones class="box-super-mega-container", que todo dependerá de la hoja de estilos que estés aplicando, en este caso con ayuda de BOOSTRAP

pzin · #3 (**permalink**) 22/01/2014, 10:02

PHPeros las clases no son identificadores, porque no puedes identificar un elemento por su clase.

Por lo otro, parecen clases de Bootstrap.

PHPeros · #4 (**permalink**) 22/01/2014, 10:02

Por eso lo edité

pzin · #5 (**permalink**) 22/01/2014, 10:05

Cita:

Iniciado por PHPeros

Por eso lo edité

Sufres de editomanía estilo SO.

jonni09lo · #6 (**permalink**) 22/01/2014, 10:06

Los nombres de la clase dependen de las funcionalidades que quieras dar, pero es más como un ordenamiento que otra cosa.

Por ejemplo puedes crear una clase que centre texto y la llamas text-center, pero no por ello signifique que con solo colo colocar el nombre te va a funcionar de la nada, tienes que escribir las reglas que van asociadas para clase.

Ahora bien eso que estás colocando esta asociado con contenedores. Por ejemplo en Bootstrap

container -> contenedor principal que envuelve los elementos, normalmente tiene unas medidas de 940px
row -> Otro tipo de contenedor principal con medidas fijas que puede tener el valor de 940px
row-fluid -> es una clase que es usada para determinar un ancho del 100% (es usada para sitios responsive)

Por deducción
padded -> algún tipo de padding

No vas a encontrar "estándares" que definen esto ya que depende de las herramientas que uses y los conceptos de lo que implica cada clase varia de acuerdo a la herramienta.

Ahora bien, debes de preguntar que herramienta van a usar (algún framework CSS tipo Bootstrap) para que te documentes o si no, que te definan que es lo que quieren que haga cada clase.

Edito: veo que han empezado la fiesta sin mi

Saludos

CALVO_831 · #7 (**permalink**) 22/01/2014, 10:49

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">


<div class="main-content">

<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>



<div class="container-fluid">
<div class="row-fluid">
<div class="">

<div class="box">


<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>



<div class="box-content">

<div class="row-fluid padded">

<div class="row-fluid">

<div class="span3">

<div class="accordion" id="accordion2">


<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>


<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>  </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>


</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>


</div>

</div>

</div>
</div>

</div>


</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.

jonni09lo · #8 (**permalink**) 22/01/2014, 10:55

Pues en este caso, lo mejor es que revises la documentación respectiva. No hay de otra

Documentación para la versión 2 de Boostrap

Saludos

CALVO_831 · #9 (**permalink**) 22/01/2014, 11:11

si, es bootstrap

mira esto porfa:
Hola gracias, si me falto decir que es bootstrap, y a esto es a lo que me refiero:
<!doctype html>
<html>
<head>
</head>
<body>
<div class="container">
<form class="fill-up">

<div class="main-content">
<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>

<div class="container-fluid">
<div class="row-fluid">
<div class="">

<div class="box">


<div class="box-header">
<div class="title">
Consultar Causación de pagos
</div>

<ul class="box-toolbar">
<li class="toolbar-link">
<a href="http://www.google.com" class="" data-toggle=""><i class="icon-print"></i> Imprimir</a>
</li>
</ul>
</div>

<div class="box-content">

<div class="row-fluid padded">

<div class="row-fluid">

<div class="span3">

<div class="accordion" id="accordion2">

<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. de Registro Presupuestal</label>
<div class="controls">
<input type="text" placeholder=""/>
</div>
</div>

</div>
</div>
</div>
<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 />
<label class="control-label" for="">Objeto</label>
<div class="controls">
<textarea class="anchoConcepto" placeholder=""></textarea>
</div>

</div>
</div>
</div>

</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>

</tr>
</thead>
<tbody>
<tr>
<td class="center"><a href="#">Editar</a></td>
</tr>

</tbody>
</table>
</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>
</div>
</div>

</form>
</div>
</body>
</html>

Gracias por la explicacion y la paciencia.

PHPeros · #10 (**permalink**) 22/01/2014, 11:13

¿Miraste la documentación como dijo jonni09lo?

Creo que no hacía falta el mensaje privado...

CALVO_831 · #11 (**permalink**) 22/01/2014, 11:16

gracias jonni09lo.

jonni09lo · #12 (**permalink**) 22/01/2014, 11:19

Cita:

Iniciado por PHPeros

¿Miraste la documentación como dijo jonni09lo?

Creo que no hacía falta el mensaje privado...

A ti también te envió un MP?

y lo peor de todo es que ni pide el favor, solo copió y pegó como si estuviésemos en la obligación de responderle

Saludos

CALVO_831 · #13 (**permalink**) 22/01/2014, 14:26

Gracias a todos, estoy leyendo todo lo de bootstrap, y por si acaso, es la primera vez que uso un foro de estos.