HTML - bootstrap

   
Vista:

bootstrap

Publicado por panotti (48 intervenciones) el 19/04/2016 01:05:18
Estoy creando un formulario aplicando bootstrap, pero tengo un problema que no se como centrar los botones exactamente debajo del formulario.
Que clase de bootstrap sirve para esto? si alguien pudiera ayudarme.
Este es el codigo:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
 
<link rel="stylesheet" crossorigin="anonymous"
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
 integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7">
 
<!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous">
</script>
 
<div class="container">
<form class="form-horizontal" role="form" action="guardaprop.php" method="post">
 
<table align="center">
<!--   <TR>
      <td class="sr"><?php echo "Nro Apartamento:" ?></td>
      <td class="sr"><input type="text" name="nroapto" onkeyup="mascara(this,'-',patron,true)" size="5" maxlength="5" /></td>
   </TR>
-->
  <div class="form-group">
    <label for="nroapto" class="control-label col-md-2">Nro Apto</label>
    <div class="col-md-10">
      <input type="text" class="form-control" id="nroapto" onkeyup="mascara(this,'-',patron,true)"
             placeholder="Nro Apto" name="nroapto">
    </div>
  </div>
 
 
 
  <div class="form-group">
    <label for="apellidos"  class="control-label col-md-2">Apellidos</label>
    <div class="col-md-10">
      <input type="text" class="form-control" id="apellidos"
             placeholder="Apellidos" name="apellidos">
    </div>
  </div>
 
 
 
  <div class="form-group">
    <label for="nombres" class="col-lg-2 control-label col-md-2" >Nombres</label>
    <div class="col-md-10">
      <input type="text" class="form-control" id="nombres"
             placeholder="Nombres" name="nombres">
    </div>
  </div>
 
 
 
 
  <div class="form-group">
    <label for="cedula" class="col-lg-2 control-label col-md-2">C&eacute;dula</label>
    <div class="col-md-10">
      <input type="integer" class="form-control" id="cedula"
             placeholder="Cedula" name="cedula">
    </div>
  </div>
 
 
  <div class="form-group">
    <label for="email" class="col-lg-2 control-label col-md-2">Email</label>
    <div class="col-md-10">
      <input type="email" class="form-control" id="email" placeholder="Email" name="correo">
    </div>
  </div>
  <div class="container">
		<div class="btn-group">
              <button type="submit" class="btn btn-primary" name="action" class="btn btn-primary">Enviar</button>
			  <button type="reset" value="Deshacer"  class="btn btn-primary">Deshacer</button>
			  <button TYPE="button" VALUE="Salir" ONCLICK="window.location.href='menu1.php'" class="btn btn-primary">Salir</button>
		</div>
  </div>

y este el formulario en sí:

formulario
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
información
Otras secciones de LWP con contenido de HTML
- Código fuente de HTML
- Cursos de HTML
- Temas de HTML
- Chat de HTML
información
Códigos de HTML
- Generar marquesina
- Botón En 3D!
- Numeros a letra

bootstrap

Publicado por panotti (48 intervenciones) el 19/04/2016 01:32:39
Ya resolví el asunto, solo le di el align center y listo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Alejandro

bootstrap

Publicado por Alejandro (4 intervenciones) el 19/04/2016 09:01:48
Hola panotti,

a simple vista veo que no usas class="row" por ningún lado y en el siguiente código:

1
2
3
4
5
6
7
<div class="container">
	<div class="btn-group">
                  <button type="submit" class="btn btn-primary" name="action" class="btn btn-primary">Enviar</button>
		  <button type="reset" value="Deshacer"  class="btn btn-primary">Deshacer</button>
		  <button TYPE="button" VALUE="Salir" ONCLICK="window.location.href='menu1.php'" class="btn btn-primary">Salir</button>
	</div>
</div>

No usas bootstrap para centrar ni para darle una clase o decirle que se coloque por columnas como haces con el resto del código. Te recomiendo que eches un vistazo al apartado buttons en la página oficial de bootstrap, que propone ejemplos y soluciones para una buena configuración.

A grosso modo te comento que debes usar el atributo row para diferenciar los divs y que no se solapen. Además, sería conveniente usar los col y si aun así no te gusta como queda, meter "center" en los css.

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

bootstrap

Publicado por panotti (48 intervenciones) el 19/04/2016 17:10:27
Hola Alejandro. Gracias por contestar busqué por la pagina oficial pero no logro entender donde colocar el "row" podrías explicarme por favor. Dónde debo colocar el row en los buttons?

