Bootstrap-Fortschrittsbalken

Ich bin mit bootstrap 3 und den Fortschrittsbalken, um zu zeigen, eine Platzierung auf einer Rangliste.

Bootstrap-Fortschrittsbalken

Gibt es eine Möglichkeit, dies anzupassen, um es nicht zu zeigen, die "Aus" - Teil?

Zum Beispiel seine technisch kein Fortschritt zu vervollständigen etwas, es ist nur ein Rang angezeigt wird, in der gleichen Weise. Also wirklich, ich will nur in der Lage sein, entfernen Sie die box, dass seine Füllung, aber es auch so seine Runde auf der rechten Seite als auch.

Hier ist, was ich bin versucht zu erreichen,

Bootstrap-Fortschrittsbalken

Als eine Seite Frage, eine Idee, wie entfernen des padding für die div-der Fortschrittsbalken ist in so richtet er in der Mitte wie die anderen Inhalte?

  • Der Fortschrittsbalken ist nur die bar. Jeder andere text Hinzugefügt werden müssen, direkt in Ihre HTML-Seite
  • Ich glaube, Sie missverstanden, ich will nur nicht in den hintergrund der Statusleiste (den leeren Bereich) zu zeigen. Also kurz gesagt, der Teil, der gefüllt ist, muss nur die Breite des Balkens, so ist es immer "100%", aber kürzer, basierend auf Prozent
  • Warum hast du nicht sagen, dass dann anstelle von "aus" - Teil? Nur mit Hilfe von CSS entfernen Sie den Rahmen und hintergrund-Farbe
InformationsquelleAutor SBB | 2013-11-22
  1. 4
    .progress {
    background-color: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
}

table .progress {
    margin-bottom: 0;
}

.progress-bar {
    border-radius: 4px;
}

    Siehe demo hier (Dank Ohgodwhy) - http://jsfiddle.net/r4zkv/4/

    InformationsquelleAutor Phil
  2. 1

    Nur das überschreiben der bootstrap .Fortschritt-Klasse Stile:

    .progress {
  background-color: transparent;
  border-radius: 0px;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.progress-bar {
    border-radius: 4px;
}

    Stellen Sie sicher, ändern Sie nicht das bootstrap.css-Datei direkt, fügen Sie einfach die oben genannten Stil auf Ihrer Website.css-Datei, die sollte immer nach der bootstrap.css in jedem Projekt, so dass Sie überschreiben können bootstrap-Standard-styles für, die custom-look.

    InformationsquelleAutor Brian Ogden
Schreibe einen Kommentar