页面模块

前端页面常用到的模块样式。

概述

模块为页面经常用到的结构性元素,是构成页面的主要内容。



基本样式

常用地头部包含标志、链接、服务热线、搜索等信息。

服务热线型

服务热线:400-123-4567
<div class="container-layout padding-big-top padding-big-bottom"> <div class="line"> <div class="xs7 xm8 xb9"> <a href="#"> <img src="/images/logo-gray.png" alt="拼图" /> </a> </div> <div class="xs5 xm4 xb3 text-big padding-top"> 服务热线:400-123-4567</div> </div> </div>

链接型

右侧的服务热线采用链接型的,可以放置页面工具也简单的导航。
<div class="container-layout padding-big-top padding-big-bottom"> <div class="line"> <div class="xs7 xm8 xb9"> <a href="#"> <img src="/images/logo-gray.png" alt="拼图" /> </a> </div> <div class="xs5 xm4 xb3 padding-top"> <a href="#" class="win-homepage">设为首页</a> <span class="text-little text-gray">|</span> <a href="#" class="win-favorite">加入收藏</a> <span class="text-little text-gray">|</span> <a href="#" class="win-print">打印页面</a> </div> </div> </div>

搜索型

<div class="container padding-big-top padding-big-bottom"> <div class="line"> <div class="xs8 xm8 xb8"> <a href="#"> <img src="/images/logo-gray.png" alt="拼图" /> </a> </div> <div class="xs4 xm4 xb4"> <form> <div class="input-group padding-little-top"> <input type="text" class="input" name="keywords" size="30" placeholder="关键词" /> <span class="addbtn"> <button type="button" class="button"> 搜!</button></span> </div> </form> </div> </div> </div>

含导航头部

<div class="container-layout padding-big-top padding-big-bottom"> <div class="line"> <div class="xl12 xs5 xm6 xb7"> <button class="button icon-navicon float-right" data-target="#header-demo1"> </button> <a href="#"> <img src="/images/logo-gray.png" alt="拼图" /> </a> </div> <div class="xl12 xs7 xm6 xb5 padding-small-top"> <ul class="nav nav-menu nav-inline nav-navicon" id="header-demo1"> <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><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> </div> </div> </div>

头部包含搜索的信息。

<div class="container-layout padding-big-top padding-big-bottom"> <div class="line"> <div class="xl12 xs2 xm2 xb1"> <button class="button icon-navicon float-right" data-target="#header-demo2"> </button> <img src="/images/40.png" /> </div> <div class=" xl12 xs10 xm10 xb11 padding-top nav-navicon" id="header-demo2"> <div class="xs8 xm8 xb6"> <ul class="nav nav-menu nav-inline"> <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><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> </div> <div class="xs4 xm4 xb3"> <form> <div class="input-group padding-little-top"> <input type="text" class="input border-main" name="keywords" size="30" placeholder="关键词" /> <span class="addbtn"> <button type="button" class="button bg-main"> 搜!</button></span> </div> </form> </div> <div class="hidden-s hidden-m xb2 xb1-move"> <div class="xl6 xb12 text-red"> 400-123-4567</div> <div class="xl6 xb12 text-small"> <a href="#" class="win-homepage">设为首页</a> | <a href="#" class="win-favorite">加入收藏</a> </div> </div> </div> </div> </div>

包含顶部工具

<div class="layout bg hidden-l"> <div class="container-layout height-big"> <span class="float-right"><a href="#">注册</a> <span class="text-little text-gray">|</span> <a href="#">登录</a> <span class="text-little text-gray">|</span> <a href="#">联系</a> </span>欢迎使用拼图前端框架 </div> </div> <div class="container-layout padding-big-top padding-big-bottom"> <div class="line"> <div class="xl12 xs2 xm2 xb1"> <button class="button icon-navicon float-right" data-target="#header-demo3"> </button> <img src="/images/40.png" /> </div> <div class=" xl12 xs10 xm10 xb11 padding-top nav-navicon" id="header-demo3"> <div class="xs8 xm8 xb6"> <ul class="nav nav-menu nav-inline"> <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><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> </div> <div class="xs4 xm4 xb3"> <form> <div class="input-group padding-little-top"> <input type="text" class="input border-main" name="keywords" size="30" placeholder="关键词" /> <span class="addbtn"> <button type="button" class="button bg-main"> 搜!</button></span> </div> </form> </div> <div class="hidden-s hidden-m xb2 xb1-move"> <div class="xl6 xb12 text-red"> 400-123-4567</div> <div class="xl6 xb12 text-small"> <a href="#" class="win-homepage">设为首页</a> | <a href="#" class="win-favorite">加入收藏</a> </div> </div> </div> </div> </div>

背景反色

当用深色背景时的使用方法。

