Bootstrap Einführung
Ziel
Bootstrap ist das beliebteste Frontend-Framework, und seine dritte Version (v3.0.0) wurde bereits veröffentlicht. Dieses Tutorial führt Sie in die Grundlagen von Bootstrap 3 ein.
Sie werden außerdem sehen, wie Sie Anpassungen vornehmen können, um dem Framework eine eigene Note zu geben – zum Beispiel das Erstellen von Layouts mit Grids, das Erstellen von Navigationen mit Nav, das Erstellen von Diashows mit Carousel und das Hinzufügen von Drittanbieter-Plugins wie Social-Plugins und Google Maps.
Was ist Bootstrap
Bootstrap ist ein Frontend-Framework für die schnelle Entwicklung von Webanwendungen und Websites.
In der modernen Webentwicklung gibt es mehrere Komponenten, die in nahezu allen Webprojekten benötigt werden.
Bootstrap stellt Ihnen all diese grundlegenden Module zur Verfügung – Raster (Grid), Typografie, Tabellen, Formulare, Schaltflächen (Buttons) und Responsivität.
Darüber hinaus gibt es viele weitere nützliche Frontend-Komponenten wie Dropdowns, Navigationen, Modals, Typehead, Pagination, Carousel, Breadcrumb, Tabs, Thumbnails, Headers und so weiter.
Damit können Sie ein Webprojekt schneller und einfacher aufbauen und starten.
Da das gesamte Framework zudem modular aufgebaut ist, können Sie es mit Ihrem eigenen CSS-Code anpassen oder sogar nach Projektstart grundlegend überarbeiten.
Es basiert auf mehreren bewährten Methoden, und wir glauben, dass dies ein guter Zeitpunkt ist, um mit dem Erlernen moderner Webentwicklung zu beginnen. Sobald Sie die Grundlagen von HTML und JavaScript/jQuery beherrschen, können Sie dieses Wissen in der Webentwicklung anwenden.
Obwohl es die Kritik gibt, dass alle mit Bootstrap erstellten Projekte gleich aussehen und man eine Website erstellen kann, ohne allzu viel über HTML + CSS zu wissen, müssen wir uns vor Augen führen, dass Bootstrap ein universelles Framework ist. Wie bei allem, was universell ist, müssen Sie es anpassen, um es einzigartig zu machen. Wenn Sie es anpassen, müssen Sie tiefer in die Materie einsteigen, und ohne ein solides Fundament in HTML + CSS ist das nicht machbar.
Natürlich gibt es neben Bootstrap viele andere gute Frontend-Frameworks. Welches Framework verwendet wird, bleibt die Entscheidung des Entwicklers, aber Bootstrap ist es definitiv wert, ausprobiert zu werden.
WarumSie es in Ihrem Projekt verwenden solltenBootstrap verwenden?
Herunterladen und Verstehen der Dateistruktur
Sie könnenhttps://github.com/twbs/bootstrap/archive/v3.0.0.zipoderhttps://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zipdie Bootstrap-Version 3.0.0 herunterladen. Wir verwenden den ersten Link, Sie können aber auch den zweiten verwenden.
Darüber hinaus enthält der Code, den wir zum Download bereitstellen, einen über den ersten Link heruntergeladenen Bootstrap-Codeordner. Dieser enthält auch die Datei custom.css mit dem ursprünglichen CSS, das zum Anpassen von Bootstrap verwendet wurde.
Nach dem Entpacken werden Sie feststellen, dass sich im Stammordner bootstrap-3.0.0 einige Dateien und Ordner befinden.
Die Haupt-CSS-Datei – bootstrap.css und ihre minified-Version bootstrap-min.css – befindet sich im Ordner 'css' innerhalb des Ordners 'dist' unterhalb des Stammordners bootstrap-3.0.0.
Innerhalb von 'dist' gibt es einen Ordner 'js', der die Haupt-JavaScript-Datei bootstrap.js und deren minified-Version enthält.
Im Stammordner gibt es einen separaten Ordner 'js', der verschiedene JavaScript-Plugins in separaten Dateien enthält.
Im Ordner 'assets' im Stammverzeichnis finden Sie einen weiteren Ordner 'js'. Hier liegt html5shiv.js des HTML5-Shim, das für die IE8-Unterstützung verwendet wird. Außerdem gibt es eine Datei respond.min.js, die zur Unterstützung von Media Queries in IE8 dient. Dieser Ordner enthält auch jquery.js, wovon die Bootstrap-JS-Plugins abhängen.
Im selben Ordner befindet sich ein Ordner 'ico', der das Favicon und verschiedene Symbole für mobile Geräte enthält.
Der Ordner 'css' im selben Pfad enthält die CSS-Dateien für das Dokument.
Die Ordner '_includes' und '_layouts' enthalten einige Standard-Layoutstrukturdateien, die für ein schnelles Prototyping nützlich sein können.
Der Ordner 'less' im Stammordner enthält einige .less-Dateien. Diese Dateien sind nützlich, wenn Sie auf Basis von LESS entwickeln.
Im Stammordner befinden sich einige Dateien. Einige sind HTML-Dateien für das Basisprototyping, andere sind bower.json und browserstack.json für die Bower-basierte Kompilierung. Außerdem gibt es composer.json und eine YAML-Datei _config.yml.
Anstatt von dem angegebenen Link herunterzuladen, können Sie auch den folgenden Befehl verwenden, um alle CSS- und JS-Dateien zu kompilieren –
$ bower install bootstrap
Sie können das Git-Repository von Bootstrap klonen.
git clone git://github.com/twbs/bootstrap.git
In diesem Tutorial haben wir nur die Zip-Datei heruntergeladen und werden diese Methode nicht verwenden.
Sobald Sie dieses Tutorial durch gearbeitet haben, empfehlen wir Ihnen, das Framework über bower zu installieren, um zu verstehen, wie es funktioniert.
NetDNA unterstützt kompilierte und minifizierte Versionen von Bootstrap-CSS, -JS und anderem Theme-CSS. Sie können diese mit den folgenden Anweisungen einbinden.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Entwicklung mit Bootstrap v3.0.0
Grundlegendes HTML
Das Folgende ist die grundlegende HTML-Struktur, die für unser Projekt verwendet wird.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap V3 template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap-3.0.0/dist/css/bootstrap.min.css.html" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="bootstrap-3.0.0/assets/js/html5shiv.js.html"></script>
<script src="bootstrap-3.0.0/assets/js/respond.min.js.html"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js.html"></script>
</body>
</html>
Bitte beachten Sie, dass die Vorlage folgendes hinzufügt:html5shiv.js und respond.min.js werden verwendet, um die IE8-Unterstützung zu erhalten. Diese Dateien wurden in Bootstrap Version 3 hinzugefügt.
Wir haben den Ordner bootstrap-3.0.0 innerhalb des Ordners twitter-bootstrap im Stammverzeichnis des Webservers abgelegt. Alle von uns erstellten HTML-Dateien werden in twitter-bootstrap abgelegt. Wir erwähnen dies, um unseren Entwicklungsprozess zu vereinfachen.
Anpassung
Wir werdeneinen unverwechselbaren CSS-Box-Stil anpassen. Um die ursprünglichen CSS-Dateien (die sich im dist-Ordner von bootstrap-3.0.0 befinden) nicht zu beschädigen, erstellen wir daher im selben Ordner eine separate CSS-Datei namens custom.css. Dann referenzieren wir diese CSS-Datei in der HTML-Datei direkt nach der ursprünglichen CSS-Datei. Auf diese Weise können wir die Standardstile, die wir ändern möchten, überschreiben, aber wenn Bootstrap aktualisiert wird, werden auch die ursprünglichen CSS-Dateien aktualisiert, ohne unsere Anpassungen zu zerstören. Wir empfehlen Ihnen, diesen Ansatz während der Entwicklung zu befolgen.
Navigation erstellen
Um eine Navigation zu erstellen, fügen Sie den folgenden Code in die HTML-Datei ein, direkt nach dem öffnenden body-Tag.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><a href="new.html" class="navbar-brand">
<img src="logo.png.html"></a></li>
<li class="active"><a href="../index.html">Home</a></li>
<li><a href="price.html">Price</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="../index.html" class="dropdown-toggle" data-toggle="dropdown">Social<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="socials"><g:plusone annotation="inline" width="150"></g:plusone></li>
<li class="socials"><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></li>
<li class="socials"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
</ul>
</li>
</ul>
</nav>
Für die Navigation verwendet Bootstrap die Klasse 'navbar' auf Container-Ebene. Sie wird also dem nav-Element zugewiesen, das die gesamte Navigation enthält.
Wir haben die Klasse 'navbar-inverse' verwendet, um die Standardfarben der Navigationsleiste zu ändern, wobei ein dunkler Farbton anstelle des bisherigen hellen Standards verwendet wird. Die Klasse 'navbar-fixed-top' sorgt dafür, dass die Navigationsleiste oben fixiert bleibt, wenn wir durch die HTML-Seite nach unten scrollen.
In Bootstrap V3.0.0 ist die Verwendung von role="navigation" beim Erstellen einer Navigation eine Neuerung.Bootstrap empfiehlt diese Verwendung, damit die Navigationsleisteleicht zugänglich ist.。
An dieser Stelle haben wir der custom.css-Datei 'padding-top: 80px;' für den body hinzugefügt. Die Pixel, die Sie dem body als oberes Padding hinzufügen, können variieren, aber wenn Sie dies nicht tun, wird der obere Teil des Inhalts nach der Navigationsleiste ausgeblendet.
Innerhalb des Container-nav haben wir eine ungeordnete Liste mit den Klassen 'nav' und 'navbar-nav'. Innerhalb dieser ungeordneten Liste enthält jedes Listenelement einen Link aus der Navigation.
Die Klasse 'navbar-brand' wird verwendet, um den Markennamen darzustellen. Wir haben ein Bild verwendet. Da die Bildhöhe größer ist als die Grundlinienhöhe der Navbar, nehmen wir hier einige Anpassungen vor. Erhöhen Sie die Eigenschaft 'line-height' von '.navbar-nav>li>a' vom ursprünglichen Standardwert 20px auf 50px und ändern Sie die Schriftgröße auf 16px.
Für den ganz rechten Link haben wir ein Dropdown hinzugefügt. Fügen Sie für die 'dropdown' -Klasse, die dem entsprechenden li hinzugefügt wurde, unmittelbar danach einen Anker mit den beiden Klassen 'dropdown-toggle' und 'caret' hinzu. Dieser Anker enthält tatsächlich den Ankertext "social" aus unserem Projekt. Dieses li enthält dann eine ungeordnete Liste, und jedes in der Liste verschachtelte Listenelement enthält die im Dropdown angezeigten Links.
Im Dropdown haben wir Social-Plugins hinzugefügt. Das erste li enthält das Google-Plus-Markup, das zweite li das Facebook-Markup und das dritte li das Markup zur Anzeige des Twitter-Buttons und einige JS-Skripte.
Zusätzlich müssen Sie das folgende Markup und Skript nach dem öffnenden Tag des body hinzufügen, damit der Facebook-Button funktioniert.
<div id="fb-root"></div>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Damit der Twitter-Button funktioniert, fügen wir das folgende Skript vor dem schließenden Tag des body hinzu.
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
Wir verwenden die folgenden Stile, um den Social-Buttons mit der Klasse 'socials' ein zusätzliches Styling zu verleihen.
.socials {
padding: 10px;
}
Damit ist unsere Navigation abgeschlossen.
Slideshows mit Karussell erstellen
Um eine Slideshow unterhalb der Navigationsleiste auf der Homepage des Projekts zu erstellen, verwenden wir das folgende Markup.
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="computer.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Large Desktops are everywhere</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="mobile.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Mobiles are outnumbering desktops</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="cloud1.jpg.html" alt="...">
<div class="carousel-caption">
<h1>Enterprises are adopting Cloud computing fast</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="../index.html" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="../index.html" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Es gibt vier Abschnitte im Karussell. Der Hauptcontainer wird über ein div-Tag mit der Klasse 'carousel slide' definiert.
Dann gibt es eine geordnete Liste mit der Klasse 'carousel-indicators'. Jedes Listenelement im ol stellt eine Folie dar. Wenn die Seite geladen wird, hat die standardmäßig geladene Folie die Klasse 'active'. Bei der Darstellung werden diese als kleine Kreise unterhalb der Beschriftung angezeigt.
Ensprechend wird jede Folie (Bild) in ein div-Tag mit der Klasse 'item' platziert. Jedes Element ist in ein div mit der Klasse 'carousel-caption' verschachtelt. Das carousel-caption enthält etwas Markup, das als Beschriftung zusammen mit dem Bild angezeigt wird. Der Absatz enthält ein h1 und einen Button; Sie können auch Ihr eigenes Markup einbinden.
Der letzte Teil dient der Steuerung der nächsten/vorherigen Folie. Dazu werden die Klassen 'left' und 'carousel-control' für die Definition der vorherigen und die Klassen 'right' und 'carousel-control' für die Definition der nächsten Folie verwendet.
Die Klassen 'icon-prev' und 'icon-next' werden für die Symbole für Weiter und Zurück verwendet.
Wir habeneinige Anpassungen am Standard-Karussell vorgenommen.Wir möchten, dass die Beschriftungen, Indikatoren und Weiter/Zurück-Symbole einige Pixel über ihren Standardpositionen gerendert werden.
Um dies zu erreichen, fügen wir die folgenden Stile in der Datei custom.css hinzu.
.carousel-inner .item .carousel-caption {
position:absolute;
top: 200px
}
.carousel-indicators {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom:0;
}
.navbar-nav>li>a {
line-height: 50px;
font-size: 16px
}
Wir haben auch das h1 angepasst und ihm einen unteren Außenabstand von 30 Pixeln hinzugefügt.
h1 {
margin-bottom: 30px
}
Responsive Bilder
Sie haben vielleicht bemerkt, dass wir für jedes Bild in der Slideshow die Klasse 'img-responsive' verwendet haben. Dies ist ein neues Feature in Bootstrap v3.0.0.Durch die Verwendung der Klasse 'img-responsive' im img-Tag macht Bootstrap das Bild responsive.。
Grids erstellen
Unterhalb der Slideshow verwenden wir ein Grid, um Inhalte zu platzieren. Starten Sie ein Grid mit einem div, das die Klasse 'container' hat. Beachten Sie, dass wir eine responsive Website entwickeln werden und der Container hier im Gegensatz zu früheren Versionen von Bootstrap eine einzige Klasse besitzt und standardmäßig responsive ist.
Der Container-div verschachtelt mehrere divs mit der Klasse 'row' (drei in der ersten Reihe, sechs in der zweiten Reihe), um Reihen im Bootstrap-Grid zu erstellen.
Jede Zeile hat ein div mit einer 'col-x-y'-Klasse, um Spalten zu erstellen. Der Wert von x kann sein: xs für Mobilgeräte, sm für Tablets, md für Laptops und kleinere Desktop-Bildschirme sowie lg für große Desktop-Bildschirme. Dies ist der erste Ansatz. Der Wert von y kann eine beliebige positive ganze Zahl sein, aber die Gesamtzahl der Spalten in einem Raster darf 12 nicht überschreiten. In unserem Projekt haben wir der Einfachheit halber lg verwendet, aber da wir das getan haben, möchten Sie das Projekt möglicherweise auf einem Telefon oder Tablet anzeigen, um es zu vergleichen.
In einem späteren Tutorial werden wir ein vollständiges Tutorial zum Bootstrap-Rastersystem haben, um dessen faszinierende responsive Funktionen zu erkunden.
In diesem Beispiel möchten wir, dass die drei Spalten in der ersten Zeile gleich breit sind, daher verwenden wir 'col-lg-4' für alle Spalten. In der zweiten Zeile möchten wir, dass die sechs Spalten gleich breit sind, daher verwenden wir 'col-lg-2' für alle Spalten.
Unten sehen Sie das Markup für ein Raster mit zwei Zeilen. Die erste Zeile hat drei Spalten und die zweite Zeile hat sechs Spalten.
<div class="row barone"> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/php.png"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/mysql-logo.jpg"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/javascript-logo.png"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/java.jpg"></p> </div> <div class="col-lg-2"> <p><img src="../wp-content/uploads/2013/10/postgresql.png"></p> </div> </div>
Wir beenden das Raster mit einem hr und einem Footer mit dem folgenden Markup.
<hr> <p>Copyright@2013-14 by ToDo App.</p>
Verwendung von Tabellen
Auf der Seite price.html unseres Projekts haben wir eine Tabelle verwendet, um eine Preisliste darzustellen, wobei das Markup unten gezeigt wird.
<table class="table table-bordered">
<thead>
<tr>
<th>Features</th>
<th>Individual</th>
<th>Small Team</th>
<th>Medium Team</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td><h3>No. Of users</h3></td>
<td><span class="badge">One</span></td>
<td><span class="badge">Five</span></td>
<td><span class="badge">Fifteen</span></td>
<td><span class="badge">Unlimited</span></td>
</tr>
<tr>
<td><h3>Pro training</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Forum Support</h3></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>In person support</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Weekly webinars</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Price</h3></td>
<td><button type="button" class="btn btn-warning btn-lg">$9/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$19/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$49/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$99/Month</button></td>
</tr>
<tr>
<td></td>
<td><button type="button" class="btn btn-success btn-lg">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
</tr>
</tbody>
</table>
Wir verwenden die Klassen 'table' und 'table-bordered' aus der originalen Bootstrap-CSS-Datei. Wir haben sie jedoch angepasst, indem wir das folgende CSS in der Datei customize.css hinzugefügt haben, um einige Anpassungen vorzunehmen, damit die Tabelle anders aussieht.
th {
background-color: #428BCA;
color: #EC8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}
Verwendung von Badges
Wir verwenden die 'badge'-Klasse, um Text in der Tabelle anzuzeigen. Wir haben eine benutzerdefinierte Badge-Klasse mit dem folgenden CSS.
.badge {
background-color: #428BCA;
color: #fff;
font-size: 22px;
}
Für diese Seite und die Seite contact.html haben wir eine weitere CSS-Regel in customize.css hinzugefügt.
.container > h1 {
text-align: center;
}
Dies zentriert das h1.
Verwendung von Formularen
In der Datei contact.html haben wir drei Spalten erstellt. In die erste Spalte betten wir ein Formular ein. Das Formular verwendet Standardstile.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="country" class="col-lg-2 control-label">Country</label>
<div class="col-lg-10">
<select>
<option>USA</option>
<option>India</option>
<option>UK</option>
<option>Autralia</option>
</select>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea rows="5" cols="50"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
Die Klasse 'form-horizontal' hält das Formular horizontal ausgerichtet.Beachten Sie, dass wir role="form" für die Barrierefreiheit hinzufügen. Dies ist eine neue Funktion in Version 3.0.0.
Um jedes Formularelement zu positionieren, verwendet Bootstrap 3.0.0 eine neue Klasse 'form-group'.
Auf dieser Seite, in der zweiten Spalte des Rasters, platzieren wir einfach etwas Text.
Hinzufügen von Google Maps
Auf der Seite contact.html, in der dritten Spalte des Rasters, haben wir eine Google Map hinzugefügt. Dazu haben wir das folgende Markup verwendet.
<div id="map_canvas"></div> </div>
Das folgende JS wird dem head-Bereich der HTML-Datei hinzugefügt.
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(23.244066, 87.861276),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
Vor dem erwähnten JS müssen Sie das folgende script-Tag hinzufügen.
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Damit die Karte korrekt gerendert wird, müssen Sie die folgenden Stile zu custom.css hinzufügen.
#map_canvas {
width: 400px;
height: 400px;
}
So wird ein einfaches Projekt auf Basis von Bootstrap V3.0.0 erstellt. Aber wir haben nur an der Oberfläche gekratzt; spätere Kapitel werden detailliertere Erklärungen liefern.
Andere Erweiterungen