记一次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的使用的更多相关文章

[知了堂学习笔记]_记一次BootStrap的使用
效果图如下: 一.简介: 什么是Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架. 什么是响应式布局? 引用一句Bootstrap的标题语 " ...
Bootstrap变形记
bootstrap审美疲劳了,想个招换换样子,THINKING... 变形 >>> 哈,不用改已有代码,添加我的Harley.js即可,有空在玩... 真实好久不玩博客园了,200字 ...
记springboot+mybatis+freemarker+bootstrap的使用（2）
二.springboot+mybatis的使用 1.springboot的注解:@SpringBootApplication :启动项目:整合常用注解(@Configuration,@EnableAu ...
记springboot+mybatis+freemarker+bootstrap的使用（1）
一..springboot的配置 1.安装并配置maven maven是项目管理工具,可以自动下载并管理jar包之间的依赖关系,可通过maven自动配置springboot 参照百度经验https:/ ...
记Bootstrap Table两种渲染方式
这里主要区别两种Bootstrap Table的数据渲染方式,一.属性渲染方式,二.JS渲染方式工作直接接手前人的,之前都直接在table标签上渲染属性,后面因为项目需要,同一页面的表格,需要申请不 ...
记一个bootstrap定制container导致页面X轴出现横向滚动条的坑
壹 ❀ 引在bootstrap定制时,因为UI给的图纸的页面主体部分宽度为1200px,所以我将container容器宽度从默认的1170px改成了1200px,随后在页面缩小的调试过程中发现了页 ...
1 bootstrap table null默认显示为 - 要查源码 2 记一个很无语的bug
本来返回的json 3个true 7个false的结果显示10个true 因为本来是好的结果判断的问题给全部赋值true了
Spark踩坑记——Spark Streaming+Kafka
[TOC] 前言在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...
bootstrap
访问Bootstrap中文网,下载bootstrap中文文档,选择用于生产环境的bootstrap. 在官网使用ctrl+f查找想要的内容. 这里记一下Visual Studio Code软件的用法: ...

随机推荐

MySQL 与 MongoDB的操作对比
MySQL与MongoDB都是开源的常用数据库,但是MySQL是传统的关系型数据库,MongoDB则是非关系型数据库,也叫文档型数据库,是一种NoSQL的数据库.它们各有各的优点,关键是看用在什么地方 ...
数据库-mongodb-索引
1.索引提高查询速度,降低写入速度,权衡常用的查询字段,不必在太多列上建立索引 2.在mongodb中,索引可以按字段升序.降序来创建,便于排序 3.默认是使用btree 来组织索引文件,2.4版以后 ...
Android通过泛型简化findViewById类型转换
曾经老用findViewById,每次使用还得add cast一下今天看到一个视频(依据视频中使用的IDE判断,应该是几年前的视频了..),使用了一个方法,能够不用每次使用findViewById都去 ...
石子合并（区间dp）
石子合并(一) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描写叙述有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程仅仅能每次将相邻 ...
oracle性能检测sql语句
1. 监控事例的等待 select event,sum(decode(wait_Time,0,0,1)) "Prev",sum(decode(wait_Time,0,1,0)) & ...
System.setProperty 与 System.getProperty
转自:https://www.cnblogs.com/woftlcj/p/8404451.html System可以有对标准输入,标准输出,错误输出流:对外部定义的属性和环境变量的访问:加载文件和库的 ...
Maven 学习笔记（三）
有时我们在项目中可能需要打包一个可执行的 jar 包,我最近也遇见了,很傻很天真的用了如下配置: <packaging>jar</packaging> 效果一如既往的好,打包成 ...
BZOJ 4358 坑莫队+线段树死T
这是一个坑竟然卡nsqrt(n)logn T死等更 //By SiriusRen #include <cmath> #include <cstdio> #include & ...
caffe study- AlexNet 之算法篇
在机器学习中,我们通常要考虑的一个问题是如何的“以偏概全”,也就是以有限的样本或者结构去尽可能的逼近全局的分布.这就要在样本以及结构模型上下一些工夫. 在一般的训练任务中,考虑的关键问题之一就是数据分 ...
eclipse 配置 tomcat 时候的一些注意事项（随机更新）
1,一些常用的设置,如下图,不特别说明了,看标记应该就知道注意事项了 2,配置文件的问题.eclipse里面如下图的配置文件里如果有所改动,那么在eclipse里启动Tomcat的时候,Tomcat的 ...

记一次BootStrap的使用

记一次BootStrap的使用的更多相关文章

随机推荐

热门专题