欢迎使用拼图响应式前端框架

常用元件

常见的、可重复使用的样式组合，图标、标签、下拉菜单、按钮组、媒体对象、表单、面板等。

概述

元件是由一系列的HTML和CSS元素灵活组合而成的代码，同时元件也是供使用者灵活组合使用，前端设计开发就像玩游戏一样简单而又富有乐趣。



网格系统

拼图框架内置一套响应式网格系统是，不同分辨率或设备可自动适应大小，使得页面在不同设备上都有良好的表现。

简介

网格系统用于通过一系列的行与格子的组合创建页面布局，将每行分成12个格式而形成网格系统。

  • 行.line必须包含在.container中；当使用100%的页面宽度时，也可以包含在.container-layout中；
  • 格式.x(*)必须包含在.line中；
  • .x(*)可以随意组合，满行.line内的.x(*)数值的总和等于12；大于12则另起一行显示；
  • 使用.line时，格子的间距为0px；也可以使用.line-small(4px)、.line-middle(10px)、.line-big(20px)来改变格子的间距。
  • x：水平方向的格子；
  • 数字(*)：包含格子的数量；
  • l：手机-超小屏幕(little)；
  • s：平板-小屏幕(small)；
  • m：桌面-中屏幕(middle)；
  • b：桌面宽屏-大屏幕(big)；

常规布局

常规布局即为非响应式布局，即为在任何屏幕格子比例上都一样的排列方式，不会随着屏幕不同而展示不同的布局。

x1
x1
x1
x1
x1
x1
x1
x1
x1
x1
x1
x1
x3
x9
x4
x4
x4
x6
x6
<div class="line"> <div class="x1"> x1</div> <div class="x1"> x1</div> <div class="x1"> x1</div> <div class="x1"> x1</div> <div class="x1"> x1</div> <div class="x1"> x1</div> <div class="x1"> x1</div> <div class="x1"> x1</div> <div class="x1"> x1</div> <div class="x1"> x1</div> <div class="x1"> x1</div> <div class="x1"> x1</div> </div> <div class="line-small"> <div class="x3"> x3</div> <div class="x9"> x9</div> </div> <div class="line-middle"> <div class="x4"> x4</div> <div class="x4"> x4</div> <div class="x4"> x4</div> </div> <div class="line-big"> <div class="x6"> x6</div> <div class="x6"> x6</div> </div>

水平移动

给例添加.x(*)-move样式，可以快速实现元素的水平方向移动。
x3 x5-move 3格-移动5格
x5 x2-move 5格-移动2格
x4 x1-move 4格-移动1格
x3 x2-move 3格-移动2格
<div class="line"> <div class="x3 x5-move"> x3 x5-move 3格-移动5格</div> </div> <div class="line"> <div class="x5 x2-move"> x5 x2-move 5格-移动2格</div> </div> <div class="line"> <div class="x4 x1-move"> x4 x1-move 4格-移动1格</div> <div class="x3 x2-move"> x3 x2-move 4格-移动2格</div> </div>

内嵌套

大格子里面包含小格子，12个格子为一整行，超出则为换行。
x3
x3
x3
x3
x6
x6
<div class="line"> <div class="x6"> <div class="x3"> x3</div> <div class="x3"> x3</div> <div class="x3"> x3</div> <div class="x3"> x3</div> </div> </div> <div class="line"> <div class="x9"> <div class="x6"> x6</div> <div class="x6"> x6</div> </div> </div>

格子排序

使用.x(*)-left和.x(*)-right样式，可以改变格子的排序显示。
x4 x8-left
x8 x4-right
<div class="line"> <div class="x4 x8-left"> x4 x8-left</div> <div class="x8 x4-right"> x8 x4-right</div> </div>

跨屏响应式布局

跨屏响应式布局，分为两种方式，在支持CSS3的浏览器中，拼图采用的是媒体查询(media query)，当不支持css3的浏览器IE8时，拼图引入Respond.js来实现媒体查询。

媒体查询方式

超小屏幕(手机，小于 760px) 没有任何媒体查询相关的代码，因为这在 拼图 中是默认的 小屏幕(平板，大于等于 760px) @media (min-width: 760px) { ... } 中等屏幕(桌面显示器，大于等于 1000px) @media (min-width: 1000px) { ... } 大屏幕(宽屏显示器，大于等于 1200px) @media (min-width: 1200px) { ... }

跨屏响应参数

  超小屏幕 (手机<760px) 小屏幕 (平板≥760px) 中屏幕 (桌面≥1000px) 大屏幕 (宽屏≥1200px)
.container最大值 自动 740px 980px 1180px
格子样式 .xl-(*) .xs-(*) .xm-(*) .xb-(*)
响应效果 总是水平排列 水平排列，当屏幕小于这些阈值时堆叠在一起
格子数 12
响应显示及隐藏：控制在对应屏幕下的显示和隐藏
显示响应 .show-l .show-s .show-m .show-b
隐藏响应 .hidden-l .hidden-s .hidden-m .hidden-b


格子间距
行样式 .line .line-small .line-middle .line-big
间距 0px 4px 10px 20px
水平移动、嵌套和格子排序 和常规布局一样，跨屏响应式布局也可以使用水平移动、内嵌套和格子排序；使用的样式分别为移动：.x(*)-move；排序：.x(*)-left，.x(*)-right样式。

响应示例

xl1
xl1
xl1
xl1
xl1
xl1
xl1
xl1
xl1
xl1
xl1
xl1
xs3
xs9
xm4
xm4
xm4
xb6
xb6
<div class="line-small"> <div class="xl1"> xl1</div> <div class="xl1"> xl1</div> <div class="xl1"> xl1</div> <div class="xl1"> xl1</div> <div class="xl1"> xl1</div> <div class="xl1"> xl1</div> <div class="xl1"> xl1</div> <div class="xl1"> xl1</div> <div class="xl1"> xl1</div> <div class="xl1"> xl1</div> <div class="xl1"> xl1</div> <div class="xl1"> xl1</div> </div> <div class="line-big"> <div class="xs3"> xs3</div> <div class="xs9"> xs9</div> </div> <div class="line-middle"> <div class="xm4"> xm4</div> <div class="xm4"> xm4</div> <div class="xm4"> xm4</div> </div> <div class="line"> <div class="xb6"> xb6</div> <div class="xb6"> xb6</div> </div>

水平移动

给例添加.xl(*)-move,.xs(*)-move,.xm(*)-move,.xb(*)-move样式，可以快速实现元素的水平方向移动。
xl3 xl5-move 3格-移动5格
xs5 xs2-move 5格-移动2格
xm4 xm1-move 4格-移动1格
xm4 xm2-move 4格-移动2格
xb3 xb1-move 3格-移动1格
xb3 xb1-move 3格-移动1格
xb3 xb1-move 3格-移动1格
<div class="line"> <div class="xl3 xl5-move"> xl3 xl5-move 3格-移动5格</div> </div> <div class="line"> <div class="xs5 xs2-move"> xs5 xs2-move 5格-移动2格</div> </div> <div class="line"> <div class="xm4 xm1-move"> xm4 xm1-move 4格-移动1格</div> <div class="xm3 xm2-move"> xm4 xm2-move 4格-移动2格</div> </div> <div class="line"> <div class="xb3 xb1-move"> xb3 xb1-move 3格-移动1格</div> <div class="xb3 xb1-move"> xb3 xb1-move 3格-移动1格</div> <div class="xb3 xb1-move"> xb3 xb1-move 3格-移动1格</div> </div>

内嵌套

xl3
xl3
xl3
xl3
xs6
xs6
xm4
xm4
xm4
xb3
xb3
xb3
xb3
<div class="line"> <div class="xl6"> <div class="xl3"> xl3</div> <div class="xl3"> xl3</div> <div class="xl3"> xl3</div> <div class="xl3"> xl3</div> </div> </div> <div class="line"> <div class="xs8"> <div class="xs6"> xs6</div> <div class="xs6"> xs6</div> </div> </div> <div class="line"> <div class="xm10"> <div class="xm4"> xm4</div> <div class="xm4"> xm4</div> <div class="xm4"> xm4</div> </div> </div> <div class="line"> <div class="xb12"> <div class="xb3"> xb3</div> <div class="xb3"> xb3</div> <div class="xb3"> xb3</div> <div class="xb3"> xb3</div> </div> </div>

格子排序

使用.xl(*)-left和.xl(*)-right、.xs(*)-left和.xs(*)-right、.xm(*)-left和.xm(*)-right、.xb(*)-left和.xb(*)-right样式，可以改变格子的排序显示。
xl2 xl10-left
xl10 xl2-right
xs4 xs8-left
xs8 xs4-right
xm6 xm6-left
xm6 xm6-right
xb8 xb4-left
xb4 xb8-right
<div class="line"> <div class="xl2 xl10-left"> xl2 xl10-left</div> <div class="xl10 xl2-right"> xl10 xl2-right</div> </div> <div class="line"> <div class="xs4 xs8-left"> xs4 xs8-left</div> <div class="xs8 xs4-right"> xs8 xs4-right</div> </div> <div class="line"> <div class="xm6 xm6-left"> xm6 xm6-left</div> <div class="xm6 xm6-right"> xm6 xm6-right</div> </div> <div class="line"> <div class="xb8 xb4-left"> xb8 xb4-left</div> <div class="xb4 xb8-right"> xb4 xb8-right</div> </div>

显示及隐藏

hidden-l超小屏幕下隐藏
小屏幕下隐藏
中屏幕下隐藏
<div class="line"> <div class="xs4 hidden-l"> hidden-l超小屏幕下隐藏</div> <div class="xs8 show-b" style="display: none;"> show-b 宽屏下显示</div> </div> <div class="line"> <div class="xm4 hidden-s"> 小屏幕下隐藏</div> <div class="xm4 hidden-m"> 中屏幕下隐藏</div> <div class="xm4 show-l" style="display: none;"> 超小屏幕下显示</div> </div>

综合实例

手机、平板、桌面、大屏幕跨屏转换实例。

从手机、平板、桌面的媒体查询

xs6 xm3
xs6 xm9
xs12 xm6 xb4
xs12 xm6 xb4
xs12 xm6 xb4
<div class="line-big"> <div class="xs6 xm3"> xs6 xm3</div> <div class="xs6 xm9"> xs6 xm9</div> </div> <div class="line"> <div class="xs12 xm6 xb4"> xs12 xm6 xb4</div> <div class="xs12 xm6 xb4"> xs12 xm6 xb4</div> <div class="xs12 xm6 xb4"> xs12 xm6 xb4</div> </div>


图标

CSS小图标

关闭按钮、向左、向右、上箭头，下箭头等常用小按钮。

<span class="close"></span> <span class="leftward"></span> <span class="rightward"></span> <span class="upward"></span> <span class="downward"></span>
浏览器兼容 上、下、左、右的箭头在IE6下不支持显示，需要对其支持慎用，也可以自己改用图片样式。

字体图标

500多个Font Awesome字体图标。

