参考：

　　参考：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. TensorFlow精选Github开源项目

    转载于:http://www.matools.com/blog/1801988 TensorFlow源码 https://github.com/tensorflow/tensorflow 基于Tens ...

  2. Effective Java 第三版——63. 注意字符串连接的性能

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  3. Oracle分析函数-OLAP函数总结

    ORACLE OLAP 函数 最近这个东东用得特别多,总结了一下 .  语法: FUNCTION_NAME(,,...)    OVER() OLAP函数语法四个部分: 1.function本身 用于 ...

  4. netty 的 Google protobuf 开发

    根据上一篇博文 Google Protobuf 使用 Java 版 netty 集成 protobuf 的方法非常简单.代码如下: server package protobuf.server.imp ...

  5. 恒生UFX接口引用计数心得

    本文介绍在基于恒生T2SDK基础上开发对接UFX柜台时,有关引用计数的一些心得体会. 下面以配置接口和连接接口为例子来介绍,下面是文档介绍: 创建配置接口说明: 3.1.2 创建配置接口(NewCon ...

  6. QT中事件处理器和事件过滤器实现实例

    Qt中事件处理的方式,最常用的就是使用事件处理器(event handler)和事件过滤器(event filter)这两种方法.接下来,我们就来看看事件处理器和事件过滤器是怎么使用的. 事件处理器 ...

  7. 织梦移动版页面点击下一篇获取不到id

    1.首先找到网站目录下面的/include/arc.archives.class.php文件 2.找到837行的如下内容 if ( defined('DEDEMOB') ) { $mlink = 'v ...

  8. LeetCode - 868. Binary Gap

    Given a positive integer N, find and return the longest distance between two consecutive 1's in the ...

  9. mongodb配置、启动、备份

    Mongodb: 启动: /usr/bin/mongod --config /data/mydata/mongodb/mongodb.conf 停止Mongodb: 方法一:$ mongod --sh ...

  10. IDEA破解教程

    IDEA目前堪称最完美的java开发工具,相信用惯了eclipse的朋友一定不这么认为,但是这并不是终点,终点是如何安装破解版的IDEA,官网给我们的两个下载:1.免费试用:2.免费.开源.作为一名程 ...