San 011

San 011

Aenean ligula velit, malesuada et viverra vitae, auctor nec odio! Vestibulum in est eu urna pharetra aliquet. Sed congue porta lobortis.
subota, 20 april 2013 02:51

List icon

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Built as a sprite

Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

<i class="icon-search icon-white"></i>

There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Use cases

Icons are great, but where would one use them? Here are a few ideas:

  • As visuals for your sidebar navigation
  • For a purely icon-driven navigation
  • For buttons to help convey the meaning of an action
  • With links to share context on a user's destination

Essentially, anywhere you can put an <i> tag, you can put an icon.

Get the code


<div class="row-fluid">
<div class="span3">
<ul class="the-icons">
<li><i class="icon-glass">&nbsp;</i> icon-glass</li>
<li><i class="icon-music">&nbsp;</i> icon-music</li>
<li><i class="icon-search">&nbsp;</i> icon-search</li>
<li><i class="icon-envelope">&nbsp;</i> icon-envelope</li>
<li><i class="icon-heart">&nbsp;</i> icon-heart</li>
<li><i class="icon-star">&nbsp;</i> icon-star</li>
<li><i class="icon-star-empty">&nbsp;</i> icon-star-empty</li>
<li><i class="icon-user">&nbsp;</i> icon-user</li>
<li><i class="icon-film">&nbsp;</i> icon-film</li>
<li><i class="icon-th-large">&nbsp;</i> icon-th-large</li>
<li><i class="icon-th">&nbsp;</i> icon-th</li>
<li><i class="icon-th-list">&nbsp;</i> icon-th-list</li>
<li><i class="icon-ok">&nbsp;</i> icon-ok</li>
<li><i class="icon-remove">&nbsp;</i> icon-remove</li>
<li><i class="icon-zoom-in">&nbsp;</i> icon-zoom-in</li>
<li><i class="icon-zoom-out">&nbsp;</i> icon-zoom-out</li>
<li><i class="icon-off">&nbsp;</i> icon-off</li>
<li><i class="icon-signal">&nbsp;</i> icon-signal</li>
<li><i class="icon-cog">&nbsp;</i> icon-cog</li>
<li><i class="icon-trash">&nbsp;</i> icon-trash</li>
<li><i class="icon-home">&nbsp;</i> icon-home</li>
<li><i class="icon-file">&nbsp;</i> icon-file</li>
<li><i class="icon-time">&nbsp;</i> icon-time</li>
<li><i class="icon-road">&nbsp;</i> icon-road</li>
<li><i class="icon-download-alt">&nbsp;</i> icon-download-alt</li>
<li><i class="icon-download">&nbsp;</i> icon-download</li>
<li><i class="icon-upload">&nbsp;</i> icon-upload</li>
<li><i class="icon-inbox">&nbsp;</i> icon-inbox</li>
<li><i class="icon-play-circle">&nbsp;</i> icon-play-circle</li>
<li><i class="icon-repeat">&nbsp;</i> icon-repeat</li>
<li><i class="icon-refresh">&nbsp;</i> icon-refresh</li>
<li><i class="icon-list-alt">&nbsp;</i> icon-list-alt</li>
<li><i class="icon-lock">&nbsp;</i> icon-lock</li>
<li><i class="icon-flag">&nbsp;</i> icon-flag</li>
<li><i class="icon-headphones">&nbsp;</i> icon-headphones</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-volume-off">&nbsp;</i> icon-volume-off</li>
<li><i class="icon-volume-down">&nbsp;</i> icon-volume-down</li>
<li><i class="icon-volume-up">&nbsp;</i> icon-volume-up</li>
<li><i class="icon-qrcode">&nbsp;</i> icon-qrcode</li>
<li><i class="icon-barcode">&nbsp;</i> icon-barcode</li>
<li><i class="icon-tag">&nbsp;</i> icon-tag</li>
<li><i class="icon-tags">&nbsp;</i> icon-tags</li>
<li><i class="icon-book">&nbsp;</i> icon-book</li>
<li><i class="icon-bookmark">&nbsp;</i> icon-bookmark</li>
<li><i class="icon-print">&nbsp;</i> icon-print</li>
<li><i class="icon-camera">&nbsp;</i> icon-camera</li>
<li><i class="icon-font">&nbsp;</i> icon-font</li>
<li><i class="icon-bold">&nbsp;</i> icon-bold</li>
<li><i class="icon-italic">&nbsp;</i> icon-italic</li>
<li><i class="icon-text-height">&nbsp;</i> icon-text-height</li>
<li><i class="icon-text-width">&nbsp;</i> icon-text-width</li>
<li><i class="icon-align-left">&nbsp;</i> icon-align-left</li>
<li><i class="icon-align-center">&nbsp;</i> icon-align-center</li>
<li><i class="icon-align-right">&nbsp;</i> icon-align-right</li>
<li><i class="icon-align-justify">&nbsp;</i> icon-align-justify</li>
<li><i class="icon-list">&nbsp;</i> icon-list</li>
<li><i class="icon-indent-left">&nbsp;</i> icon-indent-left</li>
<li><i class="icon-indent-right">&nbsp;</i> icon-indent-right</li>
<li><i class="icon-facetime-video">&nbsp;</i> icon-facetime-video</li>
<li><i class="icon-picture">&nbsp;</i> icon-picture</li>
<li><i class="icon-pencil">&nbsp;</i> icon-pencil</li>
<li><i class="icon-map-marker">&nbsp;</i> icon-map-marker</li>
<li><i class="icon-adjust">&nbsp;</i> icon-adjust</li>
<li><i class="icon-tint">&nbsp;</i> icon-tint</li>
<li><i class="icon-edit">&nbsp;</i> icon-edit</li>
<li><i class="icon-share">&nbsp;</i> icon-share</li>
<li><i class="icon-check">&nbsp;</i> icon-check</li>
<li><i class="icon-move">&nbsp;</i> icon-move</li>
<li><i class="icon-step-backward">&nbsp;</i> icon-step-backward</li>
<li><i class="icon-fast-backward">&nbsp;</i> icon-fast-backward</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-backward">&nbsp;</i> icon-backward</li>
<li><i class="icon-play">&nbsp;</i> icon-play</li>
<li><i class="icon-pause">&nbsp;</i> icon-pause</li>
<li><i class="icon-stop">&nbsp;</i> icon-stop</li>
<li><i class="icon-forward">&nbsp;</i> icon-forward</li>
<li><i class="icon-fast-forward">&nbsp;</i> icon-fast-forward</li>
<li><i class="icon-step-forward">&nbsp;</i> icon-step-forward</li>
<li><i class="icon-eject">&nbsp;</i> icon-eject</li>
<li><i class="icon-chevron-left">&nbsp;</i> icon-chevron-left</li>
<li><i class="icon-chevron-right">&nbsp;</i> icon-chevron-right</li>
<li><i class="icon-plus-sign">&nbsp;</i> icon-plus-sign</li>
<li><i class="icon-minus-sign">&nbsp;</i> icon-minus-sign</li>
<li><i class="icon-remove-sign">&nbsp;</i> icon-remove-sign</li>
<li><i class="icon-ok-sign">&nbsp;</i> icon-ok-sign</li>
<li><i class="icon-question-sign">&nbsp;</i> icon-question-sign</li>
<li><i class="icon-info-sign">&nbsp;</i> icon-info-sign</li>
<li><i class="icon-screenshot">&nbsp;</i> icon-screenshot</li>
<li><i class="icon-remove-circle">&nbsp;</i> icon-remove-circle</li>
<li><i class="icon-ok-circle">&nbsp;</i> icon-ok-circle</li>
<li><i class="icon-ban-circle">&nbsp;</i> icon-ban-circle</li>
<li><i class="icon-arrow-left">&nbsp;</i> icon-arrow-left</li>
<li><i class="icon-arrow-right">&nbsp;</i> icon-arrow-right</li>
<li><i class="icon-arrow-up">&nbsp;</i> icon-arrow-up</li>
<li><i class="icon-arrow-down">&nbsp;</i> icon-arrow-down</li>
<li><i class="icon-share-alt">&nbsp;</i> icon-share-alt</li>
<li><i class="icon-resize-full">&nbsp;</i> icon-resize-full</li>
<li><i class="icon-resize-small">&nbsp;</i> icon-resize-small</li>
<li><i class="icon-plus">&nbsp;</i> icon-plus</li>
<li><i class="icon-minus">&nbsp;</i> icon-minus</li>
<li><i class="icon-asterisk">&nbsp;</i> icon-asterisk</li>
<li><i class="icon-exclamation-sign">&nbsp;</i> icon-exclamation-sign</li>
<li><i class="icon-gift">&nbsp;</i> icon-gift</li>
<li><i class="icon-leaf">&nbsp;</i> icon-leaf</li>
<li><i class="icon-fire">&nbsp;</i> icon-fire</li>
<li><i class="icon-eye-open">&nbsp;</i> icon-eye-open</li>
</ul>
</div>
<div class="span3">
<ul class="the-icons">
<li><i class="icon-eye-close">&nbsp;</i> icon-eye-close</li>
<li><i class="icon-warning-sign">&nbsp;</i> icon-warning-sign</li>
<li><i class="icon-plane">&nbsp;</i> icon-plane</li>
<li><i class="icon-calendar">&nbsp;</i> icon-calendar</li>
<li><i class="icon-random">&nbsp;</i> icon-random</li>
<li><i class="icon-comment">&nbsp;</i> icon-comment</li>
<li><i class="icon-magnet">&nbsp;</i> icon-magnet</li>
<li><i class="icon-chevron-up">&nbsp;</i> icon-chevron-up</li>
<li><i class="icon-chevron-down">&nbsp;</i> icon-chevron-down</li>
<li><i class="icon-retweet">&nbsp;</i> icon-retweet</li>
<li><i class="icon-shopping-cart">&nbsp;</i> icon-shopping-cart</li>
<li><i class="icon-folder-close">&nbsp;</i> icon-folder-close</li>
<li><i class="icon-folder-open">&nbsp;</i> icon-folder-open</li>
<li><i class="icon-resize-vertical">&nbsp;</i> icon-resize-vertical</li>
<li><i class="icon-resize-horizontal">&nbsp;</i> icon-resize-horizontal</li>
<li><i class="icon-hdd">&nbsp;</i> icon-hdd</li>
<li><i class="icon-bullhorn">&nbsp;</i> icon-bullhorn</li>
<li><i class="icon-bell">&nbsp;</i> icon-bell</li>
<li><i class="icon-certificate">&nbsp;</i> icon-certificate</li>
<li><i class="icon-thumbs-up">&nbsp;</i> icon-thumbs-up</li>
<li><i class="icon-thumbs-down">&nbsp;</i> icon-thumbs-down</li>
<li><i class="icon-hand-right">&nbsp;</i> icon-hand-right</li>
<li><i class="icon-hand-left">&nbsp;</i> icon-hand-left</li>
<li><i class="icon-hand-up">&nbsp;</i> icon-hand-up</li>
<li><i class="icon-hand-down">&nbsp;</i> icon-hand-down</li>
<li><i class="icon-circle-arrow-right">&nbsp;</i> icon-circle-arrow-right</li>
<li><i class="icon-circle-arrow-left">&nbsp;</i> icon-circle-arrow-left</li>
<li><i class="icon-circle-arrow-up">&nbsp;</i> icon-circle-arrow-up</li>
<li><i class="icon-circle-arrow-down">&nbsp;</i> icon-circle-arrow-down</li>
<li><i class="icon-globe">&nbsp;</i> icon-globe</li>
<li><i class="icon-wrench">&nbsp;</i> icon-wrench</li>
<li><i class="icon-tasks">&nbsp;</i> icon-tasks</li>
<li><i class="icon-filter">&nbsp;</i> icon-filter</li>
<li><i class="icon-briefcase">&nbsp;</i> icon-briefcase</li>
<li><i class="icon-fullscreen">&nbsp;</i> icon-fullscreen</li>
</ul>
</div>
</div>
subota, 20 april 2013 02:51

