WordPress database error: [Table './ay6u3nor6dat6ba1/kn6_ayu1n9k4_5_actionscheduler_actions' is marked as crashed and last (automatic?) repair failed]
SELECT a.action_id FROM kn6_ayu1n9k4_5_actionscheduler_actions a WHERE 1=1 AND a.hook='aioseo_send_usage_data' AND a.status IN ('in-progress') ORDER BY a.scheduled_date_gmt ASC LIMIT 0, 1

WordPress database error: [Table './ay6u3nor6dat6ba1/kn6_ayu1n9k4_5_actionscheduler_actions' is marked as crashed and last (automatic?) repair failed]
SELECT a.action_id FROM kn6_ayu1n9k4_5_actionscheduler_actions a WHERE 1=1 AND a.hook='aioseo_send_usage_data' AND a.status IN ('pending') ORDER BY a.scheduled_date_gmt ASC LIMIT 0, 1

Form Control Sizing | Loop and Break

Form Control Sizing

by · May 10, 2014

With the default grid system that is inherent in Bootstrap, you can use the .span* system for sizing form controls. In addition to the span column-sizing method, you can also use a handful of classes that take a relative approach to sizing. If you want the input to act as a block-level element, you can add .input-block-level and it will be the full width of the container element. 

<input class="input-block-level" type="text" placeholder=".input-block-level">

Untitled

Relative input controls

In addition to using .span* for input sizing, you can also use a few different class names.

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<body>
	<input class="input-mini" type="text" placeholder=".input-mini"><br>
	<input class="input-small" type="text" placeholder=".input-small"><br>
	<input class="input-medium" type="text" placeholder=".input-medium"><br>
	<input class="input-large" type="text" placeholder=".input-large"><br>
	<input class="input-xlarge" type="text" placeholder=".input-xlarge"><br>
	<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
</body>
</html>

Untitled

Grid sizing

You can use any .span from .span1 to .span12 for form control sizing:

<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>

Untitled
If you want to use multiple inputs on a line, simply use the .controls-row modifier class to apply the proper spacing. It floats the inputs to collapse the white space; sets the correct margins; and, like the .row class, 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>
...

Untitled

Uneditable text

If you want to present a form control without allowing the user to edit the input, simply add the class .uneditable-input:

<span class="input-xlarge uneditable-input">Some value here</span>

Untitled

Form actions

When you place the form actions at the bottom of a .horizontal-form, the inputs will correctly line up with the floated form controls.

<div class="form-actions">
	<button type="submit" class="btn btn-primary">Save changes</button>
	<button type="button" class="btn">Cancel</button>
</div>

Untitled

Help text

Bootstrap form controls can have either block or inline text that flows with the inputs.

<input type="text"><span class="help-inline">Inline help text</span>

Untitled
To add a full width block of content, use the .help-block after the <input> 

<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>

Untitled

Share

You may also like...

Categories