ULTIMAS NOTICIAS
VIEW ALL --
04/26/2021 in Ascatravi
VEHICULOS LIGEROS PARA EL TRANSPORTE DE MERCANCIAS PELIGROSAS
VEHICULOS LIGEROS PARA EL TRANSPORTE DE MERCANCIAS PELIGROSAS Son muchos los lectores que se... -
02/02/2021 in Ascatravi
2020: REGRESO AL PASADO
2020: REGRESO AL PASADO Somos esclavos de las cifras y de las previsiones y a pesar de que 2020... -
12/22/2020 in Socios
ZANOTTI & MERCEDES E VITO ELECTRICA
Zanotti en la nueva eVito Mercedes Benz isotermo refrigerada 100 % eléctrica para el transporte... -
11/03/2020 in Ascatravi
CARNÉ B Y VEHICULOS ECO / CERO DE 4250 kg
CARNÉ B Y VEHICULOS ECO / CERO DE 4250 kg El teléfono no para de sonar y muchas consultas... -
10/03/2020 in Ascatravi
TRANSPORTE DE BIOMASA. EFICIENCIA Y RESPONSABILIDAD
TRANSPORTE DE BIOMASA. EFICIENCIA Y RESPONSABILIDAD El fomento y la promoción de las energías... -
02/03/2020 in Ascatravi
2019: ESTABILIDAD EN LA MATRICULACION DE VEHÍCULOS RIGIDOS CARROZADOS
2019: ESTABILIDAD EN LA MATRICULACION DE VEHÍCULOS RIGIDOS CARROZADOS Veníamos comentando... -
09/20/2017 in Ascatravi
NOVEDADES REGLAMENTARIAS: PROTECCIÓN TRASERA Y ALUMBRADO
NOVEDADES REGLAMENTARIAS: PROTECCIÓN TRASERA Y ALUMBRADO La historia del carrozado tiene su... -
06/15/2017 in Ascatravi
VEHÍCULOS EN UN LIMBO LEGAL
VEHÍCULOS EN UN LIMBO LEGAL Hace muchos años que los vehículos industriales y comerciales además...
Ver +
ASCATRAVI YA ES MIEMBRO DE UNE
UNE es el único Organismo de Normalización en España y como tal ha sido designado por el Ministerio de Economía, Industria y Competitividad ante la Comisión Europea. En este sentido, UNE es el representante español en los organismos internacionales ISO/IEC y en los europeos CEN/CENELEC siendo, asimismo, el organismo nacional de normalización de ETSI.
Ver +
POMMIER Innovative solutions for trucks
El Grupo Pommier es el líder actual del sector de la carrocería industrial, porque ha sabido desarrollar permanentemente relaciones de colaboración con sus clientes.
Ver +
FORANKRA. Su experto en sujeción de carga.
Forankra ofrece soluciones y productos personalizados para la sujeción de la carga y la optimización de toda la cadena logística; desde cinturones de amarre hasta sistemas y elementos de sujeción de la carga técnicamente avanzados. Con nuestro conocimiento y experiencia, ayudamos a nuestros clientes en la manipulación y sujeción de la carga en el transporte de una forma más segura y eficaz. Secures everything in transit™.
Ver +
TRANSPORTE 3
Ascatravi mantiene un acuerdo de colaboracón con la revista Transporte3, con el que se pretende que los fabricantes de 2ª fase estén al día de las noticias que son importantes para nuestro sector.
Ver +
FLECTOR TRUCK
Ver +
MINCOTUR
El Ministerio de Industria, Comercio y Turismo dispone de SEDE-e (sede electrónica del Minsiterio) para poder realizar todos los tramites relacionados con el registro de Fabricantes y representantes de vehículos.
Ver +
ASCATRAVI
Ascatravi es la asociación nacional que engloba a los fabricantes de 2ª fase, antiguamente llamados fabricantes de carrocerías o carroceros.
Forms Designs
- Categoría: Site Content
- Publicado el Jueves, 21 Marzo 2013 08:39
- Visitas: 14899
Welcome to Kallyas Joomla Template, a wonderful and premium product for multipurpose websites
Default styles
Individual form controls receive styling, but without any required base class on the <form>
or large changes in markup. Results in stacked, left-aligned labels on top of form controls.
<form> <fieldset> <legend>Legend</legend> <label>Label name</label> <input type="text" placeholder="Type something…"> <span class="help-block">Example block-level help text here.</span> <label class="checkbox"> <input type="checkbox"> Check me out </label> <button type="submit" class="btn">Submit</button> </fieldset> </form>
Optional layouts
Included with Bootstrap are three optional form layouts for common use cases.
Search form
Add .form-search
to the form and .search-query
to the <input>
for an extra-rounded text input.
<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form>
Inline form
Add .form-inline
for left-aligned labels and inline-block controls for a compact layout.
<form class="form-inline"> <input type="text" class="input-small" placeholder="Email"> <input type="password" class="input-small" placeholder="Password"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">Sign in</button> </form>
Horizontal form
Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:
- Add
.form-horizontal
to the form - Wrap labels and controls in
.control-group
- Add
.control-label
to the label - Wrap any associated controls in
.controls
for proper alignment
<form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputEmail">Email</label> <div class="controls"> <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="control-group"> <label class="control-label" for="inputPassword">Password</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="Password"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">Sign in</button> </div> </div> </form>
Supported form controls
Examples of standard form controls supported in an example form layout.
Inputs
Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
Requires the use of a specified type
at all times.
<input type="text" placeholder="Text input">
Textarea
Form control which supports multiple lines of text. Change rows
attribute as necessary.
<textarea rows="3"></textarea>
Checkboxes and radios
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
Default (stacked)
<label class="checkbox"> <input type="checkbox" value=""> Option one is this and that—be sure to include why it's great </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label>
Inline checkboxes
Add the .inline
class to a series of checkboxes or radios for controls appear on the same line.
<label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label>
Selects
Use the default option or specify a multiple="multiple"
to show multiple options at once.
<select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <select multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
Extending form controls
Adding on top of existing browser controls, Bootstrap includes other useful form components.
Prepended and appended inputs
Add text or buttons before or after any text-based input. Do note that select
elements are not supported here.
Default options
Wrap an .add-on
and an input
with one of two classes to prepend or append text to an input.
<div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" type="text" placeholder="Username"> </div> <div class="input-append"> <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div>
Combined
Use both classes and two instances of .add-on
to prepend and append an input.
<div class="input-prepend input-append"> <span class="add-on">$</span> <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div>
Buttons instead of text
Instead of a <span>
with text, use a .btn
to attach a button (or two) to an input.
<div class="input-append"> <input class="span2" id="appendedInputButton" type="text"> <button class="btn" type="button">Go!</button> </div>
<div class="input-append"> <input class="span2" id="appendedInputButtons" type="text"> <button class="btn" type="button">Search</button> <button class="btn" type="button">Options</button> </div>
<div class="input-prepend"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> <input class="span2" id="prependedDropdownButton" type="text"> </div>
Search form
<form class="form-search"> <div class="input-append"> <input type="text" class="span2 search-query"> <button type="submit" class="btn">Search</button> </div> <div class="input-prepend"> <button type="submit" class="btn">Search</button> <input type="text" class="span2 search-query"> </div> </form>
Control sizing
Use relative sizing classes like .input-large
or match your inputs to the grid column sizes using .span*
classes.
Block level inputs
Make any <input>
or <textarea>
element behave like a block level element.
<input class="input-block-level" type="text" placeholder=".input-block-level">
Relative sizing
<input class="input-mini" type="text" placeholder=".input-mini"> <input class="input-small" type="text" placeholder=".input-small"> <input class="input-medium" type="text" placeholder=".input-medium"> <input class="input-large" type="text" placeholder=".input-large"> <input class="input-xlarge" type="text" placeholder=".input-xlarge"> <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large
will increase the padding and font-size of an input.
Grid sizing
Use .span1
to .span12
for inputs that match the same sizes of the grid columns.
<input class="span1" type="text" placeholder=".span1"> <input class="span2" type="text" placeholder=".span2"> <input class="span3" type="text" placeholder=".span3"> <select class="span1"> ... </select> <select class="span2"> ... </select> <select class="span3"> ... </select>
For multiple grid inputs per line, use the .controls-row
modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.
<div class="controls"> <input class="span5" type="text" placeholder=".span5"> </div> <div class="controls controls-row"> <input class="span4" type="text" placeholder=".span4"> <input class="span1" type="text" placeholder=".span1"> </div> ...
Uneditable inputs
Present data in a form that's not editable without using actual form markup.
<span class="input-xlarge uneditable-input">Some value here</span>
Form actions
End a form with a group of actions (buttons). When placed within a .form-horizontal
, the buttons will automatically indent to line up with the form controls.
<div class="form-actions"> <button type="submit" class="btn btn-primary">Save changes</button> <button type="button" class="btn">Cancel</button> </div>
Help text
Inline and block level support for help text that appears around form controls.
Inline help
<input type="text"><span class="help-inline">Inline help text</span>
Block help
<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
Form control states
Provide feedback to users or visitors with basic feedback states on form controls and labels.
Input focus
We remove the default outline
styles on some form controls and apply a box-shadow
in its place for :focus
.
<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
Disabled inputs
Add the disabled
attribute on an input to prevent user input and trigger a slightly different look.
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Validation states
Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group
.
<div class="control-group warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> <input type="text" id="inputWarning"> <span class="help-inline">Something may have gone wrong</span> </div> </div> <div class="control-group error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> <input type="text" id="inputError"> <span class="help-inline">Please correct the error</span> </div> </div> <div class="control-group success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> <input type="text" id="inputSuccess"> <span class="help-inline">Woohoo!</span> </div> </div>
OFICINA DE ASCATRAVI
En Ascatravi trabajamos para que los socios se encuentren representados ante los organismos públicos.
M. José Sánchez Requena
Secretaria General mj.sanchezrequena@ascatravi.org
Alberto Sánchez Ramírez
Director Técnico a.sanchezramirez@ascatravi.org
Salvador Núñez Bustos
Secretario Técnico sn.bustos@ascatravi.org