参考：

　　参考：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. 关于expect的实战总结

    如何从机器A上ssh到机器B上,然后执行机器B上的命令?如何使之自动化完成?看完下面的文章你就明白了 一.安装 expect 是基于tcl 演变而来的,所以很多语法和tcl 类似 sudo apt-g ...

  2. 词向量可视化--[tensorflow , python]

    #!/usr/bin/env python # -*- coding: utf-8 -*- """ ---------------------------------- ...

  3. Mathematica查看内部定义

    << GeneralUtilities`; PrintDefinitions[IntegerReverse]

  4. MySQL利用mysqldump在线修复或新增从库

    如果数据库的数据量不是很大,可以利用mysqldump导出备份修复从库故障或新增从库实例 主库IP:192.168.1.1从库IP:192.168.1.2 1.主库服务器导出备份:db_name=`m ...

  5. 【iCore4 双核心板_uC/OS-II】例程五：信号量——共享资源

    一.实验说明: 信号量是操作系统中的一类事件,是实现任务间通信的一个中间环节.当系统中的多个任务 在运行时,经常需要互相无冲突地访问同一个资源,或者需要互相支持的依赖,甚至有时还要互 相加以必要的限制 ...

  6. R语言 ggplot2包

    R语言  ggplot2包的学习   分析数据要做的第一件事情,就是观察它.对于每个变量,哪些值是最常见的?值域是大是小?是否有异常观测? ggplot2图形之基本语法: ggplot2的核心理念是将 ...

  7. Apple Watch S3 解锁 MacBook Pro 2015版失败的解决办法

    我的MacBook Pro MF839由于只有128G的内存,所以就只能藏在我的抽屉底下,偶尔想体验一下xcode的时候再拿回来用下,想想都浪费 也不是不想换SSD,只是看了一下,价格太贵了,256G ...

  8. elasticsearch以及head插件在centos7上的安装与配置教程

    ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Apach ...

  9. Flask-SQLAlchemy 中多表链接查询（不使用外键）

    SQLAlchemy 是一个功能强大的 ORM . Flask-SQLAlchemy 是一个 Flask 插件,它让我们在 Flask 框架中使用 SQLAlchemy 变得更容易. 本篇介绍我在使用 ...

  10. android控件RecyclerView中，如何显示自定义分割线以及最后一项去除分割线

    在控件RecyclerView中,分割线DividerItemDecoration类的使用经常见,如果是使用自带的分割线,只需要这样写即可 RecyclerView mRecyclerView; mR ...