Diferencia entre revisiones de «Bootstrap (framework)»

 
Línea 1: Línea 1:
{{Normalizar}}{{Software
+
{{Ficha Software
 
|nombre= Bootstrap (framework)
 
|nombre= Bootstrap (framework)
|logo=[[Archivo:boottrdd.jpg|miniaturadeimagen|Codigo abierto]]
+
|familia=
|descripcion= biblioteca multiplataforma.
+
|imagen=boottrdd.jpg
|creador=[[ Mark Otto y Jacob Thornton]]
+
|tamaño=
 
+
|descripción= Biblioteca multiplataforma
 +
|imagen2=
 +
|tamaño2=
 +
|descripción2=
 +
|creador= Mark Otto y Jacob Thornton
 +
|desarrollador=
 +
|diseñador=
 +
|modelo de desarrollo=
 +
|fecha de creación= [[2012]]
 +
|lanzamiento inicial=
 +
|versiones=
 +
|última versión estable=
 +
|núcleo=
 +
|tipo de núcleo=
 +
|plataformas soportadas=
 +
|género=
 +
|sistemas operativos=
 +
|idioma=
 +
|licencia=
 +
|premios=
 +
|web=
 
}}
 
}}
 +
''' Bootstrap (framework)'''. Es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de [[JavaScript]] adicionales. A diferencia de muchos frameworks web, solo se ocupa del desarrollo front-end. Es el segundo proyecto más destacado en GitHub1 y es usado por la NASA y la MSNBC entre otras organizaciones.
 +
== Origen==
 +
Bootstrap, originalmente llamado Blueprint de Twitter, fue desarrollado por Mark Otto y Jacob Thornton de Twitter, como un marco de trabajo (framework) para fomentar la consistencia entre las herramientas internas. Antes de Bootstrap, se usaron varias bibliotecas para el desarrollo de interfaces de usuario, las cuales generó inconsistencias y una gran carga de trabajo en su mantenimiento.
  
<big>''' Bootstrap (framework) '''</big>
 
Bootstrap es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales. A diferencia de muchos frameworks web, solo se ocupa del desarrollo front-end.
 
Bootstrap es el segundo proyecto más destacado en GitHub1 y es usado por la NASA y la MSNBC entre otras organizaciones.
 
== Origen==
 
Bootstrap, originalmente llamado Blueprint de Twitter, fue desarrollado por Mark Otto y Jacob Thornton de Twitter, como un marco de trabajo (framework) para fomentar la consistencia entre las herramientas internas. Antes de Bootstrap, se usaron varias bibliotecas para el desarrollo de interfaces de usuario, las cuales generó inconsistencias y una gran carga de trabajo en su mantenimiento. Según el desarrollador de Twitter, Mark Otto, frente a esos desafíos:
 
"...un super pequeño grupo de desarrolladores y yo nos reunimos para diseñar y construir una nueva herramienta interna y vimos la oportunidad de hacer algo más. A través de ese proceso, nos vimos construyendo algo mucho más sustancial que otra herramienta interna. Meses después terminamos con una primera versión de Bootstrap como una manera de documentar y compartir bienes y patrones de diseño comunes dentro de la compañía."
 
 
El primer desarrollo en condiciones reales ocurrió durante la primera "Semana de Hackeo" (Hackweek) de Twitter.” Mark Otto mostró a algunos colegas como acelerar el desarrollo de sus proyectos con la ayuda de la herramienta de trabajo. Como resultado, decenas de temas se han introducido en el marco de trabajo.  
 
El primer desarrollo en condiciones reales ocurrió durante la primera "Semana de Hackeo" (Hackweek) de Twitter.” Mark Otto mostró a algunos colegas como acelerar el desarrollo de sus proyectos con la ayuda de la herramienta de trabajo. Como resultado, decenas de temas se han introducido en el marco de trabajo.  
En agosto del 2011, Twitter liberó a Bootstrap como código abierto. En febrero del 2012, se convirtió en el proyecto de desarrollo más popular de GitHub.
 
 
 
  
 +
En agosto del [[2011]], Twitter liberó a Bootstrap como código abierto. En febrero del 2012, se convirtió en el proyecto de desarrollo más popular de GitHub.
 
== Características==
 