网络应用图标

  • icon-adjust
  • icon-anchor
  • icon-archive
  • icon-arrows
  • icon-arrows-h
  • icon-arrows-v
  • icon-asterisk
  • icon-automobile (alias)
  • icon-ban
  • icon-bank (alias)
  • icon-bar-chart-o
  • icon-barcode
  • icon-bars
  • icon-beer
  • icon-bell
  • icon-bell-o
  • icon-bolt
  • icon-bomb
  • icon-book
  • icon-bookmark
  • icon-bookmark-o
  • icon-briefcase
  • icon-bug
  • icon-building
  • icon-building-o
  • icon-bullhorn
  • icon-bullseye
  • icon-cab (alias)
  • icon-calendar
  • icon-calendar-o
  • icon-camera
  • icon-camera-retro
  • icon-car
  • icon-caret-square-o-down
  • icon-square-o-left
  • icon-square-o-right
  • icon-caret-square-o-up
  • icon-certificate
  • icon-check
  • icon-check-circle
  • icon-check-circle-o
  • icon-check-square
  • icon-check-square-o
  • icon-child
  • icon-circle
  • icon-circle-o
  • icon-circle-o-notch
  • icon-circle-thin
  • icon-clock-o
  • icon-cloud
  • icon-cloud-download
  • icon-cloud-upload
  • icon-code
  • icon-code-fork
  • icon-coffee
  • icon-cog
  • icon-cogs
  • icon-comment
  • icon-comment-o
  • icon-comments
  • icon-comments-o
  • icon-compass
  • icon-credit-card
  • icon-crop
  • icon-crosshairs
  • icon-cube
  • icon-cubes
  • icon-cutlery
  • icon-dashboard (alias)
  • icon-database
  • icon-desktop
  • icon-dot-circle-o
  • icon-download
  • icon-edit (alias)
  • icon-ellipsis-h
  • icon-ellipsis-v
  • icon-envelope
  • icon-envelope-o
  • icon-envelope-square
  • icon-eraser
  • icon-exchange
  • icon-exclamation
  • icon-exclamation-circle
  • icon-exclamation-triangle
  • icon-external-link
  • icon-external-link-square
  • icon-eye
  • icon-eye-slash
  • icon-fax
  • icon-female
  • icon-fighter-jet
  • icon-file-archive-o
  • icon-file-audio-o
  • icon-file-code-o
  • icon-file-excel-o
  • icon-file-image-o
  • icon-file-movie-o (alias)
  • icon-file-pdf-o
  • icon-file-photo-o (alias)
  • icon-file-picture-o (alias)
  • icon-file-powerpoint-o
  • icon-file-sound-o (alias)
  • icon-file-video-o
  • icon-file-word-o
  • icon-file-zip-o (alias)
  • icon-film
  • icon-filter
  • icon-fire
  • icon-fire-extinguisher
  • icon-flag
  • icon-flag-checkered
  • icon-flag-o
  • icon-flash (alias)
  • icon-flask
  • icon-folder
  • icon-folder-o
  • icon-folder-open
  • icon-folder-open-o
  • icon-frown-o
  • icon-gamepad
  • icon-gavel
  • icon-gear (alias)
  • icon-gears (alias)
  • icon-gift
  • icon-glass
  • icon-globe
  • icon-graduation-cap
  • icon-group (alias)
  • icon-hdd-o
  • icon-headphones
  • icon-heart
  • icon-heart-o
  • icon-history
  • icon-home
  • icon-image (alias)
  • icon-inbox
  • icon-info
  • icon-info-circle
  • icon-institution (alias)
  • icon-key
  • icon-keyboard-o
  • icon-language
  • icon-laptop
  • icon-leaf
  • icon-legal (alias)
  • icon-lemon-o
  • icon-level-down
  • icon-level-up
  • icon-life-bouy (alias)
  • icon-life-ring
  • icon-life-saver (alias)
  • icon-lightbulb-o
  • icon-location-arrow
  • icon-lock
  • icon-magic
  • icon-magnet
  • icon-mail-forward (alias)
  • icon-mail-reply (alias)
  • icon-mail-reply-all (alias)
  • icon-male
  • icon-map-marker
  • icon-meh-o
  • icon-microphone
  • icon-microphone-slash
  • icon-minus
  • icon-minus-circle
  • icon-minus-square
  • icon-minus-square-o
  • icon-mobile
  • icon-mobile-phone (alias)
  • icon-money
  • icon-moon-o
  • icon-mortar-board (alias)
  • icon-music
  • icon-navicon (alias)
  • icon-paper-plane
  • icon-paper-plane-o
  • icon-paw
  • icon-pencil
  • icon-pencil-square
  • icon-pencil-square-o
  • icon-phone
  • icon-phone-square
  • icon-photo (alias)
  • icon-picture-o
  • icon-plane
  • icon-plus
  • icon-plus-circle
  • icon-plus-square
  • icon-plus-square-o
  • icon-power-off
  • icon-print
  • icon-puzzle-piece
  • icon-qrcode
  • icon-question
  • icon-question-circle
  • icon-quote-left
  • icon-quote-right
  • icon-random
  • icon-recycle
  • icon-refresh
  • icon-reorder (alias)
  • icon-reply
  • icon-reply-all
  • icon-retweet
  • icon-road
  • icon-rocket
  • icon-rss
  • icon-rss-square
  • icon-search
  • icon-search-minus
  • icon-search-plus
  • icon-send (alias)
  • icon-send-o (alias)
  • icon-share
  • icon-share-alt
  • icon-share-alt-square
  • icon-share-square
  • icon-share-square-o
  • icon-shield
  • icon-shopping-cart
  • icon-sign-in
  • icon-sign-out
  • icon-signal
  • icon-sitemap
  • icon-sliders
  • icon-smile-o
  • icon-sort
  • icon-sort-alpha-asc
  • icon-sort-alpha-desc
  • icon-sort-amount-asc
  • icon-sort-amount-desc
  • icon-sort-asc
  • icon-sort-desc
  • icon-sort-down (alias)
  • icon-sort-numeric-asc
  • icon-sort-numeric-desc
  • icon-sort-up (alias)
  • icon-space-shuttle
  • icon-spinner
  • icon-spoon
  • icon-square
  • icon-square-o
  • icon-star
  • icon-star-half
  • icon-star-half-empty (alias)
  • icon-star-half-full (alias)
  • icon-star-half-o
  • icon-star-o
  • icon-suitcase
  • icon-sun-o
  • icon-support (alias)
  • icon-tablet
  • icon-tachometer
  • icon-tag
  • icon-tags
  • icon-tasks
  • icon-taxi
  • icon-terminal
  • icon-thumb-tack
  • icon-thumbs-down
  • icon-thumbs-o-down
  • icon-thumbs-o-up
  • icon-thumbs-up
  • icon-ticket
  • icon-times
  • icon-times-circle
  • icon-times-circle-o
  • icon-tint
  • icon-toggle-down (alias)
  • icon-toggle-right (alias)
  • icon-toggle-right (alias)
  • icon-toggle-up (alias)
  • icon-trash-o
  • icon-tree
  • icon-trophy
  • icon-truck
  • icon-umbrella
  • icon-university
  • icon-unlock
  • icon-unlock-alt
  • icon-unsorted (alias)
  • icon-upload
  • icon-user
  • icon-users
  • icon-video-camera
  • icon-volume-down
  • icon-volume-off
  • icon-volume-up
  • icon-warning (alias)
  • icon-wheelchair
  • icon-wrench

文件类型图标

  • icon-file
  • icon-file-archive-o
  • icon-file-audio-o
  • icon-file-code-o
  • icon-file-excel-o
  • icon-file-image-o
  • icon-file-movie-o(alias)
  • icon-file-o
  • icon-file-pdf-o
  • icon-file-photo-o(alias)
  • icon-file-picture-o(alias)
  • icon-file-powerpoint-o
  • icon-file-sound-o(alias)
  • icon-file-text
  • icon-file-text-o
  • icon-file-video-o
  • icon-file-word-o
  • icon-file-zip-o(alias)

旋转图标

  • icon-circle-o-notch
  • icon-cog
  • icon-gear (alias)
  • icon-refresh
  • icon-spinner

表单控制图标

  • icon-check-square
  • icon-check-square-o
  • icon-circle
  • icon-circle-o
  • icon-dot-circle-o
  • icon-minus-square
  • icon-minus-square-o
  • icon-plus-square
  • icon-plus-square-o
  • icon-square
  • icon-square-o

货币图标

  • icon-icon-bitcoin (alias)
  • icon-btc
  • icon-cny (alias)
  • icon-dollar (alias)
  • icon-
  • icon-euro (alias)
  • icon-gbp
  • icon-inr
  • icon-jpy
  • icon-krw
  • icon-money
  • icon-rmb (alias)
  • icon-rouble (alias)
  • icon-rub
  • icon-ruble (alias)
  • icon-rupee (alias)
  • icon-try
  • icon-turkish-lira (alias)
  • icon-usd
  • icon-won (alias)
  • icon-yen (alias)

编辑图标

  • icon-align-center
  • icon-align-justify
  • icon-align-left
  • icon-align-right
  • icon-bold
  • icon-chain (alias)
  • icon-chain-broken
  • icon-clipboard
  • icon-columns
  • icon-copy (alias)
  • icon-cut (alias)
  • icon-dedent (alias)
  • icon-eraser
  • icon-file
  • icon-file-o
  • icon-file-text
  • icon-file-text-o
  • icon-files-o
  • icon-floppy-o
  • icon-font
  • icon-header
  • icon-indent
  • icon-italic
  • icon-link
  • icon-list
  • icon-list-alt
  • icon-list-ol
  • icon-list-ul
  • icon-outdent
  • icon-paperclip
  • icon-paragraph
  • icon-paste (alias)
  • icon-repeat
  • icon-rotate-left (alias)
  • icon-rotate-right (alias)
  • icon-save (alias)
  • icon-scissors
  • icon-strikethrough
  • icon-subscript
  • icon-superscript
  • icon-table
  • icon-text-height
  • icon-text-width
  • icon-th
  • icon-th-large
  • icon-th-list
  • icon-underline
  • icon-undo
  • icon-unlink (alias)

指向图标

  • icon-angle-double-down
  • icon-angle-double-left
  • icon-angle-double-right
  • icon-angle-double-up
  • icon-angle-down
  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-arrow-circle-down
  • icon-arrow-circle-left
  • icon-arrow-circle-o-down
  • icon-arrow-circle-o-left
  • icon-arrow-circle-o-right
  • icon-arrow-circle-o-up
  • icon-arrow-circle-right
  • icon-arrow-circle-up
  • icon-arrow-down
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrows
  • icon-arrows-alt
  • icon-arrows-h
  • icon-arrows-v
  • icon-caret-down
  • icon-caret-left
  • icon-caret-right
  • icon-caret-square-o-down
  • icon-caret-square-o-left
  • icon-caret-square-o-right
  • icon-caret-square-o-up
  • icon-caret-up
  • icon-chevron-circle-down
  • icon-chevron-circle-left
  • icon-chevron-circle-right
  • icon-chevron-circle-up
  • icon-chevron-down
  • icon-chevron-left
  • icon-chevron-right
  • icon-chevron-up
  • icon-hand-o-down
  • icon-hand-o-left
  • icon-hand-o-right
  • icon-hand-o-up
  • icon-long-arrow-down
  • icon-long-arrow-left
  • icon-long-arrow-right
  • icon-long-arrow-up
  • icon-toggle-down (alias)
  • icon-toggle-left (alias)
  • icon-toggle-right (alias)
  • icon-toggle-up (alias)

播放图标

  • icon-arrows-alt
  • icon-backward
  • icon-compress
  • icon-eject
  • icon-expand
  • icon-fast-backward
  • icon-fast-forward
  • icon-forward
  • icon-pause
  • icon-play
  • icon-play-circle
  • icon-play-circle-o
  • icon-step-backward
  • icon-step-forward
  • icon-stop
  • icon-youtube-play

医疗图标

  • icon-ambulance
  • icon-h-square
  • icon-hospital-o
  • icon-medkit
  • icon-plus-square
  • icon-stethoscope
  • icon-user-md
  • icon-wheelchair

品牌图标

  • icon-adn
  • icon-android
  • icon-apple
  • icon-behance
  • icon-behance-square
  • icon-bitbucket
  • icon-bitbucket-square
  • icon-bitcoin (alias)
  • icon-btc
  • icon-codepen
  • icon-css3
  • icon-delicious
  • icon-deviantart
  • icon-digg
  • icon-dribbble
  • icon-dropbox
  • icon-drupal
  • icon-empire
  • icon-facebook
  • icon-facebook-square
  • icon-flickr
  • icon-foursquare
  • icon-ge (alias)
  • icon-git
  • icon-git-square
  • icon-github
  • icon-github-alt
  • icon-github-square
  • icon-gittip
  • icon-google
  • icon-google-plus
  • icon-
  • icon-hacker-news
  • icon-html5
  • icon-instagram
  • icon-joomla
  • icon-jsfiddle
  • icon-linkedin
  • icon-linkedin-square
  • icon-linux
  • icon-maxcdn
  • icon-openid
  • icon-pagelines
  • icon-pied-piper
  • icon-pied-piper-alt
  • icon-pied-piper-square (alias)
  • icon-pinterest
  • icon-pinterest-square
  • icon-qq
  • icon-ra (alias)
  • icon-rebel
  • icon-reddit
  • icon-reddit-square
  • icon-renren
  • icon-share-alt
  • icon-share-alt-square
  • icon-skype
  • icon-slack
  • icon-soundcloud
  • icon-spotify
  • icon-stack-exchange
  • icon-stack-overflow
  • icon-steam
  • icon-steam-square
  • icon-stumbleupon
  • icon-stumbleupon-circle
  • icon-tencent-weibo
  • icon-trello
  • icon-tumblr
  • icon-tumblr-square
  • icon-twitter
  • icon-twitter-square
  • icon-vimeo-square
  • icon-vine
  • icon-vk
  • icon-wechat (alias)
  • icon-weibo
  • icon-weixin
  • icon-windows
  • icon-wordpress
  • icon-xing
  • icon-xing-square
  • icon-yahoo
  • icon-youtube
  • icon-youtube-play
  • icon-youtube-square

使用方法

给元素添加.icon-(*)样式，即可添加图标，同时添加text-(size)系列样式，可改变文字大小，添加text-(color)系列样式，可以改变图标颜色。
<span class="icon-star"></span> <span class="icon-star text-big"></span> <span class="icon-star text-large text-red"></span> <button class="button button-little"> <span class="icon-star"></span>按钮</button> <button class="button button-small"> <span class="icon-star"></span>按钮</button> <button class="button"> <span class="icon-star"></span>按钮</button> <button class="button button-big"> <span class="icon-star"></span>按钮</button> <button class="button button-large"> <span class="icon-star"></span>按钮</button>

字体文件

拼图使用的字体文件存放于百度CDN库，如需在本机使用，请下载字体文件后，打开pintuer.css，搜索https://libs.baidu.com/，找到5处字体文件路径并修改。

本地下载 FontAwesome v4.1.0

在Photoshop中使用图标

Font Awesome是一款非常流行和免费的图标字体。图标字体是非常适合用在网页设计中，因为它们可以用作图标显示在屏幕上，同时由于是用字体的，可以缩放和渲染，是一个非常高效的解决方案。

  1. 首先关闭现在正在使用的photoshop。
  2. 下载Font Awesome OTF格式的字体。把他保存在本地上。
  3. 在你的电脑上安装这个.otf的字体，删除掉刚才保存的字体。
  4. 打开你的photoshop，然后创建一个空白的文档。使用这个font awesome的字体格式。
  5. 打开网站上的图标，复制上面的图标（注意要复制它的内容，然后粘贴到你的ps里面）
  6. 像修改其他字体那样修改它的大小和颜色吧。你会喜欢上它的。


标签

标签样式

h1. 拼图前端框架标题 标签

h2. 拼图前端框架标题 标签

h3. 拼图前端框架标题 标签

h4. 拼图前端框架标题 标签

h5. 拼图前端框架标题 标签
h6. 拼图前端框架标题 标签
<h1> h1. 拼图前端框架标题 <span class="tag">标签</span></h1> <h2> h2. 拼图前端框架标题 <span class="tag">标签</span></h2> <h3> h3. 拼图前端框架标题 <span class="tag">标签</span></h3> <h4> h4. 拼图前端框架标题 <span class="tag">标签</span></h4> <h5> h5. 拼图前端框架标题 <span class="tag">标签</span></h5> <h6> h6. 拼图前端框架标题 <span class="tag">标签</span></h6>

标签颜色

改变标签的颜色。

主色 辅色 背景色 融合色 点缀色 黑色 灰色 白色
<span class="tag bg-main">主色</span> <span class="tag bg-sub">辅色</span> <span class="tag bg-back">背景色</span> <span class="tag bg-mix">融合色</span> <span class="tag bg-dot">点缀色</span> <span class="tag bg-black">黑色</span> <span class="tag bg-gray">灰色</span> <span class="tag bg-white">白色</span>

提示标签

包含红色、黄色、蓝色、绿色，分别代表危险、警告、主要、成功信息。
危险 警告 主要 成功 危险 警告 主要 成功
<span class="tag bg-red">危险</span> <span class="tag bg-yellow">警告</span> <span class="tag bg-blue">主要</span> <span class="tag bg-green">成功</span> <span class="tag bg-red-light">危险</span> <span class="tag bg-yellow-light">警告</span> <span class="tag bg-blue-light">主要</span> <span class="tag bg-green-light">成功</span>


徽章

提示徽章

给文本或链接添加span标签，使用class="badge"，可快速设置提示的文字或数字。

未读 8

已读 99+
<p> 未读 <span class="badge">8</span> </p> <a href="#">已读 <span class="badge">99+</span></a>

自动消失

当span内没内容时，徽章会自动消失（通过CSS的:empty选择器实现）。
IE6,7,8兼容 在Internet Explorer 6,7,8中不会自动消失，因为它们对:empty选择器不支持。

徽章颜色

添加bg-*系列样式，可以快速改变背景颜色。
默认 主色 辅色 背景色 融合色 点缀色 黑色 灰色 白色 红色 黄色 蓝色 绿色 淡红 淡黄 淡蓝 淡绿
<span class="badge">默认</span> <span class="badge bg-main">主色</span> <span class="badge bg-sub">辅色</span> <span class="badge bg-back">背景色</span> <span class="badge bg-mix">融合色</span> <span class="badge bg-dot">点缀色</span> <span class="badge bg-black">黑色</span> <span class="badge bg-gray">灰色</span> <span class="badge bg-white">白色</span> <span class="badge bg-red">红色</span> <span class="badge bg-yellow">黄色</span> <span class="badge bg-blue">蓝色</span> <span class="badge bg-green">绿色</span> <span class="badge bg-red-light">淡红</span> <span class="badge bg-yellow-light">淡黄</span> <span class="badge bg-blue-light">淡蓝</span> <span class="badge bg-green-light">淡绿</span>

导航或背景上显示

当在深色背景显示时，徽章的背景为白色。

新邮件 5

新邮件 18

<a href="#" class="button bg-main">新邮件 <span class="badge bg-white">5</span></a> <button class="button bg-red"> 新邮件 <span class="badge bg-red-light">5</span> </button> <p class="bg-main bg-inverse"> 新邮件 <span class="badge bg-white">18</span> </p>

角标

右上角显示的徽章

未读5
消息8
<a href="#" class="button border-main badge-corner">未读<span class="badge bg-sub">5</span></a> <div class="button bg-main badge-corner"> 消息<span class="badge bg-red">8</span> </div>


下拉菜单

下拉样式

将下拉菜单触发器和下拉菜单都包裹在.drop里，或者另一个声明了position:relative;的元素。然后添加组成菜单的HTML代码。

<div class="drop open"> <ul class="drop-menu"> <li><a href="#">起步</a> </li> <li><a href="#">CSS</a> </li> <li><a href="#">元件</a> </li> <li class="divider"></li> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div>

右对齐

给.dorp-menu增加.pull-right样式，可使下拉菜单向右显示。
<ul class="drop-menu pull-right"> ...</ul>

菜单标题及禁用链接

<div class="drop open"> <ul class="drop-menu"> <li class="drop-meun-head">菜单标题</li> <li><a href="#">起步</a> </li> <li><a href="#">CSS</a> </li> <li><a href="#">元件</a> </li> <li class="divider"></li> <li class="drop-meun-head">菜单标题</li> <li><a href="#">动画</a> </li> <li class="disabled"><a href="#">禁用链接</a> </li> <li><a href="#">模块</a> </li> </ul> </div>


所有的导航都包含.nav样式，及特定导航的样式。

基本导航样式

基本的导航效果，可用于侧导航或垂直方向上的文本导航。
<button class="button icon-navicon" data-target="#nav-link1"> </button> <ul class="nav nav-navicon" id="nav-link1"> <li class="nav-head">拼图</li> <li><a href="#">首页</a> </li> <li><a href="#">CSS</a> </li> <li class="active"><a href="#">元件</a> </li> <li class="nav-more"><a href="#">更多</a> </li> </ul>
手机列表显示 如下代码，添加列表含.icon-navicon样式的导航按钮，data-target为指定的对象，在指定显示导航的对象上添加.nav-navicon样式，即能实现手机列表显示导航。
<button class="button icon-navicon" data-target="#nav-link1"> </button> <ul class="nav nav-navicon" id="nav-link1"> ...</ul>

包含子菜单

在.nav的基本上，添加.nav-menu样式，同时为了方便在手机上使用，需在子菜单上添加.drop-menu样式。
<button class="button icon-navicon" data-target="#nav-link2"> </button> <ul class="nav nav-menu nav-navicon" id="nav-link2"> <li class="nav-head">拼图</li> <li><a href="#">首页</a> </li> <li><a href="#">CSS</a> </li> <li class="active"><a href="#">元件<span class="arrow"></span></a> <ul class="drop-menu"> <li><a href="#">概述</a> </li> <li><a href="#">网格系统<span class="arrow"></span></a> <ul> <li><a href="#">响应式布局</a> </li> <li><a href="#">非响应式布局</a> </li> </ul> </li> <li><a href="#">图标</a> </li> </ul> </li> <li class="nav-more"><a href="#">更多<span class="arrow"></span></a> <ul class="drop-menu"> <li><a href="#">组件</a> </li> <li><a href="#">模块<span class="arrow"></span></a> <ul> <li><a href="#">头部</a> </li> <li><a href="#">导航</a> </li> <li><a href="#">底部</a> </li> </ul> </li> </ul> </li> </ul>
附加信息 在含子菜单的链接内，可以添加.arrow样式，用作子菜单标识作用。同时标题.nav-head和更多.nav-more可以根据实际应用可删除。

内联导航

实际应用中，更多的是使用一行内的导航，这时只需给.nav加上.nav-inline即可。
<button class="button icon-navicon" data-target="#nav-link3"> </button> <ul class="nav nav-menu nav-inline nav-navicon" id="nav-link3"> ...</ul>

加上分隔线或居右

给.nav加上.nav-split，可以将导航的链接用竖线分隔，加上.nav-right，可以让导航链接右对齐。
<button class="button icon-navicon" data-target="#nav-link4"> </button> <ul class="nav nav-menu nav-inline nav-split nav-right nav-navicon" id="nav-link4"> ...</ul>