Google Map

Get the code

{googleMaps addr="ADDRESS OR Latitude/Longitude" label="GOOLE_MAP_LABEL" width=1200 height=300}

Customization Options

  • - Lat: the latitude of the location to display on the map (an alternative to providing the address)
  • - Long: the longitude of the location to display on the map (an alternative to providing the address)
  • - Zoom: the initial zoom level of the map
  • - Width: width of the map embed
  • - Height: height of the map embed
  • - Options: Google map options.
  • - Control: Additional controls to attach to the map.
  • - Maptype: the type of map you want to display (roadmap, satellite, hybrid or terrain).
  • - Lang: Language of map
  • - Marker: whether you want to display the red marker showing the location specified by the address or longitude/latitude attributes.
  • - Addoverview: whether to display the overview map control (the arrow in the bottom right corner that expands to show the region currently being viewed).
  • - Addscale: whether to display the scale control (the marking that tells you the distances represented in the map).
  • - Streetview: A Street View Panorama to display when the Street View pegman is dropped on the map. If no panorama is specified, a default Street View Panorama will be displayed in the map's div when the pegman is dropped.
  • - Kml: A Kml Layer adds geographic markup to the map from a KML, KMZ or Geo RSS file that is hosted on a publicly accessible web server. A Kml Feature Data object is provided for each feature when clicked.
  • - Description: A localized string describing the location.
  • - Label: This is the label for the marker that indicates your designated address.
  • - Addr: You can display a Google Map by using your address or a latitude/longitude pair.