<div class="layout bg-black bg-inverse hidden-l"> <div class="container-layout height-big"> <span class="float-right"><a href="#">注册</a> <span class="text-little text-gray">|</span> <a href="#">登录</a> <span class="text-little text-gray">|</span> <a href="#">联系</a> </span>欢迎使用拼图前端框架 </div> </div> <div class="container-layout padding-big-top padding-big-bottom bg-green bg-inverse"> <div class="line"> <div class="xl12 xs2 xm2 xb1"> <button class="button icon-navicon float-right bg-white" data-target="#header-demo4"> </button> <img src="/images/40-white.png" /> </div> <div class=" xl12 xs10 xm10 xb11 padding-top nav-navicon" id="header-demo4"> <div class="xs8 xm8 xb6"> <ul class="nav nav-menu nav-inline nav-pills"> <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><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> </div> <div class="xs4 xm4 xb3"> <form> <div class="input-group padding-little-top"> <input type="text" class="input" name="keywords" size="30" placeholder="关键词" /> <span class="addbtn"> <button type="button" class="button bg"> 搜!</button></span> </div> </form> </div> <div class="hidden-s hidden-m xb2 xb1-move"> <div class="xl6 xb12 text-red"> 400-123-4567</div> <div class="xl6 xb12 text-small"> <a href="#" class="win-homepage">设为首页</a> | <a href="#" class="win-favorite">加入收藏</a> </div> </div> </div> </div> </div>


构建适用于手机、平板及电脑使用的导航条。

<div class="navbar"> <div class="navbar-head"> <button class="button icon-navicon" data-target="#navbar1"> </button> <a href="#"> <img src="/images/30.png" /> </a> </div> <div class="navbar-body nav-navicon" id="navbar1"> <ul class="nav nav-inline nav-menu"> <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> <div class="navbar-form navbar-left"> <form> <input type="text" class="input input-auto" name="keywords" size="15" placeholder="关键词" /> <input type="submit" name="search" value="搜索" class="button" /> </form> </div> <div class="navbar-text navbar-right hidden-s"> 文本 <a href="#">链接</a> <button type="button" class="button"> 按钮</button> </div> </div> </div>

胶囊导航条

<div class="navbar"> ... <div class="navbar-body nav-navicon"> <ul class="nav nav-inline nav-menu nav-pills"> ...</ul> ... </div> </div>

导航条的组成包含标志、导航、文本、按钮等元件。

标志

将导航条头部的图片替换成你的标志,高度为24px或30px,使用24px的标志时给图片加.logo样式,主要为内填充作用。
<div class="navbar"> <div class="navbar-head"> <a href="#"> <img class="logo" src="/images/24.png" /> </a> </div> </div> <div class="navbar"> <div class="navbar-head"> <a href="#"> <img src="/images/30.png" /> </a> </div> </div>

导航

导航条中放置内联导航模块。
<div class="navbar clearfix"> <div class="navbar-head"> <button class="button icon-navicon" data-target="#navbar-demo2"> </button> <a href="#"> <img class="logo" src="/images/24.png" /> </a> </div> <div class="navbar-body nav-navicon" id="navbar-demo2"> <ul class="nav nav-inline nav-menu"> <li class="active"><a href="#">首页</a> </li> <li><a href="#">新闻</a> </li> <li><a href="#">产品<span class="arrow"></span></a> <ul class="drop-menu"> <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> </div> </div>

表单

导航条中放置表单模块,如搜索。
<div class="navbar"> <div class="navbar-head"> <button class="button icon-navicon" data-target="#navbar-nav2"> </button> <a href="#"> <img src="/images/30.png" /> </a> </div> <div class="navbar-body nav-navicon" id="navbar-nav2"> <div class="navbar-form navbar-left"> <form> <input type="text" class="input input-auto" name="keywords" size="15" placeholder="关键词" /> <input type="submit" name="search" value="搜索" class="button" /> </form> </div> </div> </div>

文本链接及按钮

在导航条中可以直接使用文本、链接或者按钮。

<div class="navbar"> <div class="navbar-head"> <button class="button icon-navicon" data-target="#navbar-nav3"> </button> <a href="#"> <img src="/images/30.png" /> </a> </div> <div class="navbar-body nav-navicon" id="navbar-nav3"> <div class="navbar-text navbar-right"> 文本<a href="#">链接</a> <button type="button" class="button"> 按钮</button> </div> </div> </div> <div class="navbar"> <div class="navbar-head"> <button class="button icon-navicon" data-target="#navbar-nav4"> </button> <a href="#"> <img src="/images/30.png" /> </a> </div> <div class="navbar-body nav-navicon" id="navbar-nav4"> <div class="navbar-text navbar-right"> 文本 <a href="#">链接</a> <button type="button" class="button"> 按钮</button> </div> </div> </div>

给导航条添加bg-(*)系列样式,给导航条添加背景色彩。

<div class="navbar bg-red bg-inverse radius"> <div class="navbar-head"> <button class="button bg icon-navicon" data-target="#navbar-bg1"> </button> <a href="#"> <img src="/images/30-white.png" /> </a> </div> <div class="navbar-body nav-navicon" id="navbar-bg1"> <ul class="nav nav-inline nav-menu"> <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> <div class="navbar-form navbar-left"> <form> <input type="text" class="input input-auto border-white" name="keywords" size="15" placeholder="关键词" /> <input type="submit" name="search" value="搜索" class="button bg-white" /> </form> </div> <div class="navbar-text navbar-right hidden-s"> 文本 <a href="#">链接</a> <button type="button" class="button bg-white"> 按钮</button> </div> </div> </div>

