bootstrap4学习记录2——进度条、模态图、轮播图
进度条:
进度条是啥我想大家也都不会陌生,想要写出一个进度条基本设置如下:
- 添加一个带有 .progress 类的 div。
- 接着,在上面的 div 内,添加一个带有 class .progress-bar 的空的 div。
- 添加一个带有百分比表示的宽度的 style 属性,例如 style=“width:80%” 表示进度条在 80% 的位置。
<div class="progress">
<div class="progress-bar" style="width: 50%">50%</div>
</div>
效果图:
然后就是修改颜色,增加条纹,增加动画:
<div class="progress">
<div class="progress-bar bg-danger" style="width: 60%">60%</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped" style="width: 70%">70%</div>
</div>
<br>
<!--这里截图不能看到效果-->
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 80%">80%</div>
</div>
效果图:
修改颜色直接添加bg-…、变为条状需要添加progress-bar-striped、添加动画progress-bar-animated(注意只有添加条状才能看到动画,否则即使动画再运行也不能看到。)
模态图:
首先:模态框(Modal)是覆盖在父窗体上的子窗体,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。
模态图基本使用:
<!-- 按钮:用于打开模态框 -->
<!--mt为设置的id需要和下方的模态框一一对应-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mt">
我要登录
</button>
<!-- 模态框 -->
<!-- 可以加modal-lg/sm来改变大小 -->
<div class="modal fade" id="mt">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">登录中心</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<form style="margin: 0 30px;">
<div class="form-group" >
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- 模态框底部 -->
<div class="modal-footer">
<button class="btn btn-success">立即登录</button>
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
效果图,点击前:
点击后:
哇这个我能看懂但是解释不清楚了!!! 略过略过(其实你们也能看得懂,就是懒得写了- -)
轮播图:
<div id="lbt" class="carousel slide" data-ride="carousel" style="width: 50%;margin: 0 auto;">
<ol class="carousel-indicators" style="cursor: pointer">
<li data-target="#lbt" data-slide-to="0" class="active"></li>
<li data-target="#lbt" data-slide-to="1"></li>
<li data-target="#lbt" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/img-01.jpg" style="width:100%">
</div>
<div class="carousel-item" >
<img src="img/img-02.jpg" style="width:100%">
</div>
<div class="carousel-item" >
<img src="img/img-03.jpg" style="width:100%">
</div>
</div>
<a class="carousel-control-prev" href="#lbt" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#lbt" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
这个类说明写起来好麻烦,但还是坚持写一下吧。
- .carousel 创建一个轮播
- .carousel-indicators 为轮播添加一个指示符,就是轮播图底下的一个个小点,轮播的过程可以显示目前是第几张图。
- .carousel-inner 添加要切换的图片
- .carousel-item 指定每个图片的内容
- .carousel-control-prev 添加左侧的按钮,点击会返回上一张。
- .carousel-control-next 添加右侧按钮,点击会切换到下一张。
- .carousel-control-prev-icon 与 .carousel-control-prev 一起使用,设置左侧的按钮
- .carousel-control-next-icon 与 .carousel-control-next 一起使用,设置右侧的按钮
- .slide 切换图片的过渡和动画效果,如果你不需要这样的效果,可以删除这个类。
效果图:
在这里插入图片描述
有点丑。。网上随便找的一张图。
补充:
图片上可以添加文字内容
<div class="carousel-caption d-none d-md-block">
<h5>锅包肉</h5>
</div>
图片过度时间设置:
$('#lbt').carousel({
interval: 500
})
导航栏
导航栏一般放在页面的顶部,可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!--用于展示公司品牌-->
<a class="navbar-brand" href="#">东北三省</a>
<!--响应式折叠菜单按钮-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#lkNavBar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<!--图形文字-->
<span class="navbar-toggler-icon"></span>
</button>
<!--导航内容-->
<div class="collapse navbar-collapse " id="lkNavBar">
<ul class="navbar-nav mr-auto">
<!--公司名称-->
<li class="nav-item active ">
<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
</li>
<!--菜单-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
东北菜
</a>
<!--二级菜单-->
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">锅包肉</a>
<a class="dropdown-item" href="#">鱼香肉丝</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">地三鲜</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">你瞅啥</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">吃烧烤 </a>
</li>
</ul>
</div>
</nav>
效果图:
还可以通过bg、text修改相应的背景颜色和文字颜色
.fixed-top 为固定在导航栏顶部、.fixed-bottom为固定在导航栏底部。