Bootstrap4 round-robin + modal box + prompt box + pop-up box

Bootstrap4 Roadcasting

Cases from the novice bird tutorial

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- Indicator -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- Roadcast Pictures -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
      <div class="carousel-caption">
        <h3>First Picture Description Title</h3>
        <p>Descriptive Text!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
      <div class="carousel-caption">
        <h3>Second Picture Description Title</h3>
        <p>Descriptive Text!</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
      <div class="carousel-caption">
        <h3>3rd Picture Description Title</h3>
        <p>Descriptive Text!</p>
      </div>
    </div>
  </div>
 
  <!-- Left and right switch button -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>

 

 

 

However, we usually don't write code like this.It is common practice to use backgroun="background image(large picture)" when the screen is zoomed in and <img src=">when the screen is zoomed out.

The reason for this is that when the screen is zoomed out, the picture is too large, the flow of mobile devices is consumed too much, and the main content of the picture is displayed by <img src="small picture">when the screen is zoomed out.

 

Logical Details: Use @media (media query) to lay out when the screen changes; use @media to zoom out as the screen zooms out in small pictures; use large pictures without zooming out as the screen zooms out.
Use background:url("big picture") when the screen is above 640px and set <img>to display:none.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        body{
            margin:10px;
            padding:10px;
        }
        @media screen and (min-width:640px){
            #demo img{
                display: none;
            }
            #demo .carousel-inner .carousel-bg1{
                background: url(https://static.runoob.com/images/mix/img_fjords_wide.jpg) no-repeat center center;
                width: 100%;
                height: 410px;
                background-size:cover;
            }
            #demo .carousel-inner .carousel-bg2{
                background: url(https://static.runoob.com/images/mix/img_nature_wide.jpg) no-repeat center center;
                width: 100%;
                height: 410px;
                background-size:cover;
            }
            #demo .carousel-inner .carousel-bg3{
                background: url(https://static.runoob.com/images/mix/img_mountains_wide.jpg) no-repeat center center;
                width: 100%;
                height: 410px;
                background-size:cover;
            }
        }
        @media screen and (max-width:640px){
            #demo img{
                display: block;
            }
        }
        
    </style>
</head>
<body>

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- Indicator -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- Roadcast Pictures -->
  <div class="carousel-inner">
    <div class="carousel-item active carousel-bg1">
      <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
      <div class="carousel-caption">
        <h3>First Picture Description Title</h3>
        <p>Descriptive Text!</p>
      </div>
    </div>
    <div class="carousel-item carousel-bg2">
      <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
      <div class="carousel-caption">
        <h3>Second Picture Description Title</h3>
        <p>Descriptive Text!</p>
      </div>
    </div>
    <div class="carousel-item carousel-bg3">
      <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
      <div class="carousel-caption">
        <h3>3rd Picture Description Title</h3>
        <p>Descriptive Text!</p>
      </div>
    </div>
  </div>
 
  <!-- Left and right switch button -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>

</body>
</html>

 

Reference link: https://blog.csdn.net/yufanhui/article/details/80738760?utm_source=blogxgwz7

 

<script>
    $(function(){
        $('.carousel').carousel({
            interval: 500//Roadcasting interval
        });
    });
</script>

Looking at the data, it says that this can change the speed of the relay map. I tried that no eggs are useful. Do you know why==

 

Bootstrap4 modal box

<!-- Button: to open the modal box -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open the modal box
</button>
 
<!-- Modal Box -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- Modal Box Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Box Header</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
 
      <!-- Modal Box Body -->
      <div class="modal-body">
        Modal Box Content..
      </div>
 
      <!-- Modal Box Bottom -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
 
    </div>
  </div>
</div>

 

 

 

 

 

Bootstrap4 prompt box

<a href="#" data-toggle="tooltip" title="I'm the tip!">Mouse over here</a>

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });
</script>

 

 

 

By default, the prompt box is displayed above the element.

You can use the data-placement property to set the direction in which the prompt box is displayed: top, bottom, left, or right:

<br><br>
<a href="#" data-toggle="tooltip" title="I'm the tip!" data-placement="top">Mouse over here top</a>
<a href="#" data-toggle="tooltip" title="I'm the tip!" data-placement="bottom">Mouse over here bottom</a>
<a href="#" data-toggle="tooltip" title="I'm the tip!" data-placement="left">Mouse over here left</a>
<a href="#" data-toggle="tooltip" title="I'm the tip!" data-placement="right">Mouse over here right</a>

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });
</script>

 

 

 

Use hints in buttons

<br><br>
<button type="button" class="btn btn-info" data-toggle="tooltip" title="I'm the tip!" data-placement="top">Button prompt top</button>
<button type="button" class="btn btn-info" data-toggle="tooltip" title="I'm the tip!" data-placement="bottom">Button prompt bottom</button>
<button type="button" class="btn btn-info" data-toggle="tooltip" title="I'm the tip!" data-placement="left">Button prompt left</button>
<button type="button" class="btn btn-info" data-toggle="tooltip" title="I'm the tip!" data-placement="right">Button prompt right</button>

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });
</script>

 

 

 

Prompt content to add HTML tags, set data-html="true", content in title tag

<br><br>
<button type="button" class="btn btn-info" data-toggle="tooltip" title="<b>I'm the tip!</b>" data-html="true">Button prompt top</button>
<button type="button" class="btn btn-info" data-toggle="tooltip" title="<b>I'm the tip!</b>">Button prompt top</button>

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });
</script>

 

 

 

 

Bootstrap4 pop-up box

<a href="#" data-toggle="popover" title="title" data-content="this is content">click me</a>

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover(); 
    });
</script>

 

 

 

<br><br>
<a href="#" data-toggle="popover" title="title" data-content="this is content" data-placement="top">click me</a>
<a href="#" data-toggle="popover" title="title" data-content="this is content" data-placement="bottom">click me</a>
<a href="#" data-toggle="popover" title="title" data-content="this is content" data-placement="left">click me</a>
<a href="#" data-toggle="popover" title="title" data-content="this is content" data-placement="right">click me</a>

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover(); 
    });
</script>

 

 

 

Use pop-ups in buttons

<br><br>
<button type="button" class="btn btn-info" data-toggle="popover" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." >Button prompt</button>

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover(); 
    });
</script>

 

 

Click somewhere else to close the pop-up data-trigger="focus"

<button type="button" class="btn btn-info" data-toggle="popover" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-trigger="focus">Button prompt</button>

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover(); 
    });
</script>

 

data-trigger="hover"

<button type="button" class="btn btn-info" data-toggle="popover" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-trigger="hover">Button prompt</button>

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover(); 
    });
</script>

Tags: JQuery Mobile

Posted on Fri, 17 Apr 2020 00:24:24 -0700 by Fender963