标签导航条

<div class="navbar bg-yellow bg-inverse radius"> ... <div class="navbar-body nav-navicon" id="navbar-bg2"> <ul class="nav nav-inline nav-menu nav-tabs"> ...</ul> ... </div> </div>

胶囊导航条

<div class="navbar bg-blue bg-inverse radius"> ... <div class="navbar-body nav-navicon" id="navbar-bg3"> <ul class="nav nav-inline nav-menu nav-pills"> ...</ul> ... </div> </div>

大导航条效果

<div class="navbar"> ... <div class="navbar-body nav-navicon"> <ul class="nav nav-inline nav-menu nav-big"> ...</ul> ... </div> </div> <div class="navbar navbar-big bg-red bg-inverse radius"> ... <div class="navbar-body nav-navicon"> <ul class="nav nav-inline nav-menu"> ...</ul> ... </div> </div>

大号标签导航条

<div class="navbar navbar-big bg-yellow bg-inverse radius"> ... <div class="navbar-body nav-navicon"> <ul class="nav nav-inline nav-menu nav-tabs nav-big"> ...</ul> ... </div> </div>

大号胶囊导航条

<div class="navbar navbar-big"> ... <div class="navbar-body nav-navicon"> <ul class="nav nav-inline nav-menu nav-pills nav-big"> ...</ul> ... </div> </div> <div class="navbar navbar-big bg-blue bg-inverse radius"> ... <div class="navbar-body nav-navicon"> <ul class="nav nav-inline nav-menu nav-pills nav-big"> ...</ul> ... </div> </div>

将导航固定的页面的顶部或者尾部。

固定在顶部

给导航条或放置导航条的元素添加.fixed-top样式,即将元素固定的顶部。
<div class="layout fixed-top"> <div class="container"> ...</div> </div>

固定在底部

给导航条或放置导航条的元素添加.fixed-bottom样式,即将元素固定的底部;滑动菜单、LOGO、列表、底角、内容请自行增加。
<div class="layout fixed-bottom"> <div class="container"> ...</div> </div>


左侧/右侧滑动导航

左侧滑动导航

默认设置div样式class="slidemenu-left"。
//导航LOGO
//导航列表
//导航底部
//内容
//内容底部
<div class="slidemenu"> <div class="slidemenu-left"> <div class="slidemenu-head"> //导航LOGO </div> <div class="slidemenu-body"> //导航列表 </div> <div class="slidemenu-foot"> //导航底部 </div> </div> <div class="slidemenu-content"> <div class="slidemenu-head bg-main"> <span class="icon-slidemenu"></span> </div> <div class="slidemenu-body"> //内容 </div> <div class="slidemenu-foot"> //内容底部 </div> </div> </div>

右侧滑动导航

设置div样式class="slidemenu-right",并设置图标text-right,居右;滑动菜单、LOGO、列表、底角、内容请自行增加。
//导航LOGO
//导航列表
//导航底部
//内容
//内容底部
<div class="slidemenu"> <div class="slidemenu-right"> <div class="slidemenu-head"> //导航LOGO </div> <div class="slidemenu-body"> //导航列表 </div> <div class="slidemenu-foot"> //导航底部 </div> </div> <div class="slidemenu-content"> <div class="slidemenu-head bg-main text-right"> <span class="icon-slidemenu"></span> </div> <div class="slidemenu-body"> //内容 </div> <div class="slidemenu-foot"> //内容底部 </div> </div> </div>


面包屑

页面内使用的路径导航,显示当前页面所在的位置。

路径导航

页面的面包屑导航,引导用户查找内容。

<ul class="bread"> <li><a href="#" class="icon-home">首页</a> </li> <li><a href="#">新闻中心</a> </li> <li><a href="#">公司新闻</a> </li> <li>正文</li> </ul> <ul class="bread bg"> ...</ul> <ul class="bread bg-green bg-inverse"> ...</ul>

步骤指导

按完成的步骤顺序引导。

第一步
2第二步
3第三步
4第四步
<div class="step"> <div class="step-bar complete" style="width: 25%;"> <span class="step-point icon-check"></span><span class="step-text">第一步</span></span> </div> <div class="step-bar active" style="width: 25%;"> <span class="step-point">2</span><span class="step-text">第二步</span> </div> <div class="step-bar" style="width: 25%;"> <span class="step-point">3</span><span class="step-text">第三步</span> </div> <div class="step-bar" style="width: 25%;"> <span class="step-point">4</span><span class="step-text">第四步</span> </div> </div>
改变颜色 给.step-bar或.step-point样式添加.bg-(*)样式,可以改变对应的背景色。


列表

文本列表

