Diferencias

Muestra las diferencias entre dos versiones de la página.

--- informatica:diseno_web:css:bootstrap [2020/08/26 13:25] – [Items] tempwin
+++ informatica:diseno_web:css:bootstrap [2021/06/30 15:54] (actual) – [Recursos] tempwin
@@ Línea 1267: / Línea 1267: @@
 </script>
 </code>
+==== Bordes ====
+Eliminar bordes:
+  * ''border-0''
+  * ''border-top-0''
+  * ''border-left-0''
+Colorear bordes:
+  * ''border-primary''
+  * ''border-secondary''
+  * ''border-success''
+  * ...
+Redondear bordes:
+  * ''rounded''
+  * ''rounded-top''
+  * ''rounded-left''
+  * ''rounded-circle''
+  * ...
+==== Colores ====
+Para el texto:
+  * ''text-primary''
+  * ''text-secondary''
+  * ''text-success''
+  * ''text-danger''
+  * ...
+Para el fondo:
+  * ''bg-primary''
+  * ''bg-secondary''
+  * ''bg-success''
+  * ...
+==== Posicionamiento ====
+Para fijar un elemento en la parte superior:
+<code html5>
+<header>
+    <nav class="nav bg-dark fixed-top">
+    </nav>
+</header>
+<div class="container">
+    <div class="row mt-3">
+        <div class="col">
+        </div>
+    </div>
+</div>
+</code>
+Para fijarlo en la parte de abajo se usa la clase ''fixed-bottom''.
+<WRAP center round important 60%>
+Cuando se fija un elemento, deja de ocupar un espacio y los elementos siguientes no lo tienen en cuenta por lo que empezarán a colocarse desde arriba del todo y quedarán por debajo del elemento fijado. Para solucionarlo, habría que añadir un ''padding-top'' a ''body'' con las altura del elemento posicionado.
+</WRAP>
+==== Tamaños ====
+  * ''w-25'': anchura del 25 %
+  * ''w-50'': anchura del 50 %
+  * ''h-25'': altura del 25 %
+  * ...
 ===== Ejemplos =====
@@ Línea 1441: / Línea 1514: @@
 La caja 1 se pondrá en última posición, la 2 en primera y la 3 en el medio.
+Podemos definir el orden según el tamaño del dispositivo:
+  * ''order-sm-1''
+  * ''order-md-2''
+  * ''order-lg-3''
+===== Recursos =====
+  * https://startbootstrap.com/snippets/sticky-footer-flexbox
+  * [[https://getbootstrap.com/docs/3.3/javascript/#modals|Modals in Bootstrap 3.3]]
+  * [[https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal|Passing data to a bootstrap modal]]