webentwicklung-frage-antwort-db.com.de

Wie zeige ich mit Bootstrap Radio-Eingänge als Schaltflächen an?

Mein Formular enthält derzeit diesen Code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<label for="opt-0"><input type="radio" name="opt" id="opt-0" checked>Option 0</label>
<label for="opt-1"><input type="radio" name="opt" id="opt-1">Option 1</label>
<label for="opt-2"><input type="radio" name="opt" id="opt-2">Option 2</label>

Anstatt die Optionsschaltflächen als Optionsschaltflächen anzuzeigen, möchte ich sie wie normale Schaltflächen aussehen lassen:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">Option 0</button>
<button class="btn btn-default">Option 1</button>
<button class="btn btn-default">Option 2</button>

Ich habe Funkgeräte und möchte, dass sie wie umschaltbare Tasten aussehen. Wie soll ich das mit Bootstrap machen?

htmlcsstwitter-bootstrapradio-buttonradio-group
15
Likk
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>    
<div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Option 1
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Option 2
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> Option 3
      </label>
</div>
50
Shibu Thomas

Bootstrap 4 bietet jetzt eine umschaltbare Tastengruppe , die den aktiven Status für Sie beim Klicken verwaltet.

Code aus ihrem Beispiel:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>
5
ElliotSchmelliot
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

jsfiddle-link
getbootstrap

4
Igor Ivancha

Sie können versuchen, sich die Tastengruppen anzusehen, dies ist eine Gruppe von - gut-Tasten -, die wie ein Radiobutton umschaltbar sind. 

JSFiddle

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/js/bootstrap.min.js"></script>

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Hoffe das hilft!

0
SymDev