常用于新闻、文章等的文本列表方式展示,给ul元素加上.list-text样式,如需分隔,给li元素添加.divider样式,日期在li里加上span元素,添加.date样式;很方便实现文本的列表样式。

<ul class="list-text"> <li><span class="date">...</span>...</li> <li>...</li> <li class="divider"></li> </ul>

加下划线的列表

<ul class="list-text list-underline list-striped"> <li><span class="date">...</span>...</li> <li>...</li> </ul>
条纹效果 加上.list-striped样式,可以使列表具有条纹效果。

文本块

块状文本效果,配合网格系统使用。

<div class="line-small list-box"> <div class="xl6 xs4 xm3 xb2"> <a href="#">拼图是一款开源的专业网页前端UI解决方案</a> </div> <div class="xl6 xs4 xm3 xb2"> <a href="#">由HTML、CSS、Javascrip三者结合的前端框架</a> </div> <div class="xl6 xs4 xm3 xb2"> <a href="#">它配合js效果,提供了拼图的CSS、HTML标准</a> </div> <div class="xl6 xs4 xm3 xb2"> <a href="#">方便个性化、人性化的前端设计方法</a> </div> <div class="xl6 xs4 xm3 xb2"> <a href="#">受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱</a> </div> <div class="xl6 xs4 xm3 xb2"> <a href="#">拼图框架提供了CSS的重定义、元件样式的预设、样式组件</a> </div> </div>

媒体列表

结合媒体结信息元件,组成媒体列表。

  • ...
    媒体标题 拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
  • 媒体标题 ...
    拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。让前端设计简单化、傻瓜化,任何初学者都可快速建设美观、简洁的页面。
  • ...
    媒体标题 拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
  • 媒体标题 ...
    拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。让前端设计简单化、傻瓜化,任何初学者都可快速建设美观、简洁的页面。
  • ...
    媒体标题 拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
  • 媒体标题 ...
    拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。让前端设计简单化、傻瓜化,任何初学者都可快速建设美观、简洁的页面。
<ul class="list-media"> <li> <div class="media media-x"> ...</div> </li> ... </ul>

使用下划线分隔

  • ...
    媒体标题 拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
  • 媒体标题 ...
    拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。让前端设计简单化、傻瓜化,任何初学者都可快速建设美观、简洁的页面。
  • ...
    媒体标题 拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
  • 媒体标题 ...
    拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。让前端设计简单化、傻瓜化,任何初学者都可快速建设美观、简洁的页面。
  • ...
    媒体标题 拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。
  • 媒体标题 ...
    拼图,是国内一款开源的专业响应式网页前端框架,由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能,像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。让前端设计简单化、傻瓜化,任何初学者都可快速建设美观、简洁的页面。
<ul class="list-media list-underline"> <li> <div class="media media-x"> ...</div> </li> ... </ul>

媒体块

媒体块

...
拼图框架 拼图跨屏响应式前端框架
...
拼图框架 拼图跨屏响应式前端框架
...
拼图框架 拼图跨屏响应式前端框架
...
拼图框架 拼图跨屏响应式前端框架
...
拼图框架 拼图跨屏响应式前端框架
...
拼图框架 拼图跨屏响应式前端框架
<div class="line-middle"> <div class="xl12 xs6 xm4 xb3"> <div class="media padding-bottom clearfix"> <a href="#"> <img src="..." class="radius img-responsive" alt="..."> </a> <div class="media-body"> <strong>...</strong> ... </div> </div> </div> ... </div>


分页

基本样式

用于内容分页效果。

<ul class="pagination"> <li><a href="#">«</a> </li> <li><a href="#">1</a> </li> <li><a href="#">2</a> </li> <li><a href="#">3</a> </li> <li><a href="#">4</a> </li> <li><a href="#">5</a> </li> <li><a href="#">»</a> </li> </ul>

组合状态

<ul class="pagination pagination-group"> <li><a href="#">«</a> </li> <li><a href="#">1</a> </li> <li><a href="#">2</a> </li> <li><a href="#">3</a> </li> <li><a href="#">4</a> </li> <li><a href="#">5</a> </li> <li><a href="#">»</a> </li> </ul> <ul class="pagination pagination-group"> <li><a href="#">上一页</a> </li> <li><a href="#">下一页</a> </li> </ul>

禁用及激活状态

可以添加.disabled及.active样式,使得链接在禁用或激活状态。
<ul class="pagination pagination-group"> <li class="disabled"><a href="#">«</a> </li> <li><a href="#">1</a> </li> <li class="active"><a href="#">2</a> </li> <li><a href="#">3</a> </li> <li><a href="#">4</a> </li> <li><a href="#">5</a> </li> <li><a href="#">»</a> </li> </ul>

组合示例

<ul class="pagination"> <li><a href="#">上一页</a> </li> </ul> <ul class="pagination pagination-group"> <li><a href="#">1</a> </li> <li><a href="#">2</a> </li> <li><a href="#">3</a> </li> <li><a href="#">4</a> </li> <li><a href="#">5</a> </li> </ul> <ul class="pagination"> <li><a href="#">下一页</a> </li> </ul>

尺寸及颜色

添加.pagination-big,.pagination-small改变样式的大小。

大尺寸

<ul class="pagination pagination-big"> ...</ul>

小号分页

<ul class="pagination pagination-group pagination-small"> ...</ul>

颜色

使用.border-(*)系列类,可以改变分布边框色。


<ul class="pagination border-main"> <li class="disabled"><a href="#">«</a> </li> <li><a href="#">1</a> </li> <li class="active"><a href="#">2</a> </li> <li><a href="#">3</a> </li> <li><a href="#">4</a> </li> <li><a href="#">5</a> </li> <li><a href="#">»</a> </li> </ul> <ul class="pagination pagination-group border-sub"> <li class="disabled"><a href="#">«</a> </li> <li><a href="#">1</a> </li> <li class="active"><a href="#">2</a> </li> <li><a href="#">3</a> </li> <li><a href="#">4</a> </li> <li><a href="#">5</a> </li> <li><a href="#">»</a> </li> </ul>

翻页

用于简单的分页效果。

<ul class="pager"> <li><a href="#">上一页</a> </li> <li><a href="#">下一页</a> </li> </ul>

放在左右两侧

<ul class="pager clearfix"> <li class="float-left"><a href="#">上一页</a> </li> <li class="float-right"><a href="#">下一页</a> </li> </ul>

使用图标





<a class="pager-prev icon-angle-left" href="#"></a> <a class="pager-next icon-angle-right" href="#"></a> <ul class="pager"> <li><a class="pager-prev icon-angle-left" href="#"></a></li> <li><a class="pager-next icon-angle-right" href="#"></a></li> </ul> <ul class="pager clearfix"> <li class="float-left"><a class="pager-prev icon-angle-left" href="#"></a></li> <li class="float-right"><a class="pager-next icon-angle-right" href="#"></a></li> </ul>

颜色

<ul class="pager border-red"> <li><a href="#">上一页</a> </li> <li><a href="#">下一页</a> </li> </ul> <a class="pager-prev icon-angle-left border-blue" href="#"></a> <a class="pager-next icon-angle-right border-blue" href="#"></a> <ul class="pager border-green clearfix"> <li class="float-left"><a class="pager-prev icon-angle-left" href="#"></a></li> <li class="float-right"><a class="pager-next icon-angle-right" href="#"></a></li> </ul>

点式分页

常用于幻灯片或图片、横幅等切换指示效果。

<ul class="pointer"> <li href="#"></li> <li href="#"></li> <li class="active"></li> <li href="#"></li> <li href="#"></li> </ul>

给点颜色看看


<ul class="pointer border-main"> ...</ul> <ul class="pointer border-yellow"> ...</ul>


表单

常规表单

常规表单提供了用户经常使用的表单,例如:登录、注册、找回密码等等...

常规登录/登陆

登录/登陆表单是必不可少的常规表单,拼图提供的是常规登录表单,若有特殊定制表单,建议复制代码后自己改造。推荐:表单快速生成工具

欢迎使用 拼图