两端对齐的导航

给导航添加.nav-justified样式，可使导航向两端对齐。
<button class="button icon-navicon" data-target="#nav-link5"> </button> <ul class="nav nav-menu nav-inline nav-split nav-justified nav-navicon" id="nav-link5"> ...</ul>

大号导航

给.nav样式添加.nav-big，可以改变导航条的大小。
<button class="button icon-navicon" data-target="#nav-link6"> </button> <ul class="nav nav-menu nav-inline nav-split nav-justified nav-big nav-navicon" id="nav-link6"> ...</ul>

在.nav的基础上，添加.nav-main样式，实现主要导航的效果。

<button class="button icon-navicon" data-target="#nav-main1"> </button> <ul class="nav nav-main nav-navicon" id="nav-main1"> ...</ul> <button class="button icon-navicon" data-target="#nav-main2"> </button> <ul class="nav nav-menu nav-main nav-navicon" id="nav-main2"> ...</ul>

内联样式及两端对齐

给.nav加上.nav-inline，让主要导航在一行内显示。


<button class="button icon-navicon" data-target="#nav-main3"> </button> <ul class="nav nav-menu nav-inline nav-main nav-navicon" id="nav-main3"> ...</ul> <button class="button icon-navicon" data-target="#nav-main4"> </button> <ul class="nav nav-menu nav-inline nav-main nav-justified nav-navicon" id="nav-main4"> ...</ul>

大号导航

<button class="button icon-navicon" data-target="#nav-main5"> </button> <ul class="nav nav-menu nav-inline nav-main nav-big nav-navicon" id="nav-main5"> ...</ul>

导航颜色

<button class="button icon-navicon" data-target="#nav-main6"> </button> <ul class="nav nav-menu nav-inline nav-main nav-navicon border-main" id="nav-main6"> ...</ul> <button class="button icon-navicon" data-target="#nav-main7"> </button> <ul class="nav nav-menu nav-inline nav-main nav-justified nav-navicon border-red" id="nav-main7"> ...</ul>

给.nav加上.nav-sub样式，实现辅助导航样式。

<button class="button icon-navicon" data-target="#nav-sub1"> </button> <ul class="nav nav-sub nav-navicon" id="nav-sub1"> ...</ul> <button class="button icon-navicon" data-target="#nav-sub2"> </button> <ul class="nav nav-menu nav-sub nav-navicon" id="nav-sub2"> ...</ul>

内联样式及两端对齐

在.nav-sub上添加.nav-inline或.nav-justified样式，实现导航的内联或两端对齐样式。


<button class="button icon-navicon" data-target="#nav-sub3"> </button> <ul class="nav nav-menu nav-inline nav-sub nav-navicon" id="nav-sub3"> ...</ul> <button class="button icon-navicon" data-target="#nav-sub4"> </button> <ul class="nav nav-menu nav-inline nav-sub nav-justified nav-navicon" id="nav-sub4"> ...</ul>

大号导航

<button class="button icon-navicon" data-target="#nav-sub5"> </button> <ul class="nav nav-menu nav-inline nav-sub nav-big nav-navicon" id="nav-sub5"> ...</ul>

导航颜色

使用.border-(*)系列样式，可以快速改变辅助导航的颜色。
<button class="button icon-navicon" data-target="#nav-sub6"> </button> <ul class="nav nav-menu nav-inline nav-sub border-red nav-navicon" id="nav-sub6"> ...</ul> <button class="button icon-navicon" data-target="#nav-sub7"> </button> <ul class="nav nav-menu nav-inline nav-sub border-main nav-navicon" id="nav-sub7"> ...</ul> <button class="button icon-navicon" data-target="#nav-sub8"> </button> <ul class="nav nav-menu nav-inline nav-sub nav-justified border-back nav-navicon" id="nav-sub8"> ...</ul>

标签导航基本样式，基于.nav样式，添加.nav-tabs样式。

<button class="button icon-navicon" data-target="#nav-tabs1"> </button> <ul class="nav nav-tabs nav-navicon" id="nav-tabs1"> ...</ul> <button class="button icon-navicon" data-target="#nav-tabs2"> </button> <ul class="nav nav-menu nav-tabs nav-navicon" id="nav-tabs2"> ...</ul>

内联样式、右对齐及两端对齐

在.nav-tabs上添加.nav-inline或.nav-justified样式，实现内联及两端对齐的效果，同时使用.nav-right，可以使内容右对齐显示。




<button class="button icon-navicon" data-target="#nav-tabs3"> </button> <ul class="nav nav-menu nav-inline nav-tabs nav-navicon" id="nav-tabs3"> ...</ul> <button class="button icon-navicon" data-target="#nav-tabs4"> </button> <ul class="nav nav-menu nav-inline nav-tabs nav-right nav-navicon" id="nav-tabs4"> ...</ul> <button class="button icon-navicon" data-target="#nav-tabs5"> </button> <ul class="nav nav-menu nav-inline nav-tabs nav-justified nav-navicon" id="nav-tabs5"> ...</ul>

大尺寸标签导航

给.nav-tabs，添加.nav-big，可以使用大尺寸的标签导航。
<button class="button icon-navicon" data-target="#nav-tabs6"> </button> <ul class="nav nav-menu nav-inline nav-tabs nav-justified nav-big nav-navicon" id="nav-tabs6"> ...</ul>

导航颜色

同样，使用border-(*)系列样式，可以改变标签导航的颜色。
<button class="button icon-navicon" data-target="#nav-tabs7"> </button> <ul class="nav nav-menu nav-inline nav-tabs border-main nav-navicon" id="nav-tabs7"> ...</ul> <button class="button icon-navicon" data-target="#nav-tabs8"> </button> <ul class="nav nav-menu nav-inline nav-tabs nav-big border-red-light nav-navicon" id="nav-tabs8"> ...</ul>

基于.nav，添加.nav-pills样式，可实现胶囊导航效果。

<button class="button icon-navicon" data-target="#nav-pills1"> </button> <ul class="nav nav-pills nav-navicon" id="nav-pills1"> ...</ul> <button class="button icon-navicon" data-target="#nav-pills2"> </button> <ul class="nav nav-menu nav-pills nav-navicon" id="nav-pills2"> ...</ul>

内联样式、右对齐及两端对齐

在.nav-pills上添加.nav-inline、.nav-right或.nav-justified样式，实现导航的内联或两端对齐样式。




<button class="button icon-navicon" data-target="#nav-pills3"> </button> <ul class="nav nav-menu nav-inline nav-pills nav-navicon" id="nav-pills3"> ...</ul> <button class="button icon-navicon" data-target="#nav-pills4"> </button> <ul class="nav nav-menu nav-inline nav-pills nav-right nav-navicon" id="nav-pills4"> ...</ul> <button class="button icon-navicon" data-target="#nav-pills5"> </button> <ul class="nav nav-menu nav-inline nav-pills nav-justified nav-navicon" id="nav-pills5"> ...</ul>

大号导航条

<button class="button icon-navicon" data-target="#nav-pills6"> </button> <ul class="nav nav-menu nav-inline nav-pills nav-justified nav-big nav-navicon" id="nav-pills6"> ...</ul>

导航颜色

使用.border-(*)系列样式，可以改变导航的颜色。


<button class="button icon-navicon" data-target="#nav-pills7"> </button> <ul class="nav nav-menu nav-inline nav-pills nav-navicon border-yellow" id="nav-pills7"> ...</ul> <button class="button icon-navicon" data-target="#nav-pills8"> </button> <ul class="nav nav-menu nav-inline nav-pills nav-right nav-navicon border-yellow-light" id="nav-pills8"> ...</ul>

添加.nav-sitemap样式，两端对齐显示，显示为站点地图类导航，常用于站点地图或网站底部。

<ul class="nav nav-sitemap"> <li><a href="#">起步</a> <ul> <li><a href="#">下载前端框架</a> </li> <li><a href="#">框架包含的文件</a> </li> <li><a href="#">基本页面</a> </li> </ul> </li> ... </ul>

当使用.bg-(*)系列样式时，背景色与文字的反色效果。







<button class="button icon-navicon margin-small-bottom" data-target="#nav-bg1"> </button> <div class="bg-red bg-inverse radius nav-navicon" id="nav-bg1"> <ul class="nav nav-inline nav-menu clearfix"> ...</ul> </div> <button class="button icon-navicon margin-small-bottom" data-target="#nav-bg2"> </button> <div class="bg-yellow bg-inverse radius nav-navicon" id="nav-bg2"> <ul class="nav nav-inline nav-menu nav-split clearfix"> ...</ul> </div> <button class="button icon-navicon margin-small-bottom" data-target="#nav-bg3"> </button> <div class="bg-blue bg-inverse radius nav-navicon" id="nav-bg3"> <ul class="nav nav-inline nav-menu nav-split nav-justified"> ...</ul> </div> <button class="button icon-navicon margin-small-bottom" data-target="#nav-bg4"> </button> <div class="bg-green bg-inverse radius nav-navicon" id="nav-bg4"> <ul class="nav nav-inline nav-menu nav-split nav-big nav-justified"> ...</ul> </div>

标签导航



<button class="button icon-navicon margin-small-bottom" data-target="#nav-bg5"> </button> <div class="bg-red bg-inverse radius nav-navicon" id="nav-bg5"> <ul class="nav nav-inline nav-menu nav-tabs clearfix"> ...</ul> </div> <button class="button icon-navicon margin-small-bottom" data-target="#nav-bg6"> </button> <div class="bg-green bg-inverse radius nav-navicon" id="nav-bg6"> <ul class="nav nav-inline nav-menu nav-tabs nav-big nav-justified"> ...</ul> </div>

胶囊导航



<button class="button icon-navicon margin-small-bottom" data-target="#nav-bg7"> </button> <div class="bg-yellow bg-inverse radius nav-navicon" id="nav-bg7"> <ul class="nav nav-inline nav-menu nav-pills clearfix"> ...</ul> </div> <button class="button icon-navicon margin-small-bottom" data-target="#nav-bg8"> </button> <div class="bg-blue bg-inverse radius nav-navicon" id="nav-bg8"> <ul class="nav nav-inline nav-menu nav-pills nav-big nav-justified"> ...</ul> </div>


进度条

默认进度条样式

进度：50%
<div class="progress"> <div class="progress-bar" style="width: 50%;"> 进度：50%</div> </div>

大号进度条

进度：50%
<div class="progress progress-big"> <div class="progress-bar" style="width: 50%;"> 进度：50%</div> </div>

小号进度条

<div class="progress progress-small"> <div class="progress-bar bg-yellow" style="width: 50%;"> </div> </div>

进度条颜色

使用bg-*样式，可以快速改变进度条的背景色。

10%

进度：20%

进度：30%

进度：40%

进度：50%

进度：60%

进度：70%

进度：80%

进度：90%

进度：100%

进度：50%

