我想在 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”的类。
我想在 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?请帮忙。
提前致谢。
我正在使用谷歌选择器。
但在选择器视图中,图像缩略图未显示。但我想在预览中显示缩略图。但我不能。我正在尝试这个:
这是我的代码:
<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)假设,我有很多 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)