[#BOOTSTRAP] HowTo: use forms with Bootstrap 3 (well not expect much…)

Hello!

During these days I have seen many people that becames the most happy people in the world when they start to work with Bootstrap, also if you use it with AngularJs so it seems better than a few strawberries with chocolate!

Today I have to work a little with forms and there is a series of lessons that I’ve been learned :

-There is a series of classes to organize the contents of a form, such as form-horizontal and form-inline

-There are a series of classes to define the labels for the controls and specific styles of controls

Here is an very bad example:

   1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title>Form 1</title>

   5:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   6:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   7: </head>

   8: <body>

   9:     <div class="container">

  10:         <form class="form-horizontal">            

  11:             <fieldset>

  12:                 <legend>Form 1</legend>

  13:                 <div class="controls">

  14:                     <label>Field 1</label>

  15:                     <input type="text" placeholder="1 type something ..." />

  16:                 </div>

  17:                 <div class="controls">

  18:                     <label>Fieldazo 2</label>

  19:                     <input type="text" placeholder="2 type something ..." />

  20:                 </div>

  21:             </fieldset>

  22:         </form>

  23:     </div>

  24:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  25: </body>

  26: </html>

The result we have is the following (much more ugly that hitiing you your mother)

image

Now, grouping controls in a DIV with the class control-list, and defining the class control-label for the label of each, and with some more… and have a more enjoyable form.

   1: <div class="container">

   2:     <form class="form-horizontal">            

   3:         <fieldset>

   4:             <legend>Form 1</legend>

   5:             <div class="control-list">

   6:                 <label class="control-label">Field 1</label>

   7:                 <div class="controls">

   8:                     <input type="text" placeholder="1 type something ..." />

   9:                 </div>

  10:             </div>

  11:             <div class="control-list">

  12:                 <label class="control-label">Fieldazo 2</label>

  13:                 <div class="controls">

  14:                     <input type="text" placeholder="2 type something ..." />

  15:                 </div>

  16:             </div>

  17:         </fieldset>

  18:     </form>

  19: </div>

The above example of code guente allows us to get a form that does not throw to the inhabitants of the underworld

image

Before proceeding to more advanced examples (nor is the head I of for more), it is best to read the official CSS support in the FORMS section of Bootstrap > > http://getbootstrap.com/css/#forms

For example the use of the class form-group with form-horizontal for grouping content horizontally, model validation, etc.

Reference: http://getbootstrap.com/css/#forms

Greetings @ La Finca

El Bruno

imageimageimageGoogle

[#BOOTSTRAP] HowTo: utilizar forms con Bootstrap 3 (bueno tampoco esperes mucho …)

Hola!

durante estos días he visto a mucha gente que se pone Jappy Jappy con Bootstrap, además parece que si lo usas con AngularJs pues es mejor que unas fresas bañadas con chocolate !!!

Hoy tocó trabajar un poco con forms y las lecciones aprendidas son las siguientes:

– existe una serie de clases para organizar los contenidos de un form, por ejemplo form-horizontal y form-inline

– existen una serie de clases para definir los labels de los controles y los estilos específicos de los controles

Veamos un ejemplo mal hecho:

   1:  

   2: <!DOCTYPE html>

   3: <html xmlns="http://www.w3.org/1999/xhtml">

   4: <head>

   5:     <title>Form 1</title>

   6:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   7:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   8: </head>

   9: <body>

  10:     <div class="container">

  11:         <form class="form-horizontal">            

  12:             <fieldset>

  13:                 <legend>Form 1</legend>

  14:                 <div class="controls">

  15:                     <label>Field 1</label>

  16:                     <input type="text" placeholder="1 type something ..." />

  17:                 </div>

  18:                 <div class="controls">

  19:                     <label>Fieldazo 2</label>

  20:                     <input type="text" placeholder="2 type something ..." />

  21:                 </div>

  22:             </fieldset>

  23:         </form>

  24:     </div>

  25:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  26: </body>

  27: </html>

El resultado que tenemos es el siguiente (mucho más feo que pegarle a tu madre)

image

Ahora bien, agrupando los controles en un DIV con la clase control-list, definiendo la clase control-label para el label de cada uno, y con poco mas … ya tenemos un form más agradable.

   1:  

   2: <!DOCTYPE html>

   3: <html xmlns="http://www.w3.org/1999/xhtml">

   4: <head>

   5:     <title>Form 1</title>

   6:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   7:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   8: </head>

   9: <body>

  10:     <div class="container">

  11:         <form class="form-horizontal">            

  12:             <fieldset>

  13:                 <legend>Form 1</legend>

  14:                 <div class="control-list">

  15:                     <label class="control-label">Field 1</label>

  16:                     <div class="controls">

  17:                         <input type="text" placeholder="1 type something ..." />

  18:                     </div>

  19:                 </div>

  20:                 <div class="control-list">

  21:                     <label class="control-label">Fieldazo 2</label>

  22:                     <div class="controls">

  23:                         <input type="text" placeholder="2 type something ..." />

  24:                     </div>

  25:                 </div>

  26:             </fieldset>

  27:         </form>

  28:     </div>

  29:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  30: </body>

  31: </html>

El ejemplo anterior de código guente nos permite conseguir un form que no haga vomitar a los habitantes del averno

image

Antes de seguir a ejemplos más avanzados (tampoco es que la cabeza me de para más), lo mejor es leer la ayuda oficial de CSS en la sección FORMS de Bootstrap >> http://getbootstrap.com/css/#forms

Por ejemplo el uso de la clase form-group con form-horizontal para agrupar contenidos horizontalmente, modelos de validación, etc.

 

Referencia: http://getbootstrap.com/css/#forms

Saludos @ La Finca

El Bruno

image image image Google

[#BOOTSTRAP] Live grid, columns and more stuff …

Hello!

After yesterday’s post about how to add Bootstrap to a web project in Visual Studio 2012 or 2013, today I will explain a little more about the way that Bootstrap allows to work with with elements in a grid.

The simplest model that proposes Bootstrap is based on a grid with 12 columns. Basically is possible to assemble groups of columns that always add 12, in example

  • 4, 4, 4
  • 2, 4, 6
  • 1, 3, 4, 1, 3
  • etc

The following image, extracted from the official doc explains it so that everybody can understand this, even dumb people like me.

image

When you have to to create this type of tables , you must start with a DIV element with the class row and then the interior components with a fixed scheme that works “in all resolutions”, with classes

  • .col-xs –; for extra small devices < 768px
  • .col-sm –; for small devices > = 768px
  • .col-md –; to medium devices > = 992px
  • .col-lg –; for large devices = > 1200px

The following example defines a 4,4,4 to medium devices size and size 8,2,2 for small devices

 1: <div class="container">

   2:     <div class="row-fluid">

   3:         <div class="col-md-4 col-xs-8" style="background: greenyellow">

   4:             <h1>Title A</h1>

   5:             <p>

   6:                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

   7:             </p>

   8:         </div>

   9:         <div class="col-md-4 col-xs-2" style="background: yellow">

  10:             <h1>Title B</h1>

  11:             <p>

  12:                 Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  13:                 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  14:             </p>

  15:         </div>

  16:         <div class="col-md-4 col-xs-2" style="background: red">

  17:             <h1>Title C</h1>

  18:             <p>

  19:                 Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  20:                 Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  21:             </p>

  22:         </div>

  23:     </div>

 

In implementation looks something like this

BootstrapSample2

By the way, many thanks to Gorka (@Gk_8) for making me remember explain col-xs -… Winking smile and thanks to Sergio León (@panicoenlaxbox) by explain version 3 bootstrap!

References:

Greetings @ La Finca

El Bruno

imageimageimageGoogle

[#BOOTSTRAP] Live grid, columnas y demas …

Hola!

después del post de ayer sobre la forma de agregar Bootstrap a un proyecto web en Visual Studio 2012 o 2013, hoy voy a explicar un poco sobre la forma que provee by default Bootstrap para trabajar con elementos en una grid.

El modelo más simple que propone Bootstrap se basa en una grid con 12 columnas. Sobre esta base es posible armar grupos de columnas que siempre sumen 12, por ejemplo

  • 4, 4, 4
  • 6, 2, 4
  • 1, 1, 4, 3, 3
  • etc

La siguiente imagen, extraida de la doc oficial lo explica para que lo entiendan personas como yo.

image

La forma de crear este tipo de tablas consiste en definir un DIV con la clase row  y luego los componentes interiores con un esquema fijo que funciona “en todas las resoluciones”, con las clases

  • .col-xs-; para extra small devices < 768px
  • .col-sm-; para small devices >= 768px
  • .col-md-; para medium devices >= 992px
  • .col-lg-; para large devices => 1200px

El siguiente ejemplo define un tamaño de 4,4,4 para medium devices y un tamaño 8,2,2 para small devices

   1: <div class="container">

   2:     <div class="row-fluid">

   3:         <div class="col-md-4 col-xs-8" style="background: greenyellow">

   4:             <h1>Title A</h1>

   5:             <p>

   6:                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

   7:             </p>

   8:         </div>

   9:         <div class="col-md-4 col-xs-2" style="background: yellow">

  10:             <h1>Title B</h1>

  11:             <p>

  12:                 Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  13:                 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  14:             </p>

  15:         </div>

  16:         <div class="col-md-4 col-xs-2" style="background: red">

  17:             <h1>Title C</h1>

  18:             <p>

  19:                 Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  20:                 Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  21:             </p>

  22:         </div>

  23:     </div>

En ejecución se ve algo así

BootstrapSample2

Por cierto, muchas gracias a Gorka (@Gk_8) por hacerme acordar de explicar los col-xs- … Winking smile y gracias a Sergio Leon (@panicoenlaxbox) por explicarme la version 3 de Bootstrap!

Referencias:

Saludos @ La Finca

El Bruno

image image image Google