== Características==
 
Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es compatible con la mayoría de los navegadores web. La información básica de compatibilidad de sitios web o aplicaciones está disponible para todos los dispositivos y navegadores. Existe un concepto de compatibilidad parcial que hace disponible la información básica de un sitio web para todos los dispositivos y navegadores. Por ejemplo, las propiedades introducidas en CSS3 para las esquinas redondeadas, gradientes y sombras son usadas por Bootstrap a pesar de la falta de soporte de navegadores antiguos. Esto extiende la funcionalidad de la herramienta, pero no es requerida para su uso.  
 
Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es compatible con la mayoría de los navegadores web. La información básica de compatibilidad de sitios web o aplicaciones está disponible para todos los dispositivos y navegadores. Existe un concepto de compatibilidad parcial que hace disponible la información básica de un sitio web para todos los dispositivos y navegadores. Por ejemplo, las propiedades introducidas en CSS3 para las esquinas redondeadas, gradientes y sombras son usadas por Bootstrap a pesar de la falta de soporte de navegadores antiguos. Esto extiende la funcionalidad de la herramienta, pero no es requerida para su uso.  
 +
 
Desde la versión 2.0 también soporta diseños web adaptables. Esto significa que el diseño gráfico de la página se ajusta dinámicamente, tomando en cuenta las características del dispositivo usado (Computadoras, tabletas, teléfonos móviles).  
 
Desde la versión 2.0 también soporta diseños web adaptables. Esto significa que el diseño gráfico de la página se ajusta dinámicamente, tomando en cuenta las características del dispositivo usado (Computadoras, tabletas, teléfonos móviles).  
 
Bootstrap es de código abierto y está disponible en GitHub. Los desarrolladores están motivados a participar en el proyecto y a hacer sus propias contribuciones a la plataforma.  
 
Bootstrap es de código abierto y está disponible en GitHub. Los desarrolladores están motivados a participar en el proyecto y a hacer sus propias contribuciones a la plataforma.  
== Función y Estructura==
+
== Función y estructura==
 
Ejemplo de una página web usando el Framework de Bootstrap renderizado en Mozilla Firefox
 
Ejemplo de una página web usando el Framework de Bootstrap renderizado en Mozilla Firefox
 
Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS que implementan la variedad de componentes de la herramienta. Una hoja de estilo llamada bootstrap.less incluye los componentes de las hojas de estilo. Los desarrolladores pueden adaptar el mismo archivo de Bootstrap, seleccionando los componentes que deseen usar en su proyecto.  
 
Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS que implementan la variedad de componentes de la herramienta. Una hoja de estilo llamada bootstrap.less incluye los componentes de las hojas de estilo. Los desarrolladores pueden adaptar el mismo archivo de Bootstrap, seleccionando los componentes que deseen usar en su proyecto.  
 +
 
Los ajustes son posibles en una medida limitada a través de una hoja de estilo de configuración central. Los cambios más profundos son posibles mediante las declaraciones LESS.  
 
Los ajustes son posibles en una medida limitada a través de una hoja de estilo de configuración central. Los cambios más profundos son posibles mediante las declaraciones LESS.  
 
El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y operadores, selectores anidados, así como clases mixin.  
 
El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y operadores, selectores anidados, así como clases mixin.  
 +
 
Desde la versión 2.0, la configuración de Bootstrap también tiene una opción especial de "Personalizar" en la documentación. Por otra parte, los desarrolladores eligen en un formulario los componentes y ajustes deseados, y de ser necesario, los valores de varias opciones a sus necesidades. El paquete consecuentemente generado ya incluye la hoja de estilo CSS pre-compilada.  
 
Desde la versión 2.0, la configuración de Bootstrap también tiene una opción especial de "Personalizar" en la documentación. Por otra parte, los desarrolladores eligen en un formulario los componentes y ajustes deseados, y de ser necesario, los valores de varias opciones a sus necesidades. El paquete consecuentemente generado ya incluye la hoja de estilo CSS pre-compilada.  
 
== Sistema de cuadrilla y diseño sensible==
 
== Sistema de cuadrilla y diseño sensible==
Línea 35: Línea 53:
 
En adición a los elementos regulares de HTML, Bootstrap contiene otra interfaz de elementos comúnmente usados. Ésta incluye botones con características avanzadas (e.g grupo de botones o botones con opción de menú desplegable, listas de navegación, etiquetas horizontales y verticales, ruta de navegación, paginación, etc.), etiquetas, capacidades avanzadas de miniaturas tipográficas, formatos para mensajes de alerta y barras de progreso.  
 
En adición a los elementos regulares de HTML, Bootstrap contiene otra interfaz de elementos comúnmente usados. Ésta incluye botones con características avanzadas (e.g grupo de botones o botones con opción de menú desplegable, listas de navegación, etiquetas horizontales y verticales, ruta de navegación, paginación, etc.), etiquetas, capacidades avanzadas de miniaturas tipográficas, formatos para mensajes de alerta y barras de progreso.  
 
== Plug-ins de JavaScript==
 
== Plug-ins de JavaScript==
Los componentes de JavaScript para Bootstrap están basados en la librería jQuery de JavaScript. Los plug-ins se encuentran en la herramienta de plug-in de jQuery. Proveen elementos adicionales de interfaz de usuario como diálogos, tooltips y carruseles. También extienden la funcionalidad de algunos elementos de interfaz existentes, incluyendo por ejemplo una función de auto-completar para campos de entrada (input). La versión 2.0 soporta los siguientes plug-ins de JavaScript: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel y Typeahead.  
+
Los componentes de JavaScript para Bootstrap están basados en la librería jQuery de JavaScript. Los plug-ins se encuentran en la herramienta de plug-in de jQuery. Proveen elementos adicionales de interfaz de usuario como diálogos, tooltips y carruseles. También extienden la funcionalidad de algunos elementos de interfaz existentes, incluyendo por ejemplo una función de auto-completar para campos de entrada (input).
 +
 
 +
La versión 2.0 soporta los siguientes plug-ins de JavaScript: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel y Typeahead.  
 
Una implementación de Bootstrap usando el Dojo toolkit también está disponible. Es llamada Dojo Bootstrap67 y es un puerto de los plug-ins de Twitter Bootstrap. Usa el código Dojo al 100% y tiene soporte para AMD (Asynchronous Module Definition).  
 
Una implementación de Bootstrap usando el Dojo toolkit también está disponible. Es llamada Dojo Bootstrap67 y es un puerto de los plug-ins de Twitter Bootstrap. Usa el código Dojo al 100% y tiene soporte para AMD (Asynchronous Module Definition).  
 
== Uso==
 
== Uso==
 
Para usar Bootstrap en una página HTML, el desarrollador solo debe descargar la hoja de estilo Bootstrap CSS y enlazarla en el archivo HTML. Otra opción sería compilar el archivo CSS desde la hoja de estilo LESS o SASS descargada. Esto puede realizarse con un compilador especial.  
 
Para usar Bootstrap en una página HTML, el desarrollador solo debe descargar la hoja de estilo Bootstrap CSS y enlazarla en el archivo HTML. Otra opción sería compilar el archivo CSS desde la hoja de estilo LESS o SASS descargada. Esto puede realizarse con un compilador especial.  
 
Si el desarrollador también quiere usar los componentes de JavaScript, éstos deben estar referenciados junto con la librería jQuery en el documento HTML.  
 
Si el desarrollador también quiere usar los componentes de JavaScript, éstos deben estar referenciados junto con la librería jQuery en el documento HTML.  
 +
 
El siguiente ejemplo ilustra cómo funciona. El código HTML define un simple formulario de búsqueda y una lista de resultados en un formulario tabular. La página consiste en elementos regulares y semánticos de HTML 5, y alguna información adicional de la clase de CSS de acuerdo con la documentación de Bootstrap. La figura muestra la representación del documento en Mozilla Firefox 10.  
 
El siguiente ejemplo ilustra cómo funciona. El código HTML define un simple formulario de búsqueda y una lista de resultados en un formulario tabular. La página consiste en elementos regulares y semánticos de HTML 5, y alguna información adicional de la clase de CSS de acuerdo con la documentación de Bootstrap. La figura muestra la representación del documento en Mozilla Firefox 10.  
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
  <head>
+
<head>
    <title>Ejemplo de Bootstrap</title>
+
<title>Ejemplo de Bootstrap</title>
  
    <!-- Bootstrap CSS -->
+
<!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  
  </head>
+
</head>
 
   
 
   
  <body>
+
<body>
    <div class="container">
+
<div class="container">
      <h1>Search</h1>
+
<h1>Search</h1>
      <label>Ejemplo de un formulario sencillo de búsqueda.</label>
+
<label>Ejemplo de un formulario sencillo de búsqueda.</label>
  
      <!-- Formulario de búsqueda con un campo de entrada (input) y un botón -->
+
<!-- Formulario de búsqueda con un campo de entrada (input) y un botón -->
      <form class="well form-search">
+
<form class="well form-search">
        <input type="text" class="input-medium search-query">
+
<input type="text" class="input-medium search-query">
        <button type="submit" class="btn btn-primary">Buscar</button>
+
<button type="submit" class="btn btn-primary">Buscar</button>
      </form>
+
</form>
 
   
 
   
      <h2>Results</h2>
+
<h2>Results</h2>
 
   
 
   
      <!-- Tabla con celdas de color de fondo alternantes y con marco -->
+
<!-- Tabla con celdas de color de fondo alternantes y con marco -->
      <table class="table table-striped table-bordered">
+
<table class="table table-striped table-bordered">
        <thead>
+
<thead>
          <tr>
+
<tr>
            <th>#</th>
+
<th>#</th>
            <th>Título</th>
+
<th>Título</th>
          </tr>
+
</tr>
        </thead>
+
</thead>
        <tbody>
+
<tbody>
          <tr>
+
<tr>
            <td>1</td>
+
<td>1</td>
            <td>Lorem ipsum dolor sit amet</td>
+
<td>Lorem ipsum dolor sit amet</td>
          </tr>
+
</tr>
          <tr>
+
<tr>
            <td>2</td>
+
<td>2</td>
            <td>Consetetur sadipscing elitr</td>
+
<td>Consetetur sadipscing elitr</td>
          </tr>
+
</tr>
          <tr>
+
<tr>
            <td>3</td>
+
<td>3</td>
            <td>At vero eos et accusam</td>
+
<td>At vero eos et accusam</td>
          </tr>
+
</tr>
        </tbody>
+
</tbody>
      </table>
+
</table>
    </div>
+
</div>
  
    <!-- jQuery -->
+
<!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
+
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  
    <!-- Bootstrap JS -->
+
<!-- Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
+
</body>
 
</html>
 
</html>
 
Creando una cuadrilla de diseño fija
 
Creando una cuadrilla de diseño fija
    <div class="row">
+
<div class="row">
      <div class="col-md-4">...</div>
+
<div class="col-md-4">...</div>
      <div class="col-md-8">...</div>
+
<div class="col-md-8">...</div>
    </div>
+
</div>
 +
 
 
Creando una cuadrilla de diseño fija con una cuadrilla de diseño fluida anidada
 
Creando una cuadrilla de diseño fija con una cuadrilla de diseño fluida anidada
    <div class="row">
+
<div class="row">
      <div class="col-md-4">
+
<div class="col-md-4">
        <div class="4">...</div>
+
<div class="4">...</div>
        <div class="4">...</div>
+
<div class="4">...</div>
        <div class="4">...</div>
+
<div class="4">...</div>
      </div>
+
</div>
      <div class="col-md-8">...</div>
+
<div class="col-md-8">...</div>
    </div>
+
</div>
 
== Referencias==
 
== Referencias==
•  •  «GitHub: Popular Watched Repositories». Archivado desde el original el 19 de abril de 2010. Consultado el 26 de julio de 2012.  
+
* «GitHub: Popular Watched Repositories». Archivado desde el original el 19 de abril de 2010. Consultado el 26 de julio de 2012.  
•  •  «NASA - Spot The Station». 6 de noviembre de 2012.  
+
* «NASA - Spot The Station». 6 de noviembre de 2012.  
•  •  «MSNBC - Beaking News». 6 de noviembre de 2012.  
+
* «MSNBC - Beaking News». 6 de noviembre de 2012.  
•  •  Mark Otto (17 de enero de 2012). «Bootstrap in A List Apart #342». Consultado el 5 de marzo de 2012.  
+
* Mark Otto (17 de enero de 2012). «Bootstrap in A List Apart #342». Consultado el 5 de marzo de 2012.  
•  •  Mark Otto (19 de agosto de 2011). «Bootstrap from Twitter». Archivado desde el original el 12 de mayo de 2012. Consultado el 27 de abril de 2012.  
+
* Mark Otto (19 de agosto de 2011). «Bootstrap from Twitter». Archivado desde el original el 12 de mayo de 2012. Consultado el 27 de abril de 2012.  
•  •  Blog: Using Twitter Bootstrap with Dojo. Retrieved on 2012-09-18  
+
* Blog: Using Twitter Bootstrap with Dojo. Retrieved on 2012-09-18  
•  •  Dojo Toolkit implementation of Twitter Bootstrap. Retrieved on 2012-09-18  
+
* Dojo Toolkit implementation of Twitter Bootstrap. Retrieved on 2012-09-18 1.
1. •  AMD for asynchronous loading of modules and its dependencies. Retrieved on 2012-09-18  
+
* AMD for asynchronous loading of modules and its dependencies. Retrieved on 2012-09-18  
 