进度：50%
<div class="progress"> <div class="progress-bar bg-main" style="width: 10%;"> 10%</div> </div> <div class="progress"> <div class="progress-bar bg-sub" style="width: 20%;"> 进度：20%</div> </div> <div class="progress"> <div class="progress-bar bg-back" style="width: 30%;"> 进度：30%</div> </div> <div class="progress"> <div class="progress-bar bg-mix" style="width: 40%;"> 进度：40%</div> </div> <div class="progress"> <div class="progress-bar bg-dot" style="width: 50%;"> 进度：50%</div> </div> <div class="progress"> <div class="progress-bar bg-black" style="width: 60%;"> 进度：60%</div> </div> <div class="progress"> <div class="progress-bar bg-gray" style="width: 70%;"> 进度：70%</div> </div> <div class="progress bg-main"> <div class="progress-bar bg-white" style="width: 80%;"> 进度：80%</div> </div> <div class="progress"> <div class="progress-bar bg-red" style="width: 90%;"> 进度：90%</div> </div> <div class="progress"> <div class="progress-bar bg-yellow" style="width: 100%;"> 进度：100%</div> </div> <div class="progress"> <div class="progress-bar bg-blue" style="width: 50%;"> 进度：50%</div> </div> <div class="progress"> <div class="progress-bar bg-green" style="width: 50%;"> 进度：50%</div> </div>
背景色组合 与上一节CSS定义的背景色组合，可以随意改变进度条的背景色。

进度条效果

条纹效果

进度：50%

进度：80%
<div class="progress progress-striped"> <div class="progress-bar bg-main" style="width: 50%;"> 进度：50%</div> </div> <div class="progress progress-striped"> <div class="progress-bar bg-sub" style="width: 80%;"> 进度：80%</div> </div>

运动效果

进度：50%

进度：80%
<div class="progress progress-striped active"> <div class="progress-bar bg-main" style="width: 50%;"> 进度：50%</div> </div> <div class="progress progress-striped active"> <div class="progress-bar bg-sub" style="width: 80%;"> 进度：80%</div> </div>

叠加效果

进度：40%
进度：30%
进度：20%
进度：10%
<div class="progress progress-big progress-striped active"> <div class="progress-bar bg-green" style="width: 40%;"> 进度：40%</div> <div class="progress-bar bg-blue" style="width: 30%;"> 进度：30%</div> <div class="progress-bar bg-yellow" style="width: 20%;"> 进度：20%</div> <div class="progress-bar bg-red" style="width: 10%;"> 进度：10%</div> </div>


区间

选定区间的某个值，或某个范围，数值的改变请参考js组件效果。

区间选值


<div class="range"> <div class="range-bar" style="width: 30%;"> <span class="range-scroll range-scroll-right bg-dot"></span> </div> </div> <div class="range"> <div class="range-bar bg-main" style="width: 50%;"> <span class="range-scroll range-scroll-right bg-dot"></span> </div> </div>

区间范围

<div class="range"> <div class="range-bar bg-mix" style="width: 50%; left: 20%;"> <span class="range-scroll range-scroll-right bg-main"></span><span class="range-scroll range-scroll-left bg-main"> </span> </div> </div>

按钮及区间颜色

使用bg-*系列样式，快速改变按钮及进区间的颜色。




<div class="range"> <div class="range-bar bg-main" style="width: 40%; left: 0%;"> <span class="range-scroll range-scroll-right bg-sub"></span><span class="range-scroll range-scroll-left bg-sub"> </span> </div> </div> <br /> <div class="range"> <div class="range-bar bg-red-light" style="width: 50%; left: 10%;"> <span class="range-scroll range-scroll-right bg-red"></span><span class="range-scroll range-scroll-left bg-red"> </span> </div> </div> <br /> <div class="range"> <div class="range-bar bg-yellow-light" style="width: 60%; left: 20%;"> <span class="range-scroll range-scroll-right bg-yellow"></span><span class="range-scroll range-scroll-left bg-yellow"> </span> </div> </div> <br /> <div class="range"> <div class="range-bar bg-green-light" style="width: 70%; left: 30%;"> <span class="range-scroll range-scroll-right bg-green"></span><span class="range-scroll range-scroll-left bg-green"> </span> </div> </div>


按钮组

基本样式

<div class="button-group"> <button type="button" class="button"> 起步</button> <button type="button" class="button"> CSS</button> <button type="button" class="button"> 元件</button> <button type="button" class="button"> 模块</button> </div>

按钮工具栏

<div class="button-toolbar"> <div class="button-group"> <button type="button" class="button"> 起步</button> <button type="button" class="button"> CSS</button> </div> <div class="button-group"> <button type="button" class="button"> 元件</button> <button type="button" class="button"> 动画</button> <button type="button" class="button"> 模块</button> </div> <div class="button-group"> <button type="button" class="button"> js组件</button> <button type="button" class="button"> 案例</button> </div> </div>

添加图标

使用icon-(*)系列图标样式，可以给按钮添加图标，同时使用text-(*)颜色样式，可以改变文字及图标的颜色。
<div class="button-toolbar"> <div class="button-group"> <button type="button" class="button"> <span class="icon-edit text-blue"></span>修改</button> <button type="button" class="button"> <span class="icon-trash-o text-red"></span>删除</button> </div> <div class="button-group"> <button type="button" class="button icon-heart-o text-blue"> 收藏</button> <button type="button" class="button icon-star-o text-green"> 评价</button> <button type="button" class="button icon-thumbs-o-up text-yellow"> 我赞</button> </div> </div>

尺寸

通过样式，改变按钮组的大小。







<div class="button-group button-group-big"> ...</div> <div class="button-group"> ...</div> <div class="button-group button-group-small"> ...</div> <div class="button-group button-group-little"> ...</div>

嵌套

<div class="button-group"> <div class="button-group"> <button type="button" class="button dropdown-toggle"> 起步 <span class="downward"></span> </button> <ul class="drop-menu"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div> <button type="button" class="button"> CSS</button>... </div>

纵向显示

让一组按钮竖直显示而不是水平显示。

<div class="button-group-y"> <div class="button-group"> <button type="button" class="button dropdown-toggle"> 起步 <span class="downward"></span> </button> <ul class="drop-menu"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div> <button type="button" class="button"> CSS</button> <button type="button" class="button"> 元件</button> <button type="button" class="button active"> 动画</button> <div class="button-group"> <button type="button" class="button dropdown-toggle"> javascript组件 <span class="downward"></span> </button> <ul class="drop-menu"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div> <button type="button" class="button"> 模块</button> <div class="button-group"> <button type="button" class="button dropdown-toggle"> 起步 <span class="downward"></span> </button> <ul class="drop-menu"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div> </div>

两端对齐的链接按钮组

让一组按钮拉长为相同的尺寸，适应父元素的宽度。对于按钮组中的按钮下拉菜单也同样适用。

起步 CSS
元件
<div class="button-group button-group-justified"> <a href="#" class="button">起步</a> <a href="#" class="button">CSS</a> <div class="button-group"> <a class="button dropdown-toggle">元件 <span class="downward"></span></a> <ul class="drop-menu"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div> </div>

颜色

使用border-*系列样式，快速改变边框颜色。









<div class="button-group border-red"> <button type="button" class="button"> 起步</button> <button type="button" class="button active"> CSS</button> <button type="button" class="button"> 元件</button> <button type="button" class="button"> 模块</button> </div> <div class="button-group border-yellow-light"> ...</div> <div class="button-group border-blue"> ...</div> <div class="button-group border-green-light"> ...</div> <div class="button-group"> <button type="button" class="button"> 起步</button> <button type="button" class="button bg-red"> 元件</button> </div>


下拉式按钮

单下拉式菜单按钮





新增移入/移出事件下拉式菜单按钮
新增
<div class="button-group"> <button type="button" class="button dropdown-toggle"> 起步 <span class="downward"></span> </button> <ul class="drop-menu"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div> <div class="button-toolbar"> <div class="button-group"> ...</div> <div class="button-group"> ...</div> </div> <div class="button-group border-blue"> <button type="button" class="button dropdown-hover"> 移入 <span class="downward"></span> </button> <ul class="drop-menu"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div>

分裂式按钮下拉菜单

<div class="button-group"> <button type="button" class="button"> 起步</button> <button type="button" class="button dropdown-toggle"> <span class="downward"></span> </button> <ul class="drop-menu"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div> <div class="button-group border-red"> ...</div>

尺寸





<div class="button-group"> <button type="button" class="button button-big dropdown-toggle"> 起步 <span class="downward"></span> </button> <ul class="drop-menu"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div> <div class="button-group"> <button type="button" class="button button-small dropdown-toggle"> 起步 <span class="downward"></span> </button> <ul class="drop-menu"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div> <div class="button-group"> <button type="button" class="button button-little dropdown-toggle"> 起步 <span class="downward"></span> </button> <ul class="drop-menu"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div>

向上弹出式菜单

<div class="button-group dropup"> <button type="button" class="button dropdown-toggle"> 起步 <span class="upward"></span> </button> <ul class="drop-menu"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div>


选择

选中样式

  • 起步
  • CSS
  • 元件
<ul class="selected-inline"> <li>起步</li> <li>CSS</li> <li class="selected">元件</li> </ul>

颜色

给.selected添加.border-(*)样式，可快速改变选中的颜色。
  • 起步
  • CSS
  • 元件
<ul class="selected-inline"> <li class="selected border-main">起步</li> <li class="selected border-sub">CSS</li> <li class="selected border-dot">元件</li> </ul>

按钮式选中

<div class="button-group border-red check"> <button type="button" class="button"> 会员</button> <button type="button" class="button active"> 998</button> </div>

边框及背景颜色

给相关元素添加.border-(*)及.bg-(*)样式，可改变边框及背景颜色。
<div class="button-toolbar"> <div class="button-group border-main check"> <button type="button" class="button active"> 会员</button> <button type="button" class="button"> 998</button> </div> <div class="button-group button-group-small border-dot check"> <button type="button" class="button"> 会员</button> <button type="button" class="button active"> 998</button> </div> <div class="button-group button-group-little border-blue-light check"> <button type="button" class="button active"> 会员</button> <button type="button" class="button"> 998</button> </div> </div>


文字色块

基本样式

起步
样式
元件
动画
起步
样式
元件
动画
<div class="txt radius-small"> 起步</div> <div class="txt radius"> 样式</div> <div class="txt radius-big"> 元件</div> <div class="txt radius-circle"> 动画</div> <div class="txt-border radius-small"> <div class="txt radius-small"> 起步</div> </div> <div class="txt-border radius"> <div class="txt radius"> 样式</div> </div> <div class="txt-border radius-big"> <div class="txt radius-big"> 元件</div> </div> <div class="txt-border radius-circle"> <div class="txt radius-circle"> 动画</div> </div>

背景和边框色

添加.border-*及.bg-*系列样式，可以改变色块的背景和边框。

背景色

起步
样式
元件
动画
<div class="txt radius-small bg-red"> 起步</div> <div class="txt radius bg-yellow"> 样式</div> <div class="txt radius-big bg-blue"> 元件</div> <div class="txt radius-circle bg-green"> 动画</div>

边框色

起步
样式
元件
动画
<div class="txt-border radius-small border-red"> <div class="txt radius-small bg-red"> 起步</div> </div> <div class="txt-border radius border-yellow"> <div class="txt radius bg-yellow"> 样式</div> </div> <div class="txt-border radius-big border-blue"> <div class="txt radius-big bg-blue"> 元件</div> </div> <div class="txt-border radius-circle border-green"> <div class="txt radius-circle bg-green"> 动画</div> </div>

尺寸

通过使用.txt-large,.txt-big,.txt-small,.txt-little样式，快速改变色块大小。

特大 128*128px

起步
样式
元件
动画


大号 64*64px

起步
样式
元件
动画


默认 48*48px

起步
样式
元件
动画


小号 32*32px

1
2
3
4


特小 16*16px

