Latest web development tutorials

Bootstrap Profil

Ziel

Bootstrap ist die beliebteste Front-End-Rahmen, hat seine dritte Version (v3.0.0) freigegeben. Dieses Tutorial führt Sie nehmen dem Lernen zu beginnen Bootstrap 3.

Sie werden auch sehen, wie verschiedene Rahmen Individuellen Rahmen Funktionen zu benutzen, wie zum Beispiel ein Gitter mit dem Layout zu erstellen, wird die Navigation durch nav erstellt, mit Drop-Down-Box carousal erstellen, fügen Social Plug-Ins und Google Map und andere Drittanbieter-Plug-Ins.

Screenshot der Demo


Was ist Bootstrap

Bootstrap ist ein Front-End-Framework für die schnelle Entwicklung von Web-Anwendungen und Websites.

In der modernen Web-Entwicklung gibt es mehrere Komponenten zu fast allen Web-Projekten benötigt werden.

Bootstrap bietet Ihnen alle diese Basismodule - Grid, Typografie, Tabellen, Formulare, Buttons und Ansprechbarkeit.

Darüber hinaus gibt es viele andere nützliche Front-End-Komponenten, wie Auswahllisten, Navigation, Modalverben, Typehead, Paginieren, Carousal, Paniermehl, Tab, Thumbnails, Kopf- und so weiter.

Mit diesen können Sie ein Webprojekt, zu bauen und lassen Sie es zu leichter und schneller laufen.

Darüber hinaus, da der gesamte Rahmen auf Modulen basiert, können Sie Ihre eigenen CSS oder sogar eine große Korrektur nach dem Start des Projekts anpassen platzieren.

Es ist auf mehrere Best Practices basieren, denken wir, dies ist ein guter Platz moderne Web-Entwicklung Gelegenheit Lernen zu beginnen, sobald Sie die Grundlagen von HTML und JavaScript / jQuery gemeistert haben, können Sie dieses Wissen in Web-Entwicklung anwenden können.

Obwohl einige Kritiker, alle von Bootstrap gebauten Projekten gleich aussehen, brauchen Sie nicht zu viel zu wissen über HTML + CSS Wissen kann eine Website zu bauen. Allerdings müssen wir verstehen, ist Bootstrap einen gemeinsamen Rahmen, wie jede andere gemeinsame Dinge, die Sie brauchen, um so anpassen, dass es einzigartig machen. Wenn Sie anpassen möchten, müssen Sie eingehende Studie, gibt es keine gute HTML + CSS Basis ist nicht machbar.

Bootstrap außer natürlich, es gibt viele andere gute Frontrahmen, mit dem Rahmen die Entwicklung der Personalauswahl, aber Bootstrap ist auf jeden Fall einen Versuch wert.

Warum sollte das Projekt Bootstrap verwenden?


Laden Sie die Datei-Struktur und zu verstehen,

Sie können wählen aus https://github.com/twbs/bootstrap/archive/v3.0.0.zip oder https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist .zip herunterladen Bootstrap Version 3.0.0 auf. Wir sind die erste, können Sie die zweite verwenden.

Darüber hinaus bieten wir zum Download Code einen Link enthält die erste durch den Bootstrap-Code Ordner zum Download bereit. Diese Seite enthält auch das Original verwendet, um Bootstrap css von custom.css anpassen.

Nach dem Auspacken werden Sie, im Stammordner Bootstrap-3.0.0 Einige Dateien und Ordner finden.

Die wichtigsten CSS-Datei - bootstrap.css und seine vereinfachte Version von Bootstrap-min.css, befindet sich im Stammordner 'dist' Ordner 'CSS' Bootstrap-3.0.0-Datei unter dem Ordner.

Im "dist" im Inneren gibt es einen 'js' Ordner mit den wichtigsten JavaScript-Datei bootstrap.js und seine vereinfachte Version enthält.

Datei in der Wurzel, ist es eine separate 'js' Ordner mit den verschiedenen Dateien verschiedene JavaScript-Plug-ins enthält.