este es el codigo:
1
2
3
4
5
6
7
<div class="container" align="center">
		<div class="btn-group">
              <button type="submit" class="btn btn-primary" name="action" class="btn btn-primary">Enviar</button>
			  <button type="reset" value="Deshacer"  class="btn btn-primary">Deshacer</button>
			  <button type="button" VALUE="Salir" ONCLICK="window.location.href='menu1.php'" class="btn btn-primary">Salir</button>
		</div>
  </div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

bootstrap

Publicado por panotti (48 intervenciones) el 19/04/2016 17:31:09
Hola Alejandro. Estaba observando este video:


y apliqué el codigo y creo que esta mucho mejor.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

bootstrap

Publicado por panotti (48 intervenciones) el 19/04/2016 18:43:02
Que tal, bueno ahora ya el formulario tiene diseño responsive, pero necesito que se desplieguen unos registros debajo del formulario, ahora ¿que tratamiento deberia darle a los registros para que sean responsive igualmente? Alli necesito tu ayuda, por favor o dame una idea y la ire aplicando.

este es le formulario pero los registros estan mal ubicados y la letra esta muy gruesa y en negritas.

formulario

este es el codigo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<div class="container">
<form class="form-horizontal" role="form" action="guardaprop.php" method="post">
 
<!--   <TR>
      <td class="sr"><?php echo "Nro Apartamento:" ?></td>
      <td class="sr"><input type="text" name="nroapto" onkeyup="mascara(this,'-',patron,true)" size="5" maxlength="5" /></td>
   </TR>
-->
  <div class="form-group">
    <label for="nroapto" class="control-label col-md-2">Nro Apto</label>
    <div class="col-md-10">
      <input type="text" class="form-control" id="nroapto" onkeyup="mascara(this,'-',patron,true)"
             placeholder="Nro Apto" name="nroapto">
    </div>
  </div>
 
 
 
  <div class="form-group">
    <label for="apellidos"  class="control-label col-md-2">Apellidos</label>
    <div class="col-md-10">
      <input type="text" class="form-control" id="apellidos"
             placeholder="Apellidos" name="apellidos">
    </div>
  </div>
 
 
 
  <div class="form-group">
    <label for="nombres" class="col-lg-2 control-label col-md-2" >Nombres</label>
    <div class="col-md-10">
      <input type="text" class="form-control" id="nombres"
             placeholder="Nombres" name="nombres">
    </div>
  </div>
 
 
 
 
  <div class="form-group">
    <label for="cedula" class="col-lg-2 control-label col-md-2">C&eacute;dula</label>
    <div class="col-md-10">
      <input type="integer" class="form-control" id="cedula"
             placeholder="Cedula" name="cedula">
    </div>
  </div>
 
 
  <div class="form-group">
    <label for="email" class="col-lg-2 control-label col-md-2">Email</label>
    <div class="col-md-10">
      <input type="email" class="form-control" id="email" placeholder="Email" name="correo">
    </div>
  </div>
 
  <div class="container" align="center">
		<div class="row">
		  <div class="col-md-6">
              <button type="submit" class="btn btn-primary" name="action" class="btn btn-primary">Enviar</button>
			  <button type="reset" value="Deshacer"  class="btn btn-primary">Deshacer</button>
			  <button type="button" VALUE="Salir" ONCLICK="window.location.href='menu1.php'" class="btn btn-primary">Salir</button>
		  </div>
		</div>
  </div>
 
<!--    <td><INPUT TYPE="BUTTON" VALUE="Exportar a Excel"/></td>
-->
   </tr>
</table>
<div class="container">
  <label class="col-lg-4 control-label col-md-2">NroApto</label>
  <label class="col-lg-4 control-label col-md-2">Apellidos</label>
  <label class="col-lg-4 control-label col-md-2">Nombres</label>
</div>
<?php
$query="SELECT * FROM propietarios ORDER BY nroapto LIMIT '$TAMANO_PAGINA' OFFSET '$inicio'";//OJO
$result = pg_query($connect,$query);
if($result):
 
while ($listado   = @pg_fetch_array($result)):
       $nroapto   = $listado['nroapto'];
	   $apellidos = strtoupper($listado['apellidos']);
	   $nombres   = strtoupper($listado['nombres']);
	   $cedula    = $listado['cedula'];
 echo"<div class='container'>
       <div class='form-group' align='center'>
         <div class='col-md-10' align='center'>
			 <label class='col-lg-2 control-label col-md-2' href='modificaprop.php?cod=$nroapto'>$nroapto</label>
			 <label class='col-lg-2 control-label col-md-2'>$apellidos</label>
			 <label class='col-lg-2 control-label col-md-2'>$nombres</label>
         </div>
       </div>
	  </div>";
?>
<?php
 
 
endwhile;
endif;
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar