HTML - Diseño responsive bootstrap 3

 
Vista:
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 06/03/2018 11:19:15
Estoy usando bootstrap 3 y hay algunos elementos como los botones que no se redimensionan bien
responsive he añadido el código de 100% en el estilo de los botones.
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
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 06/03/2018 14:37:26
La función btn-block es para que muestre los botones uno debajo del otro?
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
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 06/03/2018 14:39:22
Tengo este problema, se añaden a la derecha y a la izquierda en las líneas de abajo.
D4A7D5CA-528A-43C4-9E3D-4FD8E5D52E49
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
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 06/03/2018 14:45:14
Este sería el código del error

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
<?php
	//NUEVA CONSULTA angel  $stmt = $DB_con->prepare('SELECT userID, userName, userProfession, userPic FROM tbl_users ORDER BY userID DESC');
	$stmt = $DB_con->prepare('SELECT userID, userName, userProfession, userPic FROM tbl_users ORDER BY userID DESC');
	$stmt->execute();
 
	if($stmt->rowCount() > 0)
	{
		while($row=$stmt->fetch(PDO::FETCH_ASSOC))
		{
			extract($row);
			?>
			<div class="col-xs-3">
				<p class="page-header"><?php echo $userName."&nbsp;/&nbsp;".$userProfession; ?></p>
				<img src="user_images/<?php echo $row['userPic']; ?>" class="img-rounded" width="250px" height="250px" />
				<p class="page-header">
				<span>
				<a class="btn btn-info btn-block" href="editform.php?edit_id=<?php echo $row['userID']; ?>" title="click for edit" onclick="return confirm('sure to edit ?')"><span class="glyphicon glyphicon-edit"></span> Edit</a>
 
                    <a class="btn btn-danger btn-block" href="?delete_id=<?php echo $row['userID']; ?>" title="click for delete" onclick="return confirm('sure to delete ?')"><span class="glyphicon glyphicon-remove-circle"></span> Delete</a>
 
                <a class="btn btn-danger btn-block" href="editformtrabajotodos.php?mostrartrabajos_id=<?php echo $row['userID']; ?>" title="Mostrar todos sus trabajos" onclick="¿Quieres mostrar?')"><span class="glyphicon glyphicon-edit"></span> Mostrar todos sus trabajos</a>
				</span>
				</p>
			</div>
			<?php
		}
	}
	else
	{
		?>
        <div class="col-xs-12">
        	<div class="alert alert-warning">
            	<span class="glyphicon glyphicon-info-sign"></span> &nbsp; No Data Found ...
            </div>
        </div>
        <?php
	}
 
?>
</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
Imágen de perfil de Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por Lopez (271 intervenciones) el 06/03/2018 15:08:43
Angel,

btn-block ocupa el ancho disponible.
Creo como muchos, novicios o avezados, no entiendes las formas básicas de uso en BS.
Lo que explico, puedes encontrarlo con mas detalle en: https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Veras xs-* aplica SOLO a dispositivos móviles, de pantallas menores a los 768px,
entonces lo que estás indicando es que se muestre en esta resolución, columnas de un 25% de ancho,
recordemos boostrap trabaja en 12 columnas, por lo cual seria un ancho de 3 columnas lo que estas especificando,
primeramente súper incomodo de ver y manejar.
Si quisieras hacer mas legible y cómoda la visualización cambia:

1
<div class="col-xs-3">
a:
1
<div class="col-xs-6 col-sm-4 col-lg-3">

En mi código sugerido incluyo otras clases : col-sm y col-lg, estas traen optimización para ser vistas en pantallas mayores.
Nos cuentas que tal,
Saludos!
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
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 06/03/2018 21:29:13
FF58CB26-2243-400B-AA82-4CD7EE106B5D


Este es el resultado
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
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 06/03/2018 21:36:38
Igual es porque te he enviado código de menos:

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
100
101
102
103
104
105
106
107
108
109
<?php
 
	require_once 'dbconfig.php';
 
	if(isset($_GET['delete_id']))
	{
		// select image from db to delete
		$stmt_select = $DB_con->prepare('SELECT userPic FROM tbl_users WHERE userID =:uid');
		$stmt_select->execute(array(':uid'=>$_GET['delete_id']));
		$imgRow=$stmt_select->fetch(PDO::FETCH_ASSOC);
		unlink("user_images/".$imgRow['userPic']);
 
		// it will delete an actual record from db
		$stmt_delete = $DB_con->prepare('DELETE FROM tbl_users WHERE userID =:uid');
		$stmt_delete->bindParam(':uid',$_GET['delete_id']);
		$stmt_delete->execute();
 
		header("Location: index2.php");
	}
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Partes de trabajo</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
</head>
 
<body>
 
<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
 
        <div class="navbar-header">
            <a class="navbar-brand" href="index2" title='Usuarios'>Usuarios</a>
        </div>
 
    </div>
</div>
 
<div class="container">
 
	<div class="page-header">
    	<h1 class="h2">Todos los usuarios / <a class="btn btn-default" href="addnew.php">  <span class="glyphicon glyphicon-plus"></span> &nbsp; add new </a></h1>
    </div>
 
<br />
 
<div class="row">
<?php
	//NUEVA CONSULTA angel  $stmt = $DB_con->prepare('SELECT userID, userName, userProfession, userPic FROM tbl_users ORDER BY userID DESC');
	$stmt = $DB_con->prepare('SELECT userID, userName, userProfession, userPic FROM tbl_users ORDER BY userID DESC');
	$stmt->execute();
 
	if($stmt->rowCount() > 0)
	{
		while($row=$stmt->fetch(PDO::FETCH_ASSOC))
		{
			extract($row);
			?>
			<div class="col-xs-3">
            <!--><div class="col-xs-6 col-sm-4 col-lg-3"></-->
				<p class="page-header"><?php echo $userName."&nbsp;/&nbsp;".$userProfession; ?></p>
				<img src="user_images/<?php echo $row['userPic']; ?>" class="img-rounded" width="250px" height="250px" />
				<p class="page-header">
				<span>
				<a class="btn btn-info" href="editform.php?edit_id=<?php echo $row['userID']; ?>" title="click for edit" onclick="return confirm('sure to edit ?')"><span class="glyphicon glyphicon-edit"></span> Edit</a>
 
                    <a class="btn btn-danger" href="?delete_id=<?php echo $row['userID']; ?>" title="click for delete" onclick="return confirm('sure to delete ?')"><span class="glyphicon glyphicon-remove-circle"></span> Delete</a>
 
                <a class="btn btn-danger" href="editformtrabajotodos.php?mostrartrabajos_id=<?php echo $row['userID']; ?>" title="Mostrar todos sus trabajos" onclick="¿Quieres mostrar?')"><span class="glyphicon glyphicon-edit"></span> Mostrar todos sus trabajos</a>
				</span>
				</p>
			</div>
			<?php
		}
	}
	else
	{
		?>
        <div class="col-xs-12">
        	<div class="alert alert-warning">
            	<span class="glyphicon glyphicon-info-sign"></span> &nbsp; No Data Found ...
            </div>
        </div>
        <?php
	}
 
?>
</div>
 
 
 
<div class="alert alert-info">
    <strong>Empresa</strong> <a href="http://www.empresa.com">Empresa</a>!
</div>
 
</div>
 
 
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap/js/bootstrap.min.js"></script>
 
 
</body>
</html>
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
Imágen de perfil de Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por Lopez (271 intervenciones) el 07/03/2018 01:04:47
angel,

Revisa la documentación sugerida antes de insistir con algo que ya te fue respondido,
esto que quede para futuras preguntas. Lectura recomendada: https://getbootstrap.com/docs/4.0/layout/grid/
Veras, al no leer ni entender, no comprendes que estas innecesariamente ANIDANDO divs,
al hacer esto y asignarles un ancho de columna, el código entiende que dentro de un div de ancho 6, ocupara una porción de esos 6,
haciéndolos verse restringidos en tamaño y súper incómodos a la visual.

Ej:

1
2
3
4
5
<div class="row"><!-- ROWS-->
      <div class="col-6 "><p>Ancho 6</p>
         <div class="col-6 "><p>Ancho 6 dentro de una col 6. Ocupara la mitad de 6, es decir 3.</p>
      </div>
