[知了堂学习笔记]_记一次BootStrap的使用

效果图如下：

一、简介：

什么是Bootstrap？

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

什么是响应式布局？

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

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

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

用传统的布局方式，我们会怎么完成效果图呢？

　　 Div+CSS
　　浮动+内外边距

是的没错，完全可以搞定，但是如果是下图呢？

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

　　　　1.左边的广告栏不见了

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

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

用响应式布局来完成效果图

搭建环境

　　　　进入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官方文档

案例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

    <script src="js/jquery-1.11.0.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

</head>

<body>

<!-- 最新商品 -->

    <div class="container-fluid">

        <div class="col-md-12 col-lg-12 ">

            <h2>最新商品&nbsp;&nbsp;<img src="data:images/title2.jpg"/></h2>

        </div>

        <div class=" col-lg-2 col-md-2 hidden-xs hidden-sm">

            <img src="data:images/big01.jpg"  class="img-responsive"  style="width: 205px;height: 404px;" />

        </div>

        <div class="col-lg-10 col-md-10  col-sm-12" >

            <div class=" col-lg-6  col-md-6 col-sm-6 col-xs-12" >

                    <img src="data:images/middle01.jpg"  class="img-responsive" style="display: inline-block; width:516px; height:200px;">

            </div>

            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">

                <a href="product_info.htm">

                    <img src="data:images/c_0001.jpg" class="img-responsive"  style="width: 130px; height: 130px;display: inline-block; margin-top: 10px;">

                </a>

                <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>

                <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>

            </div>

                <div class=" col-lg-2 col-md-2  col-sm-3  col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">

                <a href="product_info.htm">

                    <img src="data:images/c_0004.jpg" class="img-responsive"  style="width: 130px; height: 130px;display: inline-block;margin-top: 10px;">

                </a>

                <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>

                <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>

            </div>

            <div class=" col-lg-2 col-md-2 col-sm-3 col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">

                <a href="product_info.htm">

                    <img src="data:images/c_0002.jpg"  class="img-responsive" style="width: 130px; height: 130px;display: inline-block;margin-top: 10px;">

                </a>

                <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>

                <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>

            </div>

            <div class="col-md-2 col-sm-3  col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">

                <a href="product_info.htm">

                    <img src="data:images/c_0003.jpg"  class="img-responsive"  style="width: 130px; height: 130px;display: inline-block;margin-top: 10px;">

                </a>

                <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>

                <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>

            </div>

            <div class="col-md-2 col-sm-3  col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">

                <a href="product_info.htm">

                    <img src="data:images/c_0003.jpg"  class="img-responsive" style="width: 130px; height: 130px; display: inline-block;margin-top: 10px;">

                </a>

                <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>

                <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>

            </div>

            <div class="col-md-2 col-sm-3  col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">

                <a href="product_info.htm">

                    <img src="data:images/c_0003.jpg"  class="img-responsive"  style="width: 130px; height: 130px; display: inline-block;margin-top: 10px;">

                </a>

                <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>

                <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>

            </div>

            <div class="col-md-2 col-sm-3  col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">

                <a href="product_info.htm">

                    <img src="data:images/c_0003.jpg"  class="img-responsive"  style="width: 130px; height: 130px; display: inline-block;margin-top: 10px;">

                </a>

                <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>

                <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>

            </div>

            <div class="col-md-2 col-sm-3  col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">

                <a href="product_info.htm">

                    <img src="data:images/c_0003.jpg"  class="img-responsive" style="height: 130px; display: inline-block;margin-top: 10px;">

                </a>

                <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>

                <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>

            </div>

            <div class="col-md-2 col-sm-3  col-xs-6" style="text-align:center;height:200px;padding:10px 0px;">

                <a href="product_info.htm">

                    <img src="data:images/c_0003.jpg"  class="img-responsive" style=" width: 130px; height: 130px; display: inline-block;margin-top: 10px;">

                </a>

                <p><a href="${pageContext.request.contextPath }/info?pid=${product.pid}" style='color:#666'>三星 Galaxy On7</a></p>

                <p><font color="#E4393C" style="font-size:16px">&yen;1398.0</font></p>

            </div>

        </div>

    </div>

</body>

</html>

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

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

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

[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)
整体效果展示: 一.实现思路如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...
[知了堂学习笔记]_牵线Eclipse和Tomcat第一篇 —— 配置Java环境变量&&安装eclipse
一.先给他们提供一个"浪漫的"环境,比如传说中的"鹊桥"--java环境变量.哈哈! 配置java环境变量. 下载jdk,根据自己电脑的版本和操作位数选择不同的 ...
[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)
整体展示: 上一讲实现了诸多对象,这次我们就需要实现许多逻辑方法,如控制飞机移动,判断子弹击中敌机,敌机与英雄飞机相撞等等.并且我们在实现这些功能的时候需要计时器去调用这些方法.setInterval ...
[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第2讲(对象的实现及全局变量的定义)
整体展示: 一.全局变量 /*===================玩家参数==========================*/ var myPlane; //英雄对象 var leftbtn = ...
[知了堂学习笔记]_牵线Eclipse和Tomcat第二篇 —— 安装Tomcat&&添加Tomcat到Eclipse
来了来了~~~~~我们的"织女"--Tomcat来了,牛郎们等急了吧!哈哈! 一.安装Tomcat 下载地址:http://tomcat.apache.org/download-7 ...
[知了堂学习笔记]_用JS制作《飞机大作战》游戏_第3讲（玩家发射子弹）
一.公布上一讲中玩家飞机上.下.右移动实现的代码: /*=========================键盘按下事件 keycode为得到键盘相应键对应的数字==================== ...
[知了堂学习笔记]_用JS制作《飞机大作战》游戏_第2讲（四大界面之间的跳转与玩家飞机的移动）
一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3. ...
[知了堂学习笔记]_用JS制作《飞机大作战》游戏_第4讲（创建敌方飞机、敌方飞机发射子弹、玩家子弹击中敌方小飞机，小飞机死亡）
一.创建敌方飞机 1.思考创建思路: 创建敌方飞机思路与创建玩家飞机思路一样: (1)思考敌方飞机具备什么属性: 敌方飞机的图片.坐标.飞行速度.状态(是否被击中) 设置小飞机被击中时消失时间.飞机可 ...
[知了堂学习笔记]_用JS制作《飞机大作战》游戏_第1讲（素材查找和界面框架搭建）
一.查找素材: 二.分析游戏界面框架: 登录界面.游戏界面.暂停游戏界面.玩家死亡后弹出界面:并对应的界面包含什么元素: 三.分别搭建以上四个界面: 1.登录界面与游戏界面框架(隐藏游戏界面,四个界面 ...

随机推荐

python打开一个本地目录文件路径
os.path.abspath()os 模块为 python 语言标准库中的 os 模块包含普遍的操作系统功能.主要用于操作本地目录文件.path.abspath()方法用于获取当前路径下的文件. 比 ...
JS大小写字母转换
var a = "ABCd"; console.log(a.toLowerCase());//转换成小写 console.log(a.toUpperCase());//转换成大写
TSLint提示错误
要成为优秀的TS开发人员,必须直接禁用TS的不良特性. 为此,道爷亲自操刀编写了TSLint工具,用来分析我们的TS代码,把潜在的Bug和不良代码全部找出来. 目的是为了保证TS的质量,但是存在的问题 ...
Hadoop源码篇---解读Mapprer源码outPut输出
一.前述上次讲完MapReduce的输入后,这次开始讲MapReduce的输出.注意MapReduce的原语很重要: "相同"的key为一组,调用一次reduce方法,方法内迭代 ...
自学Aruba1.3-WLAN一些基本常识802.11n速率计算方式、802.11n及802.11AC速率表
点击返回:自学Aruba之路自学Aruba1.3-WLAN一些基本常识802.11n速率计算 1. 802.11n速率计算方式1.1 802.11n使用的主要技术 802.11n采用MIMO多天线技 ...
【转】Python 爬虫的工具列表【预】
这个列表包含与网页抓取和数据处理的Python库网络通用 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycurl). pycurl – 网络 ...
K：哈弗曼树
相关介绍: 树形结构除了应用于查找和排序等操作时能调高效率,它在信息通讯领域也有着广泛的应用.哈弗曼(Huffman)树就是一种在编码技术方面得到广泛应用的二叉树,它同时也是一种最优二叉树. 哈弗曼 ...
3.If statements
if 语句电脑程序不只是执行命令.时常会需要做出选择.例如基于一个条件的选择.Python有这样几种条件运算: > greater than < smaller than ...
MYSQL:数据库安装 windows
最近在学习mysql,看到很多人在搭建mysql的时候遇到很多问题,我们在这里不讲安装版的配置过程,因为安装版的配置非常的简单.. windows下配置mysql 首先从官网下载社区版的安装包:最新版 ...
python基础之实现sql增删改查
# encoding:utf-8 # Author:"richie" # Date:2017/8/2 import re key_l = ['id', 'name', 'age', ...

[知了堂学习笔记]_记一次BootStrap的使用

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

随机推荐

热门专题