Bootstrap Framework erweiterte Webschnittstellenentwicklung

In einem weiteren Tutorial wurde eine Einführung in Bootstrap-Benutzeroberflächen erklärt und auch ein Tutorial zum Entwerfen eines Webprojekts mit Bootstrap 2.0, in diesem gehen wir auf die in der Webentwicklung am häufigsten verwendeten Oberflächen und Elemente ein.
Wir können Bootstrap herunterladen und in einem Verzeichnis auf unserer Website ablegen oder es verwenden, indem wir es mit Ihrer Online-Bibliothek verknüpfen.
Bootstrap ist ein Open-Source-Framework und offen für eine schnellere und einfachere Webentwicklung.
Bei der Suche finden wir viele Beiträge aus der CSS-Community und benutzerdefinierte Komponenten und Designvorlagen, die andere Benutzer erstellt und zur Verfügung gestellt haben, es gibt viele Komponenten zum Erstellen von Navigationsleisten, modalen Fenstern und Popups, Bildkarussells, Menüs und vielem mehr als JavaScript- und Jquery-Plugins zur Validierung von Formularen und anderen Funktionalitäten

Tabellen und Zeilen mit Effekten

Bootstrap hat bereits CSS-Stile und -Effekte programmiert, mit denen wir beispielsweise die Farbe der Zeilen in einer Tabelle und beim Überfahren mit der Maus ändern können.

Der Code wird der folgende sein:

Tabelle und Zeilen mit Effekt
 

 
 
Fahrzeug
 
Quelle
 
Zustand
 
Preis
 

 

 

 
 
Fiat 500
 
Madrid
 
Gebraucht
 
9690€
 

 
 
Honda Accord
 
Barcelona
 
Gebraucht
 
14500€
 

 
 
Renault Lagune
 
Toledo
 
Gebraucht
 
2800€
 

 

 

Als nächstes erstellen wir ein Menü mit Untermenü, das nur Bootstrap-CSS verwendet:

VERGRÖSSERN

Der Code wird der folgende sein:

Mehrstufiges Menü mit CSS Bootstrap
Kundenvertriebsadministrator 

System
Benutzer
Einstellungen

Berechtigungen
Server

Vps-Server A
Vps-Server B


Ressourcenverbrauch
Sicherung

Wir erklären die Struktur und ihre vordefinierten Klassen. Die Klasse definiert die Größe des Webs, das standardmäßig in Bootstrap gefunden wird.

 .container {Breite: 1170px; } 

Die folgenden Zeilenklassen bieten einen linken und rechten Rand auf der gesamten Seite:

 .die Zeile {; Rand rechts: -15px; } 

Die Dropdown-Menü-Klasse wird bereits mit Bootstrap und den btn btn-primary button-Klassen geliefert. Wir werden das Untermenü und die Level-Klassen hinzufügen, um das Untermenü generieren zu können. Denken Sie daran, dass Klassen Hierarchien haben. Wenn wir also dieselbe Klasse benennen, die wir in Bootstrap haben, und ihr ein Attribut hinzufügen, hat die letzte Deklaration Vorrang.
Dies gilt für den Fall, dass wir ein Attribut für die Verschiebung nach links hinzufügen, obwohl die Klasse bereits in bootstrap.min.css definiert ist

 .Dropdown-Menü {links: 150px; } 

CSS- und jquery-Popup mit HTML-Inhalten
Wir verwenden die Popover-Funktion, die ein Popup anzeigt, wenn ein Link mit der Maus bewegt wird und die Inhaltsvariable den anzuzeigenden HTML-Code enthält.
Wir nehmen die vorherige Tabelle und fügen eine Spalte für ein technisches Datenblatt hinzu.
In jedem Link haben wir den folgenden Satz und dann mit der ID werden wir ein Skript aufrufen.

 
 

 
 
Fahrzeug
 
Quelle
 
Zustand
 
Preis
 
Fotos
 

 

 

 
 
Fiat 500
 
Madrid
 
Gebraucht
 
9690€
 
Datenblatt
 

 
 
Honda Accord
 
Barcelona
 
Gebraucht
 
14500€
 
Datenblatt
 

 

 

 

Wenn wir eine breite Liste haben, können wir eine JQuery-Funktion erstellen, mit der wir dynamische Inhalte senden können, die beispielsweise aus einer Datenbank extrahiert wurden.

Spalten und Blöcke auf der Seite

Bootstrap basiert auf einer Breite von 1200 Pixeln, aufgeteilt in 12 Blöcke, die 99% der Struktur des Webs abdecken, jeder Block bedeckt 8,3333%, was 100 Pixel entspricht und hat auch einen Platz von 1 Pixel.
Immer die Kombination von Blöcken in derselben Zeile, um zum Beispiel 12 hinzuzufügen:
Zwei Blöcke von 3 und einer von 6

Bootstrap-Blöcke
Col-md-3 Block von 300px.
Col-md-6-Block von 600px.
Col-md-3 Block von 300px.
800px col-md-8-Block.

Unten setzen wir eine Blockgröße von 8, die 800 Pixel beträgt:

Diese Blöcke reagieren, wie sie im Bootstrap-CSS konfiguriert sind. Hier sehen wir ein Beispiel dafür, wie sich die Blöcke an einen Bildschirmwechsel eines mobilen Geräts anpassen.

So passen Sie Bootstrap an, um Stile und Funktionen zu ändern

Um Stile und Funktionalitäten zu erstellen, die mit Bootstrap kompatibel sind, müssen wir sie wie jede andere CSS- oder js-Bibliothek als weiteres Framework des Projekts verwenden, in diesem Fall wird sie für Design und Funktionalität im Browser des Benutzers verwendet. Wir sollten es vermeiden, die ursprünglichen Bibliotheken zu reformieren, sondern unsere eigenen andocken. Wenn die Bootstrap-Entwickler also ein Update veröffentlichen, werden wir keine Probleme haben, die neuen zu integrieren, wenn wir unsere Änderungen getrennt halten.
Um unsere eigenen Stylesheets zu definieren, müssen wir eine neue CSS-Styles-Datei erstellen, um unsere Änderungen zu definieren, ohne das ursprüngliche CSS zu beeinflussen. Erinnern wir uns zum Beispiel an die Hierarchie.
Wenn in Bootstrap css bootstrap.min.css

 .col-md-3 {Breite: 25%; } 

Und wir wollen, dass es einen Rahmen hat, dann können wir in einer separaten Datei meine style.css deklarieren:

 .borderojo {Rand: 1px durchgehend rot} 

Dann rufen wir auf der Seite beide Dateien auf

Im Block wenden wir es wie folgt an:

Col-md-3 Block von 300px.

Dies wäre gleichbedeutend mit einer Deklaration wie folgt:

 col-md-3 {Breite: 25%; Rand: 1px durchgehend rot; } 

Wenn es aus irgendeinem Grund zwei ähnliche Aussagen enthält, nehmen wir an

 .borderojo {Grenze: 1px durchgehend rot; } .clientblock {Rand: 1px durchgehend blau; }
Col-md-3 Block von 300px.

Es gilt das zuletzt verkündete Urteil. Daher hat der Block einen blauen Rand.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