原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽度人为的划分成均等的长度,然后排版布局时则以这些均等的长度做为度量单位,通常利用百分比做为长度单位来划分成均等的长度. 4.响应式布局:通过检测设备信息,决定网页布局方式,即用户如果采用不同的设备访问同一个网页,有可能会看到不一样的内容,一般情况下是检测设备屏幕的宽度来实现. 注:以上几种布局方式并…

本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 而bo…

1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 响应式网络设计 ( RWD / AWD)的出现,目的是为移动设备提供更好的体验,并且整合从桌面到手机的各种屏幕尺寸和分辨率,用技术来使网页适应从小到大(现在到超大)的不同分辨率的屏幕. 2.bootstrap简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用…

简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap 框架的基础教程分为 Bootstrap 基本结构.Bootstrap CSS.Bootstrap 布局组件和 Bootstrap 插件几个部分.每个部分都应该学会与该主题相关的简单有用的实例,才能保证你在web项目中轻松使用Bootstr…

1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 响应式网络设计 ( RWD / AWD)的出现,目的是为移动设备提供更好的体验,并且整合从桌面到手机的各种屏幕尺寸和分辨率,用技术来使网页适应从小到大(现在到超大)的不同分辨率的屏幕. 2.bootstrap简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用…

说明: 这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例. 转载请注明源地址,谢谢^_^,http://www.cnblogs.com/liu-zhen/p/4493679.html 响应式布局介绍 参考:维基百科,CSS3 @media 查询,Bootstrap中文官网,鄙视IE,2014年5个最流行前端框架对比,自适应网页设计-阮一峰,响应式网页设计,响应式布局-百度百科,响应式网站设计原则,响应式布局这件小事,响应式 Web 设计新原则,什么是响应式布…

1.表格 <div class="container"> <table class="table "> <thead> <td>name</td> <td>sex</td> <td>age</td> </thead> <tr> <td>hello</td> <td>hello</td> &…

学习bootstrap框架,主要是为了集成好的响应式框架,及其兼容性. 但是按bootstrap中文站的说明文档 制作了一个栅格布局的test.html后,怎么测试都不成功,在ie8下一直看不到媒体查询的效果,纠结了一整天的respond.js的失效问题,最后一气之下,把他的整个案例在ie8下复制了源代码,在本地一个个删掉测试,最后郁闷的发现,原来他连接到bootstrap网站的css是根本原因,改成本地的bootstrap.css就成功了.(坑爹呢!) 下面是中文站提供的基本模版: <!DOC…

下载 Bootstrap 可以从http://getbootstrap.com/上下载 Bootstrap 的最新版本. Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件.Download Source:下载源代码.点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码.源代码需要编译 LESS…

1.响应式工具 ①可用的类 <div class="container"> <a href="#" class="visible-xs">hello</a> </div> 浏览器界面比较小时: 浏览器界面比较大时:…