web-dev-qa-db-ja.com

Bootstrap-リストグループアイテム内のボタン

Bootstrap List Groupおよびこれらのアクションの設定を変更できる詳細エリアとして実装されたさまざまなアクションのリスト。

アイテムをクリックすると、そのアクションの詳細/設定セクションが表示されます。

リストグループの項目の右側にある小さなボタンであるクイックアクションも必要です。

この概念はBootstrapで機能しますが、me IDEはネストされたボタン/リンクに関する警告を表示します。大きな問題は、これが有効なHTML5ではなく、間違った結果につながる可能性があることです。注目すべきは、小さなボタンをクリックすると、Firefoxのリスト項目アクションも実行されるということです。

これは、言葉で説明するのが難しいため、GUIの概念の例を示します。 https://jsfiddle.net/drx7xhw7/

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <h3>Actions</h3>
      <div class="list-group">
        <a class="list-group-item clearfix" onclick="alert('Action1 -> Details');">
          Action1
          <span class="pull-right">
            <button type="button" class="btn btn-xs btn-default" onclick="alert('Action1 -> Play');">
              <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
            </button>
          </span>
        </a>
        <a class="list-group-item clearfix" onclick="alert('Action2 -> Details');">
          Action2
          <span class="pull-right">
            <button type="button" class="btn btn-xs btn-default" onclick="alert('Action2 -> Play');">
              <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
            </button>
          </span>
        </a>
      </div>
    </div>

    <div class="col-md-8">
      <h3>Settings</h3>
    </div>
  </div>
</div>

まったく同じGUIを持ちながら、有効なHTML5を使用する簡単な方法はありますか？

csshtml5twitter-bootstrap
20
Kim-Yannick Jürs

@Kim：有効なHTML標準でBootstrapで同じことを実現したい場合は、次のコードを使用します。ボタンをspanに変更し、同じクラスbtn btn-xs btn-defaultを追加しました。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h3>Actions</h3>
            <div class="list-group">
                <a class="list-group-item clearfix" onclick="alert('Action1 -> Details');">
                    Action1
                    <span class="pull-right">
                        <span class="btn btn-xs btn-default" onclick="alert('Action1 -> Play'); event.stopPropagation();">
                            <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
                        </span>
                    </span>
                </a>
                <a class="list-group-item clearfix" onclick="alert('Action2 -> Details');">
                    Action2
                    <span class="pull-right">
                        <span class="btn btn-xs btn-default" onclick="alert('Action2 -> Play'); event.stopPropagation();">
                            <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
                        </span>
                    </span>
                </a>
            </div>
        </div>

        <div class="col-md-8">
            <h3>Settings</h3>
        </div>
    </div>
</div>
26
trungk18

これは標準に近いと思うbootstrap 4 flexを使用したグループ

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<ul class="list-group cProductsList"> 
                <li class="list-group-item d-flex justify-content-between"><p class="p-0 m-0 flex-grow-1">First item</p> 
                   <button class="btn-success">EDIT</button>  <button class="btn-danger">DELETE</button>
                </li>
               <li class="list-group-item d-flex justify-content-between"><p class="p-0 m-0 flex-grow-1">Second item</p>  
                   <button class="btn-success">EDIT</button>  <button class="btn-danger">DELETE</button>
                </li> 
</ul>
0
TikasMan