[知了堂学习笔记]_记一次BootStrap的使用
2017-09-06 10:13
344 查看
效果图如下:
一、简介:
什么是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官方文档
案例代码
以上为今天的所有分享,如需了解更加深入的知识,
请大家进入知了堂社区:http://www.zhiliaotang.com/portal.php;
转载请注明出处;
请大家多多指教!欢迎提意见,非诚勿扰!!!
---By GET_CHEN
一、简介:
什么是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="images/title2.jpg"/></h2> </div> <div class=" col-lg-2 col-md-2 hidden-xs hidden-sm"> <img src="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="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="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="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="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="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="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="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="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="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="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>
以上为今天的所有分享,如需了解更加深入的知识,
请大家进入知了堂社区:http://www.zhiliaotang.com/portal.php;
转载请注明出处;
请大家多多指教!欢迎提意见,非诚勿扰!!!
---By GET_CHEN
相关文章推荐
- [知了堂学习笔记]_记一次BootStrap的使用
- Bootstrap的使用手册及学习笔记
- bootstrap模态弹出框学习笔记(1-9 模态弹出框--模态弹出窗的使用(data-参数说明))
- Flask学习笔记-使用bootstrap-datepicker实现页面日期选择
- [知了堂学习笔记]_Jquery_Validate 表单校验的使用[知了堂学习笔记]_Jquery_Validate 表单校验的使用
- [知了堂学习笔记]C3P0连接池的使用
- Flask学习笔记-在Bootstrap框架下Web表单WTF的使用
- 知了堂学习笔记--mybatis学习_resultMap的使用
- [知了堂学习笔记]_ajax的两种使用方式
- bootstrap学习笔记--bootstrap排版类的使用
- 【知了堂学习笔记】Java中static关键字的一些简单使用方法
- ng2学习笔记之bootstrap中的component使用教程
- Spring Boot 学习笔记【6】使用FreeMarker与BootStrap开发Web
- [知了堂学习笔记]_锁的使用
- Chap 4 学习笔记-使用C#存储变量数据
- PHP学习笔记(3)----phpmyadmin的安装与使用[原创]
- C#学习笔记(二十一):使用文件基础
- "SQL2000触发器的使用"文章学习笔记
- C#学习笔记(十六):使用打开保存文件对话框
- C#学习笔记(十六):使用打开保存文件对话框