Foros del Web » Creando para Internet » HTML »

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

Estas en el tema de class"box", class"box-content", class"container", class"container-fluid", class"row" en el foro de HTML en Foros del Web. 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", ...
  #1 (permalink)  
Antiguo 22/01/2014, 09:55
 
Fecha de Ingreso: mayo-2010
Mensajes: 5
Antigüedad: 13 años, 10 meses
Puntos: 0
Mensaje class"box", class"box-content", class"container", class"container-fluid", class"row"

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.
  #2 (permalink)  
Antiguo 22/01/2014, 09:59
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: class"box", class"box-content", class"container", class"container-fluid",

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
  #3 (permalink)  
Antiguo 22/01/2014, 10:02
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: class"box", class"box-content", class"container", class"container-fluid",

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

Por lo otro, parecen clases de Bootstrap.
  #4 (permalink)  
Antiguo 22/01/2014, 10:02
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: class"box", class"box-content", class"container", class"container-fluid",

Por eso lo edité
  #5 (permalink)  
Antiguo 22/01/2014, 10:05
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: class"box", class"box-content", class"container", class"container-fluid",

Cita:
Iniciado por PHPeros Ver Mensaje
Por eso lo edité
Sufres de editomanía estilo SO.
  #6 (permalink)  
Antiguo 22/01/2014, 10:06
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 6 meses
Puntos: 397
Respuesta: class"box", class"box-content", class"container", class"container-fluid",

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
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.

Última edición por jonni09lo; 22/01/2014 a las 10:12
  #7 (permalink)  
Antiguo 22/01/2014, 10:49
 
Fecha de Ingreso: mayo-2010
Mensajes: 5
Antigüedad: 13 años, 10 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.
  #8 (permalink)  
Antiguo 22/01/2014, 10:55
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 6 meses
Puntos: 397
Respuesta: class"box", class"box-content", class"container", class"container-fluid",

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
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #9 (permalink)  
Antiguo 22/01/2014, 11:11
 
Fecha de Ingreso: mayo-2010
Mensajes: 5
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: class"box", class"box-content", class"container", class"container-fluid",

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


<!-- 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 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.
  #10 (permalink)  
Antiguo 22/01/2014, 11:13
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: class"box", class"box-content", class"container", class"container-fluid",

¿Miraste la documentación como dijo jonni09lo?

Creo que no hacía falta el mensaje privado...
  #11 (permalink)  
Antiguo 22/01/2014, 11:16
 
Fecha de Ingreso: mayo-2010
Mensajes: 5
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: class"box", class"box-content", class"container", class"container-fluid",

gracias jonni09lo.
  #12 (permalink)  
Antiguo 22/01/2014, 11:19
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 6 meses
Puntos: 397
Respuesta: class"box", class"box-content", class"container", class"container-fluid",

Cita:
Iniciado por PHPeros Ver Mensaje
¿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
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #13 (permalink)  
Antiguo 22/01/2014, 14:26
 
Fecha de Ingreso: mayo-2010
Mensajes: 5
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: class"box", class"box-content", class"container", class"container-fluid",

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

Etiquetas: clases, divs
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:55.