Diferencias

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

--- informatica:diseno_web:css:bootstrap [2020/08/26 13:12] – [Flexbox] tempwin
+++ informatica:diseno_web:css:bootstrap [2021/06/30 15:54] (actual) – [Recursos] tempwin
@@ Línea 1200: / Línea 1200: @@
   * ''navbar-light'' y luego combinar con ''bg-*''
-  * ''navbar-dark'' y luego combinar con ''bg-**''
+  * ''navbar-dark'' y luego combinar con ''bg-%%**%%''
 <code html5>
@@ 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 1350: / Línea 1423: @@
 </code>
-==== Alineación ====
+Podemos definir la dirección según el tamaño del dispositivo:
+  * ''flex-sm-row''
+  * ''flex-sm-column''
+  * ''flex-md-row''
+  * ''flex-md-column''
+==== Alineación de contenido ====
+Para poder alinear los elementos hijo del contenedor Flexbox:
 <code html5>
@@ Línea 1359: / Línea 1440: @@
 </div>
 </code>
+Los posibles valores:
+  * ''justify-content-start''
+  * ''justify-content-end''
+  * ''justify-content-between''
+  * ''justify-content-around''
+ Podemos definir la alineación según el tamaño del dispositivo:
+  * ''justify-content-sm-start''
+  * ''justify-content-sm-end''
+  * ''justify-content-sm-center''
+  * ''justify-content-md-start''
+  * ''justify-content-md-end''
+  * ''justify-content-md-center''
 Para trabajar con los hijos (items):
+==== Items ====
+Si queremos centrar verticalmente los elementos hijo:
+<code html5>
+<div class="d-flex align-items-center">
+    <div>Caja 1</div>
+    <div>Caja 2</div>
+    <div>Caja 3</div>
+</div>
+</code>
+Si los queremos poner al final del contenedor padre:
+<code html5>
+<div class="d-flex align-items-end">
+    <div>Caja 1</div>
+    <div>Caja 2</div>
+    <div>Caja 3</div>
+</div>
+</code>
+Si queremos que las cajas ocupen todo el alto del contenedor padre:
+<code html5>
+<div class="d-flex align-items-stretch">
+    <div>Caja 1</div>
+    <div>Caja 2</div>
+    <div>Caja 3</div>
+</div>
+</code>
+Si queremos que unos elementos estén alineados de una manera y uno de otra podemos usar los **auto márgenes**:
+<code html5>
+<div class="d-flex justify-content-start">
+    <div>Caja 1</div>
+    <div>Caja 2</div>
+    <div class="ml-auto">Caja 3</div>
+</div>
+</code>
+Las dos primeras cajas se desplazarán al principio y la última a la derecha del todo
+Para el **orden** de los items:
+<code html5>
+<div class="d-flex flex-nowrap">
+    <div class="order-3">Caja 1</div>
+    <div class="order-1">Caja 2</div>
+    <div class="order-2">Caja 3</div>
+</div>
+</code>
+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]]