</div>

Aquí el código fuente que necesitas:

1
2
3
4
5
6
7
<div class="container-fluid"><!-- CONTAINER-->
    <div class="row"><!-- ROWS-->
      <div class="col-6 col-sm-6 col-lg-4 bg-success"><p>col-6 col-sm-9 col-lg-4</p> <button type="button" class="btn btn-danger btn-block">Button 1</button> </div>
      <div class="col-6 col-sm-5 col-lg-4 bg-warning"><p>col-6 col-sm-3 col-lg-4</p> <button type="button" class="btn btn-basic btn-block">Button 1</button> <button type="button" class="btn btn-primary btn-block">Button 1</button> </div>
       <div class="col-6 col-sm-3 col-lg-4 bg-primary"><p>col-6 col-sm-3 col-lg-4</p> <button type="button" class="btn btn-warning btn-block">Button 1</button> </div>
    </div><!-- / ROWS -->
  </div><!-- / CONTAINER-->


Demo Ejemplo : https://codepen.io/lowpez/pen/aqeWEV

Saludos!
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
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 07/03/2018 13:53:13
Crees que esa es la mejor manera de mostrar este tipo de información?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-2
Comentar
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 07/03/2018 14:47:40
Aparece en rojo la linea, ¿No es compatible con bootstrap 3?
<div class="row">

y los cierres finales.

</div>


<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap/js/bootstrap.min.js"></script>


</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-2
Comentar
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 07/03/2018 14:21:29
Algo debo de estar haciendo mal:


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
100
101
102
103
104
105
106
107
108
109
110
111
112
<?php
 
	require_once 'dbconfig.php';
 
	if(isset($_GET['delete_id']))
	{
		// select image from db to delete
		$stmt_select = $DB_con->prepare('SELECT userPic FROM tbl_users WHERE userID =:uid');
		$stmt_select->execute(array(':uid'=>$_GET['delete_id']));
		$imgRow=$stmt_select->fetch(PDO::FETCH_ASSOC);
		unlink("user_images/".$imgRow['userPic']);
 
		// it will delete an actual record from db
		$stmt_delete = $DB_con->prepare('DELETE FROM tbl_users WHERE userID =:uid');
		$stmt_delete->bindParam(':uid',$_GET['delete_id']);
		$stmt_delete->execute();
 
		header("Location: index2.php");
	}
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Partes de trabajo</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
</head>
 
<body>
 
<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
 
        <div class="navbar-header">
            <a class="navbar-brand" href="index2" title='Usuarios'>Usuarios</a>
        </div>
 
    </div>
</div>
 
<div class="container">
 
	<div class="page-header">
    	<h1 class="h2">Todos los usuarios / <a class="btn btn-default" href="addnew.php">  <span class="glyphicon glyphicon-plus"></span> &nbsp; add new </a></h1>
    </div>
 
<br />
 
<div class="container-fluid"><
<div class="row">
<?php
	//NUEVA CONSULTA angel  $stmt = $DB_con->prepare('SELECT userID, userName, userProfession, userPic FROM tbl_users ORDER BY userID DESC');
	$stmt = $DB_con->prepare('SELECT userID, userName, userProfession, userPic FROM tbl_users ORDER BY userID DESC');
	$stmt->execute();
 
	if($stmt->rowCount() > 0)
	{
		while($row=$stmt->fetch(PDO::FETCH_ASSOC))
		{
			extract($row);
			?>
			<div class="col-xs-3">
            <!--><div class="col-xs-6 col-sm-4 col-lg-3"></-->
				<p class="page-header"><?php echo $userName."&nbsp;/&nbsp;".$userProfession; ?></p>
				<img src="user_images/<?php echo $row['userPic']; ?>" class="img-rounded" width="250px" height="250px" />
				<p class="page-header">
				<span>
 
 
                <div class="col-6 col-sm-6 col-lg-4 bg-success"><p>col-6 col-sm-9 col-lg-4</p> <button type="button" class="btn btn-danger btn-block">Button 1</button> </div>
                <div class="col-6 col-sm-5 col-lg-4 bg-warning"><p>col-6 col-sm-3 col-lg-4</p> <button type="button" class="btn btn-basic btn-block">Button 1</button> <button type="button" class="btn btn-primary btn-block">Button 1</button> </div>
                <div class="col-6 col-sm-3 col-lg-4 bg-primary"><p>col-6 col-sm-3 col-lg-4</p> <button type="button" class="btn btn-warning btn-block">Button 1</button> </div>
 
				</span>
				</p>
			 </div><!-- / ROWS -->
            </div><!-- / CONTAINER-->
			<?php
		}
	}
	else
	{
		?>
        <div class="col-xs-12">
        	<div class="alert alert-warning">
            	<span class="glyphicon glyphicon-info-sign"></span> &nbsp; No Data Found ...
            </div>
        </div>
        <?php
	}
 
