参考：

　　参考：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# ThreadPool与Task的认识总结

    工作线程与I/O线程     在ThreadPool中有这样一个方法: public static bool SetMaxThreads(int workerThreads, int completi ...

  2. Windows下python3生成UTF8的CSV文件和sha256sum踩坑记录

    CSV的坑 在Ubuntu下是简单的写入完事 import csv ... with open(filename, 'w') as output: f = csv.writer(output) f.w ...

  3. ROC曲线-阈值评价标准

    ROC曲线指受试者工作特征曲线 / 接收器操作特性曲线(receiver operating characteristic curve), 是反映敏感性和特异性连续变量的综合指标,是用构图法揭示敏感性 ...

  4. 记一次spring boot参数初始化的问题

    背景:接手一个项目,看到一个配置参数的引用: @Value("${webSocket.id}") 再看看配置application.yml: ... webSocket: id: ...

  5. Introducing Apache Spark Datasets（中英双语）

    文章标题 Introducing Apache Spark Datasets 作者介绍 Michael Armbrust, Wenchen Fan, Reynold Xin and Matei Zah ...

  6. [elk]bin/elasticsearch-sql-cli使用

    在探sql groupby语句 这个长久不用竟然忘记 part name age dep1 ara 22 dep1 arb 22 dep1 arc 22 dep2 ema 10 dep2 emc 11 ...

  7. 如何将本地项目上传至GitHub（so easy！！！）

    如何将本地项目上传至GitHub 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直 ...

  8. halcon开发必读

    关于HALCON的新手入门问题简答(1) 无论读入什么图像,读入图像显示效果明显和原始图像不一致,哪怕是从相机读入的图像,也是明显颜色差异.什么原因引起? 答:初步诊断是,显示的时候调用的颜色查找表存 ...

  9. Hadoop、Spark 集群环境搭建问题汇总

    Hadoop 问题1: Hadoop Slave节点 NodeManager 无法启动 解决方法: yarn-site.xml reducer取数据的方式是mapreduce_shuffle 问题2: ...

  10. 当我们直接打印定义的对象的时候，隐含的是打印toString()的返回值。

      以下介绍的三种方法属于Object: (1)  finalize方法:当一个对象被垃圾回收的时候调用的方法. (2)  toString():是利用字符串来表示对象. 当我们直接打印定义的对象的时 ...