subota, 20 april 2013 02:50

Gallery

Get the code

[gallery title='GALLERY_TITLE' width='IMAGE_THUMB_WIDTH' height='IMAGE_THUMB_HEIGHT' columns='3']
[gallery_item title='IMAGE_TITLE' src='IMAGE_SRC']IMAGE_DESCRIPTION[/gallery_item]
[gallery_item title='IMAGE_TITLE' src='IMAGE_SRC']IMAGE_DESCRIPTION[/gallery_item]
[gallery_item title='IMAGE_TITLE' src='IMAGE_SRC']IMAGE_DESCRIPTION[/gallery_item]
[/gallery]
subota, 20 april 2013 02:49

Dropcap

S

ed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.

S

ed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.

S

ed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.

S

ed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.

A

am bibendum tincidunt turpis ut scelerisque. Nullam vehicula consectetur ligula, at aliquam elit tempus in. Pellentesque eleifend dignissim massa molestie molestie. Sed vel pharetra massa. Pellentesque molestie tempus nibh at congue. Donec lacinia elit sit amet lectus vestibulum dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ornare, nunc non tincidunt imperdiet, velit velit aliquam lacus, vel porttitor dui urna ut nisi.

L

tiam mattis nisl vel metus cursus malesuada. Nam tincidunt, ipsum quis auctor imperdiet, nulla tortor sodales magna, nec viverra ligula turpis in libero. Aliquam erat volutpat. In erat erat, hendrerit nec rutrum non, viverra at augue. Curabitur ultrices, mi vel elementum imperdiet, quam eros bibendum quam, at dictum ligula nunc in felis.

