Herramientas de usuario
sp:fw:bootstrap
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Próxima revisión | Revisión previa | ||
|
sp:fw:bootstrap [2013/06/19 16:19] alfred creado |
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]] | ||
| + | * {{: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]] | ||
| - | * {{http://twitter.github.io/bootstrap/index.html|Página web del proyecto}} | ||
| - | * {{http://stylebootstrap.info/|Generador de estilos}} | ||
| - | * {{http://bootswatch.com/|Temas bootstrap gratuitos}} | ||
| - | * {{https://wrapbootstrap.com/|Temas bootstrap de pago}} | ||
sp/fw/bootstrap.1371658752.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
