Bootstrap bs-example

Question

Ich kopierte CSS-Code für BS-Beispiel von der Bootstrap 3.0.3 Docs-Site. Ich bin ein bisschen Anfänger mit CSS. Wenn mir jemand das erklären könnte, wäre ich dankbar.

Der folgende Code:

/* Echo out a label for the example */ 
.bs-example:after { 
    content: "Example"; 
    position: absolute; 
    top: 15px; 
    left: 15px; 
    font-size: 12px; 
    font-weight: bold; 
    color: #bbb; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
} 

Es funktioniert wie erwartet,

aber ich den Titel möchte, kann beispielsweise veränderbar sein. Ich würde gerne ein Tag wie sagen wir <zd></zd> verwenden.

Vielen Dank im Voraus.

Answer 1

Der: nach Selektor einfügen c nach jeder .bs-example Klasse. Hier wird das Word-Beispiel nach jeder .bs-example hinzugefügt.

[siehe Link] http://www.w3schools.com/cssref/sel_after.asp

Statt content:"Example" zu verwenden, können Sie Ihre Titel in HTML bearbeiten und die gleiche Klasse zu allen Titeln zuweisen. Header-Tags sind bevorzugt. dh Sie sollten auf jeden Fall ein neues benutzerdefiniertes Stylesheet erstellen und die Klassen überschreiben, die Sie ändern möchten.Auf diese Weise können Sie immer zum Standardstyling zurückkehren, das durch Bootstrap bereitgestellt wird.

Dies ist ein einfacher und einfacher Schritt gefolgt von allen Web-Entwicklern nach W3C Std.

Immer noch möchten Sie Titel nach Code ändern, können Sie Hilfe von jQuery oder JS bekommen.

Tipp von Christofer Eliasson: Wenn Sie Ihre Seite neu gestalten möchten, können Sie einfach Ihr eigenes Stylesheet gegen ein neues austauschen. Anstatt eine komplett neue Bootstrap-Datei zu erhalten, um neu starten zu können. Wenn Sie nur mit ein paar Elementen zum Standard-Styling zurückkehren möchten, wäre es ein Durcheinander, sich daran zu erinnern, welche Änderungen Sie vorgenommen haben. Schreiben Sie Ihren benutzerdefinierten CSS-Code in ein separates Stylesheet.

Answer 2

Bevor ich diese Antwort schrieb, war mir nicht klar, dass die Bearbeitung von Pseudo Elements (::after) mit JavaScript ein wenig komplizierter war. Obwohl mit dieser question/answer on StackOverflow es relativ einfach mit JavaScript gemacht.

Das Konzept war immer noch das gleiche, beim Laden der Seite rendert der Browser, was auf dem Stylesheet angegeben ist, da Sie JavaScript verwenden müssen, um den Inhalt zu manipulieren, um etwas anderes zu rendern.

Daher sieht das CSS die attr(data-content), was bedeutet, dass es nach dem data-content Attribut innerhalb der HTML suchen wird.

.bs-docs-example::after { 
    content: attr(data-content); 
} 

Das sieht für die data-content="":

<div class="bs-docs-example" data-content="Example Header"> 

Welche macht:

Um es nach dort zu ändern, alles, was Sie tun müssen ist, ändern es ist data-content Attribut mit JavaScript, in der Demo verwende ich jQuery, um schnell das DOM-Element auszuwählen und sein data-content Attribut anzupassen.

$('.bs-docs-example').attr('data-content', "New Header Title"); 

Demo Fiddle: http://jsfiddle.net/u2D4M/

Wenn Sie diese ohne jQuery tun wollte:

<script> 
    var getHeader = document.getElementById('bs-header'); 
    getHeader.attributes["data-content"].value = "Hi, New Title"; 
</script> 

Demo Fiddle: http://jsfiddle.net/9wxwxd4s/