参考：

　　参考：http://www.bootcss.com/

目录：

1、什么是响应式 Web 设计？

  • RWD 指的是响应式 Web 设计（Responsive Web Design）
  • RWD 能够以可变尺寸传递网页
  • RWD 对于平板和移动设备是必需的

2、创建自己的响应设计

　　举例：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>My test page</title>

         <!--float：整体向左浮动/向右浮动-->

         <!--margin：边缘，到边缘的距离-->

         <!--padding：填充物-->

         <!--width：宽度-->

         <!--height：高度-->

         <!--border：边框-->

         <style>

             .city {

                 float: left;

                 margin: 50px;

                 padding: 15px;

                 width: 300px;

                 height: 300px;

                 border: 1px solid black;

             }

         </style>

     </head>

     <body>

         <h1>W3School Demo</h1>

         <h2>Resize this responsive page!</h2>

         <div class="city">

             <h2>London</h2>

             <p>London is the capital city of England.</p>

             <p>It is the most populous city in the United Kingdom,

             with a metropolitan area of over 13 million inhabitants.</p>

         </div>

         <div class="city">

             <h2>Paris</h2>

             <p>Paris is the capital and most populous city of France.</p>

         </div>

         <div class="city">

             <h2>Tokyo</h2>

             <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,

             and the most populous metropolitan area in the world.</p>

         </div>

     </body>

 </html>

　　输出结果：略。

3、使用 Bootstrap

　　另一个创建响应式设计的方法，是使用现成的 CSS 框架。

　　Bootstrap 是最流行的开发响应式 web 的 HTML、CSS和JS框架。

　　Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>My test page</title>

         <link rel="stylesheet"

               href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

     </head>

     <body>

         <div class="container">

         <div class="jumbotron">

             <h1>W3School Demo</h1>

             <h2>Resize this responsive page!</h2>

         </div>

         </div>

         <div class="container">

         <div class="row">

             <div class="col-md-4">

                 <h2>London</h2>

                 <p>London is the capital city of England.</p>

                 <p>It is the most populous city in the United Kingdom,

                 with a metropolitan area of over 13 million inhabitants.</p>

             </div>

             <div class="col-md-4">

                 <h2>Paris</h2>

                 <p>Paris is the capital and most populous city of France.</p>

             </div>

             <div class="col-md-4">

                 <h2>Tokyo</h2>

                 <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,

                 and the most populous metropolitan area in the world.</p>

             </div>

         </div>

         </div>

     </body>

 </html>

　　输出结果：略。

Web开发——HTML基础（HTML响应式Web设计 Bootstrap）的更多相关文章

  1. 移动 WEB 开发的布局方式 ---- 响应式布局

    一.响应式简介 一个页面布局兼容了 PC端 ,iPad端 和 移动端 所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型 特点: 响应式布局是不需要单独写移动端页面的 ...

  2. 响应式网站设计---Bootstrap

    响应式布局可以帮助我们实现网站布局随屏幕大小自动调整的需求,实现不同屏幕分辨率的终端上浏览网页的不同展示方式,使得网页在PC端和手机端均可以完美的展现其内容,具有自适应性. 使用基于Bootstrap ...

  3. 阮一峰：自适应网页设计（Responsive Web Design）别名（响应式web设计）

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  4. 自适应网页设计（Responsive Web Design）别名（响应式web设计）转载阮一峰

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  5. Bootstrap<基础十> 响应式实用工具

    Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同 ...

  6. 响应式web开发的一些文章

    CSS Device Adaptation:关注 W3C 建议的 CSS 设备适配标准. “在 CSS 中使用 LESS 实现更多的功能”(作者:Uche Ogbuji,developerWorks, ...

  7. 响应式Web设计 – 布局

    写在前面 去年上半年,我开始着手推动项目中响应式设计的落地.以官网优化需求为契机,主动去做了响应式的页面设计,也说服了产品.设计和开发的相关同事一起把它上线落实,但不幸的是,由于各种方面的原因,比如, ...

  8. 十大响应式Web设计框架

    http://www.csdn.net/article/2014-05-13/2819739-responsive-frameworks-for-web-design 对于设计师而言,网站设计中的任意 ...

  9. Web开发——HTML基础

    文档资料参考: 参考:MDN官网 参考:http://www.runoob.com,W3School 参考:https://developer.mozilla.org/zh-CN/docs/Learn ...

随机推荐

  1. C# 中字符串转换成日期

    我们在处理字符串日期格式常用DateTime.Pares() 但是这个形式的转换是相当有限的,有些C#是会不懂你写入的日期格式的如20031231.那么类似 "20100101" ...

  2. Linux 驱动开发

    linux驱动开发总结(一) 基础性总结 1, linux驱动一般分为3大类: * 字符设备 * 块设备 * 网络设备 2, 开发环境构建: * 交叉工具链构建 * NFS和tftp服务器安装 3, ...

  3. Docker 国内仓库和镜像

    Docker 国内仓库和镜像 由于网络原因,我们在pull Image 的时候,从Docker Hub上下载会很慢...所以,国内的Docker爱好者们就添加了一些国内的镜像(mirror),方便大家 ...

  4. Android 开发笔记

    11.android使用全局变量 定义Data类继承Application 在manifest.xml中声明 http://blog.csdn.net/feiyangxiaomi/article/de ...

  5. Windows下安装模块mysqlclient报错处理

    Windows环境下使用pip命令安装Python模块mysqlclientpip install mysqlclient安装过程报错  [error] Microsoft Visual C++ 14 ...

  6. 基于Python37配置图片文字识别

    以管理员权限打开cmd控制台. 1.如何安装PIL 输入下面命令:pip install Pillow 参考:https://www.cnblogs.com/mrgavin/p/8177841.htm ...

  7. kubernetes 学习资料

    谷歌大神详解 Kubernetes 配置管理最佳方法 https://www.kubernetes.org.cn/3031.html all in on kubernetes https://gith ...

  8. json、数组、html标签的修改删除

    存数组 var aa=[1,2,3]; var sStorage=window.sessionStorage; sStorage.aa=aa; console.log(sStorage.aa); // ...

  9. Hadoop源码系列（一）FairScheduler申请和分配container的过程

    1.如何申请资源 1.1 如何启动AM并申请资源 1.1.1 如何启动AM val yarnClient = YarnClient.createYarnClient setupCredentials( ...

  10. 如何让linux的history命令显示时间记录

    在.bashrc文件追加如下内容即可: HISTFILESIZE= HISTSIZE= HISTTIMEFORMAT='%F %T ' export HISTTIMEFORMAT