小编Dev*_*Dev的帖子

在 Bootstrap v5.0.0-alpha1 中,我可以将什么用于媒体 (BS 3/4)?

我想在 Bootstrap v5.0.0-alpha1 中使用媒体对象,但如何使用?

在 Bootstrap 3 & 4 中,我是这样使用它的:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container mt-3">
<h2>Media Object</h2>
<p>Create a media object with the .media and .media-body classes:</p>
<div class="media border p-3">
    <img src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_960_720.png" alt="John Doe"
         class="mr-3 mt-3 rounded-circle" style="width:60px;">
    <div class="media-body">
        <h4>John Doe <small>Posted on February 19, 2016</small></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</p>
    </div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)

v5.0.0-alpha1 中,我可以将哪个类用于媒体对象?我在 Bootstrap 5 中找不到任何名为“media”的类。

html javascript css twitter-bootstrap bootstrap-5

8
推荐指数
1
解决办法
2441
查看次数

如何在Bootstrap 5中使用推拉?

我想在 Bootstrap v5.0.0-beta2中使用推送、拉取功能,但是如何操作呢?

在 Bootstrap 3 中,我这样使用它:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
Run Code Online (Sandbox Code Playgroud)

我试过。但我不能。这是我的JSFiddle

在Bootstrap V5中,如何使用push和pull?请帮忙。

提前致谢。

html javascript twitter-bootstrap bootstrap-5

6
推荐指数
1
解决办法
1万
查看次数

如何在谷歌选择器中显示缩略图?

我正在使用谷歌选择器。

但在选择器视图中,图像缩略图未显示。但我想在预览中显示缩略图。但我不能。我正在尝试这个:

这是我的代码:

<script type="text/javascript">

    var developerKey = "";
    var clientId = "";

    var scope = ['https://www.googleapis.com/auth/drive.file'];

    var pickerApiLoaded = false;
    var oauthToken;

    // Use the API Loader script to load google.picker and gapi.auth.
    function onApiLoad {
        gapi.load('auth', {'callback': onAuthApiLoad});
        gapi.load('picker', {'callback': onPickerApiLoad});
    });

    function onAuthApiLoad() {
        window.gapi.auth.authorize(
                {
                    'client_id': clientId,
                    'scope': scope,
                    'immediate': false
                },
                handleAuthResult);
    }

    function onPickerApiLoad() {
        pickerApiLoaded = true;
        createPicker();
    }

    function handleAuthResult(authResult) {
        if (authResult && !authResult.error) {
            oauthToken = authResult.access_token;
            createPicker();
        }
    } …
Run Code Online (Sandbox Code Playgroud)

javascript file-upload google-picker

1
推荐指数
1
解决办法
799
查看次数

如何使用鼠标悬停来显示弹出框来获取div id?

假设,我有很多 div。现在我想显示单独的弹出窗口,div 明智的。我用鼠标悬停。运作良好。但第一次不工作。当我第二次移动鼠标时,它就可以工作了。

这是我的代码:

$(document).ready(function() {
  $(".popper").one('mousemove', function() {
    var messageId = this.id;
    console.log(messageId);
    $("#" + messageId).popover({
      placement: 'bottom',
      container: 'body',
      html: true,
      content: function() {
        return $('.popper-content-' + messageId).html();
      }
    });
  });
});
Run Code Online (Sandbox Code Playgroud)
body {
  padding: 10px 120px;
}

.red {
  color: red;
}
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<a class="popper btn btn-outline-warning" id="1" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="2" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="3" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn …
Run Code Online (Sandbox Code Playgroud)

javascript jquery popover twitter-bootstrap bootstrap-5

0
推荐指数
1
解决办法
586
查看次数