F

Maecenas non leo quis risus lobortis volutpat. Aliquam erat volutpat. Sed et ipsum ante. Sed quis nunc sem. Morbi non augue sit amet risus consequat lobortis in vitae mi. Nam fringilla nulla ac lacus hendrerit aliquet. In posuere faucibus ligula, ornare laoreet felis feugiat ut.

A

Sed vitae nisl elit. In quis quam ut metus sollicitudin ullamcorper. Ut ut eleifend libero. Fusce pharetra, massa at malesuada mattis, augue risus semper massa, et faucibus augue tortor in metus. Nunc orci augue, hendrerit vitae luctus at, porta id nulla.

L

In hendrerit dolor sed lectus mattis vehicula interdum metus malesuada. Sed in turpis massa. Etiam eget metus quis elit gravida luctus et quis nisi. Aenean nec massa leo. Pellentesque rhoncus consectetur neque. Nullam sagittis euismod risus et tempor. Fusce semper cursus nulla. Vestibulum dapibus suscipit luctus. In ultrices velit in mauris feugiat molestie. Fusce non nibh est, facilisis molestie lorem.

F

Duis faucibus neque quis erat cursus vel laoreet nisi dictum. Nulla risus diam, aliquam sed tincidunt sed, gravida ut enim. Morbi nisi ante, tincidunt vel gravida at, condimentum suscipit nisi. In bibendum consectetur massa, ut ornare felis pretium at. Nulla sem metus, tempus scelerisque aliquet in, commodo nec est. Suspendisse lacinia odio id ante laoreet imperdiet. Suspendisse mi turpis, euismod a pharetra et, accumsan eget nisl. Suspendisse vitae purus blandit elit faucibus mollis ut eu ligula.

Go to top

Get the code

[dropcap type="circle" color="#COLOR_CODE" background="#COLOR_CODE"]ADD_CONTENT_HERE[/dropcap]
subota, 20 april 2013 02:48

