Εγγραφή για ενημέρωση!

Code

Αδημοσίευτο
Κατηγορία: Bootstrap
Γράφτηκε από τον/την Super User
Δημοσιεύτηκε στις 01 Ιανουαρίου 2013
Εμφανίσεις: 1483
  • Εκτύπωση

Code

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.
  1. For example, <code><section></code> should be wrapped as inline.

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>
  1. <pre>
  2. &lt;p&gt;Sample text here...&lt;/p&gt;
  3. </pre>

Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

Code (2)

Αδημοσίευτο
Κατηγορία: Bootstrap
Γράφτηκε από τον/την Super User
Δημοσιεύτηκε στις 01 Ιανουαρίου 2013
Εμφανίσεις: 1999
  • Εκτύπωση

Code

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.
  1. For example, <code><section></code> should be wrapped as inline.

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>
  1. <pre>
  2. &lt;p&gt;Sample text here...&lt;/p&gt;
  3. </pre>

Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

Forms

Κατηγορία: Bootstrap
Γράφτηκε από τον/την Super User
Δημοσιεύτηκε στις 01 Ιανουαρίου 2013
Εμφανίσεις: 2488
  • Εκτύπωση

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.

Legend Example block-level help text here.
  1. <form>
  2.  <legend>Legend</legend>
  3.  <label>Label name</label>
  4.  <input type="text" placeholder="Type something…">
  5.  <span class="help-block">Example block-level help text here.</span>
  6.  <label class="checkbox">
  7.  <input type="checkbox"> Check me out
  8.  </label>
  9.  <button type="submit" class="btn">Submit</button>
  10. </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.

  1. <form class="form-search">
  2.  <input type="text" class="input-medium search-query">
  3.  <button type="submit" class="btn">Search</button>
  4. </form>

Inline form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

  1. <form class="form-inline">
  2.  <input type="text" class="input-small" placeholder="Email">
  3.  <input type="password" class="input-small" placeholder="Password">
  4.  <label class="checkbox">
  5.  <input type="checkbox"> Remember me
  6.  </label>
  7.  <button type="submit" class="btn">Sign in</button>
  8. </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
Legend
  1. <form class="form-horizontal">
  2.  <div class="control-group">
  3.  <label class="control-label" for="inputEmail">Email</label>
  4.  <div class="controls">
  5.  <input type="text" id="inputEmail" placeholder="Email">
  6.  </div>
  7.  </div>
  8.  <div class="control-group">
  9.  <label class="control-label" for="inputPassword">Password</label>
  10.  <div class="controls">
  11.  <input type="password" id="inputPassword" placeholder="Password">
  12.  </div>
  13.  </div>
  14.  <div class="control-group">
  15.  <div class="controls">
  16.  <label class="checkbox">
  17.  <input type="checkbox"> Remember me
  18.  </label>
  19.  <button type="submit" class="btn">Sign in</button>
  20.  </div>
  21.  </div>
  22. </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.

  1. <input type="text" placeholder="Text input">

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

  1. <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)


  1. <label class="checkbox">
  2.  <input type="checkbox" value="">
  3. Option one is this and that—be sure to include why it's great
  4. </label>
  5.  
  6. <label class="radio">
  7.  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  8. Option one is this and that—be sure to include why it's great
  9. </label>
  10. <label class="radio">
  11.  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  12. Option two can be something else and selecting it will deselect option one
  13. </label>

Inline checkboxes

Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

  1. <label class="checkbox inline">
  2.  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
  3. </label>
  4. <label class="checkbox inline">
  5.  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
  6. </label>
  7. <label class="checkbox inline">
  8.  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
  9. </label>

Selects

Use the default option or specify a multiple="multiple" to show multiple options at once.


  1. <select>
  2.  <option>1</option>
  3.  <option>2</option>
  4.  <option>3</option>
  5.  <option>4</option>
  6.  <option>5</option>
  7. </select>
  8.  
  9. <select multiple="multiple">
  10.  <option>1</option>
  11.  <option>2</option>
  12.  <option>3</option>
  13.  <option>4</option>
  14.  <option>5</option>
  15. </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.

@

.00
  1. <div class="input-prepend">
  2.  <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
  3. </div>
  4. <div class="input-append">
  5.  <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
  6. </div>

Combined

Use both classes and two instances of .add-on to prepend and append an input.

$ .00
  1. <div class="input-prepend input-append">
  2.  <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
  3. </div>

Buttons instead of text

Instead of a <span> with text, use a .btn to attach a button (or two) to an input.


  1. <div class="input-append">
  2.  <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
  3. </div>
  4.  
  5. <div class="input-append">
  6.  <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
  7. </div>

Search form

  1. <form class="form-search">
  2.  <div class="input-append">
  3.  <input type="text" class="span2 search-query">
  4.  <button type="submit" class="btn">Search</button>
  5.  </div>
  6.  <div class="input-prepend">
  7.  <button type="submit" class="btn">Search</button>
  8.  <input type="text" class="span2 search-query">
  9.  </div>
  10. </form>

Control sizing

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

Relative sizing

  1. <input class="input-mini" type="text" placeholder=".input-mini">
  2. <input class="input-small" type="text" placeholder=".input-small">
  3. <input class="input-medium" type="text" placeholder=".input-medium">
  4. <input class="input-large" type="text" placeholder=".input-large">
  5. <input class="input-xlarge" type="text" placeholder=".input-xlarge">
  6. <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.

  1. <input class="span1" type="text" placeholder=".span1">
  2. <input class="span2" type="text" placeholder=".span2">
  3. <input class="span3" type="text" placeholder=".span3">
  4. <select class="span1">
  5. ...
  6. </select>
  7. <select class="span2">
  8. ...
  9. </select>
  10. <select class="span3">
  11. ...
  12. </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.

  1. <div class="controls">
  2.  <input class="span5" type="text" placeholder=".span5">
  3. </div>
  4. <div class="controls controls-row">
  5.  <input class="span4" type="text" placeholder=".span4">
  6.  <input class="span1" type="text" placeholder=".span1">
  7. </div>
  8. ...