?>
</div>
 
 
 
<div class="alert alert-info">
    <strong>Empresa</strong> <a href="http://www.empresa.com">Empresa</a>!
</div>
 
</div>
 
 
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap/js/bootstrap.min.js"></script>
 
 
</body>
</html>

Captura-de-pantalla-2018-03-07-14.25.05
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-2
Comentar
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 07/03/2018 14:52:05
¿No es compatible con bootstrap 3?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-2
Comentar
Imágen de perfil de Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por Lopez (271 intervenciones) el 07/03/2018 15:09:18
Ya para cerrar el tema, que se nota es perdida de bytes insistirte en aprender.

En la linea 65 :
Cambia:
1
<div class="col-xs-3">
a:
1
<div class="col-xs-6 col-md-4 col-lg-4">

Saludos!
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
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 07/03/2018 15:32:36
Se sigue viendo prácticamente igual, revisa tu cabeza a ver si funciona bien también jeje.

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<?php
 
	require_once 'dbconfig.php';
 
	if(isset($_GET['delete_id']))
	{
		// select image from db to delete
		$stmt_select = $DB_con->prepare('SELECT userPic FROM tbl_users WHERE userID =:uid');
		$stmt_select->execute(array(':uid'=>$_GET['delete_id']));
		$imgRow=$stmt_select->fetch(PDO::FETCH_ASSOC);
		unlink("user_images/".$imgRow['userPic']);
 
		// it will delete an actual record from db
		$stmt_delete = $DB_con->prepare('DELETE FROM tbl_users WHERE userID =:uid');
		$stmt_delete->bindParam(':uid',$_GET['delete_id']);
		$stmt_delete->execute();
 
		header("Location: index2.php");
	}
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Partes de trabajo</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
</head>
 
<body>
 
<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
 
        <div class="navbar-header">
            <a class="navbar-brand" href="index2" title='Usuarios'>Usuarios</a>
        </div>
 
    </div>
</div>
 
<div class="container">
 
	<div class="page-header">
    	<h1 class="h2">Todos los usuarios / <a class="btn btn-default" href="addnew.php">  <span class="glyphicon glyphicon-plus"></span> &nbsp; add new </a></h1>
    </div>
 
<br />
 
<div class="container-fluid"><
<div class="row">
 
<?php
	//NUEVA CONSULTA angel  $stmt = $DB_con->prepare('SELECT userID, userName, userProfession, userPic FROM tbl_users ORDER BY userID DESC');
	$stmt = $DB_con->prepare('SELECT userID, userName, userProfession, userPic FROM tbl_users ORDER BY userID DESC');
	$stmt->execute();
 
	if($stmt->rowCount() > 0)
	{
		while($row=$stmt->fetch(PDO::FETCH_ASSOC))
		{
			extract($row);
			?>
			<!--><div class="col-xs-3"></-->
            <div class="col-xs-6 col-sm-4 col-lg-4">
				<p class="page-header"><?php echo $userName."&nbsp;/&nbsp;".$userProfession; ?></p>
				<img src="user_images/<?php echo $row['userPic']; ?>" class="img-rounded" width="250px" height="250px" />
				<p class="page-header">
				<span>
 
 
                <div class="col-6 col-sm-6 col-lg-4 bg-success"><p>col-6 col-sm-9 col-lg-4</p> <button type="button" class="btn btn-danger btn-block">Button 1</button> </div>
                <div class="col-6 col-sm-5 col-lg-4 bg-warning"><p>col-6 col-sm-3 col-lg-4</p> <button type="button" class="btn btn-basic btn-block">Button 1</button> <button type="button" class="btn btn-primary btn-block">Button 1</button> </div>
                <div class="col-6 col-sm-3 col-lg-4 bg-primary"><p>col-6 col-sm-3 col-lg-4</p> <button type="button" class="btn btn-warning btn-block">Button 1</button> </div>
 
				</span>
				</p>
			 </div><!-- / ROWS -->
            </div><!-- / CONTAINER-->
			<?php
 
		}
	}
	else
	{
		?>
        <div class="col-xs-12">
        	<div class="alert alert-warning">
            	<span class="glyphicon glyphicon-info-sign"></span> &nbsp; No Data Found ...
            </div>
        </div>
        <?php
	}
 
?>
</div>
 
 
 
<div class="alert alert-info">
    <strong>Empresa</strong> <a href="http://www.empresa.com">Empresa</a>!
</div>
 
</div>
 
 
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap/js/bootstrap.min.js"></script>
 
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-2
Comentar
Imágen de perfil de Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por Lopez (271 intervenciones) el 07/03/2018 15:57:23
Revisa tu cerebro, a ver si tienes :P
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
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 07/03/2018 16:06:41
Para añadir los enlaces que tenía los añado dentro de la clase del botón? Help please, ilustrame. Lo anterior sigue sin ir.
Te paso los enlaces de los botones:

Before:
1
2
3
4
5
6
7
8
9
<p class="page-header"><?php echo $userName."&nbsp;/&nbsp;".$userProfession; ?></p>
				<img src="user_images/<?php echo $row['userPic']; ?>" class="img-rounded" width="250px" height="250px" />
				<p class="page-header">
				<span>
				<a class="btn btn-info btn-block" href="editform.php?edit_id=<?php echo $row['userID']; ?>" title="click for edit" onclick="return confirm('sure to edit ?')"><span class="glyphicon glyphicon-edit"></span> Edit</a>
 
                    <a class="btn btn-danger btn-block" href="?delete_id=<?php echo $row['userID']; ?>" title="click for delete" onclick="return confirm('sure to delete ?')"><span class="glyphicon glyphicon-remove-circle"></span> Delete</a>
 
                <a class="btn btn-danger btn-block" href="editformtrabajotodos.php?mostrartrabajos_id=<?php echo $row['userID']; ?>" title="Mostrar todos sus trabajos" onclick="¿Quieres mostrar?')"><span class="glyphicon glyphicon-edit"></span> Mostrar todos sus trabajos</a>


After:
1
2
3
4
5
6
7
8
9
10
11
12
<div class="col-xs-3">
				<p class="page-header"><?php echo $userName."&nbsp;/&nbsp;".$userProfession; ?></p>
				<img src="user_images/<?php echo $row['userPic']; ?>" class="img-rounded" width="250px" height="250px" />
				<p class="page-header">
				<span>
				<a class="btn btn-info btn-block" href="editform.php?edit_id=<?php echo $row['userID']; ?>" title="click for edit" onclick="return confirm('sure to edit ?')"><span class="glyphicon glyphicon-edit"></span> Edit</a>
 
                    <a class="btn btn-danger btn-block" href="?delete_id=<?php echo $row['userID']; ?>" title="click for delete" onclick="return confirm('sure to delete ?')"><span class="glyphicon glyphicon-remove-circle"></span> Delete</a>
 
                <a class="btn btn-danger btn-block" href="editformtrabajotodos.php?mostrartrabajos_id=<?php echo $row['userID']; ?>" title="Mostrar todos sus trabajos" onclick="¿Quieres mostrar?')"><span class="glyphicon glyphicon-edit"></span> Mostrar todos sus trabajos</a>
				</span>
				</p>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-2
Comentar
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 07/03/2018 16:13:30
No tengo cerebro.
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
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 07/03/2018 16:21:52
los enlaces ni la estética funcionan bien, los he intentado poner así, en el botón:

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<?php
 
	require_once 'dbconfig.php';
 
	if(isset($_GET['delete_id']))
	{
		// select image from db to delete
		$stmt_select = $DB_con->prepare('SELECT userPic FROM tbl_users WHERE userID =:uid');
		$stmt_select->execute(array(':uid'=>$_GET['delete_id']));
		$imgRow=$stmt_select->fetch(PDO::FETCH_ASSOC);
		unlink("user_images/".$imgRow['userPic']);
 
		// it will delete an actual record from db
		$stmt_delete = $DB_con->prepare('DELETE FROM tbl_users WHERE userID =:uid');
		$stmt_delete->bindParam(':uid',$_GET['delete_id']);
		$stmt_delete->execute();
 
		header("Location: index2.php");
	}
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Partes de trabajo</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
</head>
 
<body>
 
<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
 
        <div class="navbar-header">
            <a class="navbar-brand" href="index2" title='Usuarios'>Usuarios</a>
        </div>
 
    </div>
</div>
 
<div class="container">
 
	<div class="page-header">
    	<h1 class="h2">Todos los usuarios / <a class="btn btn-default" href="addnew.php">  <span class="glyphicon glyphicon-plus"></span> &nbsp; add new </a></h1>
    </div>
 
<br />
 
<div class="container-fluid"><
<div class="row">
 
<?php
	//NUEVA CONSULTA angel  $stmt = $DB_con->prepare('SELECT userID, userName, userProfession, userPic FROM tbl_users ORDER BY userID DESC');
	$stmt = $DB_con->prepare('SELECT userID, userName, userProfession, userPic FROM tbl_users ORDER BY userID DESC');
	$stmt->execute();
 
	if($stmt->rowCount() > 0)
	{
		while($row=$stmt->fetch(PDO::FETCH_ASSOC))
		{
			extract($row);
			?>
			<!--><div class="col-xs-3"></-->
            <div class="col-xs-6 col-sm-4 col-lg-4">
				<p class="page-header"><?php echo $userName."&nbsp;/&nbsp;".$userProfession; ?></p>
				<img src="user_images/<?php echo $row['userPic']; ?>" class="img-rounded" width="250px" height="250px" />
				<p class="page-header">
				<span>
 
 
                <div class="col-6 col-sm-6 col-lg-4 bg-success"><p>col-6 col-sm-9 col-lg-4</p> <button href="editform.php?edit_id=<?php echo $row['userID']; ?>" type="button" class="btn btn-danger btn-block">Button 1</button> </div>
 
                <div class="col-6 col-sm-5 col-lg-4 bg-warning"><p>col-6 col-sm-3 col-lg-4</p> <button href="?delete_id=<?php echo $row['userID']; ?>" type="button" class="btn btn-basic btn-block">Button 1</button> <button type="button" class="btn btn-primary btn-block">Button 1</button> </div>
 
                <div class="col-6 col-sm-3 col-lg-4 bg-primary"><p>col-6 col-sm-3 col-lg-4</p> <button href="editformtrabajotodos.php?mostrartrabajos_id=<?php echo $row['userID']; ?>" type="button" class="btn btn-warning btn-block">Button 1</button> </div>
 
				</span>
				</p>
			 </div><!-- / ROWS -->
            </div><!-- / CONTAINER-->
			<?php
 
		}
	}
	else
	{
		?>
        <div class="col-xs-12">
        	<div class="alert alert-warning">
            	<span class="glyphicon glyphicon-info-sign"></span> &nbsp; No Data Found ...
            </div>
        </div>
        <?php
	}
 
?>
</div>
 
 
 
<div class="alert alert-info">
    <strong>Empresa</strong> <a href="http://www.empresa.com">Empresa</a>!
</div>
 
</div>
 
 
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap/js/bootstrap.min.js"></script>
 
 
</body>
</html>
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
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 07/03/2018 19:03:36
Ninguna idea?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-2
Comentar
sin imagen de perfil
Val: 254
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Diseño responsive bootstrap 3

Publicado por angel (90 intervenciones) el 07/03/2018 19:59:50
Estoy empezando a pensar creo que dos por fila en un móvil estaría bien y en el ordenador puede que tres o cuatro por fila.

De todos modos no consigo que se visualice bien sin tener en cuenta el número de columnas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-2
Comentar