Bootstrap中的data-*属性总结

最新推荐文章于 2021-04-26 13:52:40 发布

亲爱的萧潇

最新推荐文章于 2021-04-26 13:52:40 发布

阅读量4.8k

点赞数 4

分类专栏： CSS 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/sinat_21785599/article/details/52098064

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Bootstrap框架中data属性的应用，包括下拉菜单、标签页、工具提示框、弹出框和警告框等组件的实现方法，并详细展示了如何通过data属性来控制这些组件的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

data-是Bootstrap中使用组件和调用插件的一种方式。包含有data-属性的地方主要有如下几个部分。

下拉菜单组件
data-toggle=”dropdown”。示例代码如下：

<div class="dropdown open">
  <a href="" class="btn btn-default" data-toggle="dropdown" aria-expanded="true">产品大全 <span class="caret"></span></a>
   <ul class="dropdown-menu">
      <li><a href="javascript:;">电视</a></li>
      <li><a href="javascript:;">洗衣机</a></li>
      <li><a href="javascript:;">冰箱</a></li>
      <li class="divider"></li>
      <li><a href="javascript:;">尿不湿</a></li>
      <li><a href="javascript:;">奶嘴</a></li>
    </ul>
</div>

标签页插件
data-toggle=”tab”,示例代码如下：


<ul class="nav nav-tabs">
    <li class="active"><a href="#10y" data-toggle="tab">十元套餐</a></li>
    <li><a href="#20y" data-toggle="tab">二十元套餐</a></li>
    <li><a href="#30y" data-toggle="tab">三十元套餐</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active fade in" id="10y">十元套餐详情 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab delectus et ipsa nam perferendis quasi soluta sunt. Aspernatur cum illo minima quasi ratione repellendus sapiente voluptas. Accusantium doloremque possimus quisquam!
    </div>
    <div class="tab-pane fade" id="20y">二十元套餐详情 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius esse quidem quos soluta. Dolor, earum eum explicabo fugiat fugit illum iste modi nam praesentium quae quam qui quisquam quo suscipit! 
     </div>
     <div class="tab-pane fade" id="30y">三十元套餐详情 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur consectetur doloribus et quos vel. Adipisci architecto cum debitis dicta, doloremque ipsum maxime minus nam quod recusandae sequi sint, ullam voluptas.
     </div>
</div>

工具提示框插件
data-toggle=”tooltip”。示例代码如下：


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

弹出框插件
data-toggle=”popover”。示例代码如下：


<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框</button>

警告框插件
data-dismiss=”alert”。用来关闭警告框的属性。示例代码如下：

<div class="alert alert-danger alert-dismissible fade in">
  <span class="close " data-dismiss="alert">&times;</span>
  <p><span class="glyphicon glyphicon-alert"></span>
    没有更多消息了
  </p>
</div>

-模态对话框
data-toggle=”modal” , data-target=”#摸态框ID”


<button class="btn btn-info" type="button" data-toggle="modal" data-target="#mymodal2">REGISTER</button>

摸态框的组成部分如下：

    <div class="modal"><!--半透明的黑色遮罩层-->
        <div class="modal-dialog"><!--宽/定位-->
            <div class="modal-content"><!--边框/背景色/阴影-->
               <div class="modal-header">头部</div>
               <div class="modal-body">主体</div>
               <div class="modal-footer">尾部</div>
             </div>
        </div>
    </div>