效果图如下：

一、简介：

  • 什么是Bootstrap？

　　　 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。

  • 什么是响应式布局？

　　　　引用一句Bootstrap的标题语 “Bootstrap的响应式 CSS 能够自适应于台式机、平板电脑和手机”。

　　　　简而言之就是：只用编写一次静态的HTML和CSS,在不同分辨率的设备上就能展现不同的布局样式。

二、利用BootStrap完成响应式布局。

  • 用传统的布局方式，我们会怎么完成效果图呢？
  1. 　　 Div+CSS
  2. 　　 浮动+内外边距
  • 是的没错，完全可以搞定，但是如果是下图呢？

  • 传统方式也能搞定呀！对的。但是你看细节：

　　　　1.左边的广告栏不见了

　　　　2.中间变成了一张大图加两张小图。

  • 这是完全不同的两种布局，用传统的方式只能写两套HTML+CSS代码来完成。
  • 但是用响应式就只用写一套代码就搞定了，完全节约了开发时间和开发成本。
  • 用响应式布局来完成效果图
  1. 搭建环境

　　　　进入http://v3.bootcss.com/getting-started/#download，选择下图所进行下载。

　　

　　解压后，将css和js放到你的项目之下

　　

　　下载jquery，进入http://jquery.com/download/，下载下图所示即可。将下载的文件放入项目的js文件夹下面即可。

　　在HTML的头部引入如下文件：

　　

　　如果你的网络还OK，你可以使用在线引用的方式，如下图

　　 

　　注意：jquery-1.11.0.min.js必须在bootstrap.min.js之前引入。

 

  • Bootstrap栅格介绍

　　先上图：

　　

  • 简而言之，BootStrap将每一行划出了12等份，你可以根据内容，划分每个部分所占的份数，如上图。

　　详细内容参看：http://www.runoob.com/bootstrap/bootstrap-grid-system.html

　　或者： http://v3.bootcss.com/examples/grid/

　　*注意：当一个部分添加进入栅格的时候，如果超过12份数之后，会自动换到下一行。

 

  • Bootstrap适配器

　　  官方叫做：媒体查询器。Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。其实就是一个css中的一个class属性的名字而已，定义如下图。

　　 适配器（媒体查询器）的使用如：

　　

  • l在div或者其他html标签的class中加入 col-*-*。

　　* 第一个*代：表适配的屏幕分辨率的大小。

　　　参数有：lg（电脑屏幕）、md（iPad Pro）、sm（ipad）、xs(手机)。

　　* 第二个*代表当前标签内容所占的份数。参数1~12的正数

　　　　Eg:  <div class=”col-xs-8”></>  该div 在手机屏幕大小的分辨率里面占8份。

　　　　　　<div class=” col-xs-8 col-sm-4”></>  该div 在手机屏幕大小的分辨率里面占8份。在ipd屏幕大小的分辨率中占4份。

  • 原型图的划分

　　　通过栅格和媒体查询器的学习，我们是不是可以得出效果图的布局划分如下图。

  • 其中中间部分的是不是可以让一张大图让其占6份，其他小图占2份。当第4张加入的时候，是不是超过了12份了，那么它就自动换行。随后加入的内容就排在它后面了。
  • n 然后，再给各个部分加入在不同分辨率的屏幕下的媒体查询器就行了。例如：<div class=" col-lg-2 col-md-2 col-sm-2"> </div>
  • Bootstrap 响应式实用工具
  • 在标签的class里面加上上图的Class前缀，就能实现隐藏某些标签在特定分辨率屏幕的出现和隐藏。

　　　　　　Eg:  <div class=" hidden-xs hidden-sm"></div> ,就可以让div在xs、sm分辨率的屏幕下隐 藏了;

　　　　　　　　　　　　　　　　　　　　　　　　更多细节的地方参看:http://v3.bootcss.com/getting-started/#download官方文档

  • 案例代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  7.     <script src="js/jquery-1.11.0.min.js"></script>
  8.     <script src="js/bootstrap.min.js"></script>
  9. </head>
  10.  
  11. <body>
  12. <!-- 最新商品 -->
  13.     <div class="container-fluid">
  14.         <div class="col-md-12 col-lg-12 ">
  15.             <h2>最新商品&nbsp;&nbsp;<img src="data:images/title2.jpg"/></h2>
  16.         </div>
  17.  
  18.         <div class=" col-lg-2 col-md-2 hidden-xs hidden-sm">
  19.             <img src="data:images/big01.jpg"  class="img-responsive"  style="width: 205px;height: 404px;" />
  20.         </div>
  21.  
  22.         <div class="col-lg-10 col-md-10  col-sm-12" >
  23.             <div class=" col-lg-6  col-md-6 col-sm-6 col-xs-12" >
  24.                     <img src="data:images/middle01.jpg"  class="img-responsive" style="display: inline-block; width:516px; height:200px;">
  25.             </div>
  26.  
  27.             <div class="col-lg-2 col-md-2 col-sm-3 col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">
  28.                 <a href="product_info.htm">
  29.                     <img src="data:images/c_0001.jpg" class="img-responsive"  style="width: 130px; height: 130px;display: inline-block; margin-top: 10px;">
  30.                 </a>
  31.                 <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>
  32.                 <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>
  33.             </div>
  34.  
  35.                 <div class=" col-lg-2 col-md-2  col-sm-3  col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">
  36.                 <a href="product_info.htm">
  37.                     <img src="data:images/c_0004.jpg" class="img-responsive"  style="width: 130px; height: 130px;display: inline-block;margin-top: 10px;">
  38.                 </a>
  39.                 <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>
  40.                 <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>
  41.             </div>
  42.             <div class=" col-lg-2 col-md-2 col-sm-3 col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">
  43.                 <a href="product_info.htm">
  44.                     <img src="data:images/c_0002.jpg"  class="img-responsive" style="width: 130px; height: 130px;display: inline-block;margin-top: 10px;">
  45.                 </a>
  46.                 <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>
  47.                 <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>
  48.             </div>
  49.  
  50.             <div class="col-md-2 col-sm-3  col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">
  51.                 <a href="product_info.htm">
  52.                     <img src="data:images/c_0003.jpg"  class="img-responsive"  style="width: 130px; height: 130px;display: inline-block;margin-top: 10px;">
  53.                 </a>
  54.                 <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>
  55.                 <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>
  56.             </div>
  57.  
  58.             <div class="col-md-2 col-sm-3  col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">
  59.                 <a href="product_info.htm">
  60.                     <img src="data:images/c_0003.jpg"  class="img-responsive" style="width: 130px; height: 130px; display: inline-block;margin-top: 10px;">
  61.                 </a>
  62.                 <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>
  63.                 <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>
  64.             </div>
  65.  
  66.             <div class="col-md-2 col-sm-3  col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">
  67.                 <a href="product_info.htm">
  68.                     <img src="data:images/c_0003.jpg"  class="img-responsive"  style="width: 130px; height: 130px; display: inline-block;margin-top: 10px;">
  69.                 </a>
  70.                 <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>
  71.                 <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>
  72.             </div>
  73.  
  74.             <div class="col-md-2 col-sm-3  col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">
  75.                 <a href="product_info.htm">
  76.                     <img src="data:images/c_0003.jpg"  class="img-responsive"  style="width: 130px; height: 130px; display: inline-block;margin-top: 10px;">
  77.                 </a>
  78.                 <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>
  79.                 <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>
  80.             </div>
  81.  
  82.             <div class="col-md-2 col-sm-3  col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">
  83.                 <a href="product_info.htm">
  84.                     <img src="data:images/c_0003.jpg"  class="img-responsive" style="height: 130px; display: inline-block;margin-top: 10px;">
  85.                 </a>
  86.                 <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>
  87.                 <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>
  88.             </div>
  89.  
  90.             <div class="col-md-2 col-sm-3  col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">
  91.                 <a href="product_info.htm">
  92.                     <img src="data:images/c_0003.jpg"  class="img-responsive" style=" width: 130px; height: 130px; display: inline-block;margin-top: 10px;">
  93.                 </a>
  94.                 <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>
  95.                 <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>
  96.             </div>
  97.  
  98.         </div>
  99.     </div>
  100. </body>
  101. </html>

　以上为今天的所有分享，如需了解更加深入的知识;

　　　　转载请注明出处；
　　　　请大家多多指教！欢迎提意见，非诚勿扰！！！
　　　　　　　　　　　　 　　　　　　　　---By GET_CHEN

[知了堂学习笔记]_记一次BootStrap的使用的更多相关文章

  1. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)

    整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...

  2. [知了堂学习笔记]_牵线Eclipse和Tomcat第一篇 —— 配置Java环境变量&&安装eclipse

    一.先给他们提供一个"浪漫的"环境,比如传说中的"鹊桥"--java环境变量.哈哈! 配置java环境变量. 下载jdk,根据自己电脑的版本和操作位数选择不同的 ...

  3. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)

    整体展示: 上一讲实现了诸多对象,这次我们就需要实现许多逻辑方法,如控制飞机移动,判断子弹击中敌机,敌机与英雄飞机相撞等等.并且我们在实现这些功能的时候需要计时器去调用这些方法.setInterval ...

  4. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第2讲(对象的实现及全局变量的定义)

    整体展示: 一.全局变量 /*===================玩家参数==========================*/ var myPlane; //英雄对象 var leftbtn = ...

  5. [知了堂学习笔记]_牵线Eclipse和Tomcat第二篇 —— 安装Tomcat&&添加Tomcat到Eclipse

    来了来了~~~~~我们的"织女"--Tomcat来了,牛郎们等急了吧!哈哈! 一.安装Tomcat 下载地址:http://tomcat.apache.org/download-7 ...

  6. [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第3讲（玩家发射子弹）

    一.公布上一讲中玩家飞机上.下.右移动实现的代码: /*=========================键盘按下事件 keycode为得到键盘相应键对应的数字==================== ...

  7. [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第2讲（四大界面之间的跳转与玩家飞机的移动）

    一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3. ...

  8. [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第4讲（创建敌方飞机、敌方飞机发射子弹、玩家子弹击中敌方小飞机，小飞机死亡）

    一.创建敌方飞机 1.思考创建思路: 创建敌方飞机思路与创建玩家飞机思路一样: (1)思考敌方飞机具备什么属性: 敌方飞机的图片.坐标.飞行速度.状态(是否被击中) 设置小飞机被击中时消失时间.飞机可 ...

  9. [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第1讲（素材查找和界面框架搭建）

    一.查找素材: 二.分析游戏界面框架: 登录界面.游戏界面.暂停游戏界面.玩家死亡后弹出界面:并对应的界面包含什么元素: 三.分别搭建以上四个界面: 1.登录界面与游戏界面框架(隐藏游戏界面,四个界面 ...

随机推荐

  1. C#设计模式之二十三解释器模式（Interpreter Pattern）【行为型】

    一.引言   今天我们开始讲"行为型"设计模式的第十一个模式,也是面向对象设计模式的最后一个模式,先要说明一下,其实这个模式不是最后一个模式(按Gof的排序来讲),为什么把它放在最 ...

  2. php 运算符and or && || 的详解

    想弄清这个问题,首先要了解这些运算符的优先级:了解后,我们才知道,逻辑运算和赋值运算的执行顺序: //and or 的优先级小于 = //&& || 的优先级大于 = //or-前面语 ...

  3. MNIST-NameError: name ‘input_data’ is not defined解决办法

    在学习TensorFlow文档教程的时候, 在MNIST入门一节,发现直接运行下载MNIST数据集的代码会报错.原代码如下: import tensorflow.examples.tutorials. ...

  4. 横向、纵向时间轴timeline系列

    近期移动端项目用到了很多时间轴.纵向的.开始可以实现,但是不利于维护.整理下, 以作为备份留存学习参考.子元素的 标签的 :before实现圆点,:after实现边线border纵向时间轴,单一右边内 ...

  5. September,开启一个新的征程!

    寻找梦里的未来笑对现实的无奈不能后退的时候不再傍徨的时候永远向前 路...一直都在

  6. Loadrunner11.0调用Jar包

    又好几天不写东西了,是不是意味着最近没有大的进步,时时敲打自己. 今天把loadrunner如何调用Jar包搞定了,现在把配置的过程中需要注意的东西写下来,分享给小伙伴儿,减少他们在前行路上的弯路. ...

  7. 安卓电量优化之JobScheduler使用介绍

    版权声明:本文出自汪磊的博客,转载请务必注明出处. 一.JobScheduler概述 JobScheduler是安卓5.0版本推出的API,允许开发者在符合某些条件时创建执行在后台的任务.在Andro ...

  8. 【状压DP】poj3254 Corn Fields

    题意: 一块n*m的田,1表示这个地方可以种植,0代表这个地方不能种植.植物种植还必须满足两株植物不能相邻(横竖都不行).问共有几种种植方法,而且当什么都不种时认为是一种方法. 解题思路: 种植用1表 ...

  9. C和Lua之间的相互调用

    前面的话 第一次接触Lua是因为Unity游戏中需要热更,但是一直没搞懂Lua是怎么嵌入到别的语言中执行的,如何互相调用的.这次打算好好了解一下C跟lua是如何交互的 那么如何使用Lua语言? lua ...

  10. window下mySql数据库设置密码

    方法一:用setpassword命令 首先登陆MySQL:mysql -u root 格式:mysql> set password for 用户名@localhost = password('新 ...