So verwenden Sie das Basis-CSS in Bootstrap

Eines der komplexesten Dinge bei der Arbeit mit Webdesign ist es, die feinen Unterschiede zwischen den Browsern zu überwinden, obwohl theoretisch jeder Browser den Standards entsprechen muss, und in den meisten Fällen gibt es sehr feine kleine Unterschiede, die ausmachen können unser Design schwer umzusetzen.

Vor der Existenz von Bootstrap eine Datei namens reset.cssDabei wurden alle Werte von Grund- und Schlüsselelementen wie Auffüllungen, Ränder, Standardschriftart etc. explizit definiert. Damit haben wir verhindert, dass der Browser beim Definieren von Elementen, die wir in unseren benutzerdefinierten Stilen nicht geändert hatten, das tat, was er wollte.

Heutzutage Bootstrap kümmert sich für uns um diese Details, dies geschieht mit einer Datei namens bootstrap.css die im Volksmund als Basisdatei bekannt ist.

AnforderungenUm die Beispiele und Übungen in diesem Tutorial ausführen zu können, benötigen wir ein Projekt mit dem Bootstrap bereits heruntergeladen, oder falls dies nicht der Fall ist, eine Internetverbindung, um die Bibliotheken direkt von Ihrem CDN. Wir brauchen einen modernen Browser wie Chrom oder Feuerfuchs in den neuesten Versionen, und schließlich brauchen wir einen Texteditor wie Erhabener Text oder NotePad ++, um den HTML-Inhalt benutzerfreundlicher zu erstellen, obwohl gedit oder Notepad unseren Zwecken dienen.

Kopfzeilen
Eines der Dinge, die auf einer Website am meisten Aufmerksamkeit auf sich ziehen, sind die Titel und Untertitel der Inhalte, dies ist natürlich die Funktion dieser Elemente, die CSS Basis von Bootstrap hat eine interessante Art, damit umzugehen, zuerst hat es ein paar Größen und eine Schriftart, die für das Element definiert ist h in jeder seiner Nummerierungen von 1 bis 6, aber es hat auch Klassen, die jedem Element entsprechen, so dass wir dieselben Stile auf a anwenden können div oder doch Spanne.

Eine andere interessante Sache ist, dass wir das Element verwenden können klein um die Größe eines Abschnitts des Titels zu verringern, aber die Proportionen in Bezug auf das Element oder das Element, das die entsprechende Klasse verwendet, beizubehalten.

Damit bleibt einfach, dass bei mehreren Browsern eine Homogenität unseres Designs erhalten bleibt, sodass die Titel nicht anders aussehen müssen, z. B. in Safari zu Feuerfuchs, wenn wir wissen, dass beide Browser standardmäßig mit unterschiedlichen Schriftarten arbeiten.

Das Erlernte in die Praxis umsetzen
Wir werden eine kleine Seite erstellen, auf der wir eine Liste von Titeln erstellen, wir werden die beiden Pisten übereinander legen, damit wir sehen können, wie die Unterschiede dank der Basisdatei von . nicht mehr bestehen Bootstrap. Schauen wir uns zuerst den Code an, und dann sehen wir, wie er in unserem Browser aussieht.

 Verwenden der Basis-Bootstrap-DateiDies ist ein div mit Klasse H1 die Quelle klein
Dies ist ein H4-Titel der kleinen Schrift
Dies ist ein Div mit Klasse H4 die Quelle klein

Hier sehen wir, wie wir die verschiedenen Elemente, die wir als Titel verwenden werden, innerhalb des Körpers gemacht haben, zusätzlich zeigen wir, wie das Element funktioniert, damit wir es mit den Titeln kombinieren können, um sehr interessante Effekte zu erzielen. Wir fügen auch einen zusätzlichen Stil hinzu, um einige hinzuzufügen Polsterungen zusätzlich, damit wir ein Ergebnis wie das im folgenden Bild sehen können:

VERGRÖSSERN

Absätze
Sobald wir die Aufmerksamkeit eines Lesers oder Benutzers mit den Titeln unserer Anwendung erregt haben, benötigen wir normalerweise einen Inhalt, der konsumiert werden kann. Normalerweise ist es ein Text, den wir in einen Absatz einfügen, obwohl es auch ein Bild, ein Audio oder ein . sein kann Video.

Zurück zum Absatz, schon das Element

bringt einen vom Basis-CSS vordefinierten Stil mit, aber diese Basis bietet uns auch eine spezielle Art von Absatz, die als . bezeichnet wird das Blei, Wenn Sie diese Klasse zu einem Absatz hinzufügen, heben wir sie sofort von den anderen ähnlichen ab, da ihre Größe erhöht und einige Eigenschaften der Schriftarten geändert werden.

