ΕΠΙΚΑΙΡΟΤΗΤΑ

ΕΡΓΑΣΙΑΚΑ

ΑΣΦΑΛΙΣΤΙΚΑ

ΠΕΡΙΒΑΛΛΟΝ

ΔΡΑΣΗ ΑΜΑΚ

ΑΜΑΚ: Οδηγίες για τις εκλογές ΤΕΕ

Οδηγίες για τις εκλογές ΤΕΕ     Πότε...

Εισήγηση ΑΜΑΚ στη Δ.Ε. : Εκλογές ΤΕΕ

Συνεδρίαση της Δ.Ε. του Τμήματος...

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

Button Groups

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

Two basic options, along with two more specific variations.

Single button group

Wrap a series of buttons with .btn in .btn-group.

  1. <div class="btn-group">
  2.  <button class="btn">1</button>
  3.  <button class="btn">2</button>
  4.  <button class="btn">3</button>
  5. </div>

Multiple button groups

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

  1. <div class="btn-toolbar">
  2.  <div class="btn-group">
  3. ...
  4.  </div>
  5. </div>

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

 
  1. <div class="btn-group btn-group-vertical">
  2. ...
  3. </div>

Checkbox and radio flavors

Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.

Dropdowns in button groups

Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

Scrollspy

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

The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Usage

Via data attributes

To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component.

  1. <body data-spy="scroll" data-target=".navbar">...</body>

Via JavaScript

Call the scrollspy via JavaScript:

  1. $('#navbar').scrollspy()
Heads up! Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>.

Methods

.scrollspy('refresh')

When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:

  1. $('[data-spy="scroll"]').each(function () {
  2.  var $spy = $(this).scrollspy('refresh')
  3. });

Options

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

Nametypedefaultdescription
offset number 10 Pixels to offset from top when calculating position of scroll.

Events

EventDescription
activate This event fires whenever a new item becomes activated by the scrollspy.

Tables

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

Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table">
  2. …
  3. </table>

Optional classes

Add any of the follow classes to the .table base class.

.table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-striped">
  2. …
  3. </table>

.table-bordered

Add borders and rounded corners to the table.

#First NameLast NameUsername
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-bordered">
  2. …
  3. </table>

.table-hover

Enable a hover state on table rows within a <tbody>.

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-hover">
  2. …
  3. </table>

.table-condensed

Makes tables more compact by cutting cell padding in half.

#First NameLast NameUsername
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table class="table table-condensed">
  2. …
  3. </table>

Optional row classes

Use contextual classes to color table rows.

ClassDescription
.success Indicates a successful or positive action.
.error Indicates a dangerous or potentially negative action.
.warning Indicates a warning that might need attention.
.info Used as an alternative to the default styles.
#ProductPayment TakenStatus
1 TB - Monthly 01/04/2012 Approved
2 TB - Monthly 02/04/2012 Declined
3 TB - Monthly 03/04/2012 Pending
4 TB - Monthly 04/04/2012 Call in to confirm
  1. ...
  2.  <tr class="success">
  3.  <td>1</td>
  4. <td>TB - Monthly</td>
  5.  <td>01/04/2012</td>
  6. <td>Approved</td>
  7.  </tr>
  8. ...

Supported table markup

List of supported table HTML elements and how they should be used.

TagDescription
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns
<tbody> Container element for table rows (<tr>) in the body of the table
<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels
Must be used within a <thead>
<caption> Description or summary of what the table holds, especially useful for screen readers
  1. <table>
  2.  <caption>...</caption>
  3.  <thead>
  4.  <tr>
  5.  <th>...</th>
  6.  <th>...</th>
  7.  </tr>
  8.  </thead>
  9.  <tbody>
  10.  <tr>
  11.  <td>...</td>
  12.  <td>...</td>
  13.  </tr>
  14.  </tbody>
  15. </table>

Button dropdowns

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

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

  1. <div class="btn-group">
  2.  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  3. Action
  4.  <span class="caret"></span>
  5.  </a>
  6.  <ul class="dropdown-menu">
  7.  <!-- dropdown menu links -->
  8.  </ul>
  9. </div>

Works with all button sizes

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

Requires javascript

Button dropdowns require the Bootstrap dropdown plugin to function.

In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.

Split button dropdowns

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

  1. <div class="btn-group">
  2.  <button class="btn">Action</button>
  3.  <button class="btn dropdown-toggle" data-toggle="dropdown">
  4.  <span class="caret"></span>
  5.  </button>
  6.  <ul class="dropdown-menu">
  7.  <!-- dropdown menu links -->
  8.  </ul>
  9. </div>

Sizes

Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

  1. <div class="btn-group">
  2.  <button class="btn btn-mini">Action</button>
  3.  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
  4.  <span class="caret"></span>
  5.  </button>
  6.  <ul class="dropdown-menu">
  7.  <!-- dropdown menu links -->
  8.  </ul>
  9. </div>

Dropup menus

Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

  1. <div class="btn-group dropup">
  2.  <button class="btn">Dropup</button>
  3.  <button class="btn dropdown-toggle" data-toggle="dropdown">
  4.  <span class="caret"></span>
  5.  </button>
  6.  <ul class="dropdown-menu">
  7.  <!-- dropdown menu links -->
  8.  </ul>
  9. </div>

Buttons

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

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Buttonclass=""Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

  1. <p>
  2.  <button class="btn btn-large btn-primary" type="button">Large button</button>
  3.  <button class="btn btn-large" type="button">Large button</button>
  4. </p>
  5. <p>
  6.  <button class="btn btn-primary" type="button">Default button</button>
  7.  <button class="btn" type="button">Default button</button>
  8. </p>
  9. <p>
  10.  <button class="btn btn-small btn-primary" type="button">Small button</button>
  11.  <button class="btn btn-small" type="button">Small button</button>
  12. </p>
  13. <p>
  14.  <button class="btn btn-mini btn-primary" type="button">Mini button</button>
  15.  <button class="btn btn-mini" type="button">Mini button</button>
  16. </p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

  1. <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
  2. <button class="btn btn-large btn-block" type="button">Block level button</button>

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

  1. <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
  2. <a href="#" class="btn btn-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

  1. <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
  2. <button type="button" class="btn btn-large" disabled>Button</button>

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

Link
  1. <a class="btn" href="">Link</a>
  2. <button class="btn" type="submit">Button</button>
  3. <input class="btn" type="button" value="Input">
  4. <input class="btn" type="submit" value="Submit">

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

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

  1. Typography

ΤΕΕ-ΤΑΚ

ΑΠΟΨΕΙΣ