大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
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 lang="zh-CN">
<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为navbarnavbar-default，role为navigation。 - 然后在里面添加一个类名为
container-fluid的div，用来容纳导航条里的其他元素（链接、按钮等）。 - 添加一些导航链接
<li>，然后把第一个<li>的class指定为active，表示激活状态。
刷新页面，一个漂亮的导航条就诞生了！我们只是写了一些 HTML 代码，没有写一句 CSS 代码，节约资源
这个时候有用jsp来联系的同志们，是出不来这个效果的，因为<nav></nav> 是html5的新标签，而我们用的jsp一般都是html 4.01版本的。
至于怎么转换，看这个博客有详细的介绍：https://blog.csdn.net/qq_37591637/article/details/84027218
到这里，大家都会有疑问了，class=”navbar navbar-default” 是什么意思？
意思是同时拥有两个属性，有navbar的样式，也有navbar-default的样式；
我不熟悉BootStrap的css样式，都不知道它的样式名称，怎么办？
菜鸟教程，多练练，就好了；
还有BootStrap教程https://v3.bootcss.com/components/#nav
轮播图的实现
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" />
<div class="carousel-caption">
<p>【寒假/春节预售】北海道5日4晚自由行（早去午回航班+4晚东横INN 札幌薄野南酒店住宿）</p>
</div>
</div>
<div class="item">
<img src="imgs/two.jpg" />
<div class="carousel-caption">
<p>【畅游关西】大阪5日自由行（吉祥航空优选时刻★下午去晚上回★免费托运行李额46KG+赠送WIFI+逛古城+游环球影城+心斋桥买不停）</p>
</div>
</div>
<div class="item">
<img src="imgs/three.jpg" />
<div class="carousel-caption">
<p>【春节寒假预售】九州6日自由行（往返机票+西瓜卡 回程行李额免费升级至25KG） </p>
</div>
</div>
<div class="item">
<img src="imgs/four.jpg" />
<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%*/ }- 1
如果一行要显示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" class="img-circle img-size">
<p>日本三日游！</p>
</div>
<div class="col-md-4">
<img alt="" src="imgs/b.jpg" class="img-circle img-size">
<p>泰国三日游！</p>
</div>
<div class="col-md-4">
<img alt="" src="imgs/c.jpg" class="img-circle img-size">
<p>缅甸七日游！</p>
</div>
</div>
</div>效果图如下：
我的资源包里面有完整的代码；
https://download.csdn.net/download/qq_37591637/10782314
如果觉得能帮助到你，可以对我的脑力劳动进行奖励，你的奖励是我创作的动力
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/184227.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...