Programming

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 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

Herramientas de la página
