记一次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>最新商品 <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">¥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">¥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">¥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">¥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">¥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">¥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">¥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">¥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">¥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软件的用法: ...
随机推荐
- cliendataset中自增长字段的处理
cliendataset中自增长字段的处理: id:自增长字段. 在client中的处理方法:clientdataset.Fields.FieldByName('id').ReadOnly:=Fals ...
- 【codeforces 803E】Roma and Poker
[题目链接]:http://codeforces.com/contest/803/problem/E [题意] 给你一个不完整的胜负平序列(不完整是指中间有些地方为问号,让你自己选择胜负平) 让你复原 ...
- Java基础学习总结(60)——Java常用的八种排序算法
1.直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已经排好的数据列中. 将第一个数和第二个数排序,然后构成一个有序序列 将第三个数插入进去,构成一个新的有序序列. 对第四个数.第五个数--直 ...
- redis 参数配置总结
redis.conf 配置项说明如下 1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 2. 当Redis以守护进程方式运行时, ...
- H3C SecPath U200-S 如何在内网使用外网IP地址访问内网服务器
H3C SecPath U200-S 如何在内网使用外网IP地址访问内网服务器 ------------------------------------------------------------ ...
- 洛谷 U3346 A1-偶回文数
U3346 A1-偶回文数 题目背景 方方方很喜欢回文数,于是zzq就出了一道关于回文数的题目. 因为偶回文数比较简单,所以方方方就把它放在了第一题... 题目描述 我们定义一个长度为偶数的回文数叫做 ...
- T4系列文章之2:T4工具简介、调试以及T4运行原理
一.前言 经过第一篇,我想大家现在对T4有了基本的印象,应该对T4有了一个大致的了解吧.现在,我们接着来讲一下T4的工具,然后下一篇我就开始T4的用法了.各位客官,就等了. 二.工具介绍 2.1 上图 ...
- VS2010编译器工具cl对c++11标准支持情况測试
本文探讨了VS2010编译工具cl对C++11标准的支持情况.提供了利用C++11新特性的两段代码来进行測试,并同g++ 4.9.3编译器的编译情况相对照.总的说来:VS2010的编译器工具cl部分支 ...
- cpu真实占用率检測工具
windows任务管理器所示CPU占用,一直在不断的变动跳跃 ,并不能反应真实的平均CPU占用率.迅雷下载工具也是一样 ,有时这些知名软件,反倒是没有做的这么人性化,细致.或 许就是不想让人知道 ...
- UESTC--1263--The Desire of Asuna(贪心)
The Desire of Asuna Time Limit: 1000MS Memory Limit: 65535KB 64bit IO Format: %lld & %llu Su ...