Bootstrap

Es una librería JavaScript para el desarrollo de front-ends.

Inicio

Estructura de archivos

  bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   └── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   └── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

Plantilla

<!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>

Maquetación web

La web se dividirá en 12 posibles columnas.

Contenedores

Contenedor principal

Centrado en la página:

<div class="container">
...
</div>

Estructurado

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

Menús

<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>

Podemos usar el estilo navbar navbar-inverse.

<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>

Separador

<li class="divider"></li>

Programming

Herramientas de usuario

Herramientas del sitio

Tabla de Contenidos

Bootstrap

Inicio

Estructura de archivos

Plantilla

Maquetación web

Contenedores

Contenedor principal

Estructurado

Menús

Navbar

Sidebar

Separador

Notas

Recursos

Herramientas de la página