Diferencias

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

--- informatica:diseno_web:css:bootstrap [2020/08/26 14:07] – [Tooltips] tempwin
+++ informatica:diseno_web:css:bootstrap [2021/06/30 15:54] (actual) – [Recursos] tempwin
@@ Línea 1285: / Línea 1285: @@
 Redondear bordes:
-  * ''border rounded''
+  * ''rounded''
-  * ''border rounded-top''
+  * ''rounded-top''
-  * ''border rounded-left''
+  * ''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 1469: / Línea 1520: @@
   * ''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]]