Uneditable inputs

Present data in a form that's not editable without using actual form markup.

Some value here
  1. <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.

  1. <div class="form-actions">
  2.  <button type="submit" class="btn btn-primary">Save changes</button>
  3.  <button type="button" class="btn">Cancel</button>
  4. </div>

Help text

Inline and block level support for help text that appears around form controls.

Inline help

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

Block help

A longer block of help text that breaks onto a new line and may extend beyond one line.
  1. <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.

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

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

Something may have gone wrong
Please correct the error
Username is taken
Woohoo!
  1. <div class="control-group warning">
  2.  <label class="control-label" for="inputWarning">Input with warning</label>
  3.  <div class="controls">
  4.  <input type="text" id="inputWarning">
  5.  <span class="help-inline">Something may have gone wrong</span>
  6.  </div>
  7. </div>
  8. <div class="control-group error">
  9.  <label class="control-label" for="inputError">Input with error</label>
  10.  <div class="controls">
  11.  <input type="text" id="inputError">
  12.  <span class="help-inline">Please correct the error</span>
  13.  </div>
  14. </div>
  15. <div class="control-group success">
  16.  <label class="control-label" for="inputSuccess">Input with success</label>
  17.  <div class="controls">
  18.  <input type="text" id="inputSuccess">
  19.  <span class="help-inline">Woohoo!</span>
  20.  </div>
  21. </div>

Accordion

Κατηγορία: Bootstrap
Γράφτηκε από τον/την Super User
Δημοσιεύτηκε στις 01 Ιανουαρίου 2013
Εμφανίσεις: 1721
  • Εκτύπωση

Get base styles and flexible support for collapsible components like accordions and navigation.

* Requires the Transitions plugin to be included.

Example accordion

Using the collapse plugin, we built a simple accordion style widget:

Collapsible Group Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Collapsible Group Item #2
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Collapsible Group Item #3
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  1. <div class="accordion" id="accordion2">
  2.  <div class="accordion-group">
  3.  <div class="accordion-heading">
  4.  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
  5. Collapsible Group Item #1
  6.  </a>
  7.  </div>
  8.  <div id="collapseOne" class="accordion-body collapse in">
  9.  <div class="accordion-inner">
  10. Anim pariatur cliche...
  11.  </div>
  12.  </div>
  13.  </div>
  14.  <div class="accordion-group">
  15.  <div class="accordion-heading">
  16.  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
  17. Collapsible Group Item #2
  18.  </a>
  19.  </div>
  20.  <div id="collapseTwo" class="accordion-body collapse">
  21.  <div class="accordion-inner">
  22. Anim pariatur cliche...
  23.  </div>
  24.  </div>
  25.  </div>
  26. </div>
  27. ...

You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.

  1. <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  2. simple collapsible
  3. </button>
  4.  
  5. <div id="demo" class="collapse in"> … </div>

Usage

Via data attributes

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

  1. $(".collapse").collapse()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

Nametypedefaultdescription
parent selector false If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)
toggle boolean true Toggles the collapsible element on invocation

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

  1. $('#myCollapsible').collapse({
  2. toggle: false
  3. })

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

EventDescription
show This event fires immediately when the show instance method is called.
shown This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).
hide This event is fired immediately when the hide method has been called.
hidden This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).
  1. $('#myCollapsible').on('hidden', function () {
  2.  // do something…
  3. })

Tab

Κατηγορία: Bootstrap
Γράφτηκε από τον/την Super User
Δημοσιεύτηκε στις 01 Ιανουαρίου 2013
Εμφανίσεις: 1542
  • Εκτύπωση

Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Usage

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

  1. $('#myTab a').click(function (e) {
  2. e.preventDefault();
  3. $(this).tab('show');
  4. })

You can activate individual tabs in several ways:

  1. $('#myTab a[href="#profile"]').tab('show'); // Select tab by name
  2. $('#myTab a:first').tab('show'); // Select first tab
  3. $('#myTab a:last').tab('show'); // Select last tab
  4. $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)

Markup

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.

  1. <ul class="nav nav-tabs">
  2.  <li><a href="#home" data-toggle="tab">Home</a></li>
  3.  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  4.  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  5.  <li><a href="#settings" data-toggle="tab">Settings</a></li>
  6. </ul>

Methods

$().tab

Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

  1. <ul class="nav nav-tabs" id="myTab">
  2.  <li class="active"><a href="#home">Home</a></li>
  3.  <li><a href="#profile">Profile</a></li>
  4.  <li><a href="#messages">Messages</a></li>
  5.  <li><a href="#settings">Settings</a></li>
  6. </ul>
  7.  
  8. <div class="tab-content">
  9.  <div class="tab-pane active" id="home">...</div>
  10.  <div class="tab-pane" id="profile">...</div>
  11.  <div class="tab-pane" id="messages">...</div>
  12.  <div class="tab-pane" id="settings">...</div>
  13. </div>
  14.  
  15. <script>
  16. $(function () {
  17. $('#myTab a:last').tab('show');
  18.  })
  19. </script>

Events

EventDescription
show This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
  1. $('a[data-toggle="tab"]').on('shown', function (e) {
  2. e.target // activated tab
  3. e.relatedTarget // previous tab
  4. })

Περισσότερα Άρθρα...

  1. Lables
  2. Thumbnails
  3. Alerts
  4. Modal