[Tutorial] Bootstrap para principantes

S

#30 Lo que me dices no se como hacerlo. Pongo el código para que veas lo qe tengo hecho y así ver si lo que dices es posible.

Esta función inicializa parámetros que se mandan a mi vista y me crea el marco de paginación.

public function eliminar_tipo_material()
	{
		$this->load->library('pagination');

	$opciones = array();

	$desde = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0 ;

	$opciones['per_page'] = 3;
	$opciones['base_url'] = base_url('material_controller/deleteTipoMaterial');
	$opciones['total_rows'] = $this->Tipo_material->getNumTipos();
	$opciones['uri_segment'] = 3;

	$this->pagination->initialize($opciones);

	$lista = $this->Tipo_material->getTipos($opciones['per_page'],$desde);

	$paginacion = $this->pagination->create_links();

	$this->smarty->assign('lista',$lista);
	$this->smarty->assign('paginacion',$paginacion);

	$this->smarty->view('material/eliminar_tipo_material');
}

En mi vista luego tengo lo siguiente:

<form id="deletetipomaterial" action="{base_url()}material_controller/deleteTipoMaterial" method="POST">
				<fieldset>
					<legend>Eliminar tipo de material</legend>
					<!-- ************************-->
					<table class="table table-bordered">
						<tr>
							<th>Seleccionar</th>
							<th>Nombre</th>
						</tr>
						{foreach from=$lista item=fila}
						<tr>
							<td><input type="checkbox" name="borrar[{$fila->id}]" value="{$fila->id}"></td>
							<td>{$fila->nombre}</td>
						</tr>
						{/foreach}
					</table>
					<!-- ************************-->
					<div class="form-group" align="center">
						<ul class="pagination">
							{$paginacion}//Esto me crea todo el marco de paginación por lo que usar la clase pagination de bootstrap no se como hacerlo
							<!-- 
							<li><a href="#">&laquo;</a></li>
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">&raquo;</a></li>
							-->
						</ul>
					</div>
					<!-- ************************-->
				</fieldset>
				<!-- ************************-->
				<button type="submit" class="btn btn-primary">Eliminar</button>
				<!-- ************************-->
			</form>
1 respuesta
Merkury

#31 Mmmm vale no se exactamente como te estará devolviendo la paginación CI, pero bootstrap tiene este snnipet, lo que tendrías que hacer es hacer coincidir ambas cosas XD.


<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

Para que te hagas una idea, yo utilizando Twig como gestor de plantillas las paginaciones las dejo así (mi clase es customag en vez de pagination):

  
<div class="custompag"> <ul> {% if first is defined and first == true %} <li class="active"><a href="{{ path('mg_user_panel', {'page': page-1, 'empName':empresa.nombre}) }}"><span>&laquo;</span></a></li> {% else %} <li class="disabled"><span>&laquo;</span></li> {% endif %} {% if pages is defined %} {% for i in 1..pages %} <li class="active"><span><a href="{{ path('mg_user_panel', {'page': i, 'empName': empresa.nombre}) }}">{{ i }}</span></a></li> {% endfor %} {% endif %} {% if last is defined and last == true %} <li class="disabled"><span>&raquo;</span></li> {% else %} <li class="active"><a href="{{ path('mg_user_panel', {'page': page+1, 'empName': empresa.nombre}) }}"><span>&raquo;</span></a></li> {% endif %} </ul> </div>

La movida es que si no puedes pillar los parametros de paginación estas un poco jodido xD

1 respuesta
S

#32 Investigaré a ver si es posible pillar los parámetros :)

1 respuesta
sh31k

#33 Sorry por no contestarte más explayadamente pero estaba de finde xD

Te dejo un enlace que creo que es exactamente lo que pides, lo que no utiliza cI, pero bueno, es fácil adaptarlo!

http://icaza23.blogspot.com.es/2013/08/paginacion-de-registro-con-bootstrap.html

Espero que te sirva, un saludo :)

2 meses después
AbdelioR

Como funciona el tema con las imágenes en bootstrap en versión móvil, comprime el peso o algo?

1 mes después
M

este link no funciona http://examples.getbootstrap.com/
gracias

1 1 respuesta
bLero

#36 http://getbootstrap.com/getting-started/#examples

Scottie

Igual a alguien le resulta util: http://fortawesome.github.io/Font-Awesome/

#39 Despues del dia que te di con el WAMP y el XAMP, me emociona mucho que me digas esas palabras :qq:

1 1 respuesta
naete

#38 A mí. Te quiero.

1 respuesta
SkOi

Aprovecho que resubisteis el hilo ayer para hacer una preguntilla sobre bootstrap.

Llevo un tiempo toqueteando y haciendo tonterías, superbásicas, con él y ahora estaba pensando en utilizarlo para una web algo más seria (mi proyecto de fin de carrera, para ser más concretos).
La duda que tengo es el apartado de licencias:
http://getbootstrap.com/getting-started/#license-faqs

¿Con poner una referencia a "desarrollado con bootstrap" en el footer o en algún sitio de la web sería suficiente?

1 respuesta
Vaclad

