Loading...

The UI Elements

Even More Awesomeness

Alerts

博发彩票登录 www.c0255.cn Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. The syntax is extremely simple and like anything else in Foundation, easy to customize.

This is a standard alert (div.alert-box). ×
This is a success alert (div.alert-box.success). ×
This is a warning alert (div.alert-box.warning). ×
This is an error alert (div.alert-box.error). ×


Nav Bar

If you need a more traditional nav bar with dropdowns, you can use this sucka. The dropdowns are optional - omitting the flyout element and .has-flyout class means it will act as a standard link. The flyouts can hold arbitrary content, including grid objects, and have three sizes (.small, standard, and .large).

Note: In IE7 the dropdowns are obscured by the code snippet below. This is due to IE7s iframe z-index bug, and is not an issue with the dropdowns themselves. Try not to have dropdown elements over an iframe.

You can also drop inputs into the nav in place of an anchor. Here you can see a search input.


Sub Nav

If you need to provide simple and effective on-page navigation, to either jump to content on the page or flip to another view then use this awesome little sub-nav.


Labels

Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. Examples might be noting when something was updated or that something is new. The syntax is simple, just a spanelement with a class of .label. The border styling mirrors that of the Foundation buttons.

Regular Label Radius Label Round Label

Blue Label Red Label Black Label Green Label White Label

Added 01/19This paragraph has an inline label to let you know that it was added on January 19, 2012 courtesy of Thomas Klemm. Thanks man!


Tooltips

Tooltips are a quick way to provide extended information on a term or action on a page. They work cross browser and cross platfrom and are easily added to a page by including the jquery.tooltip.js plugin. You can apply the has-tipclass to any element, as long as you assign it a unique ID.

By default the tooltip takes the width of the element that it is applied to, but you can override this behavior by applying a data-widthattribute to the target element. The tooltip takes on the content of the targets titleattribute.

The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top" (hehe), "tip-left", or "tip-right"of the target element.In a mobile environment the tooltips are full width and bottom aligned.


Pagination

Breaking stuff up into pages? Yeah you are. Here's some pagination to get you started.


Breadcrumbs

Walking through a linear flow, or want to show where someone is in the hierarchy? Breadcrumbs are totally boss.

Breadcrumbs are built with a UL just like pagination, and they can support span or anchor elements with 'current' and 'unavailable' classes.


Tables

Okay, they're not the sexiest things ever, but tables get the job done (for tabular data).

Table Header Table Header Table Header Table Header
Content This is longer content Content Content
Content This is longer content Content Content
Content This is longer content Content Content
Content This is longer content Content Content

Video

If you're embedding video from YouTube, Vimeo, or another site that uses iframe, embed or object elements you can wrap your video in div.flex-videoto create an intrinsic ratio that will properly scale your video on any device.

4:3
Widescreen
Vimeo

Microformats

Microformats are formats for data objects represented on the page using standard HTML. By applying specific classes to objects parsers like the operator plugin can detect relevant data and display it. This can be especially handy for contact info, events, locations and news articles. We've supplied some base styling for microformats, as well as the relevant markup.

hCard

hCards are a microformat for contact information. We've represented the correct syntax here to ensure they are machine readable, as well as applied some minimal styling.

hCalendar

An hCalendar event is an iCalendar formatted entry for an event at a specific time and location. This can be interpreted by parsing tools to recognize events and add them to a calendar.

The Foundation Launch Party was on October 13 2011 from 24pm at ZURB HQ



Most of the documentation is by the Zurb Team. It's awesome & I'm thankful that they wrote such thorough documentation for an open source project. Most companies would never do that.

  • 贵州瓮安:荒坡变花海 美景引客来 2019-07-16
  • 财经随笔:年近半百,“金融科技”仍是少年 2019-07-16
  • 【学习时刻·经济实说①】清华大学国情研究院胡鞍钢:伟大的发展实践产生伟大的思想 2019-07-16
  • [大笑]不然小萌们也发神经要去造飞船,是分给他们资源呢还是不分?分,肯定是竹篮打水,不分,又违背了分配原则。 2019-07-16
  • 南方都市报:中考结束遇上父亲节,考场外这一幕瞬间萌翻你,心都化了! 2019-07-15
  • 饮水思源感党恩 争做新时代好群众 2019-07-15
  • 以古鉴今,习近平多次提及屈原 2019-07-15
  • 北京市北京元之沃4S店【在线咨询】 2019-07-14
  • 高清:C罗帽子戏法科斯塔梅开二度 葡萄牙3 2019-07-14
  • 云南景洪疑似陨石坠落事件追踪:有村民称找到陨石 2019-07-14
  • 鑫雅胜凤娃古寨与创始人余红梅拾荒故事再次搬上屏幕 2019-07-13
  • Foreign ambassadors on Chinas contribution to global governance 2019-07-13
  • 一句嘱咐 涡阳一对父子接力守墓74载 只求烈士不孤单 2019-07-13
  • 市场经济就是一种唯利是图的经济,是一种波动、走极端的经济,新时期的发展方式与结果就是如 此。那么指望市场经济来解决需要与不平衡的矛盾,对症下药了吗? 2019-07-12
  • 美帝拉拢人民,才能反对共产党。 2019-07-12
  • 河南泳坛夺金开奖玩法 浙江体彩20选5开奖号码 30选5几点开奖 辽宁11选5第一期几点开始 十一运夺金走势 中国福利彩票网站代理 手机足球比分 金7乐组六怎么买 广东时时彩怎么赚钱吗 安徽11选5前三位第二位遗漏值尾走势图 中超降级 全年固定公式规律 22选5胆拖投注表 体彩6+1开奖查询 平特肖中奖怎么算钱的