Bootstrap中的data-*属性总结

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">×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">REGISTERbutton>

摸态框的组成部分如下：

    <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>