bootstrap4学习记录2——进度条、模态图、轮播图

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">&times;</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为固定在导航栏底部。

bootstrap4学习记录2——进度条、模态图、轮播图

猜你喜欢