Divider

Fusce ac justo quis nisl auctor consectetur. Aliquam lobortis nisi nec ligula congue ultrices. Nam eleifend suscipit eros, a ultrices nulla vehicula id. Vestibulum euismod mollis tellus, at bibendum elit ultricies in. Donec sodales congue augue id porta. Curabitur vehicula ligula nec turpis tristique eget gravida quam aliquam. Fusce neque risus, faucibus quis blandit posuere, faucibus id neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas euismod lectus at lectus egestas pharetra.

Etiam malesuada ante quis risus accumsan ut congue nibh gravida. Curabitur et arcu nibh, sit amet pellentesque enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget tristique tortor. Vivamus nibh tortor, tempus et faucibus vel, tincidunt eu turpis. In eu diam vulputate nisi tristique accumsan. Vestibulum ullamcorper vulputate leo gravida feugiat. Ut vitae dui odio, vitae tristique orci.

Get The Code

[divider scroll_text='Go to top']
subota, 20 april 2013 02:47

Columns

Column 1
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Column 2
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Column 3
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.

Get the code

[columns]
[column_item col="4"]First[/column_item]
[column_item col="4"]Second[/column_item]
[column_item col="4"]Third[/column_item]
[/columns]

Column 1
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. pharetra mattis vehicula a
Column 2
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. pharetra mattis vehicula a
Column 3
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. pharetra mattis vehicula a
Column 4
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. pharetra mattis vehicula a

Get the code

[columns]
[column_item col="3"]First[/column_item]
[column_item col="3"]Second[/column_item]
[column_item col="3"]Third[/column_item]
[column_item col="3"]Fourth[/column_item]
[/columns]


Column 1
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed varius iaculis mattis. Praesent vulputate velit ut arcu fermentum et tristique est convallis. Duis pellentesque faucibus dapibus. In a augue justo.
Column 2
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis pellentesque faucibus dapibus. In a augue justo nunc mauris est.

Get the code

[columns]
[column_item col="8"]First[/column_item]
[column_item col="4"]Second[/column_item]
[/columns]
subota, 20 april 2013 02:46

Buttons

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

Get the code

<button class="btn">Default</button><button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-inverse">Inverse</button>

Buttons for actions

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

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.

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.

Multiple sizes

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


Disabled state

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

Primary link Link

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

One class, multiple tags

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

Link
<a class="btn" href="/">Link</a>
<button class="btn" type="submit">
  Button
</button>
<input class="btn" type="button"
         value="Input">
<input class="btn" type="submit"
         value="Submit">

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

subota, 20 april 2013 02:45

Blockquote

Aenean eu leo quam. Pellentesque ornare sem lacinia quam.

Ut magna diam, condimentum nec vulputate eget, blandit condimentum ligula. Nunc sagittis molestie nulla, et fringilla est adipiscing at. Proin aliquet sapien ut justo viverra at interdum risus posuere. Integer hendrerit nisi dignissim nibh mattis accumsan. Integer sit amet augue vitae diam lobortis commodo vel et odio. Aliquam hendrerit, quam vitae aliquam blandit, diam ipsum tincidunt arcu, ac varius turpis nisi eu libero. Nunc ac ante mauris. Morbi at libero non tellus rhoncus scelerisque at vitae est. Praesent sed felis risus. Proin tristique, mi id semper pulvinar, leo orci iaculis urna, sed ultricies turpis sem a purus. Integer mattis elit sit amet erat varius sit amet accumsan orci eleifend. Duis tristique est et felis ultricies sit amet interdum lacus adipiscing. Sed quam mi, sagittis sed tincidunt at, mattis sed orci. Sed egestas turpis a nibh suscipit cursus. Vivamus sagittis sapien eu justo rutrum in auctor nibh blandit

Aenean eu leo quam. Pellentesque ornare sem lacinia quam.