In der Stammdatei in "Assets", werden Sie eine andere 'js' Ordner. Dies ist ein Ort mit HTML5 Shim von html5shiv.js, für IE8-Unterstützung zu erhalten. Es gibt auch eine respond.min.js Datei IE8 Multimedia-Abfragen zu unterstützen. Dieser Ordner enthält auch die js Plugin Bootstrap abhängig jquery.js.

Im selben Ordner gibt es einen 'ico' Ordner, der eine Vielzahl von mobilen Geräten Icons und Favicon Symbol enthält.

In der 'CSS' denselben Pfad Ordner enthält die CSS-Datei das Dokument.

'_includes' Und '_layouts' Ordner enthält einige Standard-Layout-Struktur des Dokuments, das nützliche Design für das Rapid Prototyping sein kann.

Root-Ordner 'weniger' Ordner enthält einige .Weniger Datei. Wenn Sie entwickelt werden soll basierend auf LESS können diese Dateien nützlich sein.

Im Stammordner gibt es einige Dateien. Einige sind für die grundlegende prototyping HTML-Dateien verwendet, von denen einige basieren auf Bower für kompilierte bower.json, browserstack.json. Darüber hinaus gibt composer.json und eine YAML Datei _config.yml.

Darüber hinaus aus dem gegebenen Link heruntergeladen werden, können Sie auch den folgenden Befehl verwenden können alle CSS, JS-Dateien zu kompilieren -

$ bower install bootstrap

Sie können die Git Bootstrap Bericht kopieren

git clone git://github.com/twbs/bootstrap.git

Für dieses Tutorial haben wir nur die Zip-Datei heruntergeladen haben, ist es nicht verwenden.

Nachdem Sie dieses Tutorial lernen, empfehlen wir Ihnen, Montagerahmen zu Bower, um zu sehen, wie es funktioniert.

NetDNA Unterstützung Zusammenstellung und vereinfachte Version des Bootstrap CSS, Js und andere CSS-Themen. Sie können sie die folgende Aussage zitieren

<!-- 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>

mit Bootstrap v3.0.0 Entwickelt

Basic HTML

Im Folgenden sind die grundlegende HTML-Struktur für unser Projekt

<! DOCTYPE html>
<Html>
  <Head>
    <Titel> Bootstrap V3 template </ title>
    <Meta name = "Ansichtsfenster" content = "width = device-width, initial-scale = 1.0"?>
    <! - Bootstrap ->
    <Link href = "Bootstrap-3.0.0 / dist / css / bootstrap.min.css" rel = "stylesheet" media = "screen">

    <! - HTML5 Shim und Respond.js IE8-Unterstützung von HTML5-Elemente und Medien-Anfragen ->
    <! - [If lt IE 9]>
      <Script src = "Bootstrap-3.0.0 / assets / js / html5shiv.js"> </ script>
      <Script src = "Bootstrap-3.0.0 / assets / js / respond.min.js"> </ script>
    <! [Endif] ->
  </ Head>
  <Body>
    <H1> Hallo, Welt! </ H1>

    <! - JQuery (notwendig für die Bootstrap-JavaScript-Plugins) ->
    <Script src = "// code.jquery.com/jquery.js"> </ script>
    <! - Fügen Sie alle kompilierten Plugins (siehe unten), oder sind einzelne Dateien nach Bedarf ->
    <Script src = "Bootstrap-3.0.0 / dist / js / bootstrap.min.js"> </ script>
  </ Body>
</ Html>

Bitte beachten Sie, dass die Vorlage und das hinzugefügt html5shiv.js respond.min.js für den Erhalt der IE8 - Unterstützung. In Bootstrap - Version 3 wurde auf diese Dateien hinzugefügt.

Wir twittern-Bootstrap-Datei im Root-Verzeichnis des Web-Server-Ordner hat es Bootstrap-3.0.0-Ordner abgelegt wurde. Alle HTML-Dateien, die wir schaffen in der Twitter-Bootstrap platziert werden. Der Grund, illustrieren diesen Punkt, um unseren Entwicklungsprozess zu rationalisieren.

