Índice

Los contenedores Bootstrap

Los diseños que creará con Bootstrap se insertan en elementos HTML que son contenedores. Bootstrap cuenta con dos contenedores principales: uno de ancho fijo y otro de ancho fluido.

1. El contenedor de ancho fijo

Empezaremos usando el contenedor de ancho fijo.

En el panel Insertar, seleccione la categoría Componentes de Bootstrap, y haga clic en Container. O en el menú Insertar, seleccione Componentes de Bootstrap, y Container.

images/23OWT-01.PNG

Dreamweaver indica que para usar Bootstrap deberá pasar al modo En vivo.

images/23OWT-02.PNG

Haga clic en Aceptar.

Pase al modo Dividir - En vivo.

images/23OWT-03.PNG

Sepa que en este capítulo dedicado a Bootstrap deberá trabajar en ese modo.

En la vista en modo Código, en la página, haga clic en el lugar donde debe insertarse el contenedor.

En este ejemplo lo haremos justo después de la etiqueta de apertura de <body>, ya que de momento la página no tiene contenido.

De nuevo en el panel Insertar seleccione la categoría Componentes de Bootstrap y haga clic en Container.

El primer clic en Container sirve para activar Bootstrap y el modo En vivo, por ello es preciso insertar el componente de nuevo.

A continuación, Dreamweaver inserta el componente en la página:

images/18C23-004.png

En la vista en modo Código, verá que Dreamweaver ha insertado, entre otras cosas, un vínculo a la hoja de estilos CSS de Bootstrap: <link href="css/bootstrap.css" rel="stylesheet" type="text/css">.

Dreamweaver ha insertado también ...