Question

Kind of a newbie question, I guess, but nevertheless:

I’m implementing a Bootstrap split button, working from their example:

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

In my code, the dropdown links are working fine; my question is how to assign an action to the main part of the button — the part made up of the “Action” text. I’m currently replacing “Action” with the same kind of <a> tag I’m using in the “dropdown menu links” section; this works fine except for some color and text-decoration styles that can easily be handled by some css. I’m just trying to make sure that this is the proper way to do it, since it’s not explicitly covered in the Bootstrap doc site (at least that I’ve found).

Anyway: is this the right thing?

Answer 1

I would do something like this (I think this is what you described, anyway):

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    <a href="someaction">Action</a>
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

It’s not going to get much better than that without JavaScript.