3
4
<div class="txt txt-large radius-small bg-red"> 起步</div> <div class="txt txt-large radius bg-yellow"> 样式</div> <div class="txt-border txt-large radius-big border-blue"> <div class="txt radius-big bg-blue"> 元件</div> </div> <div class="txt-border txt-large radius-circle border-green"> <div class="txt radius-circle bg-green"> 动画</div> </div> <div class="txt txt-big radius-small bg-red"> 起步</div> <div class="txt txt-big radius bg-yellow"> 样式</div> <div class="txt-border txt-big radius-big border-blue"> <div class="txt radius-big bg-blue"> 元件</div> </div> <div class="txt-border txt-big radius-circle border-green"> <div class="txt radius-circle bg-green"> 动画</div> </div> <div class="txt radius-small bg-red"> 起步</div> <div class="txt radius bg-yellow"> 样式</div> <div class="txt-border radius-big border-blue"> <div class="txt radius-big bg-blue"> 元件</div> </div> <div class="txt-border radius-circle border-green"> <div class="txt radius-circle bg-green"> 动画</div> </div> <div class="txt txt-small radius-small bg-red"> 1</div> <div class="txt txt-small radius bg-yellow"> 2</div> <div class="txt-border txt-small radius-big border-blue"> <div class="txt radius-big bg-blue"> 3</div> </div> <div class="txt-border txt-small radius-circle border-green"> <div class="txt radius-circle bg-green"> 4</div> </div> <div class="txt txt-little radius-small bg-red icon-star"> </div> <div class="txt txt-little radius bg-yellow icon-yen"> </div> <div class="txt-border txt-little radius-big border-blue"> <div class="txt radius-big bg-blue"> 3</div> </div> <div class="txt-border txt-little radius-circle border-green"> <div class="txt radius-circle bg-green"> 4</div> </div>

使用小文本

使用.txt-large及.txt-big可给文字添加span标签，可以使用小文本内容。
特大

1个
2元
3时
4天


大号

1个
2元
3时
4天
<div class="txt txt-large radius-small bg-red"> 1<span>个</span> </div> <div class="txt txt-large radius bg-yellow"> 2<span>元</span> </div> <div class="txt-border txt-large radius-big border-blue"> <div class="txt radius-big bg-blue"> 3<span>时</span> </div> </div> <div class="txt-border txt-large radius-circle border-green"> <div class="txt radius-circle bg-green"> 4<span>天</span> </div> </div> <div class="txt txt-big radius-small bg-red"> 1<span>个</span> </div> <div class="txt txt-big radius bg-yellow"> 2<span>元</span> </div> <div class="txt-border txt-big radius-big border-blue"> <div class="txt radius-big bg-blue"> 3<span>时</span> </div> </div> <div class="txt-border txt-big radius-circle border-green"> <div class="txt radius-circle bg-green"> 4<span>天</span> </div> </div>

使用大文本

给文字添加strong标签，可使用更大号文本。
特大

1个
2元
3时
4天


大号

1个
2元
3时
4天
<div class="txt txt-large radius-small bg-red"> <strong>1</strong><span>个</span> </div> <div class="txt txt-large radius bg-yellow"> <strong>2</strong><span>元</span> </div> <div class="txt-border txt-large radius-big border-blue"> <div class="txt radius-big bg-blue"> <strong>3</strong><span>时</span> </div> </div> <div class="txt-border txt-large radius-circle border-green"> <div class="txt radius-circle bg-green"> <strong>4</strong><span>天</span> </div> </div> <div class="txt txt-big radius-small bg-red"> <strong>1</strong><span>个</span> </div> <div class="txt txt-big radius bg-yellow"> <strong>2</strong><span>元</span> </div> <div class="txt-border txt-big radius-big border-blue"> <div class="txt radius-big bg-blue"> <strong>3</strong><span>时</span> </div> </div> <div class="txt-border txt-big radius-circle border-green"> <div class="txt radius-circle bg-green"> <strong>4</strong><span>天</span> </div> </div>


媒体组

色块、图片、视频等媒体信息与文字构成的组合。

媒体样式

默认样式

...
媒体标题 拼图，是国内一款开源的专业响应式网页前端框架。
1
媒体标题
<div class="media"> <a href="#"> <img src="images/64.png" class="radius" alt="..."> </a> <div class="media-body"> <strong>媒体标题</strong> 拼图，是国内一款开源的专业响应式网页前端框架。 </div> </div> <div class="media"> <a href="#"> <div class="txt txt-big radius bg-main"> 1</div> </a> <div class="media-body"> 媒体标题</div> </div>

竖向排列

...
媒体标题 拼图，是国内一款开源的专业响应式网页前端框架。
1
媒体标题
<div class="media media-y"> <a href="#"> <img src="images/48.png" class="radius" alt="..."> </a> <div class="media-body"> <strong>媒体标题</strong> 拼图，是国内一款开源的专业响应式网页前端框架。 </div> </div> <div class="media media-y"> <a href="#"> <div class="txt-border txt-small radius-circle border-green"> <div class="txt radius-circle bg-green"> 1</div> </div> </a> <div class="media-body"> 媒体标题</div> </div>

横向排列

...
媒体标题 拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
1
媒体标题
<div class="media media-x"> <a class="float-left" href="#"> <img src="..." class="radius" alt="..."> </a> <div class="media-body"> <strong>...</strong> ... </div> </div> <div class="media media-x"> <a class="float-left" href="#"> <div class="txt-border txt-little radius-circle border-green"> <div class="txt radius-circle bg-green"> 1</div> </div> </a> <div class="media-body"> ...</div> </div>

向右排列

...
媒体标题 拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
<div class="media media-x"> <a class="float-right" href="#"> <img src="..." class="radius" alt="..."> </a> <div class="media-body"> <strong>...</strong> ... </div> </div>

标题在先的样式

媒体标题：拼图-中国人自己的前端框架 ...
拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
不用学习CSS,不用学习HTML，也不用学习Javascrtip，就可以快速的掌握前端开发。
<div class="media media-x"> <strong>...</strong> <a class="float-left" href="#"> <img src="images/64.png" class="radius" alt="..."> </a> <div class="media-body"> ...</div> </div>

列表显示

媒体信息在一行内显示。

默认样式

...
媒体标题
...
媒体标题
...
媒体标题
...
媒体标题
...
媒体标题
<div class="media-inline"> <div class="media clearfix"> <a href="#"> <img src="images/128.png" class="radius" alt="..."> </a> <div class="media-body"> <strong>媒体标题</strong> </div> </div> ... </div>

跨屏响应式排列

通过拼图的网格系统和响应式图片样式，让水平排列具有跨屏响应式功能。
...
媒体标题

拼图是优秀的响应式前端框架，自动适应电脑、平板、手机等设备，让前端开发更简单、便捷。

...
媒体标题

拼图是优秀的响应式前端框架，自动适应电脑、平板、手机等设备，让前端开发更简单、便捷。

...
媒体标题

拼图是优秀的响应式前端框架，自动适应电脑、平板、手机等设备，让前端开发更简单、便捷。

...
媒体标题

拼图是优秀的响应式前端框架，自动适应电脑、平板、手机等设备，让前端开发更简单、便捷。

...
媒体标题

拼图是优秀的响应式前端框架，自动适应电脑、平板、手机等设备，让前端开发更简单、便捷。

...
媒体标题

拼图是优秀的响应式前端框架，自动适应电脑、平板、手机等设备，让前端开发更简单、便捷。

<div class="line-middle"> <div class="xl12 xs6 xm4 xb2"> <div class="media clearfix"> <a href="#"> <img src="images/128.png" class="radius img-responsive" alt="..."> </a> <div class="media-body"> <strong>媒体标题</strong> <p> 拼图是优秀的响应式前端框架，自动适应电脑、平板、手机等设备，让前端开发更简单、便捷。</p> </div> </div> </div> ... </div>

竖向排列

...
媒体标题
...
媒体标题
...
媒体标题
...
媒体标题
...
媒体标题
<div class="media-inline"> <div class="media media-y clearfix"> <a href="#"> <img src="images/48.png" class="radius" alt="..."> </a> <div class="media-body"> <strong>媒体标题</strong> </div> </div> ... </div>

横向排列

...
媒体标题拼图，是国内一款开源的专业响应式网页前端框架。
...
媒体标题拼图，是国内一款开源的专业响应式网页前端框架。
<div class="media-inline"> <div class="media media-x clearfix"> <a class="float-left" href="#"> <img src="images/48.png" class="radius" alt="..."> </a> <div class="media-body"> <strong>媒体标题</strong>拼图，是国内一款开源的专业响应式网页前端框架。</div> </div> ... </div>

嵌套排列

...
媒体标题拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
...
媒体标题拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
...
媒体标题拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
...
媒体标题拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
<div class="media media-x"> <a class="float-left" href="#"> <img src="images/64.png" class="radius" alt="..."> </a> <div class="media-body"> <strong>媒体标题</strong>拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。 <div class="media media-x"> <a class="float-left" href="#"> <img src="images/64.png" class="radius" alt="..."> </a> <div class="media-body"> <strong>媒体标题</strong>拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。 <div class="media media-x"> <a class="float-left" href="#"> <img src="images/64.png" class="radius" alt="..."> </a> <div class="media-body"> <strong>媒体标题</strong>拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。</div> </div> </div> </div> </div> </div> <div class="media media-x"> <a class="float-left" href="#"> <img src="images/64.png" class="radius" alt="..."> </a> <div class="media-body"> <strong>媒体标题</strong>拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。</div> </div>


表单组

上一节CSS里，已介绍了表单的基本信息，如输入框，多选，单选，块显示等内容，这一节主要介绍相关的组合，以后提示内容相关的输入框组样式。

基本样式

默认样式

<form method="post"> <div class="form-group"> <div class="label"> <label for="username"> 账号</label> </div> <div class="field"> <input type="text" class="input" id="username" name="username" size="30" placeholder="手机/邮箱/账号" /> </div> </div> <div class="form-group"> <div class="label"> <label for="password"> 密码</label> </div> <div class="field"> <input type="password" class="input" id="password" name="password" size="30" placeholder="请输入密码" /> </div> </div> <div class="form-group"> <div class="label"> <label for="cookies"> 保留时间</label> </div> <div class="field"> <select class="input" name="cookies"> <option>保留一周</option> <option>保留一月</option> <option>永久保留</option> </select> </div> </div> <div class="form-group"> <div class="label"> <label> 记住我</label> </div> <div class="field"> <div class="button-group radio"> <label class="button active"> <input name="pintuer" value="yes" checked="checked" type="radio"><span class="icon icon-check"></span> 记住吧 </label> <label class="button"> <input name="pintuer" value="no" type="radio"><span class="icon icon-times"></span> 不想记住 </label> </div> </div> </div> <div class="form-button"> <button class="button" type="submit"> 登录</button> </div> </form>

去掉label

<form method="post"> <div class="form-group"> <div class="field"> <input type="text" class="input" id="username" name="username" size="30" placeholder="手机/邮箱/账号" /> </div> </div> ... </form>

增加帮助信息

登录账号包含手机、邮箱和会员号。
登录会员的密码口令。
<form method="post"> <div class="form-group"> <div class="label"> <label for="username"> 账号</label> </div> <div class="field"> <input type="text" class="input" id="username" name="username" size="30" placeholder="手机/邮箱/会员号" /> <div class="input-note"> 登录账号包含手机、邮箱和会员号。</div> </div> </div> ... </form>

输入框自由宽度

给.input添加.input-auto，输入框即为size的宽度，或给form添加form-auto样式，表单内的输入框都按size的宽度显示。

单独设置

