Herramientas de usuario
sp:fw:bootstrap
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
sp:fw:bootstrap [2013/07/12 10:11] alfred [Recursos] |
sp:fw:bootstrap [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== Bootstrap ====== | ====== Bootstrap ====== | ||
| Es una librería JavaScript para el desarrollo de front-ends. | Es una librería JavaScript para el desarrollo de front-ends. | ||
| - | |||
| * [[http://twitter.github.io/bootstrap/index.html|Página web del proyecto]] | * [[http://twitter.github.io/bootstrap/index.html|Página web del proyecto]] | ||
| - | * [[http://stylebootstrap.info/|Generador de estilos]] | + | * {{:fw:bootstrap:bootstrap.zip|Bootstrap, version 2.3.2}} |
| - | * [[http://bootswatch.com/|Temas bootstrap gratuitos]] | + | |
| - | * [[https://wrapbootstrap.com/|Temas bootstrap de pago]] | + | |
| ===== Inicio ===== | ===== Inicio ===== | ||
| ==== Estructura de archivos ==== | ==== Estructura de archivos ==== | ||
| Línea 13: | Línea 9: | ||
| ├── css/ | ├── css/ | ||
| │ ├── bootstrap.css | │ ├── bootstrap.css | ||
| - | │ ├── bootstrap.min.css | + | │ └── bootstrap.min.css |
| ├── js/ | ├── js/ | ||
| │ ├── bootstrap.js | │ ├── bootstrap.js | ||
| - | │ ├── bootstrap.min.js | + | │ └── bootstrap.min.js |
| └── img/ | └── img/ | ||
| ├── glyphicons-halflings.png | ├── glyphicons-halflings.png | ||
| Línea 39: | Línea 35: | ||
| ===== Maquetación web ===== | ===== Maquetación web ===== | ||
| La web se dividirá en 12 posibles columnas. | 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 ===== | ===== Notas ===== | ||
| ==== Recursos ==== | ==== Recursos ==== | ||
| * [[http://fortawesome.github.io/Font-Awesome/|Repositorio de iconos]] | * [[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]] | ||
| + | |||
sp/fw/bootstrap.1373623880.txt.gz · Última modificación: 2020/05/09 09:24 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
