BootStrap几个功能

最新推荐文章于 2023-09-07 16:53:29 发布

卮酒

最新推荐文章于 2023-09-07 16:53:29 发布

阅读量228

点赞数

分类专栏：前端文章标签： bootstrap css html

本文链接：https://blog.csdn.net/amh13853151336/article/details/103573775

版权

前端专栏收录该内容

11 篇文章 2 订阅

订阅专栏

记录几个bootStrap的常用功能

1.Breadcrumb

<ul class="breadcrumb">
    <li><a href="#">Dashboard</a></li>
    <li>UI Elements</li>
    <li class="active">Date Tables</li>
</ul>

样式：
在这里插入图片描述

2.Popover

<div class="panel-body">
   <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." id="popover-left">
      Popover on left
   </button>

   <button type="button" class="btn btn-default"  data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." id="popover-top">
      Popover on top
   </button>

   <button type="button" class="btn btn-default" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." id="popover-bottom">
      Popover on bottom
   </button>

   <button type="button" class="btn btn-default"  data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." id="popover-right">
       Popover on right
   </button>
</div>

样式：在这里插入图片描述

3.tooltip

<div class="panel-body">
    <button type="button" class="btn btn-default" id="tooltip-left" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

    <button type="button" class="btn btn-default" id="tooltip-top" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

    <button type="button" class="btn btn-default" id="tooltip-bottom" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

    <button type="button" class="btn btn-default" id="tooltip-right" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>

样式：在这里插入图片描述