ポップオーバー(popover)内で改行する – 【Bootstrap5.3】
Bootstrap5.3でポップオーバー内で改行するには、data-bs-html="true"を指定する必要があります。
<button class="btn btn-primary" data-bs-toggle="popover" data-bs-title="タイトル" data-bs-html="true" data-bs-content="文章1<br>文章2">ボタン</button>
Bootstrap3ではdata-html="true"でしたが、Bootstrap5.xではdata-bs-html="true"になります。
html
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- popover initialize start -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
})
</script>
<!-- popover initialize end -->
<title>Bootstrap5.3デモ</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
<button class="btn btn-primary" data-bs-toggle="popover" data-bs-title="タイトル" data-bs-html="true" data-bs-content="文章1<br>文章2">ボタン</button>
</body>
</html>
デモです。
ドキュメント
はじめに
世界で最も人気のあるフレームワークBootstrapで始めましょう。CDNとテンプレートを使ってモバイルファーストなサイトを構築できます。
getbootstrap.jp
Attention Required! | Cloudflare
stackoverflow.com
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント