Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » html5 y bootstrap

HTML - html5 y bootstrap

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 51
Ha disminuido su posición en 8 puestos en HTML (en relación al último mes)
Gráfica de HTML

html5 y bootstrap

Publicado por aldo (79 intervenciones) el 06/04/2016 03:53:53
Estoy haciendo un formulario con bootstrap para un dispositivo mobil

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
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css">
  <link rel="stylesheet" type="text/css" href="estilos/estilos.css">
 
 
<!--  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

--></head>
<body>
 
<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p>
  </div>
 
	  <div class="row">
		<div class="col-sm-4">
		  <h3>Column 1</h3>
		  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
		  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
		</div>
 
		<div class="col-sm-4">
		  <h3>Column 2</h3>
		  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
		  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
		</div>
 
		<div class="col-sm-4">
		  <h3>Column 3</h3>
		  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
		  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
		</div>
		<div class="col-sm-5">
		  <h3>Column 4</h3>
		  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
		  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
		</div>
 
 
    </div>
</div>
 
</body>
</html>

estoy tratando de colocar las 12 columnas; pero la 5 aparece debajo de la primera fila. Podria alguien ayudarme.
bootstrap
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
Imágen de perfil de Jordi

html5 y bootstrap

Publicado por Jordi (14 intervenciones) el 06/04/2016 07:42:02
Hola Aldo,

Bootstrap divide su ancho en 12 divisiones. Si le pones tres columnas como col-sm-4 ya llenas todo el ancho. En caso de querer cuatro juntas, deberías ponerlas como col-sm-3.
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: 51
Ha disminuido su posición en 8 puestos en HTML (en relación al último mes)
Gráfica de HTML

html5 y bootstrap

Publicado por aldo (79 intervenciones) el 06/04/2016 16:43:21
Hola Jordi, ahora si funciona. Te pregunto: ¿esta instruccion xs es para moviles donde la colocaria? Es que estoy aprendiendo a trabajar con bootstrap. 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
Imágen de perfil de Jordi

html5 y bootstrap

Publicado por Jordi (14 intervenciones) el 06/04/2016 22:25:08
No es exactamente así.

Bootstrap toma cuatro referencias de medida: xs (extra-small), sm (small), md (medium) y lg (large). Estos cuatro códigos se corresponden a diferentes anchos de pantalla predefinidos que no te sabría decir ahora mismo. Estos códigos se utilizan para las diferentes clases que permite utilizar la librería.

Por ejemplo, un div con clase "col-sm-4" quiere decir que ocupará 4 de las 12 columnas de ancho si el ancho del navegador se encuentra en el rango considerado "sm". No sólo eso, sino que además se le puede poner más de una clase de este tipo a un elemento.

1
2
<div class="col-sm-4"></div>  <!-- Siempre ocupará 4 columnas de ancho -->
<div class="col-sm-4 col-md-10"></div>  <!-- Ocupará 4 si el ancho es igual o inferior a "sm" y 10 si es "md" o superior -->

Lo mismo sucede con los "offset-sm-1".

Por otro lado, también se puede ocultar un elemento según el ancho de la pantalla. Esto va muy bien para hacer versiones móviles o extender la información solo si cabe en la pantalla. Para ello se utiliza "hidden-xs", "hidden-sm"... Esta clase sólo oculta el elemento en el rango indicado, no se extiende a los demás por omisión.

1
2
<div class="hidden-xs"></div>    <!-- NO se mostrará en XS pero sí en SM, MD, LG -->
<div class="hidden-xs hidden-md"></div>  <!-- NO se mostrará en XS ni MD pero sí en SM y LG -->
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