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

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

进度条：
进度条是啥我想大家也都不会陌生，想要写出一个进度条基本设置如下:

1. 添加一个带有 .progress 类的 div。
2. 接着，在上面的 div 内，添加一个带有 class .progress-bar 的空的 div。
3. 添加一个带有百分比表示的宽度的 style 属性，例如 style=“width:80%” 表示进度条在 80% 的位置。

    
50%

效果图：

然后就是修改颜色，增加条纹，增加动画：

    
60%






    
70%






    
80%

效果图：

修改颜色直接添加bg-…、变为条状需要添加progress-bar-striped、添加动画progress-bar-animated（注意只有添加条状才能看到动画，否则即使动画再运行也不能看到。）

模态图：
首先：模态框（Modal）是覆盖在父窗体上的子窗体，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

模态图基本使用：

    我要登录




    

        

            
            

                
登录中心
                ×
            
            
            

                

                    Email address
                    
                    We'll never share your email with anyone else.
                
                

                    Password
                    
                
                

                    
                    Check me out
                
                Submit
            
            
            

                立即登录
                关闭
            
        
    

效果图，点击前：

点击后：

哇这个我能看懂但是解释不清楚了！！！ 略过略过（其实你们也能看得懂，就是懒得写了- -）

轮播图：

  

      

          

          

          

      
      

          

              
          
          

              
          
          

              
          
      
      
          
          Previous
      
      
          
          Next
      
  

这个类说明写起来好麻烦，但还是坚持写一下吧。

1. .carousel 创建一个轮播
2. .carousel-indicators 为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
3. .carousel-inner 添加要切换的图片
4. .carousel-item 指定每个图片的内容
5. .carousel-control-prev 添加左侧的按钮，点击会返回上一张。
6. .carousel-control-next 添加右侧按钮，点击会切换到下一张。
7. .carousel-control-prev-icon 与 .carousel-control-prev 一起使用，设置左侧的按钮
8. .carousel-control-next-icon 与 .carousel-control-next 一起使用，设置右侧的按钮
9. .slide 切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。

效果图：
在这里插入图片描述
有点丑。。网上随便找的一张图。
补充：
图片上可以添加文字内容

                
锅包肉

图片过度时间设置：

 $('#lbt').carousel({
            interval: 500
})

导航栏
导航栏一般放在页面的顶部，可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

      
      东北三省
      
      
          
          
      
      
      

          

              
              

                  首页 (current)
              
              
              

                  
                      东北菜
                  
                  
                  

                      锅包肉
                      鱼香肉丝
                      

                      地三鲜
                  
              
              

                  你瞅啥
              
              

                  吃烧烤 
              
          
      
  

效果图：

还可以通过bg、text修改相应的背景颜色和文字颜色
.fixed-top 为固定在导航栏顶部、.fixed-bottom为固定在导航栏底部。