#40 No es necesario el incluir esa nota. El tema de la licencia es por si haces alguna modificación y distribuyes tu el código. Para el uso de bootstrap no es necesario poner nada.

1 mes después
smintcs

Subo esto porque tengo un problemilla que igual no es tal:

Se me queda corto el sistema de grid. Funciona perfecto todo, pero entre el tamaño mas pequeño y el siguiente veo una laguna ahí bastante gordita.

Todo lo que es mas pequeño de 768 va en el mismo saco y queda demasiado estirado. A tamaños realmente pequeños va perfecto, pero justo un poco menos de 768 queda realmente bastante espacio pero lo estira como si lo fuera a poner pequeño.

No se si me explico pero vamos que con ir cambiando el tamaño al navegador se ve muy claro, el salto lo pega cuando pasa de 768 a 767, pasa de grid SM a grid XS y realmente tengo 700 y pico pixeles de pantalla y me los pinta como si fuera para un teléfono pequeñajo.

He visto por ahí una solución de un tío con un css casero que añade un tamaño intermedio ahí entre XS y SM cortando a 480 o así me parece, que esta perfecto pero me parece muy raro tener que andar usando esto y que nadie en bootstrap se haya dado cuenta de esto.

Sera que los smartphones ya no vienen con pantallas tan pequeñas realmente? El caso es que me pasa lo mismo en una tablet normalita puesta en portrait y supongo que habra mas gente que ha pasado por esto mismo. Si no se entiende pongo luego unas capturas para que quede mas claro.

1 respuesta
MegalomaniaC

#42 Estas usando los spans bien? Si que es verdad que pasa de por ejemplo 4 o 6 columnas a 1 de golpe a 768px pero hasta entonces hace el resize bastante bien el bootstrap-responsive.css

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

Puedes hacer un @media casero de 768 a 480px si quieres que es el ancho de un iPhone, pero luego hay que jugar con el pixel ratio en estos dispositivos y que no en todos se lo toma al mismo pie de la letra.

Vaya, ademas le puedes meter tu estilo, si a 768 se queda muy ancho, le metes un max-width a ese cuadro de 400px por ejemplo y lo centras con margenes automaticos.

La mayoria de webs las monto con BS y van genial en iphone o ipad.

1
1 mes después
Scottie

Hola, vengo a llorar y a cagarme en los samples de bootstrap que ponen el enlace al js al final de la pagina, y como no lo veía no lo incrustaba, y con razón no me realizaba los dropdowns... Gracias #1 ya llevaba mas de un dia gastado en esta mierda... >.<

2 2 respuestas
Merkury

#44 Sabes que poner los scripts en el pie es una buena practica, porque si el script falla y lo tienes en el top tu página se va a ir a la mierda... xD

El problema no es bootstrap, el problema eres tu por no mirar las cosas detenidamente.

2 respuestas
sh31k

#44 como bien te dice #45 lo ideal es colocar la carga de scripts al final de todo tu documento HTML.

1 respuesta
Scottie

#45 #46 Vaya, es que todo lo referente a desarrollo web, lo hago de forma autodidacta. Y bueno, ni leí ni tuve a nadie que me explicase eso... :(

Pero vaya, se agradece la explicación, me ahorrara muchos quebraderos de cabeza ;)

1 respuesta
Merkury

#47 Pero acuérdate de que las referencias a jQuery van en la cabecera!

3 meses después
archienemigo

Resucito el hilo para preguntar duda.

En un dropdown que se encuentra en un navbar, para personalizar estilo cuando la barra se colapsa, no encuentro como.

Osea con la barra normal, para cambiar por ejemplo el color de los enlaces basta con sobrescribir.

.dropdown-menu li a

Pero no afecta cuando la barra se colapsa y aparece el botón toggle. Ahí expandes el menú y no coge esos estilos.

Scottie

Yo la verdad que ni idea, pero si usas brackets puedes averiguar que estilos son los que afectan y de ahi poder sacar tu modificacion...

1 respuesta
archienemigo

#50 Los mosquitos me despiertan y tu me contestas.

¿Brakets?

1 respuesta
alterego

Grid builder para Bootstrap,. Puedes configurar el comportamiento de los bloques para tablet, móvil etc. Esta más que molón.
http://shoelace.io/

3 1 respuesta
DarkSoldier

#52 genial. Te quiero :)

Scottie

#51 sip, Brackets.

Abres el proyecto, te vas a la etiqueta del html que quieras ver, y le das al ctrl+E, y te apareceran todas las reglas de css que le esten afectando.

1 respuesta
DarkSoldier

#54 inspeccionar elemento en chrome xD

1 respuesta
archienemigo

#55 Si pero eso para mi es cuanto menos poco intuitivo.

2 respuestas
Merkury

#56 Pues que sepas que es la herramienta más útil que pueda haber.

4 1 respuesta
DarkSoldier

#56 #57 sin duda xD es esencial!

1
archienemigo

A mi a veces me lía más todavía. Seré idiota supongo.

3 meses después
C

Tengo una duda respecto a la utilizacion de los modals, quiero hacer un CRUD en PHP con esa propiedad de bootstrap pero sin la necesidad de utilizar AJAX ¿Como la puedo hacer?

Gracias y quedo atento

1 respuesta