Ut magna diam, condimentum nec vulputate eget, blandit condimentum ligula. Nunc sagittis molestie nulla, et fringilla est adipiscing at. Proin aliquet sapien ut justo viverra at interdum risus posuere. Integer hendrerit nisi dignissim nibh mattis accumsan. Integer sit amet augue vitae diam lobortis commodo vel et odio. Aliquam hendrerit, quam vitae aliquam blandit, diam ipsum tincidunt arcu, ac varius turpis nisi eu libero. Nunc ac ante mauris. Morbi at libero non tellus rhoncus scelerisque at vitae est. Praesent sed felis risus. Proin tristique, mi id semper pulvinar, leo orci iaculis urna, sed ultricies turpis sem a purus. Integer mattis elit sit amet erat varius sit amet accumsan orci eleifend. Duis tristique est et felis ultricies sit amet interdum lacus adipiscing. Sed quam mi, sagittis sed tincidunt at, mattis sed orci. Sed egestas turpis a nibh suscipit cursus. Vivamus sagittis sapien eu justo rutrum in auctor nibh blandit

Aenean eu leo quam. Pellentesque ornare sem lacinia quam.

Ut magna diam, condimentum nec vulputate eget, blandit condimentum ligula. Nunc sagittis molestie nulla, et fringilla est adipiscing at. Proin aliquet sapien ut justo viverra at interdum risus posuere. Integer hendrerit nisi dignissim nibh mattis accumsan. Integer sit amet augue vitae diam lobortis commodo vel et odio. Aliquam hendrerit, quam vitae aliquam blandit, diam ipsum tincidunt arcu, ac varius turpis nisi eu libero. Nunc ac ante mauris. Morbi at libero non tellus rhoncus scelerisque at vitae est. Praesent sed felis risus. Proin tristique, mi id semper pulvinar, leo orci iaculis urna, sed ultricies turpis sem a purus. Integer mattis elit sit amet erat varius sit amet accumsan orci eleifend. Duis tristique est et felis ultricies sit amet interdum lacus adipiscing. Sed quam mi, sagittis sed tincidunt at, mattis sed orci. Sed egestas turpis a nibh suscipit cursus. Vivamus sagittis sapien eu justo rutrum in auctor nibh blandit

Get The Code

 [quote align='center' color='#999999']ADD_CONTENT_HERE[/quote] 
[quote align='left' color='#999999']ADD_CONTENT_HERE[/quote]
[quote align='right' color='#999999']ADD_CONTENT_HERE[/quote]
subota, 20 april 2013 02:44

Accordion

  • Donec neque metus

    Sed ac rhoncus purus. Mauris mattis vestibulum posuere. Phasellus ut justo nec est adipiscing tristique. Integer tristique, arcu a tempor vulputate, nulla est viverra tellus, vel euismod lacus nibh non neque. Nulla et metus nibh, ut feugiat nunc. Donec ultrices placerat enim, nec rhoncus eros consequat quis.
  • Nullam mattis ipsum

    Sed ac rhoncus purus. Mauris mattis vestibulum posuere. Phasellus ut justo nec est adipiscing tristique. Integer tristique, arcu a tempor vulputate, nulla est viverra tellus, vel euismod lacus nibh non neque. Nulla et metus nibh, ut feugiat nunc. Donec ultrices placerat enim, nec rhoncus eros consequat quis.
  • Nam vehicula

    Sed ac rhoncus purus. Mauris mattis vestibulum posuere. Phasellus ut justo nec est adipiscing tristique. Integer tristique, arcu a tempor vulputate, nulla est viverra tellus, vel euismod lacus nibh non neque. Nulla et metus nibh, ut feugiat nunc. Donec ultrices placerat enim, nec rhoncus eros consequat quis.


Get The Code

 [accordion]
[acc_item title='ITEM_TITLE']ADD_CONTENT_HERE[/acc_item]
[acc_item title='ITEM_TITLE']ADD_CONTENT_HERE[/acc_item]
[acc_item title='ITEM_TITLE']ADD_CONTENT_HERE[/acc_item]
[/accordion]
subota, 20 april 2013 02:37

Lightbox

ZooTemplate
ZooTemplate
ZooTemplate
ZooTemplate
ZooTemplate
ZooTemplate

Get the code

[lightbox src='IMAGE_SRC' width='IMAGE_WIDTH' height='IMAGE_HEIGHT' lightbox='on' title='IMAGE_TITLE' align='left']

Naša lokacija

Kontakt info

 

  Ratarski put 37 B, Beograd, Zemun
11080, Srbija

  + 381 11 316 0554

  + 381 63 80 277 80

  + 381 63 261 187

  Ova adresa el. pošte je zaštićena od spambotova. Omogućite JavaScript da biste je videli.

  http://san011.com

Top of Page