Bootstrap 2.3.2: Guía de inicio

Logotipo de Bootstrap de Twitter

Bootstrap é un Marco CSS que se fixo moi popular en toda a rede. Os seus estilos responsabilidade vense nas redes sociais Tuenti y chilro. O seu uso afórranos moito tempo ao desenvolver unha aplicación web, xa que aforramos todo o traballo e o esforzo que supón crear un estilo de páxina limpo adecuado para todos os dispositivos. Consultando os estilos empregados neste marco, darémonos conta de que nos son familiares, xa que hoxe en día moitos sitios web o implementaron.

A estrutura

Imaxe da estrutura Bootstrap

Estrutura de fluído Bootstrap

Para que o noso sitio web sexa accesible desde teléfonos móbiles e tabletas, teremos que empregar a estrutura fluída que nos ofrece Bootstrap. O uso desta estrutura é moi sinxelo, todo está baseado en elementos palmo iso nos axudará deseño o noso deseño web. Máis tarde, cando accedemos a este deseño desde un Smartphone o comprimido, isto adaptarase automaticamente a devandito dispositivo mellorando considerablemente a calidade da navegación. Usaremos o palmo con clases en divisións lóxicas dentro da estrutura fluída, é dicir:

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

Onde o número 2 representa o tamaño do intervalo. Cada fila contén espazo suficiente para 12 espazos de tamaño 1 ou 2 de tamaño 6, pódese distribuír como queiras. Unha vez que se supera o espazo dunha fila, baixará automaticamente á seguinte, permitíndonos usar a palmo tamaño 12 para crear un salto de liña. Se quixésemos saltarnos algúns palmo ao crear un, é dicir, comezar a partir de 4 palmoe se aplicamos un tamaño de 3, usariamos este código:

<div class="span2 offset4">Contenido</div>

Isto permite á división saltar catro vans antes de amosar o contido. Podemos usalo por libre vontade, saltando o que queremos co noso código.

Saltando os períodos coa clase de compensación

Saltando os períodos coa clase de compensación

Deseño diferente para cada dispositivo

Imaxe con clases de exclusividade para dispositivos Bootstrap

Clases CSS para diferenciar cada dispositivo

Para aplicar un deseño diferente para cada tipo de dispositivo, indicaremos a cada división lóxica para que dispositivo está orientado, usando as seguintes clases:

Deste xeito, podemos amosar un deseño totalmente diferente para cada dispositivo co mesmo URL.

Botóns

Botóns de cor

Lista de botóns ofrecidos por Bootstrap

Bootstrap ofrécenos un repertorio limpo de botóns de cores, o seu uso é moi sinxelo:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

Onde btn btn-success refírese á cor do botón, para cambialo só teremos que substituílo polas clases mostradas na imaxe anterior.

Instalación de Bootstrap

Para a instalación deste framework CSS, descargaremos o zip da ligazón que deixarei ao final da publicación e escribiremos o seguinte código na cabeza do noso ficheiro HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

Unha vez que nos aseguramos de que os ficheiros CSS e JS están no mesmo cartafol que o noso ficheiro HTML, podemos comezar a deseñar o noso sitio web sensible.

Máis información - Validación do formulario

Descargar - Bootstrap: CSS Framework


O contido do artigo adhírese aos nosos principios de ética editorial. Para informar dun erro faga clic en aquí.

Un comentario, deixa o teu

Deixa o teu comentario

Enderezo de correo electrónico non será publicado.

*

*

  1. Responsable dos datos: Miguel Ángel Gatón
  2. Finalidade dos datos: controlar SPAM, xestión de comentarios.
  3. Lexitimación: o seu consentimento
  4. Comunicación dos datos: os datos non serán comunicados a terceiros salvo obrigación legal.
  5. Almacenamento de datos: base de datos aloxada por Occentus Networks (UE)
  6. Dereitos: en calquera momento pode limitar, recuperar e eliminar a súa información.

  1.   Alejandra dixo

    Non tes máis titoriais sobre este marco ???