Sehen wir uns im folgenden Code an, wie das funktioniert, das wir gerade erklärt haben. In diesem Beispiel werden wir zwei Absätze erstellen, wobei der erste die Klasse hat das Blei, auf diese Weise werden wir sehen, wie es hervorgehoben wird, natürlich funktioniert das alles, wenn wir es haben Bootstrap Sehen wir uns in unserem Projekt unseren Code an:

 Verwenden der Base Bootstrap-Datei
Speck ipsum schmerz amet in laboris magna ullamco, in trommelstock schmerzen boudin eiusmod andouille leberkas schweinebauch ex. ex. Beef Ribs Magna Corned Beef Incididunt id. Kevin Hinterteil im Schwanz Biltong. Filet Mignon Truthahn Quis, Hirschkeule Ullamco Jerky nicht voluptate Schweinelende.

Speck ipsum schmerz amet in laboris magna ullamco, in trommelstock schmerzen boudin eiusmod andouille leberkas schweinebauch ex. ex. Beef Ribs Magna Corned Beef Incididunt id. Kevin Hinterteil im Schwanz Biltong. Filet Mignon Truthahn Quis, Hirschkeule Ullamco Jerky nicht voluptate Schweinelende.

Lassen Sie uns unser Beispiel ausführen und sehen, wie es in unserem Browser aussieht:

VERGRÖSSERN

Text ausrichten
Eines der Dinge, die auch sehr wichtig sind, ist die Ausrichtung des Textes, da wir manchmal unseren Text im Blocksatz, rechts, mittig oder zwangsweise links ausrichten müssen, obwohl es in CSS Äquivalente gibt, die Eine Klasse dafür erspart uns viel Arbeit und hilft uns auch, dem Code Konsistenz zu verleihen.

Im folgenden Beispiel werden wir sehen, wie wir jede dieser Klassen auf verschiedene Elemente anwenden, und um unseren Code besser lesbar zu machen, werden wir alle Elemente in Absätze setzen. Sehen wir uns den Code an:

 Verwenden der Base Bootstrap-Datei
Speck ipsum dolor amet in laboris magna ullamco, in drumstick dolor boudin eiusmod andouille
leberkas Schweinebauchtraining ex. Beef Ribs Magna Corned Beef Incididunt id.
leberkas Schweinebauchtraining ex. Beef Ribs Magna Corned Beef Incididunt id. leberkas Schweinebauchtraining ex. Beef Ribs Magna Corned Beef Incididunt id. Kevin Rumpf

im Schwanz Biltong. Filet Mignon Truthahn Quis, Hirschkeule Ullamco Jerky nicht voluptate Schweinelende.

Sehen wir uns nun an, wie sich jede Klasse in unserem Browser verhält. Es gibt einen besonderen Fall mit der rechtfertigen, die sehr subtil ist, so dass ihre Wirkung möglicherweise nicht viel zu sehen ist.

VERGRÖSSERN

Listen
Listen sind oft notwendig und nicht ausschließlich, um Dinge aufzulisten, sie sind oft ein wichtiger Bestandteil des Designs. Bootstrap behandelt sie transparent wie die vorherigen Elemente, die wir gesehen haben, die Listen haben einen von der vordefinierten Stil CSS base, wir haben jedoch ein paar Varianten, zum Beispiel eine Auflistung ohne Stile, um Aufzählungszeichen zu vermeiden, und eine Auflistung mit in der Reihe, letzteres macht die Liste horizontal.

Sehen wir uns dann im folgenden Code ein Beispiel für jede dieser Listen an, damit wir sie in unserem Code verwenden können:

 Verwenden der Basis-Bootstrap-Datei
Inline-Liste

Erstes Element
Zweites Element
Drittes Element
Viertes Element
Fünftes Element

Liste ohne Stile

Erstes Element
Zweites Element
Drittes Element
Viertes Element
Fünftes Element

Standardliste

Erstes Element
Zweites Element
Drittes Element
Viertes Element
Fünftes Element

Sehen wir uns nun an, wie es in unserem Browser aussieht, wo wir sehen können, dass die Unterschiede sofort auffallen:

Damit beenden wir dieses Tutorial, wir haben gesehen, dass das Basis-CSS von Bootstrap Es gibt uns eine einheitliche Grundlage, um sicherzustellen, dass Elemente, die wir nicht definiert oder angepasst haben, direkt im Browser in einer bestimmten Weise angezeigt werden und uns so die volle Kontrolle über unsere Anwendung unabhängig vom Browser ermöglicht.