== Fuentes ==  
 
== Fuentes ==  
Cochran, David (12 de noviembre de 2012). Twitter Bootstrap Web Development (1st edición). Packt Publishing. p. 100. ISBN 978-1849518826.
+
* Cochran, David (12 de noviembre de 2012). Twitter Bootstrap Web Development (1st edición). Packt Publishing. p. 100. ISBN 978-1849518826.
[[Category:Herramientas_de_programación]]
+
[[Category:Herramientas_de_programación]] [[Category:Softwares]

última versión al 14:39 28 feb 2019

Bootstrap (framework)
Información sobre la plantilla
Boottrdd.jpg
Biblioteca multiplataforma
CreadorMark Otto y Jacob Thornton
Fecha de Creación2012

Bootstrap (framework). Es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales. A diferencia de muchos frameworks web, solo se ocupa del desarrollo front-end. Es el segundo proyecto más destacado en GitHub1 y es usado por la NASA y la MSNBC entre otras organizaciones.

Origen

Bootstrap, originalmente llamado Blueprint de Twitter, fue desarrollado por Mark Otto y Jacob Thornton de Twitter, como un marco de trabajo (framework) para fomentar la consistencia entre las herramientas internas. Antes de Bootstrap, se usaron varias bibliotecas para el desarrollo de interfaces de usuario, las cuales generó inconsistencias y una gran carga de trabajo en su mantenimiento.

El primer desarrollo en condiciones reales ocurrió durante la primera "Semana de Hackeo" (Hackweek) de Twitter.” Mark Otto mostró a algunos colegas como acelerar el desarrollo de sus proyectos con la ayuda de la herramienta de trabajo. Como resultado, decenas de temas se han introducido en el marco de trabajo.

En agosto del 2011, Twitter liberó a Bootstrap como código abierto. En febrero del 2012, se convirtió en el proyecto de desarrollo más popular de GitHub.

Características

Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es compatible con la mayoría de los navegadores web. La información básica de compatibilidad de sitios web o aplicaciones está disponible para todos los dispositivos y navegadores. Existe un concepto de compatibilidad parcial que hace disponible la información básica de un sitio web para todos los dispositivos y navegadores. Por ejemplo, las propiedades introducidas en CSS3 para las esquinas redondeadas, gradientes y sombras son usadas por Bootstrap a pesar de la falta de soporte de navegadores antiguos. Esto extiende la funcionalidad de la herramienta, pero no es requerida para su uso.

Desde la versión 2.0 también soporta diseños web adaptables. Esto significa que el diseño gráfico de la página se ajusta dinámicamente, tomando en cuenta las características del dispositivo usado (Computadoras, tabletas, teléfonos móviles). Bootstrap es de código abierto y está disponible en GitHub. Los desarrolladores están motivados a participar en el proyecto y a hacer sus propias contribuciones a la plataforma.

Función y estructura

Ejemplo de una página web usando el Framework de Bootstrap renderizado en Mozilla Firefox Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS que implementan la variedad de componentes de la herramienta. Una hoja de estilo llamada bootstrap.less incluye los componentes de las hojas de estilo. Los desarrolladores pueden adaptar el mismo archivo de Bootstrap, seleccionando los componentes que deseen usar en su proyecto.

Los ajustes son posibles en una medida limitada a través de una hoja de estilo de configuración central. Los cambios más profundos son posibles mediante las declaraciones LESS. El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y operadores, selectores anidados, así como clases mixin.

Desde la versión 2.0, la configuración de Bootstrap también tiene una opción especial de "Personalizar" en la documentación. Por otra parte, los desarrolladores eligen en un formulario los componentes y ajustes deseados, y de ser necesario, los valores de varias opciones a sus necesidades. El paquete consecuentemente generado ya incluye la hoja de estilo CSS pre-compilada.

Sistema de cuadrilla y diseño sensible

Bootstrap viene con una disposición de cuadrilla estándar de 940 píxeles de ancho. Alternativamente, el desarrollador puede usar un diseño de ancho-variable. Para ambos casos, la herramienta tiene cuatro variaciones para hacer uso de distintas resoluciones y tipos de dispositivos: teléfonos móviles, formato de retrato y paisaje, tabletas y computadoras con baja y alta resolución (pantalla ancha). Esto ajusta el ancho de las columnas automáticamente.

Entendiendo la hoja de estilo CSS

Bootstrap proporciona un conjunto de hojas de estilo que proveen definiciones básicas de estilo para todos los componentes de HTML. Esto otorga una uniformidad al navegador y al sistema de anchura, da una apariencia moderna para el formateo de los elementos de texto, tablas y formularios.

Componentes re-utilizables

En adición a los elementos regulares de HTML, Bootstrap contiene otra interfaz de elementos comúnmente usados. Ésta incluye botones con características avanzadas (e.g grupo de botones o botones con opción de menú desplegable, listas de navegación, etiquetas horizontales y verticales, ruta de navegación, paginación, etc.), etiquetas, capacidades avanzadas de miniaturas tipográficas, formatos para mensajes de alerta y barras de progreso.

Plug-ins de JavaScript

Los componentes de JavaScript para Bootstrap están basados en la librería jQuery de JavaScript. Los plug-ins se encuentran en la herramienta de plug-in de jQuery. Proveen elementos adicionales de interfaz de usuario como diálogos, tooltips y carruseles. También extienden la funcionalidad de algunos elementos de interfaz existentes, incluyendo por ejemplo una función de auto-completar para campos de entrada (input).

La versión 2.0 soporta los siguientes plug-ins de JavaScript: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel y Typeahead. Una implementación de Bootstrap usando el Dojo toolkit también está disponible. Es llamada Dojo Bootstrap67 y es un puerto de los plug-ins de Twitter Bootstrap. Usa el código Dojo al 100% y tiene soporte para AMD (Asynchronous Module Definition).

Uso

Para usar Bootstrap en una página HTML, el desarrollador solo debe descargar la hoja de estilo Bootstrap CSS y enlazarla en el archivo HTML. Otra opción sería compilar el archivo CSS desde la hoja de estilo LESS o SASS descargada. Esto puede realizarse con un compilador especial. Si el desarrollador también quiere usar los componentes de JavaScript, éstos deben estar referenciados junto con la librería jQuery en el documento HTML.

El siguiente ejemplo ilustra cómo funciona. El código HTML define un simple formulario de búsqueda y una lista de resultados en un formulario tabular. La página consiste en elementos regulares y semánticos de HTML 5, y alguna información adicional de la clase de CSS de acuerdo con la documentación de Bootstrap. La figura muestra la representación del documento en Mozilla Firefox 10. <!DOCTYPE html> <html> <head> <title>Ejemplo de Bootstrap</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

Search

<form class="well form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn btn-primary">Buscar</button> </form>

Results

<thead> </thead> <tbody> </tbody>
# Título
1 Lorem ipsum dolor sit amet
2 Consetetur sadipscing elitr
3 At vero eos et accusam

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html> Creando una cuadrilla de diseño fija

...
...

Creando una cuadrilla de diseño fija con una cuadrilla de diseño fluida anidada

...
...
...
...

Referencias

  • «GitHub: Popular Watched Repositories». Archivado desde el original el 19 de abril de 2010. Consultado el 26 de julio de 2012.
  • «NASA - Spot The Station». 6 de noviembre de 2012.
  • «MSNBC - Beaking News». 6 de noviembre de 2012.
  • Mark Otto (17 de enero de 2012). «Bootstrap in A List Apart #342». Consultado el 5 de marzo de 2012.
  • Mark Otto (19 de agosto de 2011). «Bootstrap from Twitter». Archivado desde el original el 12 de mayo de 2012. Consultado el 27 de abril de 2012.
  • Blog: Using Twitter Bootstrap with Dojo. Retrieved on 2012-09-18
  • Dojo Toolkit implementation of Twitter Bootstrap. Retrieved on 2012-09-18 1.
  • AMD for asynchronous loading of modules and its dependencies. Retrieved on 2012-09-18

Fuentes

  • Cochran, David (12 de noviembre de 2012). Twitter Bootstrap Web Development (1st edición). Packt Publishing. p. 100. ISBN 978-1849518826. [[Category:Softwares]