anpassen

Wir werden verschiedene CSS - Box - Stil anpassen. Daher wird auf der Grundlage der ursprünglichen CSS-Dateien nicht auf (die sich Bootstrap-3.0.0 des dist-Ordner) zerstören im selben Ordner, werden wir eine separate CSS-Datei mit dem Namen custom.css erstellen. Dann sind wir in der HTML-Datei, unmittelbar nach der ursprünglichen CSS-Datei, verweisen auf die CSS-Datei. Auf diese Weise können wir den Standard-Stil, den wir ändern möchten außer Kraft setzen, wenn jedoch die Bootstrap-Upgrade wird die ursprüngliche CSS-Datei zerstören nicht unsere eigene auf der Basis aktualisiert. Wir empfehlen auch, dass Sie in den Entwicklungsprozess, diesen Ansatz verfolgen.

erstellen Navigation

Um eine Navigation, in der HTML-Datei, gefolgt von dem Körper nach dem Start-Tag erstellen, fügen Sie den folgenden Code ein.

<Nav class = "navbar navbar-inverse navbar-Festplatte" role = "Navigation">
  <Ul class = "nav navbar-nav">
  <Li> <a href="new.html" class="navbar-brand">
<Img src = "logo.png"> </a> </ li>
  <Li class = "aktiv"> <a href="#"> Startseite </a> </ li>
  <Li> <a href="price.html"> Preis </a> </ li>
  <Li> <a href="contact.html"> Kontakt </a> </ li>
  <Li class = "Dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Social <b class = "Caret"> </ b> </a>
        <Ul class = "Drop-Down-Menü">
          <Li class = "socials"> <g: plusone Anmerkung = "inline" width = "150"> </ g: plusone> </ li>
          <Li class = "socials"> <div class = "fb-like" data-href = "https://developers.facebook.com/docs/plugins/" data-width = "Die Pixelbreite des Plugins" Daten -Höhe = "die Pixelhöhe des Plugins" Daten-color = "light" data-layout = "Standard" Daten-action = "wie" Daten-show-Gesichter = "true" Daten-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 (e) [0]; if {js = d.createElement (n) (d.getElementById (id)!); Js. id = id; js.src = "// platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (Dokument," Drehbuch "," twitter-wjs "); < / script> </ li>
       </ Ul>
      </ Li>
  </ Ul>
</ Nav>

Für die Navigation Bootstrap Verwendung "navbar" Klasse in der Container-Hierarchie. Daher wird es die gesamte Navigations nav Element zu halten zugeordnet.

Wir haben 'navbar-inverse "Klasse verwendet die Standardfarbe der Navigationsleiste zu ändern, die Verwendung von Licht vor Einbruch der Dunkelheit statt die Standardeinstellung. "Navbar-Festplatte" Klasse stellt sicher, dass, wenn wir nach unten scrollen HTML-Seite, die Navigationsleiste am oberen Rand der festen Position.

In Bootstrap V3.0.0, wenn die Navigation erstellt wird , wenn die Rolle mit = "Navigation" ist neu. Bootstrap empfehlen eine solche Verwendung, für den einfachen Zugriff auf die Navigationsleiste.

An dieser Stelle haben wir den Körper des Dokuments in custom.css zu erhöhen 'padding-top: 80px; ". Sie fügen an den Körper als die Oberseite der gefüllten Pixel kann unterschiedlich sein, aber wenn Sie dies tun, der obere Teil der Navigationsleiste nach, werden ausgeblendet.

In dem Behälter nav, wir haben wir eine Klasse von "nav" und "navbar-nav 'ungeordnete Liste. In dieser ungeordneten Liste jedes Listenelement enthält einen Navigationslink.

"Navbar-Marke" Klasse für einen Markennamen zu präsentieren. Wir haben ein Bild verwendet. Da die Höhe der Bildhöhe ist größer als die Basisnavigationsleiste, wo wir einige Anpassungen machen. Die ".navbar-nav> li> a '' line-height 'Eigenschaft von dem ursprünglichen Standard 20px 50px auf, um die Schriftgröße 16px ändern.

Der Link auf der rechten Seite haben wir die Drop-Down-Box erhöht. Für verwandte li auf die "Drop-Down" Klasse hinzugefügt, gefolgt ein "Drop-Down-Toggle 'durch Hinzufügen und' caret" Anker mit zwei Klasse. Der Anker unseres Projekts tatsächlich enthält Ankertext sozial. Diese li enthält eine ungeordnete Liste, jedes Listenelement in einer verschachtelten Liste werden in das folgende Feld enthält den Link angezeigt.

Im Drop-Down-Box, dass wir ein solches Plugin hinzugefügt. Der erste enthält eine li Google Plus Marke, und der zweite enthält die Facebook-li-Tag, und die dritte enthält die Anzeige li-Tag Twitter-Buttons und einige js Skript.

Zusätzlich Sie nach dem Body-Tag beginnen müssen, fügen Sie das folgende Markup und Scripting zu Facebook-Taste funktioniert machen

<Div id = "fb-root"> </ div>

(Funktion (d, s, id) {
  var js, fjs = d.getElementsByTagName (e) [0];
  if (d.getElementById (id)) return;
  js = d.createElement (e); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore (js, fjs);
} (Dokument, 'Skript', 'Facebook-jssdk'));

Zum Twitter-Taste funktioniert, haben wir am Ende vor dem Body-Tag, fügen Sie das folgende Skript

(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 den folgenden Stil etwas mehr Stil hinzufügen zu "socials" Klasse von sozialen Tasten.

.socials {
padding: 10px;
}

Damit ist unsere Navigation.

Erstellen einer Diashow von carousal

Um Startseite Navigationsleiste zu projizieren, eine Diashow zu erstellen, werden wir die folgenden Tags verwenden

<Div id = "Karussell-Beispiel-generic" class = "Karussell slide">
  <! - Indikatoren ->
  <Ol class = "Karussell-Indikatoren">
    <Li Daten-target = "# Karussell-Beispiel-generic" Daten-slide-to = "0" class = "aktiv"> </ li>
    <Li Daten-target = "# Karussell-Beispiel-generic" Daten-slide-to = "1"> </ li>
    <Li Daten-target = "# Karussell-Beispiel-generic" Daten-slide-to = "2"> </ li>
  </ Ol>

  <! - Wrapper für Dias ->
  <Div class = "Karussell-Innen">
    <Div class = "item aktiv">
      <Img src = "computer.jpg" alt = "...">
      <Div class = "Karussell-caption">
        <H1> Große Desktops sind überall </ h1>
        <P> <button class = "btn btn-Erfolg BTN-lg"> jetzt 30 Tage kostenlos testen Versuchen </ p>
      </ Div>
    </ Div>
    <Div class = "item">
      <Img src = "mobile.jpg" alt = "...">
      <Div class = "Karussell-caption">
        <H1> Mobiles sind outnumbering Desktops </ h1>
        <P> <button class = "btn btn-Erfolg BTN-lg"> jetzt 30 Tage kostenlos testen Versuchen </ p>
      </ Div>
    </ Div>
<Div class = "item">
      <Img src = "cloud1.jpg" alt = "...">
      <Div class = "Karussell-caption">
        <H1> Unternehmen sind die Annahme Wolke schnell </ h1> Rechen
        <P> <button class = "btn btn-Erfolg BTN-lg"> jetzt 30 Tage kostenlos testen Versuchen </ p>
      </ Div>
    </ Div>
  </ Div>
  <! - Steuerung ->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <Span class = "icon-zurück"> </ span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <Span class = "Symbol-next"> </ span>
  </a>
</ Div>
</ Div>

Es gibt vier Abschnitte in der Carousal. Hauptbehälter mit einem "Karussell Dia 'div-Tag mit Klassendefinitionen verwenden.

Dann wird ein "Karussell-Indikatoren" Klasse mit einer geordneten Liste. ol jedes Listenelement eine Folie darstellt. Wenn die Seite geladen wird, wird standardmäßig Diashow mit "aktiven" Klasse geladen. Beim Rendern, werden Sie sie in der Überschrift von kleinen Kreisen zu sehen.

Dann wird jeder Schieber (Bild) mit einem 'item' Klasse des div-Tags gesetzt. Jedes Element wird mit einem "Karussell-Beschriftung" Klasse des div verschachtelt. Karussell-Beschriftung enthält das Bild mit dem Titel-Tag angezeigt zusammen. Absatz enthält eine h1 und eine Schaltfläche, können Sie auch andere eigene Marke enthalten.

Der letzte Teil wird verwendet, um eine Rutsche nächsten / vorherigen Folie zu steuern. Dies ist die Verwendung von "links" und "Karussell-Kontrolle" über die Definition einer Klasse, mit dem folgenden "rechts" und "Karussell-control 'Definition einer Klasse.

'Icon-zurück "und" Symbol-next "Klasse für das nächste und vorherige Symbol.

Wir haben einige Anpassungen in Standard carousal getan. Wir hoffen, Bildunterschriften, Indikatoren und Vor / Zurück-Symbole oben auf der Standardposition von wenigen Pixeln wiedergegeben werden.

Um dies zu tun, fügen wir die folgenden Stile custom.css Datei

.carousel-Innen .item .carousel-caption {
position: absolute;
top: 200px
}
.carousel-Indikatoren {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom: 0;
}
.navbar-nav> li> a {
line-height: 50px;
font-size: 16px
}

Wir passen auch die h1, bis sie einen unteren Rand von 30 Pixel hinzufügen.

h1 {
  margin-bottom: 30px
  }

Response-Bild

Sie haben vielleicht bemerkt, dass jedes Bild in der Folie haben wir die 'img-responsive "Klasse verwendet. Dies ist eine Bootstrap v3.0.0 neue Funktionen. Durch die Verwendung des img - Tag "img-responsive" Klasse, Bootstrap , so dass die Bild Antwort.

Erstellen Sie ein Raster

In den folgenden Folien verwendeten wir ein Raster Content zu platzieren. Indem man beginnen, einen "Container" Klasse von div ein Raster. Bitte beachten Sie, dass wir eine ansprechende Website, anstelle der früheren Version von Bootstrap entwickeln werden, wo der Behälter eine einzelne Klasse hat, ist die Standard-anspricht.

Container div mit verschachtelten mehrere "Reihe" Klasse von div (die erste Reihe von drei, die zweite Zeile hat sechs), eine Bootstrap-Gitterlinien zu erstellen.

Jede Reihe hat ein mit einem "col-xy 'Klasse von div, an Spalten erstellen. Der Wert von x kann sein: xs für mobile Geräte für den Tablet PC sm, md für Notebook-Computer und kleinere Desktop-Bildschirm für LG großen Desktop-Bildschirm. Dies ist die erste Methode. Der Wert von y kann eine beliebige positive ganze Zahl sein, auch wenn die Gesamtzahl der Spalten in dem Gitter nicht mehr sein muß als 12. In unserem Projekt der Einfachheit halber haben wir lg verwendet, aber da wir bereits getan haben, können Sie ein Telefon oder Tablet zu sehen, das Projekt-Website zum Vergleich erhalten.

Im folgenden Tutorial werden wir ein komplettes Tutorial über Bootstrap Grid-System haben, seine faszinierende Antwort zu erkunden.

In diesem Beispiel wollen wir die Spaltenbreite der ersten drei Reihen gleich sind, so verwenden wir für alle Spalten 'col-lg-4'. In der zweiten Reihe wollen wir sechs Spalten mit gleicher Breite, also verwenden wir für alle Spalten 'col-lg-2'.

Hier ist der Tag, das ein Raster von zwei Zeilen enthält, die erste Zeile gibt es drei, die zweite Reihe hat sechs.

<Div class = "Zeile 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 haben eine Stunde und eine Fußzeile mit den folgenden markiert das Ende des Gitters

<Hr>
<P> Urheberrecht @ 2013-14 von ToDo App. </ P>

Verwenden Sie Tabelle

In price.html Seite unseres Projekts verwenden wir eine Form einer Preisliste zu machen, wie folgt beschriftet

<Table class = "Tabelle Tabelle umrandete">
          <Thead>
            <Tr>
              <Th> Funktionen </ th>
              <Th> Einzel </ th>
              <Th> Kleine Team </ th>
              <Th> Medium Team </ th>
              <Th> Unternehmen </ th>
            </ Tr>
          </ Thead>
          <Tbody>
            <Tr>
              <Td> <h3> Anzahl Benutzer </ h3> </ td>
              <Td> <span class = "Abzeichen"> Ein </ span> </ td>
              <Td> <span class = "Abzeichen"> Five </ span> </ td>
              <Td> <span class = "Abzeichen"> Fünfzehn </ span> </ td>
              <Td> <span class = "Abzeichen"> Unbegrenzte </ span> </ td>
           </ Tr>
            <Tr>
              <Td> <h3> Pro Training </ h3> </ td>
              <Td> <span class = "Abzeichen"> Nein </ span> </ td>
              <Td> <span class = "Abzeichen"> Ja </ span> </ td>
              <Td> <span class = "Abzeichen"> Ja </ span> </ td>
              <Td> <span class = "Abzeichen"> Ja </ span> </ td>
           </ Tr>
            <Tr>
              <Td> <h3> Forum Support </ h3> </ td>
              <Td> <span class = "Abzeichen"> Ja </ span> </ td>
              <Td> <span class = "Abzeichen"> Ja </ span> </ td>
              <Td> <span class = "Abzeichen"> Ja </ span> </ td>
              <Td> <span class = "Abzeichen"> Ja </ span> </ td>
           </ Tr>
	<Tr>
              <Td> <h3> In Person Unterstützung </ h3> </ td>
              <Td> <span class = "Abzeichen"> Nein </ span> </ td>
              <Td> <span class = "Abzeichen"> Nein </ span> </ td>
              <Td> <span class = "Abzeichen"> Ja </ span> </ td>
              <Td> <span class = "Abzeichen"> Ja </ span> </ td>
           </ Tr>
	   <Tr>
              <Td> <h3> Wöchentliche Webinare </ h3> </ td>
              <Td> <span class = "Abzeichen"> Nein </ span> </ td>
              <Td> <span class = "Abzeichen"> Nein </ span> </ td>
              <Td> <span class = "Abzeichen"> Ja </ span> </ td>
              <Td> <span class = "Abzeichen"> Ja </ span> </ td>
           </ Tr>
	 <Tr>
              <Td> <h3> Preis </ h3> </ td>
              <Td> <button type = "button" class = "BTN-Warnung BTN-lg btn"> $ 9 / Monat </ button> </ td>
              <Td> <button type = "button" class = "BTN-Warnung BTN-lg btn"> $ 19 / Monat </ button> </ td>
              <Td> <button type = "button" class = "BTN-Warnung BTN-lg btn"> $ 49 / Monat </ button> </ td>
              <Td> <button type = "button" class = "BTN-Warnung BTN-lg btn"> $ 99 / Monat </ button> </ td>
           </ Tr>
	    <Tr>
              <Td> </ td>
              <Td> jetzt kaufen </ button> </ td> <button type = "button" class = "BTN-Erfolg BTN-lg btn">
              <Td> <button type = "button" class = "BTN-lg BTN-Erfolg btn" "> jetzt kaufen </ button> </ td>
              <Td> <button type = "button" class = "BTN-lg BTN-Erfolg btn" "> jetzt kaufen </ button> </ td>
              <Td> <button type = "button" class = "BTN-lg BTN-Erfolg btn" "> jetzt kaufen </ button> </ td>
           </ Tr>
          </ Tbody>
        </ Table>

Bootstrap mit der originalen CSS-Datei 'table' und 'table-grenzte' zwei Klasse. Aber wir müssen , indem Sie einige benutzerdefinierte CSS - Datei in customize.css die folgende Tabelle aussehen anders

th {
background-color: # 428bca;
color: # ec8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}

Verwenden Sie das Abzeichen

Wir verwenden die 'badge' Klasse einen Text in der Tabelle angezeigt werden. Wir haben die folgende benutzerdefinierte CSS mit dem Abzeichen Klasse

.badge {
background-color: # 428bca;
Farbe: #fff;
font-size: 22px;
}

Für diese Seite und contact.html Seite, haben wir eine weitere CSS-Regel in der customize.css

.Behälter> h1 {
text-align: center;
}

Dies ermöglicht h1 zentriert.

Verwendung von Formularen

In contact.html Datei erstellen wir drei Spalten, die erste Spalte, betten wir ein Formular. Verwenden Sie die Standard-Stylesheet.

<Form class = "form horizontal" role = "Form">
  <Div class = "form-Gruppe">
    <Label for = "E-Mail" class = "col-lg-2 Steuer-label"> E-Mail </ label>
    <Div class = "col-lg-10">
      <Input type = "E-Mail" class = "Form-control" id = "E-Mail" Platzhalter = "E-Mail">
    </ Div>
  </ Div>
  <Div class = "form-Gruppe">
    <Label for = "name" class = "col-lg-2 Steuer-label"> Name </ label>
    <Div class = "col-lg-10">
      <Input type = "text" class = "Form-control" id = "name" Platzhalter = "Name">
    </ Div>
  </ Div>
   <Div class = "form-Gruppe">
    <Label for = "Land" class = "col-lg-2 Steuer-label"> Land </ label>
    <Div class = "col-lg-10">
      <Auswahl>
      <Option> USA </ option>
      <Option> Indien </ option>
      <Option> UK </ option>
      <Option> Autralia </ option>
      </ Select>
    </ Div>
  </ Div>
<Div class = "form-Gruppe">
    <Label for = "desc" class = "col-lg-2 Steuer-label"> Nachricht </ label>
    <Div class = "col-lg-10">
      <Textarea rows = "5" cols = "50"> </ textarea>
    </ Div>
  </ Div>

  <Div class = "form-Gruppe">
    <Div class = "col-lg-Offset-2 col-lg-10">
      <Taste type = "submit" class = "btn btn-default"> Senden </ button>
    </ Div>
  </ Div>
</ Form>

'Form-horizontalen "Klasse ermöglicht Form horizontale Ausrichtung zu halten. Bitte beachten Sie, dass für einen leichten Zugang, fügen Sie role = "Form". Dies ist die Version 3.0.0 der neuen Features.

Zu jeder Form Kontrollen finden, Bootstrap 3.0.0 verwendet eine neue "Form-Gruppe" Klasse.

Auf dieser Seite wird die zweite Spalte des Rasters, legten wir einfach etwas Text.

In Google Maps

In contact.html Seite, die dritte Spalte des Gitters haben wir eine Google Map (Google Maps) hinzugefügt. Dazu verwenden wir die folgenden Tags

<Div id = "map_canvas"> </ div>
  </ Div>

Die folgenden js hinzugefügt, um die HTML-Datei-Header im Header

Funktion initialize () {
        var map_canvas = document.getElementById ( 'map_canvas');
        var map_options = {
          Mitte: neue 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 (Fenster, 'load', initialisieren);

Vor dem vor js, müssen Sie das folgende Skript-Tag hinzufügen

<Script src = "http://maps.googleapis.com/maps/api/js?sensor=false"> </ script>

Um die Karte richtig zu machen, müssen Sie die folgenden Stile hinzufügen custom.css

#map_canvas {
        Breite: 400px;
        Höhe: 400px;
}

Dies ist, wie ein einfaches Projekt zu erstellen basierend auf Bootstrap V3.0.0. Aber wir haben berührt nur die Oberfläche, den späteren Kapiteln näher erläutern.