So legen Sie den Fortschrittsbalken im Bootstrap fest

1 Die Implementierungsmethode ist wie folgt:

(1 ) Bootap-Datei einführen:

 <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">

(2) Fügen Sie eine

; hinzu ; div class="progress-bar">

<div class="progress-bar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;">

aria-valuenow="40" – der aktuelle Fortschrittswert des Fortschrittsbalkens.

aria-valuemax="100" – Maximaler Fortschrittswert.

aria-valuemin="0" – Mindestfortschrittswert.

style="width:40%;" - Lassen Sie den Fortschrittsbalken auf die 40 %-Position zeigen.

Der vollständige Code lautet wie folgt:

    
    
    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">



    
默认的进度条
    

        

        
    

Das Obige dient der Implementierung eines Standard-Fortschrittsbalkens, die Hintergrundfarbe ist grau und die Fortschrittsfarbe ist blau. Wir können auch verschiedene Fortschrittsbalken hinzufügen auf den Standard-Fortschrittsbalkenstil, um farbenfrohe Fortschrittsbalken zu erhalten.

2. Farbe angeben.

Fortschrittsbalken-Erfolg, Fortschrittsbalken-Info, Fortschrittsbalken-Warnung, Fortschrittsbalken-Gefahr

<div class="progress">
    <div class="progress-bar progress-bar-success"style="width: 90%;">
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width: 30%;">
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width: 20%;">
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width: 10%;">
    </div>
</div>

3. Gestreifte Form, Sie können dem Stamm-Div „Progress-Striped“ hinzufügen

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width: 90%;">
    </div>
   </div>

4. ​

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" 
         style="width: 40%;">
    </div>
  </div>

Empfohlen:

Bootstrap-Einführungs-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie den Fortschrittsbalken im Bootstrap fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn