Gestalten Sie ein Webprojekt mit Bootstrap 2.0

Die Hauptaufgabe beim Erstellen einer Website besteht darin, das Design zu gestalten, die Struktur mit xhtml und css zu erstellen, um die Inhaltsräume zu definieren, um uns bei dieser Aufgabe zu helfen, gibt es Standard-Frameworks wie 960gs oder Bootstrap.
In diesem Fall sehe ich Bootstrap, das von Twitter entwickelt und verwendet wurde.
Bootstrap ist ein Framework, das entwickelt wurde, um den Prozess der Erstellung von Webdesigns zu vereinfachen. Dafür bietet es eine Reihe von bereits programmierten CSS-Klassen und Javascript-Dateien, die die Entwicklung von Aufgaben ermöglichen wie:

• Webdesign, das in aktuellen Browsern funktioniert, ohne viele Änderungen vornehmen zu müssen.

• Ein Webdesign, das auf verschiedenen Geräten und in verschiedenen Maßstäben und Auflösungen korrekt angezeigt werden kann.

• Bessere Integration mit den am häufigsten verwendeten Bibliotheken wie jQuery.

• Ein solides Design basierend auf aktuellen Tools und Standards wie CSS3 / HTML5

Wir beginnen ein Beispiel, indem wir das Framework herunterladen http://getbootstrap.com/2.3.2/

Wir entpacken die Datei und sehen 2 Verzeichnisse mit den Bootstrap-Komponenten
Wir erstellen eine index.html-Datei, die wir erklären werden.
Wir erstellen ein HTML mit den grundlegenden Komponenten:

 Design mit Bootstrap / * Hier geht's zum Inhalt * / 

Bootstrap unterteilt die 980px-Struktur in 12 Spalten mit 60 Pixeln, um Inhalte zu platzieren. Die Blöcke, die erstellt werden können, gehen von 1 bis 12 mit der spanx-Klasse, sodass span1 ein 60-Pixel-Block ist. Ein Beispiel für alle Inhaltsblöcke, die wir haben können.

Wir werden eine Grundstruktur aus Webheader, linker Spalte, Inhalt und Fußzeile erstellen. Alle Klassen sind bereits in den Frameworks enthalten

// allgemeiner Containerrahmen// Definiere den Anfang einer Reihe von Blöcken// 12-Spalten-Block gleich 980px für den Header;// 2 Spaltenblock gleich 120px für die Spalte;// 10-Spalten-Block gleich 600px für Inhalt;// 12-Spalten-Block gleich 980px für die Fußzeile;

VERGRÖSSERN

Komponenten zum Erstellen eines Menüs
Im Kopfteil können Sie ein Listenmenü mit den Navbar-Klassen einfügen, um ein Menü zu erstellen:

// 12-Spalten-Block gleich 980px für den Header;

Thema 1
Thema 2
Thema 3

So können wir unsere Speisekarte fertig sehen, ohne mit CSS umgehen zu müssen.

VERGRÖSSERN

Wenn Sie dann Bootstrap erweitern möchten, indem Sie unsere eigenen CSS-Regeln erstellen, erstellen wir eine weitere Datei default.css und fügen dort unseren Code so ein, dann fügen wir unsere Klasse in den Beispielcode ein:

Wir erstellen einen Inhalt in der Inhaltsspalte

// 10-Spalten-Block gleich 600px für Inhalt;
Wir erstellen Inhalte mit Bootstrap, um das Tutorial zu erklären
// ein leerer Absatz entspricht dem Verlassen einer Zeile oder eines Leerzeichens Siehe Bootstrap

Das Ergebnis beim Aktualisieren unseres Beispiels ist:

VERGRÖSSERN

Das Beispiel ist keine komplette Website oder mit einer nennenswerten Ästhetik, aber wie wir sehen, können wir mit wenig Aufwand eine Demo erstellen oder Vorlagen erstellen, ohne mehr als einen Texteditor zu benötigen und mit der gesamten standardisierten Plattform viel Arbeit zu sparen.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben

Hat Ihnen dieses Tutorial geholfen?

Wenn nicht

HILFE, DIESES TUTORIAL ZU VERBESSERN!

Glauben Sie, dass Sie dieses Tutorial korrigieren oder verbessern können? Sie können Ihre Edition mit den Änderungen senden, die Sie für sinnvoll erachten.
0 Benutzer haben dieses Tutorial bearbeitet. Bearbeiten Sie und werden Sie ein anerkannter Experte!
Bearbeiten Sie dieses Tutorial

ÄHNLICHE TUTORIALS

Horizontaler Balken mit Hover-Effekt in HTML5, CSS3 und BootstrapAbrufen von Kundenkoordinaten mit Google Maps API in JavaScript (HMTL5, CSS3 und Bootstrap)Lernen, mit HTML5 + Bootstrap eine responsive Diashow zu erstellenBootstrap Framework erweiterte WebschnittstellenentwicklungBootstrap verlängernNetbeans: Erstellen Sie HTML5-Projekte mit Vorlagen und PluginBootstrap-BenutzeroberflächenVerwenden der Bootstrap-Komponenten

Keine Kommentare, seien Sie der Erste!

Warten Sie nicht länger und geben Sie Solvetic einHinterlassen Sie Ihre Kommentare und nutzen Sie das Benutzerkonto Machen Sie mit!

• Benutzerkonto erstellenMelden Sie sich KOSTENLOS an, um Ihr Solvetic-Konto zu habenEinen Account registrieren
• IdentifizierenHaben Sie bereits ein Konto? Hier anmeldenIdentifizieren Sie mich in meinem Konto