web-dev-qa-db-fra.com

Bootstrap - Boutons à l'intérieur de l'élément de groupe de liste

Je veux créer une interface graphique Web, qui est séparée en 2 parties: une liste d'actions différentes, implémentée en tant que Bootstrap groupe de listes et une zone de détail où les paramètres de ces actions peuvent être modifiés.

Cliquer sur l'élément devrait afficher la section détail/paramètres de cette action.

Je veux également des actions rapides, qui sont de petits boutons sur le côté droit des éléments du groupe de listes.

Ce concept fonctionne dans Bootstrap, mais moi IDE me donne des avertissements sur les boutons/liens imbriqués. Le gros problème est que ce n'est pas du HTML5 valide et pourrait conduire à des résultats erronés. Une erreur que j'ai déjà remarqué est que cliquer sur un petit bouton exécute également l'action de l'élément de liste dans Firefox.

Voici un exemple du concept GUI, car il est difficile à décrire avec des mots: 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>

Existe-t-il un moyen simple d'avoir exactement la même interface graphique mais en utilisant HTML5 valide?

csshtml5twitter-bootstrap
20
Kim-Yannick Jürs

@Kim: Si vous voulez toujours obtenir la même chose avec Bootstrap dans la norme HTML valide, utilisez le code suivant. J'ai changé le bouton pour s'étendre et j'ai ajouté la même classe 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

Je pense que cela est proche du standard bootstrap 4 groupe de liste utilisant 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