[知了堂学习笔记]_记一次BootStrap的使用
效果图如下: ? 一、简介:
?Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
引用一句Bootstrap的标题语?“Bootstrap的响应式 CSS 能够自适应于台式机、平板电脑和手机”。 简而言之就是:只用编写一次静态的HTML和CSS,在不同分辨率的设备上就能展现不同的布局样式。 ? 二、利用BootStrap完成响应式布局。
1.左边的广告栏不见了 2.中间变成了一张大图加两张小图。
?
进入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之前引入。 ?
先上图:
? ? ?
详细内容参看:http://www.runoob.com/bootstrap/bootstrap-grid-system.html 或者:?http://v3.bootcss.com/examples/grid/ *注意:当一个部分添加进入栅格的时候,如果超过12份数之后,会自动换到下一行。 ?
?官方叫做:媒体查询器。Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。其实就是一个css中的一个class属性的名字而已,定义如下图。 ? ?适配器(媒体查询器)的使用如:
? ?
* 第一个*代:表适配的屏幕分辨率的大小。 参数有: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份。 ?
通过栅格和媒体查询器的学习,我们是不是可以得出效果图的布局划分如下图。 ? ?
?
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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |