{"id":12,"date":"2013-10-13T01:49:38","date_gmt":"2013-10-13T01:49:38","guid":{"rendered":"http:\/\/dinario.com\/index.php\/2013\/10\/13\/forms-and-button\/"},"modified":"2013-10-13T01:49:38","modified_gmt":"2013-10-13T01:49:38","slug":"forms-and-button","status":"publish","type":"post","link":"http:\/\/dinario.com\/index.php\/2013\/10\/13\/forms-and-button\/","title":{"rendered":"Forms and Button"},"content":{"rendered":"<h2>Forms<\/h2>\n<h3>Default styles<\/h3>\n<p>Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;<\/code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.<\/p>\n<form class=\"bs-docs-example\">\n<fieldset>\n<legend>Legend<\/legend>\n<p> <label>Label name<\/label> <input type=\"text\" \/> <span class=\"help-block\">Example block-level help text here.<\/span> <label class=\"checkbox\"> <input type=\"checkbox\" \/> Check me out <\/label> <button class=\"btn\" type=\"submit\">Submit<\/button><\/fieldset>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;form&gt;\r\n  &lt;fieldset&gt;\r\n    &lt;legend&gt;Legend&lt;\/legend&gt;\r\n    &lt;label&gt;Label name&lt;\/label&gt;\r\n    &lt;input type=\"text\" placeholder=\"Type something\u2026\"&gt;\r\n    &lt;span class=\"help-block\"&gt;Example block-level help text here.&lt;\/span&gt;\r\n    &lt;label class=\"checkbox\"&gt;\r\n      &lt;input type=\"checkbox\"&gt; Check me out\r\n    &lt;\/label&gt;\r\n    &lt;button type=\"submit\" class=\"btn\"&gt;Submit&lt;\/button&gt;\r\n  &lt;\/fieldset&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<hr \/>\n<h3>Optional layouts<\/h3>\n<p>Included with Bootstrap are three optional form layouts for common use cases.<\/p>\n<h3>\u00a0<\/h3>\n<h4>Search form<\/h4>\n<p>Add <code>.form-search<\/code> to the form and <code>.search-query<\/code> to the <code>&lt;input&gt;<\/code> for an extra-rounded text input.<\/p>\n<form class=\"bs-docs-example form-search\"><input class=\"input-medium search-query\" type=\"text\" \/> <button class=\"btn\" type=\"submit\">Search<\/button><\/form>\n<pre class=\"prettyprint linenums\">&lt;form class=\"form-search\"&gt;\r\n  &lt;input type=\"text\" class=\"input-medium search-query\"&gt;\r\n  &lt;button type=\"submit\" class=\"btn\"&gt;Search&lt;\/button&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<h4>Inline form<\/h4>\n<p>Add <code>.form-inline<\/code> for left-aligned labels and inline-block controls for a compact layout.<\/p>\n<form class=\"bs-docs-example form-inline\"><input class=\"input-small\" type=\"text\" \/> <input class=\"input-small\" type=\"password\" \/> <label class=\"checkbox\"> <input type=\"checkbox\" \/> Remember me <\/label> <button class=\"btn\" type=\"submit\">Sign in<\/button><\/form>\n<pre class=\"prettyprint linenums\">&lt;form class=\"form-inline\"&gt;\r\n  &lt;input type=\"text\" class=\"input-small\" placeholder=\"Email\"&gt;\r\n  &lt;input type=\"password\" class=\"input-small\" placeholder=\"Password\"&gt;\r\n  &lt;label class=\"checkbox\"&gt;\r\n    &lt;input type=\"checkbox\"&gt; Remember me\r\n  &lt;\/label&gt;\r\n  &lt;button type=\"submit\" class=\"btn\"&gt;Sign in&lt;\/button&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<h4>Horizontal form<\/h4>\n<p>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:<\/p>\n<ul>\n<li>Add <code>.form-horizontal<\/code> to the form<\/li>\n<li>Wrap labels and controls in <code>.control-group<\/code><\/li>\n<li>Add <code>.control-label<\/code> to the label<\/li>\n<li>Wrap any associated controls in <code>.controls<\/code> for proper alignment<\/li>\n<\/ul>\n<form class=\"bs-docs-example form-horizontal\">\n<div class=\"control-group\"><label class=\"control-label\" for=\"inputEmail\">Email<\/label><\/p>\n<div class=\"controls\"><input id=\"inputEmail\" type=\"text\" \/><\/div>\n<\/div>\n<div class=\"control-group\"><label class=\"control-label\" for=\"inputPassword\">Password<\/label><\/p>\n<div class=\"controls\"><input id=\"inputPassword\" type=\"password\" \/><\/div>\n<\/div>\n<div class=\"control-group\">\n<div class=\"controls\"><label class=\"checkbox\"> <input type=\"checkbox\" \/> Remember me <\/label> <button class=\"btn\" type=\"submit\">Sign in<\/button><\/div>\n<\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;form class=\"form-horizontal\"&gt;\r\n  &lt;div class=\"control-group\"&gt;\r\n    &lt;label class=\"control-label\" for=\"inputEmail\"&gt;Email&lt;\/label&gt;\r\n    &lt;div class=\"controls\"&gt;\r\n      &lt;input type=\"text\" id=\"inputEmail\" placeholder=\"Email\"&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"control-group\"&gt;\r\n    &lt;label class=\"control-label\" for=\"inputPassword\"&gt;Password&lt;\/label&gt;\r\n    &lt;div class=\"controls\"&gt;\r\n      &lt;input type=\"password\" id=\"inputPassword\" placeholder=\"Password\"&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"control-group\"&gt;\r\n    &lt;div class=\"controls\"&gt;\r\n      &lt;label class=\"checkbox\"&gt;\r\n        &lt;input type=\"checkbox\"&gt; Remember me\r\n      &lt;\/label&gt;\r\n      &lt;button type=\"submit\" class=\"btn\"&gt;Sign in&lt;\/button&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<hr \/>\n<h2>Supported form controls<\/h2>\n<p>Examples of standard form controls supported in an example form layout.<\/p>\n<h3>Inputs<\/h3>\n<p>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.<\/p>\n<p>Requires the use of a specified <code>type<\/code> at all times.<\/p>\n<form class=\"bs-docs-example form-inline\"><input type=\"text\" \/><\/form>\n<pre class=\"prettyprint linenums\">&lt;input type=\"text\" placeholder=\"Text input\"&gt;\r\n<\/pre>\n<\/p>\n<h3>Textarea<\/h3>\n<p>Form control which supports multiple lines of text. Change <code>rows<\/code> attribute as necessary.<\/p>\n<form class=\"bs-docs-example form-inline\"><textarea rows=\"3\"><\/textarea><\/form>\n<pre class=\"prettyprint linenums\">&lt;textarea rows=\"3\"&gt;&lt;\/textarea&gt;\r\n<\/pre>\n<\/p>\n<h3>Checkboxes and radios<\/h3>\n<p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.<\/p>\n<h4>Default (stacked)<\/h4>\n<form class=\"bs-docs-example\"><label class=\"checkbox\"> <input type=\"checkbox\" value=\"\" \/> Option one is this and that\u2014be sure to include why it&#8217;s great <\/label> <br \/> <label class=\"radio\"> <input id=\"optionsRadios1\" type=\"radio\" name=\"optionsRadios\" value=\"option1\" \/> Option one is this and that\u2014be sure to include why it&#8217;s great <\/label> <label class=\"radio\"> <input id=\"optionsRadios2\" type=\"radio\" name=\"optionsRadios\" value=\"option2\" \/> Option two can be something else and selecting it will deselect option one <\/label><\/form>\n<pre class=\"prettyprint linenums\">&lt;label class=\"checkbox\"&gt;\r\n  &lt;input type=\"checkbox\" value=\"\"&gt;\r\n  Option one is this and that\u2014be sure to include why it's great\r\n&lt;\/label&gt;\r\n\r\n&lt;label class=\"radio\"&gt;\r\n  &lt;input type=\"radio\" name=\"optionsRadios\" id=\"optionsRadios1\" value=\"option1\" checked&gt;\r\n  Option one is this and that\u2014be sure to include why it's great\r\n&lt;\/label&gt;\r\n&lt;label class=\"radio\"&gt;\r\n  &lt;input type=\"radio\" name=\"optionsRadios\" id=\"optionsRadios2\" value=\"option2\"&gt;\r\n  Option two can be something else and selecting it will deselect option one\r\n&lt;\/label&gt;\r\n<\/pre>\n<h4>\u00a0<\/h4>\n<h4>Inline checkboxes<\/h4>\n<p>Add the <code>.inline<\/code> class to a series of checkboxes or radios for controls appear on the same line.<\/p>\n<form class=\"bs-docs-example\"><label class=\"checkbox inline\"> <input id=\"inlineCheckbox1\" type=\"checkbox\" value=\"option1\" \/> 1 <\/label> <label class=\"checkbox inline\"> <input id=\"inlineCheckbox2\" type=\"checkbox\" value=\"option2\" \/> 2 <\/label> <label class=\"checkbox inline\"> <input id=\"inlineCheckbox3\" type=\"checkbox\" value=\"option3\" \/> 3 <\/label><\/form>\n<pre class=\"prettyprint linenums\">&lt;label class=\"checkbox inline\"&gt;\r\n  &lt;input type=\"checkbox\" id=\"inlineCheckbox1\" value=\"option1\"&gt; 1\r\n&lt;\/label&gt;\r\n&lt;label class=\"checkbox inline\"&gt;\r\n  &lt;input type=\"checkbox\" id=\"inlineCheckbox2\" value=\"option2\"&gt; 2\r\n&lt;\/label&gt;\r\n&lt;label class=\"checkbox inline\"&gt;\r\n  &lt;input type=\"checkbox\" id=\"inlineCheckbox3\" value=\"option3\"&gt; 3\r\n&lt;\/label&gt;\r\n<\/pre>\n<\/p>\n<h3>Selects<\/h3>\n<p>Use the default option or specify a <code>multiple=\"multiple\"<\/code> to show multiple options at once.<\/p>\n<form class=\"bs-docs-example\"><select><option>1<\/option><option>2<\/option><option>3<\/option><option>4<\/option><option>5<\/option><\/select><br \/><select multiple=\"multiple\"><option>1<\/option><option>2<\/option><option>3<\/option><option>4<\/option><option>5<\/option><\/select><\/form>\n<pre class=\"prettyprint linenums\">&lt;select&gt;\r\n  &lt;option&gt;1&lt;\/option&gt;\r\n  &lt;option&gt;2&lt;\/option&gt;\r\n  &lt;option&gt;3&lt;\/option&gt;\r\n  &lt;option&gt;4&lt;\/option&gt;\r\n  &lt;option&gt;5&lt;\/option&gt;\r\n&lt;\/select&gt;\r\n\r\n&lt;select multiple=\"multiple\"&gt;\r\n  &lt;option&gt;1&lt;\/option&gt;\r\n  &lt;option&gt;2&lt;\/option&gt;\r\n  &lt;option&gt;3&lt;\/option&gt;\r\n  &lt;option&gt;4&lt;\/option&gt;\r\n  &lt;option&gt;5&lt;\/option&gt;\r\n&lt;\/select&gt;\r\n<\/pre>\n<hr \/>\n<h2>Extending form controls<\/h2>\n<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.<\/p>\n<h3>Prepended and appended inputs<\/h3>\n<p>Add text or buttons before or after any text-based input. Do note that <code>select<\/code> elements are not supported here.<\/p>\n<h4>Default options<\/h4>\n<p>Wrap an <code>.add-on<\/code> and an <code>input<\/code> with one of two classes to prepend or append text to an input.<\/p>\n<form class=\"bs-docs-example\">\n<div class=\"input-prepend\"><span class=\"add-on\">@<\/span> <input id=\"prependedInput\" class=\"span2\" type=\"text\" \/><\/div>\n<p><\/p>\n<div class=\"input-append\"><input id=\"appendedInput\" class=\"span2\" type=\"text\" \/> <span class=\"add-on\">.00<\/span><\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;div class=\"input-prepend\"&gt;\r\n  &lt;span class=\"add-on\"&gt;@&lt;\/span&gt;\r\n  &lt;input class=\"span2\" id=\"prependedInput\" type=\"text\" placeholder=\"Username\"&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"input-append\"&gt;\r\n  &lt;input class=\"span2\" id=\"appendedInput\" type=\"text\"&gt;\r\n  &lt;span class=\"add-on\"&gt;.00&lt;\/span&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h4>Combined<\/h4>\n<p>Use both classes and two instances of <code>.add-on<\/code> to prepend and append an input.<\/p>\n<form class=\"bs-docs-example form-inline\">\n<div class=\"input-prepend input-append\"><span class=\"add-on\">$<\/span> <input id=\"appendedPrependedInput\" class=\"span2\" type=\"text\" \/> <span class=\"add-on\">.00<\/span><\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;div class=\"input-prepend input-append\"&gt;\r\n  &lt;span class=\"add-on\"&gt;$&lt;\/span&gt;\r\n  &lt;input class=\"span2\" id=\"appendedPrependedInput\" type=\"text\"&gt;\r\n  &lt;span class=\"add-on\"&gt;.00&lt;\/span&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h4>Buttons instead of text<\/h4>\n<p>Instead of a <code>&lt;span&gt;<\/code> with text, use a <code>.btn<\/code> to attach a button (or two) to an input.<\/p>\n<form class=\"bs-docs-example\">\n<div class=\"input-append\"><input id=\"appendedInputButton\" class=\"span2\" type=\"text\" \/> <button class=\"btn\" type=\"button\">Go!<\/button><\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;div class=\"input-append\"&gt;\r\n  &lt;input class=\"span2\" id=\"appendedInputButton\" type=\"text\"&gt;\r\n  &lt;button class=\"btn\" type=\"button\"&gt;Go!&lt;\/button&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<form class=\"bs-docs-example\">\n<div class=\"input-append\"><input id=\"appendedInputButtons\" class=\"span2\" type=\"text\" \/> <button class=\"btn\" type=\"button\">Search<\/button> <button class=\"btn\" type=\"button\">Options<\/button><\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;div class=\"input-append\"&gt;\r\n  &lt;input class=\"span2\" id=\"appendedInputButtons\" type=\"text\"&gt;\r\n  &lt;button class=\"btn\" type=\"button\"&gt;Search&lt;\/button&gt;\r\n  &lt;button class=\"btn\" type=\"button\"&gt;Options&lt;\/button&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h4>Button dropdowns<\/h4>\n<\/p>\n<form class=\"bs-docs-example\">\n<div class=\"input-append\"><input id=\"appendedDropdownButton\" class=\"span2\" type=\"text\" \/><\/p>\n<div class=\"btn-group\"><button class=\"btn dropdown-toggle\" data-toggle=\"dropdown\">Action <\/button><\/p>\n<ul class=\"dropdown-menu\">\n<li><a href=\"#\">Action<\/a><\/li>\n<li><a href=\"#\">Another action<\/a><\/li>\n<li><a href=\"#\">Something else here<\/a><\/li>\n<li class=\"divider\"><\/li>\n<li><a href=\"#\">Separated link<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;div class=\"input-append\"&gt;\r\n  &lt;input class=\"span2\" id=\"appendedDropdownButton\" type=\"text\"&gt;\r\n  &lt;div class=\"btn-group\"&gt;\r\n    &lt;button class=\"btn dropdown-toggle\" data-toggle=\"dropdown\"&gt;\r\n      Action\r\n      &lt;span class=\"caret\"&gt;&lt;\/span&gt;\r\n    &lt;\/button&gt;\r\n    &lt;ul class=\"dropdown-menu\"&gt;\r\n      ...\r\n    &lt;\/ul&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<form class=\"bs-docs-example\">\n<div class=\"input-prepend\">\n<div class=\"btn-group\"><button class=\"btn dropdown-toggle\" data-toggle=\"dropdown\">Action <\/button><\/p>\n<ul class=\"dropdown-menu\">\n<li><a href=\"#\">Action<\/a><\/li>\n<li><a href=\"#\">Another action<\/a><\/li>\n<li><a href=\"#\">Something else here<\/a><\/li>\n<li class=\"divider\"><\/li>\n<li><a href=\"#\">Separated link<\/a><\/li>\n<\/ul>\n<\/div>\n<p><input id=\"prependedDropdownButton\" class=\"span2\" type=\"text\" \/><\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;div class=\"input-prepend\"&gt;\r\n  &lt;div class=\"btn-group\"&gt;\r\n    &lt;button class=\"btn dropdown-toggle\" data-toggle=\"dropdown\"&gt;\r\n      Action\r\n      &lt;span class=\"caret\"&gt;&lt;\/span&gt;\r\n    &lt;\/button&gt;\r\n    &lt;ul class=\"dropdown-menu\"&gt;\r\n      ...\r\n    &lt;\/ul&gt;\r\n  &lt;\/div&gt;\r\n  &lt;input class=\"span2\" id=\"prependedDropdownButton\" type=\"text\"&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<form class=\"bs-docs-example\">\n<div class=\"input-prepend input-append\">\n<div class=\"btn-group\"><button class=\"btn dropdown-toggle\" data-toggle=\"dropdown\">Action <\/button><\/p>\n<ul class=\"dropdown-menu\">\n<li><a href=\"#\">Action<\/a><\/li>\n<li><a href=\"#\">Another action<\/a><\/li>\n<li><a href=\"#\">Something else here<\/a><\/li>\n<li class=\"divider\"><\/li>\n<li><a href=\"#\">Separated link<\/a><\/li>\n<\/ul>\n<\/div>\n<p><input id=\"appendedPrependedDropdownButton\" class=\"span2\" type=\"text\" \/><\/p>\n<div class=\"btn-group\"><button class=\"btn dropdown-toggle\" data-toggle=\"dropdown\">Action <\/button><\/p>\n<ul class=\"dropdown-menu\">\n<li><a href=\"#\">Action<\/a><\/li>\n<li><a href=\"#\">Another action<\/a><\/li>\n<li><a href=\"#\">Something else here<\/a><\/li>\n<li class=\"divider\"><\/li>\n<li><a href=\"#\">Separated link<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;div class=\"input-prepend input-append\"&gt;\r\n  &lt;div class=\"btn-group\"&gt;\r\n    &lt;button class=\"btn dropdown-toggle\" data-toggle=\"dropdown\"&gt;\r\n      Action\r\n      &lt;span class=\"caret\"&gt;&lt;\/span&gt;\r\n    &lt;\/button&gt;\r\n    &lt;ul class=\"dropdown-menu\"&gt;\r\n      ...\r\n    &lt;\/ul&gt;\r\n  &lt;\/div&gt;\r\n  &lt;input class=\"span2\" id=\"appendedPrependedDropdownButton\" type=\"text\"&gt;\r\n  &lt;div class=\"btn-group\"&gt;\r\n    &lt;button class=\"btn dropdown-toggle\" data-toggle=\"dropdown\"&gt;\r\n      Action\r\n      &lt;span class=\"caret\"&gt;&lt;\/span&gt;\r\n    &lt;\/button&gt;\r\n    &lt;ul class=\"dropdown-menu\"&gt;\r\n      ...\r\n    &lt;\/ul&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h4>Segmented dropdown groups<\/h4>\n<form class=\"bs-docs-example\">\n<div class=\"input-prepend\">\n<div class=\"btn-group\"><button class=\"btn\" tabindex=\"-1\">Action<\/button> <button class=\"btn dropdown-toggle\" tabindex=\"-1\" data-toggle=\"dropdown\"> <\/button><\/p>\n<ul class=\"dropdown-menu\">\n<li><a href=\"#\">Action<\/a><\/li>\n<li><a href=\"#\">Another action<\/a><\/li>\n<li><a href=\"#\">Something else here<\/a><\/li>\n<li class=\"divider\"><\/li>\n<li><a href=\"#\">Separated link<\/a><\/li>\n<\/ul>\n<\/div>\n<p><input type=\"text\" \/><\/div>\n<div class=\"input-append\"><input type=\"text\" \/><\/p>\n<div class=\"btn-group\"><button class=\"btn\" tabindex=\"-1\">Action<\/button> <button class=\"btn dropdown-toggle\" tabindex=\"-1\" data-toggle=\"dropdown\"> <\/button><\/p>\n<ul class=\"dropdown-menu\">\n<li><a href=\"#\">Action<\/a><\/li>\n<li><a href=\"#\">Another action<\/a><\/li>\n<li><a href=\"#\">Something else here<\/a><\/li>\n<li class=\"divider\"><\/li>\n<li><a href=\"#\">Separated link<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;form&gt;\r\n  &lt;div class=\"input-prepend\"&gt;\r\n    &lt;div class=\"btn-group\"&gt;...&lt;\/div&gt;\r\n    &lt;input type=\"text\"&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"input-append\"&gt;\r\n    &lt;input type=\"text\"&gt;\r\n    &lt;div class=\"btn-group\"&gt;...&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<h4>Search form<\/h4>\n<form class=\"bs-docs-example form-search\">\n<div class=\"input-append\"><input class=\"span2 search-query\" type=\"text\" \/> <button class=\"btn\" type=\"submit\">Search<\/button><\/div>\n<div class=\"input-prepend\"><button class=\"btn\" type=\"submit\">Search<\/button> <input class=\"span2 search-query\" type=\"text\" \/><\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;form class=\"form-search\"&gt;\r\n  &lt;div class=\"input-append\"&gt;\r\n    &lt;input type=\"text\" class=\"span2 search-query\"&gt;\r\n    &lt;button type=\"submit\" class=\"btn\"&gt;Search&lt;\/button&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"input-prepend\"&gt;\r\n    &lt;button type=\"submit\" class=\"btn\"&gt;Search&lt;\/button&gt;\r\n    &lt;input type=\"text\" class=\"span2 search-query\"&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<h3>\u00a0<\/h3>\n<h3>Control sizing<\/h3>\n<p>Use relative sizing classes like <code>.input-large<\/code> or match your inputs to the grid column sizes using <code>.span*<\/code> classes.<\/p>\n<h4>Block level inputs<\/h4>\n<p>Make any <code>&lt;input&gt;<\/code> or <code>&lt;textarea&gt;<\/code> element behave like a block level element.<\/p>\n<form class=\"bs-docs-example\" style=\"padding-bottom: 15px;\">\n<div class=\"controls\"><input class=\"input-block-level\" type=\"text\" \/><\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;input class=\"input-block-level\" type=\"text\" placeholder=\".input-block-level\"&gt;\r\n<\/pre>\n<h4>\u00a0<\/h4>\n<h4>Relative sizing<\/h4>\n<form class=\"bs-docs-example\" style=\"padding-bottom: 15px;\">\n<div class=\"controls docs-input-sizes\"><input class=\"input-mini\" type=\"text\" \/> <input class=\"input-small\" type=\"text\" \/> <input class=\"input-medium\" type=\"text\" \/> <input class=\"input-large\" type=\"text\" \/> <input class=\"input-xlarge\" type=\"text\" \/> <input class=\"input-xxlarge\" type=\"text\" \/><\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;input class=\"input-mini\" type=\"text\" placeholder=\".input-mini\"&gt;\r\n&lt;input class=\"input-small\" type=\"text\" placeholder=\".input-small\"&gt;\r\n&lt;input class=\"input-medium\" type=\"text\" placeholder=\".input-medium\"&gt;\r\n&lt;input class=\"input-large\" type=\"text\" placeholder=\".input-large\"&gt;\r\n&lt;input class=\"input-xlarge\" type=\"text\" placeholder=\".input-xlarge\"&gt;\r\n&lt;input class=\"input-xxlarge\" type=\"text\" placeholder=\".input-xxlarge\"&gt;\r\n<\/pre>\n<p><span class=\"label label-info\">Heads up!<\/span> In future versions, we&#8217;ll be altering the use of these relative input classes to match our button sizes. For example, <code>.input-large<\/code> will increase the padding and font-size of an input.<\/p>\n<h4>\u00a0<\/h4>\n<h4>Grid sizing<\/h4>\n<p>Use <code>.span1<\/code> to <code>.span12<\/code> for inputs that match the same sizes of the grid columns.<\/p>\n<form class=\"bs-docs-example\" style=\"padding-bottom: 15px;\">\n<div class=\"controls docs-input-sizes\"><input class=\"span1\" type=\"text\" \/> <input class=\"span2\" type=\"text\" \/> <input class=\"span3\" type=\"text\" \/><select class=\"span1\"><option>1<\/option><option>2<\/option><option>3<\/option><option>4<\/option><option>5<\/option><\/select><select class=\"span2\"><option>1<\/option><option>2<\/option><option>3<\/option><option>4<\/option><option>5<\/option><\/select><select class=\"span3\"><option>1<\/option><option>2<\/option><option>3<\/option><option>4<\/option><option>5<\/option><\/select><\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;input class=\"span1\" type=\"text\" placeholder=\".span1\"&gt;\r\n&lt;input class=\"span2\" type=\"text\" placeholder=\".span2\"&gt;\r\n&lt;input class=\"span3\" type=\"text\" placeholder=\".span3\"&gt;\r\n&lt;select class=\"span1\"&gt;\r\n  ...\r\n&lt;\/select&gt;\r\n&lt;select class=\"span2\"&gt;\r\n  ...\r\n&lt;\/select&gt;\r\n&lt;select class=\"span3\"&gt;\r\n  ...\r\n&lt;\/select&gt;\r\n<\/pre>\n<p>For multiple grid inputs per line, <strong>use the <code>.controls-row<\/code> modifier class for proper spacing<\/strong>. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.<\/p>\n<form class=\"bs-docs-example\" style=\"padding-bottom: 15px;\">\n<div class=\"controls\"><input class=\"span5\" type=\"text\" \/><\/div>\n<div class=\"controls controls-row\"><input class=\"span4\" type=\"text\" \/> <input class=\"span1\" type=\"text\" \/><\/div>\n<div class=\"controls controls-row\"><input class=\"span3\" type=\"text\" \/> <input class=\"span2\" type=\"text\" \/><\/div>\n<div class=\"controls controls-row\"><input class=\"span2\" type=\"text\" \/> <input class=\"span3\" type=\"text\" \/><\/div>\n<div class=\"controls controls-row\"><input class=\"span1\" type=\"text\" \/> <input class=\"span4\" type=\"text\" \/><\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;div class=\"controls\"&gt;\r\n  &lt;input class=\"span5\" type=\"text\" placeholder=\".span5\"&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"controls controls-row\"&gt;\r\n  &lt;input class=\"span4\" type=\"text\" placeholder=\".span4\"&gt;\r\n  &lt;input class=\"span1\" type=\"text\" placeholder=\".span1\"&gt;\r\n&lt;\/div&gt;\r\n...\r\n<\/pre>\n<h3>\u00a0<\/h3>\n<h3>Uneditable inputs<\/h3>\n<p>Present data in a form that&#8217;s not editable without using actual form markup.<\/p>\n<form class=\"bs-docs-example\"><span class=\"input-xlarge uneditable-input\">Some value here<\/span><\/form>\n<pre class=\"prettyprint linenums\">&lt;span class=\"input-xlarge uneditable-input\"&gt;Some value here&lt;\/span&gt;\r\n<\/pre>\n<h3>\u00a0<\/h3>\n<h3>Form actions<\/h3>\n<p>End a form with a group of actions (buttons). When placed within a <code>.form-actions<\/code>, the buttons will automatically indent to line up with the form controls.<\/p>\n<form class=\"bs-docs-example\">\n<div class=\"form-actions\"><button class=\"btn btn-primary\" type=\"submit\">Save changes<\/button> <button class=\"btn\" type=\"button\">Cancel<\/button><\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;div class=\"form-actions\"&gt;\r\n  &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;Save changes&lt;\/button&gt;\r\n  &lt;button type=\"button\" class=\"btn\"&gt;Cancel&lt;\/button&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<h3>\u00a0<\/h3>\n<h3>Help text<\/h3>\n<p>Inline and block level support for help text that appears around form controls.<\/p>\n<h4>Inline help<\/h4>\n<form class=\"bs-docs-example form-inline\"><input type=\"text\" \/> <span class=\"help-inline\">Inline help text<\/span><\/form>\n<pre class=\"prettyprint linenums\">&lt;input type=\"text\"&gt;&lt;span class=\"help-inline\"&gt;Inline help text&lt;\/span&gt;\r\n<\/pre>\n<h4>Block help<\/h4>\n<form class=\"bs-docs-example form-inline\"><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>\n<pre class=\"prettyprint linenums\">&lt;input type=\"text\"&gt;&lt;span class=\"help-block\"&gt;A longer block of help text that breaks onto a new line and may extend beyond one line.&lt;\/span&gt;\r\n<\/pre>\n<hr \/>\n<h2>Form control states<\/h2>\n<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.<\/p>\n<h3>\u00a0<\/h3>\n<h3>Input focus<\/h3>\n<p>We remove the default <code>outline<\/code> styles on some form controls and apply a <code>box-shadow<\/code> in its place for <code>:focus<\/code>.<\/p>\n<form class=\"bs-docs-example form-inline\"><input id=\"focusedInput\" class=\"input-xlarge focused\" type=\"text\" value=\"This is focused...\" \/><\/form>\n<pre class=\"prettyprint linenums\">&lt;input class=\"input-xlarge\" id=\"focusedInput\" type=\"text\" value=\"This is focused...\"&gt;\r\n<\/pre>\n<h3>\u00a0<\/h3>\n<h3>Invalid inputs<\/h3>\n<p>Style inputs via default browser functionality with <code>:invalid<\/code>. Specify a <code>type<\/code>, add the <code>required<\/code> attribute if the field is not optional, and (if applicable) specify a <code>pattern<\/code>.<\/p>\n<p>This is not available in versions of Internet Explorer 7-9 due to lack of support for CSS pseudo selectors.<\/p>\n<form class=\"bs-docs-example form-inline\"><input class=\"span3\" type=\"email\" \/><\/form>\n<pre class=\"prettyprint linenums\">&lt;input class=\"span3\" type=\"email\" required&gt;\r\n<\/pre>\n<h3>\u00a0<\/h3>\n<h3>Disabled inputs<\/h3>\n<p>Add the <code>disabled<\/code> attribute on an input to prevent user input and trigger a slightly different look.<\/p>\n<form class=\"bs-docs-example form-inline\"><input id=\"disabledInput\" class=\"input-xlarge\" type=\"text\" \/><\/form>\n<pre class=\"prettyprint linenums\">&lt;input class=\"input-xlarge\" id=\"disabledInput\" type=\"text\" placeholder=\"Disabled input here...\" disabled&gt;\r\n<\/pre>\n<h3>\u00a0<\/h3>\n<h3>Validation states<\/h3>\n<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group<\/code>.<\/p>\n<form class=\"bs-docs-example form-horizontal\">\n<div class=\"control-group warning\"><label class=\"control-label\" for=\"inputWarning\">Input with warning<\/label><\/p>\n<div class=\"controls\"><input id=\"inputWarning\" type=\"text\" \/> <span class=\"help-inline\">Something may have gone wrong<\/span><\/div>\n<\/div>\n<div class=\"control-group error\"><label class=\"control-label\" for=\"inputError\">Input with error<\/label><\/p>\n<div class=\"controls\"><input id=\"inputError\" type=\"text\" \/> <span class=\"help-inline\">Please correct the error<\/span><\/div>\n<\/div>\n<div class=\"control-group info\"><label class=\"control-label\" for=\"inputInfo\">Input with info<\/label><\/p>\n<div class=\"controls\"><input id=\"inputInfo\" type=\"text\" \/> <span class=\"help-inline\">Username is taken<\/span><\/div>\n<\/div>\n<div class=\"control-group success\"><label class=\"control-label\" for=\"inputSuccess\">Input with success<\/label><\/p>\n<div class=\"controls\"><input id=\"inputSuccess\" type=\"text\" \/> <span class=\"help-inline\">Woohoo!<\/span><\/div>\n<\/div>\n<\/form>\n<pre class=\"prettyprint linenums\">&lt;div class=\"control-group warning\"&gt;\r\n  &lt;label class=\"control-label\" for=\"inputWarning\"&gt;Input with warning&lt;\/label&gt;\r\n  &lt;div class=\"controls\"&gt;\r\n    &lt;input type=\"text\" id=\"inputWarning\"&gt;\r\n    &lt;span class=\"help-inline\"&gt;Something may have gone wrong&lt;\/span&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"control-group error\"&gt;\r\n  &lt;label class=\"control-label\" for=\"inputError\"&gt;Input with error&lt;\/label&gt;\r\n  &lt;div class=\"controls\"&gt;\r\n    &lt;input type=\"text\" id=\"inputError\"&gt;\r\n    &lt;span class=\"help-inline\"&gt;Please correct the error&lt;\/span&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"control-group info\"&gt;\r\n  &lt;label class=\"control-label\" for=\"inputInfo\"&gt;Input with info&lt;\/label&gt;\r\n  &lt;div class=\"controls\"&gt;\r\n    &lt;input type=\"text\" id=\"inputInfo\"&gt;\r\n    &lt;span class=\"help-inline\"&gt;Username is already taken&lt;\/span&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"control-group success\"&gt;\r\n  &lt;label class=\"control-label\" for=\"inputSuccess\"&gt;Input with success&lt;\/label&gt;\r\n  &lt;div class=\"controls\"&gt;\r\n    &lt;input type=\"text\" id=\"inputSuccess\"&gt;\r\n    &lt;span class=\"help-inline\"&gt;Woohoo!&lt;\/span&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<div class=\"page-header\">\n<h1>\u00a0<\/h1>\n<h1>Buttons<\/h1>\n<\/div>\n<h2>Default buttons<\/h2>\n<p>Button styles can be applied to anything with the <code>.btn<\/code> class applied. However, typically you&#8217;ll want to apply these to only <code>&lt;a&gt;<\/code> and <code>&lt;button&gt;<\/code> elements for the best rendering.<\/p>\n<table class=\"table table-bordered table-striped\">\n<thead>\n<tr>\n<th>Button<\/th>\n<th>class=&#8221;&#8221;<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><button class=\"btn\" type=\"button\">Default<\/button><\/td>\n<td><code>btn<\/code><\/td>\n<td>Standard gray button with gradient<\/td>\n<\/tr>\n<tr>\n<td><button class=\"btn btn-primary\" type=\"button\">Primary<\/button><\/td>\n<td><code>btn btn-primary<\/code><\/td>\n<td>Provides extra visual weight and identifies the primary action in a set of buttons<\/td>\n<\/tr>\n<tr>\n<td><button class=\"btn btn-info\" type=\"button\">Info<\/button><\/td>\n<td><code>btn btn-info<\/code><\/td>\n<td>Used as an alternative to the default styles<\/td>\n<\/tr>\n<tr>\n<td><button class=\"btn btn-success\" type=\"button\">Success<\/button><\/td>\n<td><code>btn btn-success<\/code><\/td>\n<td>Indicates a successful or positive action<\/td>\n<\/tr>\n<tr>\n<td><button class=\"btn btn-warning\" type=\"button\">Warning<\/button><\/td>\n<td><code>btn btn-warning<\/code><\/td>\n<td>Indicates caution should be taken with this action<\/td>\n<\/tr>\n<tr>\n<td><button class=\"btn btn-danger\" type=\"button\">Danger<\/button><\/td>\n<td><code>btn btn-danger<\/code><\/td>\n<td>Indicates a dangerous or potentially negative action<\/td>\n<\/tr>\n<tr>\n<td><button class=\"btn btn-inverse\" type=\"button\">Inverse<\/button><\/td>\n<td><code>btn btn-inverse<\/code><\/td>\n<td>Alternate dark gray button, not tied to a semantic action or use<\/td>\n<\/tr>\n<tr>\n<td><button class=\"btn btn-link\" type=\"button\">Link<\/button><\/td>\n<td><code>btn btn-link<\/code><\/td>\n<td>Deemphasize a button by making it look like a link while maintaining button behavior<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Cross browser compatibility<\/h4>\n<p>IE9 doesn&#8217;t crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button<\/code> elements, rendering text gray with a nasty text-shadow that we cannot fix.<\/p>\n<h2>Button sizes<\/h2>\n<p>Fancy larger or smaller buttons? Add <code>.btn-large<\/code>, <code>.btn-small<\/code>, or <code>.btn-mini<\/code> for additional sizes.<\/p>\n<div class=\"bs-docs-example\">\n<p><button class=\"btn btn-large btn-primary\" type=\"button\">Large button<\/button> <button class=\"btn btn-large\" type=\"button\">Large button<\/button><\/p>\n<p><button class=\"btn btn-primary\" type=\"button\">Default button<\/button> <button class=\"btn\" type=\"button\">Default button<\/button><\/p>\n<p><button class=\"btn btn-small btn-primary\" type=\"button\">Small button<\/button> <button class=\"btn btn-small\" type=\"button\">Small button<\/button><\/p>\n<p><button class=\"btn btn-mini btn-primary\" type=\"button\">Mini button<\/button> <button class=\"btn btn-mini\" type=\"button\">Mini button<\/button><\/p>\n<\/div>\n<pre class=\"prettyprint linenums\">&lt;p&gt;\r\n  &lt;button class=\"btn btn-large btn-primary\" type=\"button\"&gt;Large button&lt;\/button&gt;\r\n  &lt;button class=\"btn btn-large\" type=\"button\"&gt;Large button&lt;\/button&gt;\r\n&lt;\/p&gt;\r\n&lt;p&gt;\r\n  &lt;button class=\"btn btn-primary\" type=\"button\"&gt;Default button&lt;\/button&gt;\r\n  &lt;button class=\"btn\" type=\"button\"&gt;Default button&lt;\/button&gt;\r\n&lt;\/p&gt;\r\n&lt;p&gt;\r\n  &lt;button class=\"btn btn-small btn-primary\" type=\"button\"&gt;Small button&lt;\/button&gt;\r\n  &lt;button class=\"btn btn-small\" type=\"button\"&gt;Small button&lt;\/button&gt;\r\n&lt;\/p&gt;\r\n&lt;p&gt;\r\n  &lt;button class=\"btn btn-mini btn-primary\" type=\"button\"&gt;Mini button&lt;\/button&gt;\r\n  &lt;button class=\"btn btn-mini\" type=\"button\"&gt;Mini button&lt;\/button&gt;\r\n&lt;\/p&gt;\r\n<\/pre>\n<p>Create block level buttons\u2014those that span the full width of a parent\u2014 by adding <code>.btn-block<\/code>.<\/p>\n<div class=\"bs-docs-example\">\n<div class=\"well\" style=\"max-width: 400px; margin: 0 auto 10px;\"><button class=\"btn btn-large btn-block btn-primary\" type=\"button\">Block level button<\/button> <button class=\"btn btn-large btn-block\" type=\"button\">Block level button<\/button><\/div>\n<\/div>\n<pre class=\"prettyprint linenums\">&lt;button class=\"btn btn-large btn-block btn-primary\" type=\"button\"&gt;Block level button&lt;\/button&gt;\r\n&lt;button class=\"btn btn-large btn-block\" type=\"button\"&gt;Block level button&lt;\/button&gt;\r\n<\/pre>\n<h2>Disabled state<\/h2>\n<p>Make buttons look unclickable by fading them back 50%.<\/p>\n<h3>Anchor element<\/h3>\n<p>Add the <code>.disabled<\/code> class to <code>&lt;a&gt;<\/code> buttons.<\/p>\n<p class=\"bs-docs-example\"><a class=\"btn btn-large btn-primary disabled\" href=\"#\">Primary link<\/a> <a class=\"btn btn-large disabled\" href=\"#\">Link<\/a><\/p>\n<pre class=\"prettyprint linenums\">&lt;a href=\"#\" class=\"btn btn-large btn-primary disabled\"&gt;Primary link&lt;\/a&gt;\r\n&lt;a href=\"#\" class=\"btn btn-large disabled\"&gt;Link&lt;\/a&gt;\r\n<\/pre>\n<p><span class=\"label label-info\">Heads up!<\/span> We use <code>.disabled<\/code> as a utility class here, similar to the common <code>.active<\/code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.<\/p>\n<h3>Button element<\/h3>\n<p>Add the <code>disabled<\/code> attribute to <code>&lt;button&gt;<\/code> buttons.<\/p>\n<p class=\"bs-docs-example\"><button class=\"btn btn-large btn-primary disabled\" type=\"button\" disabled=\"disabled\">Primary button<\/button> <button class=\"btn btn-large\" type=\"button\">Button<\/button><\/p>\n<pre class=\"prettyprint linenums\">&lt;button type=\"button\" class=\"btn btn-large btn-primary disabled\" disabled=\"disabled\"&gt;Primary button&lt;\/button&gt;\r\n&lt;button type=\"button\" class=\"btn btn-large\" disabled&gt;Button&lt;\/button&gt;\r\n<\/pre>\n<h2>One class, multiple tags<\/h2>\n<p>Use the <code>.btn<\/code> class on an <code>&lt;a&gt;<\/code>, <code>&lt;button&gt;<\/code>, or <code>&lt;input&gt;<\/code> element.<\/p>\n<form class=\"bs-docs-example\"><a class=\"btn\" href=\"..\/nyirok\/\">Link<\/a> <button class=\"btn\" type=\"submit\">Button<\/button> <input class=\"btn\" type=\"button\" value=\"Input\" \/> <input class=\"btn\" type=\"submit\" value=\"Submit\" \/><\/form>\n<pre class=\"prettyprint linenums\">&lt;a class=\"btn\" href=\"\"&gt;Link&lt;\/a&gt;\r\n&lt;button class=\"btn\" type=\"submit\"&gt;Button&lt;\/button&gt;\r\n&lt;input class=\"btn\" type=\"button\" value=\"Input\"&gt;\r\n&lt;input class=\"btn\" type=\"submit\" value=\"Submit\"&gt;\r\n<\/pre>\n<p>As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an <code>input<\/code>, use an <code>&lt;input type=\"submit\"&gt;<\/code> for your button.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Forms Default styles Individual form controls receive styling, but without any required base class on the &lt;form&gt; or large changes in markup. Results in stacked, left-aligned labels on top of form controls. Legend Label name Example block-level help text here. Check me out Submit &lt;form&gt; &lt;fieldset&gt; &lt;legend&gt;Legend&lt;\/legend&gt; &lt;label&gt;Label name&lt;\/label&gt; &lt;input type=&#8221;text&#8221; placeholder=&#8221;Type something\u2026&#8221;&gt; &lt;span class=&#8221;help-block&#8221;&gt;Example [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"http:\/\/dinario.com\/index.php\/wp-json\/wp\/v2\/posts\/12"}],"collection":[{"href":"http:\/\/dinario.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/dinario.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/dinario.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/dinario.com\/index.php\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":0,"href":"http:\/\/dinario.com\/index.php\/wp-json\/wp\/v2\/posts\/12\/revisions"}],"wp:attachment":[{"href":"http:\/\/dinario.com\/index.php\/wp-json\/wp\/v2\/media?parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/dinario.com\/index.php\/wp-json\/wp\/v2\/categories?post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/dinario.com\/index.php\/wp-json\/wp\/v2\/tags?post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}