拼图 版权所有
<style type="text/css"> /*特别说明,验证码样式不包含在拼图pintuer.css文件内,需要自己添加到自己的style.css文件中,若要使用登录模块,需复制.passcode样式。*/ .passcode { position: absolute; right: 0; top: 0; height: 32px; margin: 1px; border-left: solid 1px #ddd; text-align: center; line-height: 32px; border-radius: 0 4px 4px 0; } </style> <div align="center"> <form action="#index.html" method="post"> <div class="panel padding" style="width: 450px;text-align: left;"> <div class="text-center"> <br> <h2><strong>欢迎使用&nbsp;拼图</strong></h2></div> <div class="" style="padding:30px;"> <div class="form-group"> <div class="field field-icon-right"> <input type="text" class="input" name="admin" placeholder="登录账号" data-validate="required:请填写账号,length#>=5:账号长度不符合要求" /> <span class="icon icon-user"></span> </div> </div> <div class="form-group"> <div class="field field-icon-right"> <input type="password" class="input" name="password" placeholder="登录密码" data-validate="required:请填写密码,length#>=8:密码长度不符合要求" /> <span class="icon icon-key"></span> </div> </div> <div class="form-group"> <div class="field"> <input type="text" class="input" name="passcode" placeholder="填写右侧的验证码" data-validate="required:请填写右侧的验证码" /> <img src="http://www.pintuer.com/demo/pintuer2/images/passcode.jpg" width="80" height="32" class="passcode" /> </div> </div> <div class="form-group"> <div class="field"> <button class="button button-block bg-main text-big">立即登录</button> </div> </div> <div class="form-group"> <div class="field text-center"> <p class="text-muted text-center"> <a class="" href="#login.html"><small>忘记密码了?</small></a> | <a class="" href="#register.html">注册新账号</a> </p> </div> </div> <div class="text-right text-small text-gray padding-top"><a class="text-gray" target="_blank" href="http://www.pintuer.com">拼图</a> 版权所有</div> </div> </div> </form> </div>

注册

注册表单是必不可少的常规表单,拼图提供的是常规注册表单,若有特殊定制表单,建议复制代码后自己改造。推荐:表单快速生成工具

欢迎使用 拼图

拼图 版权所有
<div align="center"> <form action="#index.html" method="post"> <div class="panel padding" style="width: 450px;text-align: left;"> <div class="text-center"> <br> <h2><strong>欢迎使用&nbsp;拼图</strong></h2></div> <div class="" style="padding:30px;"> <div class="form-group"> <div class="field field-icon-right"> <input type="text" class="input" name="admin" placeholder="手机号码"maxlength="11" data-validate="required:请填写手机号码,mobile:请填写正确的手机号码" /> <span class="icon icon-mobile"></span> </div> </div> <div class="form-group"> <div class="field field-icon-right"> <input type="password" class="input" name="password" maxlength="32" placeholder="登录密码" data-validate="required:请填写密码,length#>=8:密码长度不符合要求" /> <span class="icon icon-key"></span> </div> </div> <div class="form-group"> <div class="field"> <div class="input-group padding-little-top"> <input type="text" class="input" name="passcode" maxlength="6" placeholder="短信验证码" data-validate="required:请填写手机收到的短信验证码" /> <span class="addbtn"> <button type="button" class="button"> 130秒后重新发送</button> </span> </div> </div> </div> <div class="form-group"> <div class="field"> <button class="button button-block bg-main text-big">立即注册</button> </div> </div> <div class="form-group"> <div class="field text-center"> <p class="text-muted text-center"> <a class="" href="#find.html"><small>忘记密码了?</small></a> | <a class="" href="#login.html">已有帐号,去登录</a> </p> </div> </div> <div class="text-right text-small text-gray padding-top"><a class="text-gray" target="_blank" href="http://www.pintuer.com">拼图</a> 版权所有</div> </div> </div> </form> </div>

找回密码

找回密码表单是日常用户流程中必不可少的常规表单,拼图提供的是基于手机号找回密码方式的表单,如果需要电子邮件形式的,可自行更改文本框类型,若有特殊定制表单,建议复制代码后自己改造。推荐:表单快速生成工具
您可以通过您的手机号码和收到的短信验证码来重置您的密码!
拼图 版权所有
<div align="center"> <form action="#index.html" method="post"> <div class="panel padding" style="width: 450px;text-align: left;"> <div class="alert alert-yellow"> 您可以通过您的手机号码和收到的短信验证码来重置您的密码! </div> <div class="" style="padding:30px;"> <div class="form-group"> <div class="field field-icon-right"> <input type="text" class="input" name="admin" placeholder="手机号码" maxlength="11" data-validate="required:请填写手机号码,mobile:请填写正确的手机号码" /> <span class="icon icon-mobile"></span> </div> </div> <div class="form-group"> <div class="field"> <div class="input-group padding-little-top"> <input type="text" class="input" name="passcode" maxlength="6" placeholder="短信验证码" data-validate="required:请填写手机收到的短信验证码" /> <span class="addbtn"> <button type="button" class="button"> 130秒后重新发送</button> </span> </div> </div> </div> <div class="form-group"> <div class="field"> <button class="button button-block bg-main text-big">立即找回</button> </div> </div> <div class="text-right text-small text-gray padding-top"><a class="text-gray" target="_blank" href="http://www.pintuer.com">拼图</a> 版权所有</div> </div> </div> </form> </div>

重置密码

重置密码表单是日常用户流程中必不可少的常规表单。
拼图 版权所有
<div align="center"> <form action="#default.html" method="post"> <div class="panel padding" style="width: 450px;text-align: left;"> <div class="" style="padding:30px;"> <div class="form-group"> <div class="field field-icon-right"> <input type="password" class="input" name="password" placeholder="新密码" maxlength="32" data-validate="required:请填写新密码,length#>=8:密码长度不符合要求" /> <span class="icon icon-key"></span> </div> </div> <div class="form-group"> <div class="field field-icon-right"> <input type="password" class="input" name="password" placeholder="确认密码" maxlength="32" data-validate="required:请填写确认新密码,length#>=8:密码长度不符合要求" /> <span class="icon icon-key"></span> </div> </div> <div class="form-group"> <div class="field"> <button class="button button-block bg-main text-big">立即重置</button> </div> </div> <div class="text-right text-small text-gray padding-top"><a class="text-gray" target="_blank" href="http://www.pintuer.com">拼图</a> 版权所有</div> </div> </div> </form> </div>

整理添加中...

大火兔正在整理添加中。

特殊表单

编辑器

评论框

评论框算是一种最简洁的文本框编辑器,功能简单只需要统计字数,如微博评论等功能会常用。

代码编辑器

特殊的文本框编辑器,是针对编程人员的一种文本框编辑器。

通用富文本编辑器

常用的一种富文本编辑器。


内容

大屏介绍

大屏介绍关键内容。

你好,拼图!

国内优秀的HTML、CSS、JS跨屏响应式前端框架,自动适应电脑、平板、手机等设备,让前端开发更简单、快速、便捷。

<div class="keypoint bg"> <h1> 你好,拼图!</h1> <p> 国内优秀的HTML、CSS、JS跨屏响应式前端框架,自动适应电脑、平板、手机等设备,让前端开发更简单、快速、便捷。</p> <p> <button class="button bg-main"> 详细介绍</button> </p> </div>

添加效果

如居中,背景,圆角等效果。

你好,拼图!

国内优秀的HTML、CSS、JS跨屏响应式前端框架,自动适应电脑、平板、手机等设备,让前端开发更简单、快速、便捷。

<div class="keypoint bg-blue bg-inverse radius text-center"> ...</div>

内容详情

拼图 Pintuer-国产跨屏响应式前端框架

时间:2015-1-1 作者:拼图 来源:拼图

国内优秀的HTML、CSS、JS跨屏响应式前端框架,自动适应电脑、平板、手机等设备,让前端开发更简单、快速、便捷。改变以往建立PC网站同时,再建立手机网站的局面,实现一站响应所有设备,大大提高了开发效率。

拼图 Pintuer:国内优秀的HTML、CSS、JS跨屏响应式开源前端框架,使用最新浏览器技术,为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包,占用资源小,使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面,让前端开发像玩游戏一样快乐而轻松。

拼图前端框架在传统CSS框架的基本上,增加了HTML5、CSS3、JS等技术组合应用,应用最新的浏览器技术,同时兼容较早的浏览器,新旧结合,承前启后,开发者只需把框架文件引入到项目中,就可以初现快速的共同开发,改变以往建立PC网站同时,再建立手机网站的局面,实现一站响应所有设备,大大提高了开发效率。

功能特色:

移动优先、跨屏响应:拼图以移动设备为基点,优先适应于移动设备;从移动设备扩大到平板、桌面电脑等设备,实现跨屏响应,兼容桌面浏览器的同时,更适应了移动互联网的潮流。

组件丰富、海量插件:拼图前端框架重新定义了CSS基础、常用元件及JS组件,可快速构架前端界面,实现跨屏响应。同时兼容所有jQuery插件,在项目中可以灵活使用,让前端开发如虎添翼。

轻量高效、国产开源:拼图基于应用广泛jQuery插件,轻量高效;相对于国外的前端框架,拼图前端框架侧重于对中文的支持,符合国人的视觉及体验,实现到国内主流浏览器的支持,减少兼容性测试时间,提高开发效率。

<div class="detail"> ...</div>


网站底部版权信息及联系信息等内容。

版权所有 © Pintuer.com All Rights Reserved,图ICP备:380959609
<div class="container-layout"> <div class="border-top padding-top"> <div class="text-center"> <ul class="nav nav-inline"> <li class="active"><a href="#">网站首页</a> </li> <li><a href="#">新闻资讯</a> </li> <li><a href="#">产品中心</a> </li> <li><a href="#">技术反馈</a> </li> <li><a href="#">留言反馈</a> </li> <li><a href="#">联系方式</a> </li> </ul> </div> <div class="text-center height-big"> 版权所有 © Pintuer.com All Rights Reserved,图ICP备:380959609</div> </div> </div>

底部也经常会放置导航条。


版权所有 © Pintuer.com All Rights Reserved,图ICP备:380959609
<div class="container"> <div class="navbar bg-main bg-inverse radius clearfix"> <div class="navbar-head"> <button class="button bg-white icon-navicon" data-target="#navbar-foot1"> </button> <a href="#"> <img class="logo" src="/images/24-white.png" /> </a> </div> <div class="navbar-body nav-navicon" id="navbar-foot1"> <ul class="nav nav-inline nav-split"> <li><a href="#">新闻资讯</a> </li> <li><a href="#">产品中心</a> </li> <li><a href="#">技术反馈</a> </li> <li><a href="#">留言反馈</a> </li> <li><a href="#">联系方式</a> </li> </ul> <p class="navbar-right navbar-text hidden-s"> 热线:400-123-4567</p> </div> </div> <br /> <div class="text-center"> 版权所有 © Pintuer.com All Rights Reserved,图ICP备:380959609</div> </div>

含站点地图的导航,在手机下,采用.hidden-l样式,也可以将导航内容隐藏。

<div class="container-layout bg-gray bg-inverse padding-big-top padding-big-bottom"> <div class="table-responsive padding hidden-l"> <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> <li><a href="#">产品中心</a> <ul> <li><a href="#">产品分类</a> </li> <li><a href="#">产品品牌</a> </li> <li><a href="#">产品特色</a> </li> </ul> </li> <li><a href="#">技术反馈</a> <ul> <li><a href="#">售后服务</a> </li> <li><a href="#">营销网络</a> </li> <li><a href="#">服务支持</a> </li> </ul> </li> <li><a href="#">留言反馈</a> </li> <li><a href="#">联系方式</a> </li> </ul> </div> <div class="text-center"> 版权所有 © Pintuer.com All Rights Reserved,图ICP备:380959609</div> </div>

其他

全屏左/右浮动箭头 新增

全屏漂浮在屏幕左侧/右侧的浮动箭头。

/*默认样式,不显示*/ <div class="sliders-left"> </div> <div class="sliders-right"> </div> /*如果默认要显示请增加 active 样式*/ <div class="sliders-left active"> </div> <div class="sliders-right active"> </div>

404错误页 新增

404错误页-屌丝版


404错误!抱歉您要找的页面不存在

卧槽!页面不见了!
<div class="container"> <div class="panel margin-big-top"> <div class="text-center"> <br> <h2 class="padding-top"> <stong>404错误!抱歉您要找的页面不存在</stong> </h2> <div class=""> <div class="float-left"> <img src="http://www.pintuer.com/images/ds-1.gif"> <div class="alert"> 卧槽!页面不见了! </div> </div> <div class="float-right"> <img src="http://www.pintuer.com/images/ds-2.png" width="260"> </div> </div> <div class="padding-big"> <a href="http://www.pintuer.com/" class="button bg-yellow">返回首页</a> <a href="http://blog.pintuer.com/?post=3" class="button">保证不打死管理员</a> </div> </div> </div> </div>

404错误页-卖萌版



404错误!咦!该页面是被耗子们啃了?

<div class="container"> <div class="panel margin-big-top"> <div class="text-center"> <br> <br> <img src="http://www.pintuer.com/images/mm-1.jpg" class="radius" width="500" /> <h2 class="padding-top"> <stong>404错误!咦!该页面是被耗子们啃了?</stong> </h2> <div class="padding-big"> <a href="http://www.pintuer.com/" class="button bg-yellow">返回首页</a> <a href="http://blog.pintuer.com/?post=3" class="button">反馈</a> </div> </div> </div> </div>

404错误页-外星人劫持版


404错误!抱歉您要找的页面已被外星人劫持

<div class="container"> <div class="panel margin-big-top"> <div class="text-center"> <br> <h2 class="padding-top"> <stong>404错误!抱歉您要找的页面已被外星人劫持</stong> </h2> <img src="http://www.pintuer.com/images/wxr-1.jpg" width=500 height=500 /> <div class="padding-big"> <a href="http://www.pintuer.com/" class="button bg-yellow">返回首页</a> <a href="http://blog.pintuer.com/?post=3" class="button">投诉外星人</a> </div> </div> </div> </div>

气泡对话框 新增

基本样式,已内置橙色、蓝色、绿色风格,如需其它风格自行增加。

您好,我是默认颜色、无圆角、无阴影的气泡对话框!
您好,我是橙色、有圆角、有阴影的气泡对话框!
你好,我是蓝色、无圆角、有大阴影的气泡对话框!
你好,我是绿色、有圆角、有阴影的气泡对话框!
<div class="container" style="width: 100%;"> <div class="popo"> <div class="popo-left"> <div class="ico-left"></div> <div class="popo-body left"> 您好,我是默认颜色、无圆角、无阴影的气泡对话框! </div> </div> </div> <div class="popo"> <div class="popo-right"> <div class="ico-right "></div> <div class="popo-body popo-yellow right radius box-shadow-small"> 您好,我是橙色、有圆角、有阴影的气泡对话框! </div> </div> </div> <div class="popo"> <div class="popo-left"> <div class="popo-body popo-blue left box-shadow-big">你好,我是蓝色、无圆角、有大阴影的气泡对话框!</div> </div> </div> <div class="popo"> <div class="popo-right"> <div class="popo-body popo-green right radius box-shadow"> 你好,我是绿色、有圆角、有阴影的气泡对话框! </div> </div> </div> </div>

对话

陆毅
我是世界上最帅的男人,你知道么?
谁?你说谁?葛优大哥才是最帅的男人!
男百合
<div class="container" style="width: 100%;"> <div class="line marggin-small"> <div class="x2 text-right"> <div style="width: 60px;text-align: center;float: right;"> <img src="test/images/425acca8242e2531df45c3857d08a92b.jpg" width="64" height="64" class="img-responsive img-border radius-circle"> <strong>陆毅</strong> </div> </div> <div class="x10"> <div class="popo"> <div class="popo-left"> <div class="popo-body popo-blue left radius box-shadow">我是世界上最帅的男人,你知道么?</div> </div> </div> </div> </div> <div class="line marggin-small"> <div class="x10"> <div class="popo"> <div class="popo-right"> <div class="popo-body popo-green right radius box-shadow"> 谁?你说谁?葛优大哥才是最帅的男人! </div> </div> </div> </div> <div class="x2 text-left"> <div style="width: 60px;text-align: center;"> <img src="test/images/4819b2b05b46750bad716e3d177739c7.jpg" width="64" height="64" class="img-responsive img-border radius-circle"> <strong>男百合</strong> </div> </div> </div> </div>