概述

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

基本样式

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

服务热线型

服务热线：400-123-4567

链接型

右侧的服务热线采用链接型的，可以放置页面工具也简单的导航。

设为首页 | 加入收藏 | 打印页面

搜索型

含导航头部

<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="logo.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>

综合型头部

头部包含搜索的信息。

400-123-4567

设为首页 | 加入收藏

<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="logo.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>

包含顶部工具

400-123-4567

设为首页 | 加入收藏

<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="logo.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>

背景反色

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

400-123-4567

设为首页 | 加入收藏

<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="logo.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="logo.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>

胶囊导航条

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

标志

将导航条头部的图片替换成你的标志，高度为24px或30px，使用24px的标志时给图片加.logo样式，主要为内填充作用。

表单

导航条中放置表单模块，如搜索。

文本链接及按钮

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

给导航条添加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="logo.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>

标签导航条

胶囊导航条

大导航条效果

大号标签导航条

大号胶囊导航条

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

固定在顶部

给导航条或放置导航条的元素添加.fixed-top样式，即将元素固定的顶部。

固定在底部

给导航条或放置导航条的元素添加.fixed-bottom样式，即将元素固定的底部。

面包屑

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

路径导航

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

首页
新闻中心
公司新闻

步骤指导

按完成的步骤顺序引导。

第一步

2第二步

3第三步

4第四步

改变颜色 给.step-bar或.step-point样式添加.bg-(*)样式，可以改变对应的背景色。

列表

文本列表

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

加下划线的列表

条纹效果 加上.list-striped样式，可以使列表具有条纹效果。

文本块

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

推客是一款开源的专业网页前端UI解决方案

由HTML、CSS、Javascrip三者结合的前端框架

它配合js效果，提供了推客的CSS、HTML标准

方便个性化、人性化的前端设计方法

受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱

推客框架提供了CSS的重定义、元件样式的预设、样式组件

<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、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、推客游戏一样快速简单而富有乐趣的做前端开发。让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。

使用下划线分隔

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

媒体块

推客框架 推客跨屏响应式前端框架

分页

基本样式

用于内容分页效果。

组合状态

禁用及激活状态

可以添加.disabled及.active样式，使得链接在禁用或激活状态。

组合示例

尺寸及颜色

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

大尺寸

小号分页

颜色

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

用于简单的分页效果。

放在左右两侧

使用图标

颜色

点式分页

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

给点颜色看看

内容

大屏介绍

大屏介绍关键内容。

你好，推客!

国内优秀的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跨屏响应式前端框架，自动适应电脑、平板、手机等设备，让前端开发更简单、快速、便捷。

内容详情

推客-国产跨屏响应式前端框架

时间：2015-1-1 作者：推客来源：推客

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

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

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

功能特色：

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

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

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

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

<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">版权所有 © domsn.com All Rights Reserved</div> </div> </div>

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

<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="logo.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">版权所有 © domsn.com All Rights Reserved</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">版权所有 © domsn.com All Rights Reserved</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="../images/ds-1.gif"> <div class="alert"> 卧槽！页面不见了！ </div> </div> <div class="float-right"> <img src="../images/ds-2.png" width="260"> </div> </div> <div class="padding-big"> <a href="index.html" class="button bg-yellow">返回首页</a> </div> </div> </div> </div>

404错误页-卖萌版

404错误！咦！该页面是被耗子们啃了？

返回首页

<div class="container"> <div class="panel margin-big-top"> <div class="text-center"> <br> <br> <img src="../images/mm-1.jpg" class="radius" width="500" /> <h2 class="padding-top"> <stong>404错误！咦！该页面是被耗子们啃了？</stong> </h2> <div class="padding-big"> <a href="index.html" class="button bg-yellow">返回首页</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="../images/wxr-1.jpg" width=500 height=500 /> <div class="padding-big"> <a href="index.html" class="button bg-yellow">返回首页</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="../images/rw-1.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="../images/rw-2.jpg" width="64" height="64" class="img-responsive img-border radius-circle"> <strong>百合</strong> </div> </div> </div> </div>

概述

头部

基本样式

服务热线型

链接型

搜索型

含导航头部

综合型头部

包含顶部工具

背景反色

导航条

基本样式

胶囊导航条

组成元件

标志

导航

表单

文本链接及按钮

导航条背景色

标签导航条

胶囊导航条

大导航条

大号标签导航条

大号胶囊导航条

固定要顶部或底部

固定在顶部

固定在底部

面包屑

路径导航

步骤指导

列表

文本列表

加下划线的列表

文本块

媒体列表

使用下划线分隔

媒体块

分页

基本样式

组合状态

禁用及激活状态

组合示例

尺寸及颜色

大尺寸

小号分页

颜色

翻页

放在左右两侧

使用图标

颜色

点式分页

给点颜色看看

内容

大屏介绍

你好，推客!

添加效果

你好，推客!

内容详情

推客-国产跨屏响应式前端框架

底部

基本样式

带导航条的底部

含网站地图的导航

其他

全屏左/右浮动箭头

404错误页

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

404错误！咦！该页面是被耗子们啃了？

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

气泡对话框