<form method="post"> <div class="form-group"> <div class="label"> <label for="username"> 账号</label> </div> <div class="field"> <input type="text" class="input input-auto" id="username" name="username" size="30" placeholder="手机/邮箱/会员号" /> </div> </div> <div class="form-group"> <div class="label"> <label for="password"> 密码</label> </div> <div class="field"> <input type="password" class="input input-auto" id="password" name="password" size="20" placeholder="请输入密码" /> </div> </div> <div class="form-button"> <button class="button" type="submit"> 登录</button> </div> </form>

整体表单设置

<form method="post" class="form-auto"> ...</form>
在移动设备上，自动默认为整行显示，如需将单个输入框设置自由宽度，可通过给输入框加.input-auto样式实现。

添加图标

<form method="post" class="form-auto"> <div class="form-group"> <div class="field field-icon"> <input type="text" class="input" id="username" name="username" size="30" placeholder="手机/邮箱/账号" /> <span class="icon icon-user"></span> </div> </div> <div class="form-group"> <div class="field field-icon"> <input type="password" class="input" id="password" name="password" size="30" placeholder="请输入密码" /> <span class="icon icon-key"></span> </div> </div> <div class="form-button"> <button class="button" type="submit"> 登录</button> </div> </form>

右侧图标

登录账号包含手机、邮箱和会员号。
登录会员的密码口令。
<form method="post"> <div class="form-group"> <div class="label"> <span class="float-right">登录账号包含手机、邮箱和会员号。</span> <label for="username"> 账号</label> </div> <div class="field field-icon-right"> <span class="icon icon-check"></span> <input type="text" class="input" id="username" name="username" size="30" placeholder="手机/邮箱/账号" /> </div> </div> <div class="form-group"> <div class="label"> <span class="float-right">登录会员的密码口令。</span> <label for="password"> 密码</label> </div> <div class="field field-icon-right"> <span class="icon icon-times"></span> <input type="password" class="input" id="password" name="password" size="30" placeholder="请输入密码" /> </div> </div> <div class="form-button"> <button class="button" type="submit"> 登录</button> </div> </form>
右侧帮助 提示放在label里，设置.float-right样式，也可以把帮助放在右侧。

水平方向显示

给form添加.form-x，让标签label与输入域field在水平方向上显示。

登录账号包含手机、邮箱和会员号。
登录会员的密码口令。
<form method="post" class="form-x"> ...</form>

输入框自由宽度

给form添加.form-auto或给输入框添加.input-auto，表单内的输入框水平方向上按size的属性显示。
登录账号包含手机、邮箱和会员号。
登录会员的密码口令。
<form method="post" class="form-x form-auto"> <input class="input input-auto" />... </form>

内联排列

给form添加.form-inline样式，实现输入框的内联模式。

<form method="post" class="form-inline"> <div class="form-group"> <div class="label"> <label for="username"> 账号</label> </div> <div class="field"> <input type="text" class="input" id="username" name="username" size="20" placeholder="手机/邮箱/账号" /> </div> </div> <div class="form-group"> <div class="label"> <label for="password"> 密码</label> </div> <div class="field"> <input type="text" class="input" id="money" name="money" size="20" placeholder="密码" /> </div> </div> <div class="form-button"> <button class="button" type="submit"> 登录</button> </div> </form>

也可以去掉label标签



<form method="post" class="form-inline"> <div class="form-group"> <div class="field"> <input type="text" class="input" id="username" name="username" size="20" placeholder="手机/邮箱/账号" /> </div> </div> ... </form> <form method="post" class="form-inline" onsubmit="return false;"> <div class="form-group"> <div class="field"> <div class="input-group"> <span class="addon icon-user"></span> <input type="text" class="input" id="money" name="money" size="20" placeholder="用户" /> </div> </div> </div> ... </form>

更亲密一些

使用.input-inline样式，可以让一行内的输入框连在一起。
<form method="post"> <div class="input-inline clearfix"> <input type="text" class="input" id="username" name="username" size="20" placeholder="手机/邮箱/账号" /> <input type="password" class="input" id="password" name="password" size="20" placeholder="请输入密码" /> <input class="button" type="submit" value="登录" /> </div> </form>

也有垂直方向上连在一起的

使用.input-block样式，可以让一列内的输入框连在一起。
<form method="post"> <div class="input-block"> <input type="text" class="input" id="username" name="username" size="20" placeholder="手机/邮箱/账号" /> <input type="password" class="input" id="password" name="password" size="20" placeholder="请输入密码" /> <button class="button" type="submit"> 登录</button> </div> <div class="input-block"> <input type="text" class="input" id="username" name="username" size="20" placeholder="手机/邮箱/账号" /> <input type="password" class="input" id="password" name="password" size="20" placeholder="请输入密码" /> <input class="button button-block" type="submit" value="登录" /> </div> </form>

单选多选组合

多个单选或多选时的排列组合。

默认样式

拼图
拼图
<form method="post"> <div class="form-group"> <div class="label"> <strong>拼图</strong> </div> <div class="field"> <label> <input name="pintuer" type="checkbox">... </label> ... </div> </div> <div class="form-group"> <div class="label"> <strong>拼图</strong> </div> <div class="field"> <label> <input name="pintuer" type="radio">... </label> ... </div> </div> </form>

按钮组显示单选或多选

使用按钮组的方式显示单选或多选，效果需要用js配合，详细的使用方法请看"js组件"的单选多选。
单选
单选
多选
多选
<form method="post"> <div class="form-group"> <div class="label"> <strong>单选</strong> </div> <div class="field"> <div class="button-group radio"> <label class="button active"> <input name="pintuer" value="1" checked="checked" type="radio"><span class="icon icon-check text-green"></span> 确定 </label> <label class="button"> <input name="pintuer" value="2" type="radio"><span class="icon icon-times"></span> 取消 </label> </div> </div> </div> <div class="form-group"> <div class="label"> <strong>单选</strong> </div> <div class="field"> <div class="button-group radio"> <label class="button active"> <input name="pintuer" value="1" checked="checked" type="radio">起步 </label> <label class="button"> <input name="pintuer" value="2" type="radio">CSS </label> <label class="button"> <input name="pintuer" value="3" type="radio">元件 </label> <label class="button"> <input name="pintuer" value="4" type="radio">JS组件 </label> <label class="button"> <input name="pintuer" value="5" type="radio">模块 </label> </div> </div> </div> <div class="form-group"> <div class="label"> <strong>多选</strong> </div> <div class="field"> <div class="button-group checkbox"> <label class="button active"> <input name="pintuer" value="1" type="checkbox" checked="checked"><span class="icon icon-heart"></span> 喜欢 </label> <label class="button"> <input name="pintuer" value="2" type="checkbox"><span class="icon icon-star"></span> 收藏 </label> </div> </div> </div> <div class="form-group"> <div class="label"> <strong>多选</strong> </div> <div class="field"> <div class="button-group checkbox"> <label class="button active"> <input name="pintuer" value="1" type="checkbox" checked="checked">起步 </label> <label class="button"> <input name="pintuer" value="2" type="checkbox">CSS </label> <label class="button"> <input name="pintuer" value="3" type="checkbox">元件 </label> <label class="button"> <input name="pintuer" value="4" type="checkbox">JS组件 </label> <label class="button"> <input name="pintuer" value="5" type="checkbox">模块 </label> </div> </div> </div> </form>

分行显示

给.input添加.label-block样式，可使内容一行一行显示。
拼图
拼图
<form method="post"> <div class="form-group"> <div class="label"> <strong>拼图</strong> </div> <div class="field label-block"> <label> <input name="pintuer" type="checkbox">... </label> ... </div> </div> <div class="form-group"> <div class="label"> <strong>拼图</strong> </div> <div class="field label-block"> <label> <input name="pintuer" type="radio">... </label> ... </div> </div> </form>

输入框组

多个输入框组合，实现输入框前缀及后缀内容。

¥
元
元
<form method="post"> <div class="form-group"> <div class="label"> <label for="money"> 金额</label> </div> <div class="field"> <div class="input-group"> <span class="addon">¥</span> <input type="text" class="input" id="money" name="money" size="50" placeholder="金额" /> </div> </div> </div> <div class="form-group"> <div class="label"> <label for="money"> 金额</label> </div> <div class="field"> <div class="input-group"> <input type="text" class="input" id="money" name="money" size="50" placeholder="金额" /><span class="addon">元</span> </div> </div> </div> <div class="form-group"> <div class="label"> <label for="money"> 金额</label> </div> <div class="field"> <div class="input-group"> <span class="addon icon-yen"></span> <input type="text" class="input" id="money" name="money" size="50" placeholder="金额" /><span class="addon">元</span> </div> </div> </div> </form>

单选或多选

<form method="post"> <div class="form-group"> <div class="field"> <div class="input-group"> <span class="addon"> <input name="pintuer" type="checkbox" /></span> <input type="text" class="input" id="money" name="money" size="50" placeholder="多选" /> </div> </div> </div> <div class="form-group"> <div class="field"> <div class="input-group"> <span class="addon"> <input name="pintuer" type="radio" /></span> <input type="text" class="input" id="money" name="money" size="50" placeholder="单选" /> </div> </div> </div> </form>

按钮输入框组

<form method="post"> <div class="form-group"> <div class="field"> <div class="input-group"> <span class="addbtn"> <button type="button" class="button"> 搜:</button></span> <input type="text" class="input" name="keywords" size="50" placeholder="关键词" /> </div> </div> </div> <div class="form-group"> <div class="field"> <div class="input-group"> <input type="text" class="input" name="keywords" size="50" placeholder="关键词" /><span class="addbtn"> <button type="button" class="button"> 搜!</button></span> </div> </div> </div> <div class="form-group"> <div class="field"> <div class="input-group"> <span class="addbtn"> <button type="button" class="button icon-search"> </button> </span> <input type="text" class="input" name="keywords" size="50" placeholder="关键词" /><span class="addbtn"> <button type="button" class="button"> 搜索</button></span> </div> </div> </div> </form>

下拉式按钮

<form method="post"> <div class="form-group"> <div class="field"> <div class="input-group"> <div class="addbtn"> <div class="button-group"> <button type="button" class="button dropdown-toggle"> 起步 <span class="downward"></span> </button> <ul class="drop-menu"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div> </div> <input type="text" class="input" name="keywords" size="50" placeholder="关键词" /> </div> </div> </div> <div class="form-group"> <div class="field"> <div class="input-group"> <input type="text" class="input" name="keywords" size="50" placeholder="关键词" /> <div class="addbtn"> <div class="button-group"> <button type="button" class="button dropdown-toggle"> 起步 <span class="downward"></span> </button> <ul class="drop-menu pull-right"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div> </div> </div> </div> </div> <div class="form-group"> <div class="field"> <div class="input-group"> <div class="addbtn"> <div class="button-group"> <button type="button" class="button dropdown-toggle"> 起步 <span class="downward"></span> </button> <ul class="drop-menu"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div> </div> <input type="text" class="input" name="keywords" size="50" placeholder="关键词" /> <div class="addbtn"> <div class="button-group"> <button type="button" class="button dropdown-toggle"> 起步 <span class="downward"></span> </button> <ul class="drop-menu pull-right"> <li><a href="#">动画</a> </li> <li><a href="#">模块</a> </li> </ul> </div> </div> </div> </div> </div> </form>

组合案例

经常用到的输入框组合案例。

