Diferencias

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

--- sp:fw:bootstrap [2013/06/19 16:19]
alfred
+++ sp:fw:bootstrap [2020/05/09 09:25] (actual)
@@ Línea 1: / Línea 1: @@
 ====== Bootstrap ======
 Es una librería JavaScript para el desarrollo de front-ends.
   * [[http://twitter.github.io/bootstrap/index.html|Página web del proyecto]]
+  * {{:fw:bootstrap:bootstrap.zip|Bootstrap, version 2.3.2}}
+===== Inicio =====
+==== Estructura de archivos ====
+<code>
+  bootstrap/
+  ├── css/
+  │   ├── bootstrap.css
+  │   └── bootstrap.min.css
+  ├── js/
+  │   ├── bootstrap.js
+  │   └── bootstrap.min.js
+  └── img/
+      ├── glyphicons-halflings.png
+      └── glyphicons-halflings-white.png
+</code>
+==== Plantilla ====
+<code html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bootstrap 101 Template</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Bootstrap -->
+    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <script src="http://code.jquery.com/jquery.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+  </body>
+</code>
+===== Maquetación web =====
+La web se dividirá en 12 posibles columnas.
+==== Contenedores ====
+=== Contenedor principal ===
+Centrado en la página:
+<code html>
+<div class="container">
+...
+</div>
+</code>
+=== Estructurado ===
+<code html>
+<div class="container-fluid">
+  <div class="row-fluid">
+    <div class="span2">
+      <!--Sidebar content-->
+    </div>
+    <div class="span10">
+      <!--Body content-->
+    </div>
+  </div>
+</div>
+</code>
+===== Menús =====
+==== Navbar ====
+<code html>
+<nav class="navbar">
+  <div class="navbar-inner">
+    <a class="brand" href="#">Hindoor System Management</a>
+    <ul class="nav">
+      <li class="active"><a href="#">Nodes</a></li>
+      <li><a href="#">Configs</a></li>
+      <li><a href="#">Stats</a></li>
+    </ul>
+  </div>
+</nav>
+</code>
+Podemos usar el estilo ''navbar navbar-inverse''. \\
+{{:fw:bootstrap:navbar.png?direct&100|}}{{:fw:bootstrap:navbar-inverse.png?direct&100|}} \\
+==== Sidebar ====
+<code html>
+<ul class="nav nav-list affix">
+  <li><a href="#">Observers</a></li>
+  <li><a href="#">Delegates</a></li>
+  <li><a href="#">Starters</a></li>
+  <ul class="nav nav-list affix">
+    <li><a href="#">192.168.1.125</a></li>
+    <li><a href="#">192.168.1.126</a></li>
+    <li class="active"><a href="#">192.168.1.127</a></li>
+    <li><a href="#">192.168.1.140</a></li>
+    <li><a href="#">192.168.1.225</a></li>
+    <li><a href="#">192.168.1.235</a></li>
+    <li><a href="#">192.168.1.236</a></li>
+  </ul>
+</ul>
+</code>
+{{:fw:bootstrap:sidebar.png?direct&100|}}
+=== Separador ===
+<code html>
+<li class="divider"></li>
+</code>
+===== Tablas =====
+<code html>
+<table class="table table-hover">
+  <col width="50">
+  <thead>
+    <tr>
+      <th > </th>
+      <th>Host</th>
+      <th>Configuration</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr style="cursor:pointer;">
+      <td><i class="icon-off"></i></td>
+      <td>192.168.145.200:454</td>
+      <td><span class="label label-info">CSS-01</span></td>
+    </tr>
+    <tr style="cursor:pointer;">
+      <td><i class="icon-off"></i></td>
+      <td>192.168.145.44:1454</td>
+      <td><span class="label label-info">CSS-05</span></td>
+    </tr>
+    <tr style="cursor:pointer;">
+      <td><i class="icon-off"></i></td>
+      <td>192.168.45.44:7884</td>
+      <td><span class="label label-info">RFactor</span></td>
+    </tr>
+  </tbody>
+</table>
+</code>
+{{:fw:bootstrap:tabla.png?direct&100|}}
+===== Notas =====
+==== Recursos ====
+  * [[http://fortawesome.github.io/Font-Awesome/|Repositorio de iconos]]
   * [[http://stylebootstrap.info/|Generador de estilos]]
   * [[http://bootswatch.com/|Temas bootstrap gratuitos]]
   * [[https://wrapbootstrap.com/|Temas bootstrap de pago]]

Programming

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página