参考：

　　参考：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. 积木式编程——自制app点灯

    技术:51单片机.串口.蓝牙.积木式编程   概述 这里简单入门了积木式编程,做了个简易APP用来开灯关灯,当然你可以继续添加内容,可以做智能家居.遥控汽车和环境监控等等. 详细 代码下载:http: ...

  2. CentOS 服务器添加简易"回收站"

    删除是危险系数很高的操作,一旦误删可能会造成难以估计的损失.比如,一条简单的语句:rm –rf /* 就会把整个系统全部删除,而 Linux 并不会因为这条语句的不合理而拒绝执行. 在 Windows ...

  3. Atitit.如何文章写好 论文 文章 如何写好论文 技术博客

    Atitit.如何文章写好 论文  文章  如何写好论文 技术博客 1. 原则 1 1.1. 有深度, 有广度 1 1.2. 业务通用性有通用性 尽可能向上抽象一俩层..业务通用性与语言通用性. 2 ...

  4. php位运算 与 或 异或 取反

    <?php /** php中有4个位运算,分别是&与 |或 ^异或 ~取反 & 两位全为1,结果为1 | 有一位为1,结果为1 ^ 一个为0,一个为1,结果为1 ~ 取反0-&g ...

  5. 5个最好用AngularJS构建应用程序框架

    如果你打算建立自己的Web应用与AngularJS,那么现在是时候开始了.如果这个想法吓到你了,删除所有的恐慌,从你的头脑中有一些框架,AngularJS提供方便的支持.有一些预先的框架,使用框架可以 ...

  6. Python实现正则表达式匹配任意的邮箱

    首先来个简单的例子,利用Python实现匹配163邮箱的代码: #-*- coding:utf-8 -*- __author__ = '杨鑫' import re text = input(" ...

  7. C#学习笔记（35）——事件做的登录案例

    说明(2018-4-9 20:11:42): 1. 先自定义了一个登录控件,可以输入账号.密码,点击登录.然后在Form1里面拖入这个控件,要求输入账号密码正确时,点击登录,控件显示绿色,否则显示红色 ...

  8. [转]浅谈Normalize.css

    原文地址:https://www.jianshu.com/p/3d21d1932aa0 Normalize.css只是一个很小的css文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相 ...

  9. Linux JDK Tomcat Nginx MariaDB 安装，Nginx 多域名转发配置

    安装JDK rpm包下载地址(jdk-7u17 ): http://www.oracle.com/technetwork/java/javase/downloads/java-archive-down ...

  10. GoLang之反射

    反射 反射(reflect) 所谓反射(reflect)就是能检查程序在运行时的状态. 使用反射的三条定律: 反射可以将“接口类型变量”转换为“反射类型对象”: 反射可以将“反射类型对象”转换为“接口 ...