bootStrap是干嘛的?有什么用处?
我们在开发前端页面的时候,如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写,那就太浪费时间了。所以我们需要一个框架,帮我们实现一个页面的基础部分和解决一些繁琐的细节,只要在它的基础上进行个性化定制就可以了。
Bootstrap 就是这样一个简洁、直观、强悍的前端开发框架,只要学习并遵守它的标准,即使是没有学过网页设计的开发者,也能做出很专业、美观的页面,极大地提高了工作效率。像下面这个漂亮的网站就是基于 Bootstrap 来开发的。
bootStrap怎么用?
第一步、下载bootStrap文件
https://v3.bootcss.com/getting-started/#download 官网
下载解压缩
这个bootStrap必须依赖jquery.min.js的存在,必须。
所以一并下载这个js 网址:http://www.jq22.com/jquery-info122
第二步、把外部文件引入工程里面
把bootStrap的css、font、js、下载的jquery.min.js一并复制到项目下面
我用的是myelispe
第三步、jsp页面设置如下
注意这几个文件的前后顺序,如果不对,会导致页面无法正常运行。
先引入 bootstrap.min.css (Bootstrap的样式表文件)
然后引入自己写的 css 文件(style.css)
然后引入 jQuery(javascript 库)
最后引入 bootstrap.min.js 程序文件
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!--这个lang="zh-CN"是转化为html5的版本 --> <html> <head> <base href="<%=basePath%>"> <title>学习bootstrap案例</title> <!-- 这个是自适应各种分辨率的屏幕 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="css/style.css"/> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head>
第四步、使用bootStrap的样式表,
bootstrap强大之处,在于,别人都设计好了的功能,你只需要熟悉别人的规则就可以直接使用!
小例子:
打开样式表bootstrap.css,你可以看到如下.btn-primary 显而易见这是一个按钮样式
在jsp页面写上
<body> <button class="btn-primary">按钮</button> </body>
页面呈现的效果如下:
刷新页面,你会看到一个蓝色的按钮。不需要自己写一行 CSS 代码,只要在页面里面给某个元素指定一个 class ,就可以直接显示出预定的样式—— 这就是使用 Bootstrap 前端框架的魔力。
练习如下:
做一个这样的页面:
首先:按照正常的不加css样式效果的布局只能呈现如下效果:
没有轮播图特效,布局不工整
虽然我们可以自己写css样式,让页面变得精美起来,但是太耗时间了。
如果来学习一下bootStrap吧!
使用导航条组件
导航条位于页面最顶部,提供整个网站所有页面的链接,
<!-- 导航 --> <nav class="navbar navbar-default"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li class="active"><a href="">微信公众号管家</a></li> <li><a href="">首页</a></li> <li><a href="">关于</a></li> <li><a href="">登录</a></li> </ul> </div> </nav>
添加一个 nav 标签,并设置 class 为 navbar navbar-default ,role 为 navigation 。
然后在里面添加一个类名为 container-fluid 的 div ,用来容纳导航条里的其他元素(链接、按钮等)。
添加一些导航链接 <li> ,然后把第一个 <li> 的 class 指定为 active ,表示激活状态。
刷新页面,一个漂亮的导航条就诞生了!我们只是写了一些 HTML 代码,没有写一句 CSS 代码,节约资源
轮播图的实现
Bootstrap 自带了一个轮播组件—— Carousel
<!--轮播图 --> <!-- 最主要的是三部分indicators(指标)、inner(内容)、carousel-control(导航) --> <div class="carousel slide" id="lf" data-ride="carousel"> <ol class="carousel-indicators"> <!-- •data-target 属性: 取值 lf 定义的 ID 名或者其他样式识别符, 并且将其定义在轮播图计数器的每个 li 上。 data-slide-to 属性: 用来传递某个帧的下标,比如 data-slide-to="2", 可以直接跳转到这个指定的帧(下标从0开始计), 同样定义在轮播图计数器的每个 li 上。 --> <li data-target="#lf" data-slide-to="0" class="active"></li> <li data-target="#lf" data-slide-to="1"></li> <li data-target="#lf" data-slide-to="2"></li> <li data-target="#lf" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="imgs/one.jpg-600" /> <div class="carousel-caption"> <p>【寒假/春节预售】北海道5日4晚自由行(早去午回航班+4晚东横INN 札幌薄野南酒店住宿)</p> </div> </div> <div class="item"> <img src="imgs/two.jpg-600" /> <div class="carousel-caption"> <p>【畅游关西】大阪5日自由行(吉祥航空优选时刻 下午去晚上回 免费托运行李额46KG+赠送WIFI+逛古城+游环球影城+心斋桥买不停)</p> </div> </div> <div class="item"> <img src="imgs/three.jpg-600" /> <div class="carousel-caption"> <p>【春节寒假预售】九州6日自由行(往返机票+西瓜卡 回程行李额免费升级至25KG) </p> </div> </div> <div class="item"> <img src="imgs/four.jpg-600" /> <div class="carousel-caption"> <p>【寒假/春节预售】大阪5日4晚自由行●宿4晚惠美须町亲子主题公寓酒店(近心斋桥+40㎡空间+贴心设施+2018年新开业) </p> </div> </div> <a class="left carousel-control" href="#lf" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#lf" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
制作圆角图片案例
知识点:
栅格布局
想想看,如果是你自己写 CSS ,准备怎样实现这个均等排列的效果?例如下面通过设置固定宽度/百分比来处理:
.item { float:left, width: 300px; /*或者 width: 33%*/ }
如果一行要显示4个、6个、或者更多呢?这样计算起来就太不灵活了(100/6 等于 16.6666666……)。
其实我们并不关心每一份的宽度是多少像素/百分比,我们只关心能不能自动地平均划分成多少份, Bootstrap 的栅格系统布局就是为了实现自动计算每一份的宽度而诞生的。
栅格可以理解为一个安全门,它的总长度可以拉长,可以缩短,但是总的间隔数量是不变的,并且所有间隔的宽度都一样。
这个伸缩的过程,像不像我们把浏览器拉宽、变窄的操作? Bootstrap 的栅格系统规定了每个页面的宽度被平均划分为 12 等份,不管整个页面的宽度是 1000像素,还是500像素,都会自动计算每一份(1/12)的宽度是多少。
通过给栅格布局内部的元素指定 class 为 col-md-份数 ,来告诉它的宽度占据这12份里面的几份。
例如下面的代码中,有3个 div 的 class 为 col-md-4(先不管中间那个 -md- 是什么,关注这个数字就好),算一算4 + 4 + 4 是不是正好等于 12?
<!-- 案例 --> <div class="container"> <div class="row"> <div class="col-md-4"> <img alt="" src="imgs/a.jpg-600" class="img-circle img-size"> <p>日本三日游!</p> </div> <div class="col-md-4"> <img alt="" src="imgs/b.jpg-600" class="img-circle img-size"> <p>泰国三日游!</p> </div> <div class="col-md-4"> <img alt="" src="imgs/c.jpg-600" class="img-circle img-size"> <p>缅甸七日游!</p> </div> </div> </div>
效果图如下:
更多bootstrap的相关知识,可访问:web前端自学!!
以上就是bootstrap要怎么使用?的详细内容,更多请关注0133技术站其它相关文章!