Визуальные элементы

Labels

Default Primary Success Info Warning Danger

Images

Thumbnails List

Tabs

Popular
Recent

Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Accordion type 1

Исходный код:

	<div class="accordion-type-1">
		<div class="accordion-head accordion-close" data-toggle="collapse" data-parent="#accordion1" href="#accordion1">
			<a href="#">Pricing Tables<i class="icon icon-angle-down"></i></a>
		</div>
		<div id="accordion1" class="panel-collapse collapse">
			<div class="accordion-body">
				text here
			</div>
		</div>
	</div>

Pricing Tables

Accordion type 2

Исходный код:

	<div class="accordion-type-2">
		<div class="accordion-head accordion-close" data-toggle="collapse" data-parent="#accordion4" href="#accordion4">
			<a href="#">Pricing Tables<i class="icon icon-angle-down"></i></a>
		</div>
		<div id="accordion4" class="panel-collapse collapse">
			<div class="accordion-body">
				text here
			</div>
		</div>
	</div>

Pricing Tables

Toggle

Curabitur eget leo at velit imperdiet vague iaculis vitaes?

Curabitur eget leo at imperdiet vague iaculis vitaes?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor, orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.

Curabitur eget leo at velit imperdiet vague iaculis vitaes?

One Toggle Open At A Time

Curabitur eget leo at velit imperdiet vague iaculis vitaes?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo.

Curabitur eget leo at velit imperdiet vague iaculis vitaes?

Alerts

Styles for success, info, warning, and error messages

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Best check yo self, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Progress Bar

HTML/CSS

Design

WordPress

Photoshop

Tooltips

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray.

Carousel

Porto includes the responsive and powerfull jquery plugin FlexSlider.

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Fancybox

Forms

Individual form controls automatically receive some global styling.

Pagination

Large

Default

Small

Оформление блока

Исходный код:

<div class="styled-block">Красивый блок на сайте</div>

Красивый блок на сайте