在线演示1 本地下载 相信做设计的朋友肯定都知道dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品,当然,如果你常在上面闲逛的话,经常得到一些免费的好东西. 在今天的这篇jQuery教程中,我们将使用jQuery的几个插件来开发一个响应式的瀑布流应用,这个应用可以帮助你实时的从dribbble上得到最流行的设计作品,我们将使用如下几个插件: isotope : 一个魔术布局插件,可以帮助你构建瀑布流的页面布局方式(注意不免费…

在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading"> <div class="col-md-12"> <h2>更多信息</h2> <p class="lead"> 广州恒大淘宝队的官方网站和微博同时发布了几张海报,预热本周三晚8点即将到来的亚冠1/4决赛第二回…

响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边栏,那么该侧边栏在不同大小的屏幕上的呈现是不同的.该侧边栏在较大的桌面监控器上是宽屏的,在较小的 智能手机屏幕上是极其窄的.而在最高的或最小的屏幕上,侧边栏很可能不再是可用的 UI 组件. 有了媒体查询,您就可以编写 CSS,自动将设计更改为提供不同屏幕大小的最佳 UI 体验. 媒体查询 从 CSS…

一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实现的效果. 另外页面中圆形.圆角和三角同样使用了CSS3的特殊样式.这些基础的样式和效果在本文中不会赘述,不了解的童鞋可以上网搜索学习一下,很简单. 页面上每个时间节点的展示内容提供了三种展示样式,多张图片的展示风格.单张图片的展示风格和无图片的展示风格.这些可以根据自己的需求自己更改. 二.分析页…

□ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3>马云为恒大生死战开出男人奖 </h3> <p> 8月27日晚,广州恒大将迎来亚冠联赛生死战,主场迎战西悉尼流浪者队,由于一周之前已经在客场0-1负于对手,本场比赛恒大队必须置死地而后生在主场净胜对手两球.就在今天中午,前不久入主恒大的阿里巴巴老板马云来到球队,在鼓励球员的同时开…

本篇体验用Tab插件显示内容.Html部分为: <div class="row" id="moreInfo"> <div class="col-sm-6"> <h3>兰帕德宣布退出英格兰队</h3> <div class="tabbable"> <ul class="nav nav-tabs"> <li class="a…

一.响应式简介 一个页面布局兼容了 PC端 ,iPad端 和 移动端 所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型 特点: 响应式布局是不需要单独写移动端页面的 响应不同的设备来发生变化的 二. 响应式开发原理 三.响应式布局容器 栗子: <style> .container { height: 150px; background-color: pink; margin: 0 auto; } /* 1. 超小屏幕下 小于768 布局容器的宽度设置为 100…

简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大小的屏幕上提供一流的用户体验,答案是:采用响应式设计.响应式设计可以随所显示的屏幕大小而改变.实现响应式设计的主要方法是使用 CSS 媒体查询. 在本文中,将探索如何将媒体查询用于桌面网站.移动电话和平板电脑.同时还将了解如何检测媒体查询支持,以及如何为尚未支持此项技术的浏览器提供可靠体验. 先决条…

原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘,几乎每个人都在讨论响应式设计.如今,各个企业都在积极拥抱响应式设计作为未来的发展趋势.此外,越 来越多的网站如雨后春笋般层出不穷,如何做到适应每一台设备呢?我们一起来看下这些最新的.智能的且时尚的响应式布局,兴许能为你开发网站带来一丝灵感. 文中分享的这些网站来自不同的企业,涉及范围比较广比如,教育…

介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺寸). (一)Media Queries----媒体类型 Media Queries是CSS3新增加的一个模块功能,其最大的特色就是通过CSS3来查询媒体,然后调用对应的样式. 其中包括两个重要部分,第一个是媒体类型,第二个是媒体特性. 媒体类型: 媒体类型(Media Type)在CSS2中是一个…