¥ 元
+ 浏览文件
<form method="post"> <div class="form-group"> <div class="label"> <label for="username"> 姓名</label> </div> <div class="field"> <input type="text" class="input" id="username" name="username" size="50" placeholder="你的真实姓名" /> </div> </div> <div class="form-group"> <div class="label"> <label for="password"> 称呼</label> </div> <div class="field"> <div class="button-group radio"> <label class="button active"> <input name="gender" value="sir" checked="checked" type="radio"><span class="icon icon-male"></span> 先生 </label> <label class="button"> <input name="gender" value="miss" type="radio"><span class="icon icon-female"></span> 女士 </label> <label class="button"> <input name="gender" value="child" type="radio"><span class="icon icon-child"></span> 小朋友 </label> </div> </div> </div> <div class="form-group"> <div class="label"> <label for="income"> 年收入</label> </div> <div class="field"> <div class="input-group"> <span class="addon">¥</span> <input class="input" type="text" id="money" name="money" size="50" placeholder="金额" /><span class="addon">元</span> </div> </div> </div> <div class="form-group"> <div class="label"> <label for="favor"> 兴趣</label> </div> <div class="field"> <div class="button-group checkbox"> <label class="button"> <input name="favor" value="旅游" type="checkbox"><span class="icon-plane"></span> 旅游 </label> <label class="button"> <input name="favor" value="美食" type="checkbox"><span class="icon-glass"></span> 美食 </label> <label class="button"> <input name="favor" value="时尚" type="checkbox"><span class="icon-image"></span> 摄影 </label> <label class="button"> <input name="favor" value="游戏" type="checkbox"><span class="icon-gamepad"></span> 游戏 </label> </div> </div> </div> <div class="form-group"> <div class="label"> <label for="face"> 头像</label> </div> <div class="field"> <a class="button input-file" href="javascript:void(0);">+ 浏览文件<input size="100" type="file" /></a> </div> </div> <div class="form-group"> <div class="label"> <label for="age"> 年龄阶段</label> </div> <div class="field"> <select class="input" name="age"> <option>0-18岁</option> <option>18-30岁</option> <option>30-50岁</option> <option>50岁以上</option> </select> </div> </div> <div class="form-group"> <div class="label"> <label for="readme"> 简介</label> </div> <div class="field"> <textarea class="input" rows="5" cols="50" placeholder="介绍一下你自己"></textarea> </div> </div> <div class="form-button"> <button class="button" type="submit"> 登录</button> </div> </form>

尺寸

  • 让单个元素大小，使用上一节介绍的.input-big和.input-small样式；
  • 单个按钮组使用.button-group-big或.button-group-small样式；
  • 单个输入框组，给.input-group添加.input-big或.input-small样式；
  • 改变整体表单的大小，给form添加.form-big或.form-small样式。

大号

¥ 元
<form method="post" class="form-big"> ....</form>

小号

¥ 元
<form method="post" class="form-small"> ...</form>
表单验证 在javascrip组件里，我们还将进一步介绍表单验证状态、验证方法、验证规则等内容，进一步丰富了表单的操作。


列表组

列表样式

常用于文章信息的列表显示，同时也可以组合成复杂的定制化内容。

  • 拼图前端框架，是一款开源的专业网页前端UI解决方案。
  • 是HTML、CSS、Javascrip三者结合的前端框架。
  • 配合js效果，提供了拼图的CSS、HTML标准。
  • 方便个性化、人性化的前端设计方法。
  • 受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
  • 拼图框架提供了CSS的重定义、元件样式的预设。
  • 拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。
  • 丰富了页面效果，同时让前端设计简单化、傻瓜化。
  • 任何初学者都可快速建设美观、简洁的页面。
<ul class="list-group"> <li>...</li> </ul>

条纹列表

添加.list-striped样式，列表组条纹状显示。
  • 拼图前端框架，是一款开源的专业网页前端UI解决方案。
  • 是HTML、CSS、Javascrip三者结合的前端框架。
  • 配合js效果，提供了拼图的CSS、HTML标准。
  • 方便个性化、人性化的前端设计方法。
  • 受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
  • 拼图框架提供了CSS的重定义、元件样式的预设。
  • 拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。
  • 丰富了页面效果，同时让前端设计简单化、傻瓜化。
  • 任何初学者都可快速建设美观、简洁的页面。
<ul class="list-group list-striped"> <li>...</li> </ul>

标签、徽章或日期

加入徽章或日期，使用float-right样式，自动放在右边。

  • 20拼图前端框架，是一款开源的专业网页前端UI解决方案。
  • 2010-10-1是HTML、CSS、Javascrip三者结合的前端框架。
  • 热门配合js效果，提供了拼图的CSS、HTML标准。
<ul class="list-group"> <li><span class="float-right badge">...</span>...</li> <li><span class="float-right">...</span>...</li> <li><span class="float-right tag">...</span>...</li> </ul>

使用链接组成的列表内容。

拼图前端框架，是一款开源的专业网页前端UI解决方案。 99+ 是HTML、CSS、Javascrip三者结合的前端框架。 配合js效果，提供了拼图的CSS、HTML标准。 方便个性化、人性化的前端设计方法。 受到设计师、前端工程师、程序员及网页设计初学者的喜爱。 拼图框架提供了CSS的重定义、元件样式的预设。 拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。 丰富了页面效果，同时让前端设计简单化、傻瓜化。 任何初学者都可快速建设美观、简洁的页面。
<div class="list-link"> <a href="#">...</a> <a href="#" class="active"><span class="float-right badge bg-main"> ...</span>...</a> </div>

内容组合

在链接内添加需要的代码，组合成想要的效果。

拼图前端框架

拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
...
媒体标题 拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩游戏一样快速简单而富有乐趣的做前端开发。
进度：80%
1
2
3
4
  • 20拼图前端框架，是一款开源的专业网页前端UI解决方案。
  • 2010-10-1是HTML、CSS、Javascrip三者结合的前端框架。
  • 热门配合js效果，提供了拼图的CSS、HTML标准。
<div class="list-link"> <a href="#">....</a> <a href="#" class="active"> <div class="media media-x"> ...</div> </a> <a href="#"> <div class="progress progress-striped active"> ...</div> </a> <a href="#"> <div class="txt txt-small radius-small bg-red"> 1</div> ... </a> <a href="#"> <ul class="list-group"> ...</ul> </a> </div>


面板

基本样式

面板
<div class="panel"> <div class="panel-body"> 面板</div> </div>

含标题或底部的面板

面板可加入含.panel-head或.panel-foot的容器，增加头部或底部信息。

拼图前端框架

拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。

拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
网址：

拼图前端框架
拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
网址：
<div class="panel"> <div class="panel-head"> ...</div> <div class="panel-body"> ...</div> </div> <div class="panel"> <div class="panel-body"> ...</div> <div class="panel-foot"> ...</div> </div> <div class="panel"> <div class="panel-head"> ...</div> <div class="panel-body"> ...</div> <div class="panel-foot"> ...</div> </div>

变换颜色

巧妙使用背景色.bg-*和边框色.border-*样式，可以灵活改变面板的色彩。

主色

辅色标题
面板内容

面板内容
融合色底部

标题
内容
底部
<div class="panel border-main"> <div class="panel-body"> 主色</div> </div> <div class="panel border-sub"> <div class="panel-head border-sub bg-sub"> <strong>辅色标题</strong> </div> <div class="panel-body"> 面板内容</div> </div> <div class="panel border-mix"> <div class="panel-body"> 面板内容</div> <div class="panel-foot border-mix bg-back"> 融合色底部</div> </div> <div class="panel border-red-light"> <div class="panel-head border-red-light bg-red-light"> <strong>标题</strong> </div> <div class="panel-body"> 内容</div> <div class="panel-foot border-red-light bg-red-light"> 底部</div> </div>

面板内容

含表格及含列表组的面板。

带表格的面板

面板表格
拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
起步 CSS 元件 模块
下载前端框架 文本 网格系统 框架
框架包含的文件 图片 图标 头部
基本页面 水平线 标签 Banner
响应式布局 按钮 徽章 导航
浏览器支持 列表 进度条 面包屑
<div class="panel"> <div class="panel-head"> <strong>面板表格</strong> </div> <div class="panel-body"> ...</div> <table class="table"> ...</table> </div>

不含panel-body的

面板表格
起步 CSS 元件 模块
下载前端框架 文本 网格系统 框架
框架包含的文件 图片 图标 头部
基本页面 水平线 标签 Banner
响应式布局 按钮 徽章 导航
浏览器支持 列表 进度条 面包屑
<div class="panel"> <div class="panel-head"> <strong>面板表格</strong> </div> <table class="table"> ...</table> </div>

带列表组的面板

面板列表
拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
  • 拼图前端框架，是一款开源的专业网页前端UI解决方案。
  • 是HTML、CSS、Javascrip三者结合的前端框架。
  • 配合js效果，提供了拼图的CSS、HTML标准。
  • 方便个性化、人性化的前端设计方法。
  • 受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
  • 拼图框架提供了CSS的重定义、元件样式的预设。
  • 拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。
  • 丰富了页面效果，同时让前端设计简单化、傻瓜化。
  • 任何初学者都可快速建设美观、简洁的页面。
<div class="panel"> <div class="panel-head"> <strong>面板列表</strong> </div> <div class="panel-body"> ...</div> <ul class="list-group"> ...</ul> </div>

不含panel-body的

面板列表
  • 拼图前端框架，是一款开源的专业网页前端UI解决方案。
  • 是HTML、CSS、Javascrip三者结合的前端框架。
  • 配合js效果，提供了拼图的CSS、HTML标准。
  • 方便个性化、人性化的前端设计方法。
  • 受到设计师、前端工程师、程序员及网页设计初学者的喜爱。
  • 拼图框架提供了CSS的重定义、元件样式的预设。
  • 拼图框架提供了CSS的重定义、元件样式的预设、样式组件、风格模块及Javascript效果。
  • 丰富了页面效果，同时让前端设计简单化、傻瓜化。
  • 任何初学者都可快速建设美观、简洁的页面。
<div class="panel"> <div class="panel-head"> <strong>面板列表</strong> </div> <ul class="list-group"> ...</ul> </div>

面板组 新增

没有左右边框的面板组。

无左右边框的面板组,主要应用在移动端，例如：在微信、APP里充当列表

默认面板组...
有边距、蓝色边框面板组...
有边距、橙色背景色面板组...
<div class="panel-group"> 默认面板组... </div> <div class="panel-group margin-top border-blue"> 有边距、蓝色边框面板组... </div> <div class="panel-group margin-top bg-yellow"> 有边距、橙色背景色面板组... </div>


带媒体的面板组

拼图前端响应式CSS框架。
大学僧 好流鼻的一个大学僧啊。
赚金币经验圈 赚钱、泡妞是男人一生的追求。
<div class="panel-group"> <div class="media media-x"> <a class="float-left" href="#"> <img src="images/64.png" class="img-border radius-circle img-responsive"> </a> <div class="media-body"> <strong>拼图</strong>前端响应式CSS框架。 </div> </div> </div> <div class="panel-group margin-top"> <div class="media media-x"> <a class="float-left" href="#"> <img src="images/64.png" class="img-border radius-circle img-responsive"> </a> <div class="media-body"> <strong>大学僧</strong> 好流鼻的一个大学僧啊。</div> </div> </div> <div class="panel-group margin-top"> <div class="media media-x"> <a class="float-left" href="#"> <img src="images/64.png" class="img-border radius-circle img-responsive"> </a> <div class="media-body"> <strong>赚金币经验圈</strong> 赚钱、泡妞是男人一生的追求。</div> </div> </div>


版权所有 © Pintuer.com All Rights Reserved.