Categories

Bootstrap Template

Alex Ross Oktober 9, 2012
Rating: 3.8/5. From 6 votes.
Please wait...

Template Beschreibung

Heute ist ein wichtiges Datum! Unter den Downloads befinden sich Bootstrap Templates von TemplateMonster. Besuchen Sie bitte die Darstellung – Seite dieser Artikel. Weiter besprechen wir mal über die Symbiosis von Bootstrap und Design von TemplateMonster. Diese Templates haben die native Funktionen der Bootstrap und eine Menge optimalen einzigartigen Add-Ons, die speziell von unseren TemplateMonster Developers für diesen Artikel erstellt wurden.

Ein Bootstrap Template ist ein vorgefertigtes Design, das man auf Basis des Bootstrap Frameworks entwerft hat, – ein WebDesign-Kit zur Erstellung vom Cross-Browsers und von einheitlichen und visuell ansprechenden Designs. Die Merkmale, die unseren Bootstrap besonderes interessant machen, sind die native Funktionen der Bootstrap und die einzigartigen Add-Ons, die speziell von unseren TemplateMonster Developers entwickelt wurden.

Wir möchten Ihnen daran erinnern, was eigentlich Bootstrap ist. Grundsätzlich ist es ein Framework für die schnelle Entwicklung von Frontend Weboberflächen. Das hat die Entwicklungsprozesse von Web-Designs verändert. Kein Wunder, dass seit einiger Zeit nach der Veröffentlichung von Bootstrap es beim GitHub das populärste Repository aller Zeiten wurde.

Free Bootstrap 3.0 Template

Template number: 46543

Dateiformate

.HTML
.PSD
.PHP
.CSS
.JS

Benötige Software

Damit dieses Produkt richtig funktioniert, sollten Sie die folgende Software auf Ihrem Computer installieren.

Adobe Dreamweaver 8+;
Adobe Photoshop CS+;

HINWEIS: Sehen Sie bitte die Seite von Template-Vorschau, um die spezifische Anforderungen für Template zu wissen. Die benötige Programmversionen könnten anders sein.

Template Funktionen:

Hier ist eine Liste die einzigartigen Add-Ons, die Bootstrap Templates haben:

  • Pages
  • Portfolio
  • Slider
  • Social Media
  • CSS3 Tricks

Die Besonderheit an Bootstrap Templates ist, dass sie auf dem Bootstrap Framework aufgebaut sind. Es gibt alle benötige Dokumentationen im Template-Pakete, um Ihre erste Bekanntschaft mit dem Produkt zu erleichten. Jedes Theme hat ein oberen Panel mit den Linken zur die wichtigsten Infos.

Die erste vier Links (Scaffolding, Base CSS, Components und Javascript) sind die native Fähigkeiten vom Framework. Man muss es auch erwähnen, dass die native Fähigkeiten von Bootstrap auch die Responsive Design ergänzen.
Jedes Theme basiert auf sogenannten fluid Grids und wird anhand der Bildschirmgröße die Größe des Rasters angepasst.
So sieht das dann im Endeffekt aus:

Label Layoutbreite Spaltenbreite Spaltenabstand
Großes Display 1200px and up 70px 30px
Standard (Desktop) 980px and up 60px 20px
Portrait tablets 768px and above 42px 20px
Smartphone / Tablet 767px and below Fluid columns, no fixed widths
Smartphone 480px and below Fluid columns, no fixed widths

Es gibt vier wichtigste Layouts mit deren Hilfe ein Template für alle populären Hand-HeldGeräten ist.

Add-ons von TemplateMonster

Die wichtigste sind die Add-Ons, die von den TemplateMonster entwickelt wurden. Die befinden sich in dem letzten Link des Panels, das wir schon oben gezeigt haben. Dort gibt es:

Jetzt schauen wir mal schnell diese Links durch.

Pages/Seiten

Unter dem Pages Link finden Sie drei Unterseiten: Under Construction/ Baustelle , Intro Page/ Intro Seite und 404 Page/ Seite 404. Mit dem Link können Sie schnell eine dieser Seiten aufrufen.

Under Construction

Intro Page

404 Page

Portfolio

Die hohe Genauigkeit der Details überrascht jeden Besicher dieser Seite. Die Funktionalität dieser Seite ermöglicht Ihnen die Ansicht Ihrer Portfolio-Seite zu verändern. Zur Verfügung haben Sie 7 Portfolio Layouts. Klicken auf jedes und finden Sie welche am besten zu Ihre Seite passt.

Mit dem Drück auf den Icons bekommen Sie den Code des Layouts: (Copy+Paste the code) kopieren den Code und fügen Sie Ihn im Hauptteil der Seite ein. Ihre Portfolio Seite ist fertig…

Slider

Mit der Slider-Seite können Sie den Effekt wie Bild-Drehen auf Ihren Webseiten bearbeiten. Standartmäßig gibt es 2 Möglichkeiten von Camera Slideshow Slider:

Normaler Slider

Slider mit den Thumbnails

Hier ist die Liste mit dem möglichen Effekte von Imagewechsel:

‘simpleFade’, ‘curtainTopLeft’, ‘curtainTopRight’, ‘curtainBottomLeft’, ‘curtainBottomRight’, ‘curtainSliceLeft’, ‘curtainSliceRight’, ‘blindCurtainTopLeft’, ‘blindCurtainTopRight’, ‘blindCurtainBottomLeft’, ‘blindCurtainBottomRight’, ‘blindCurtainSliceBottom’, ‘blindCurtainSliceTop’, ‘stampede’, ‘mosaic’, ‘mosaicReverse’, ‘mosaicRandom’, ‘mosaicSpiral’, ‘mosaicSpiralReverse’, ‘topLeftBottomRight’, ‘bottomRightTopLeft’, ‘bottomLeftTopRight’, ‘bottomLeftTopRight’, ‘scrollLeft’, ‘scrollRight’, ‘scrollHorz’, ‘scrollBottom’, ‘scrollTop’

Das ist das gleiche Prinzip wie mit der Portfolio-Seite: Copy+Paste den Code und Ihr Sleider ist fertig!

Social Media

Die Social Media Seite gibt einige Tipps zur Umsetzung S&M Funktionen auf der Seite Ihrer Webseite:

Damit Sie diese Widgets auf Ihrer Webseite umsetzen, kopieren Sie den Code und fügen Sie ihn einfach ein. Ein Kinderspiel! Mit den Icons vom Unterlagen fügen Sie einfach Twitter, Flickr, Facebook’s likebox, YouTube videos, Vimeo videos usw hinzu.

CSS3 Tricks

Wenn Sie verschiedene visuelle Effekte mögen, dann ist dieser Bereich besonders gut für Ihnen. Hier finden Sie eine Menge Effekte, die in drei Kategorien geteilt werden: Bild-Hover , Animierte Buttons und CSS3 Styles. Wie wir vorher dargelegt haben, kopieren Sie den Code und fügen Sie ihn ein. Jeder Effekt wird sofort umgesetzt.

Animierte Hover

Hier wählen Sie die Animation für Ihre Bilder aus. Zur Verfügung stehen 8 Effekten von Bild -Hovering . Genießen es!

Wählen Sie die passende Animation für die Buttons, die sich auf den Seiten Ihrer Webseite befinden.

Dieser Teil ist für echte Genießer. Hier sind alle exquisite visuelle CCS3 Effekte. Probieren Sie es aus!

Template Struktur

Also, Sie haben schon Ihr Template .ZIP Paket bekommen und es entpackt. Sehen Sie mal was es da drin gibt.

  • documentation” – dort gibt es die Unterlagen über die Installation und bearbeitung des Templates.
  • screenshots” – dort gibt es Screenshots vom Template.
  • site” – hier sind die .html Dateien vom Template.
  • – “assets” – hier gibt es assets und bonus Add-Ons.
  • – “bat” – hier ist einen Kontaktformular, der den .php Script bearbeitet.
  • – “css” – es gibt alle .css Dateien, die man in Design benutzt hat.
  • – “img” – dort sind alle Bilder, die sich in .html Dateien befinden.
  • – “js” – hier befinden sich JavaScript Libraries und jQuery Plugins.
  • – “search” – hier sind .js, .php und .css Dateien von Suchmaschine.
  • sources” – es gibt hier die Quelldateien.
  • – “less” – es gibt die .css LESS Dateien vom Template.
  • – “psd” – dort sind die Adobe Photoshop .psd Dateien.
  • – “fonts_info.txt” – hier finden Sie die Liste von Schriftarten, die im Template verwendet werden.
  • – “info.txt” – hier ist die Info über den passwortgeschützten “sources” Order.

HINWEIS: Der Quellordner wird aus Sicherheitsgründen in ein ZIP-Format gepackt und passwortgeschützt. Um die passwortgeschützte .ZIP-Datei zu entpacken, brauchen Sie ein installiertes Zip-Datenkompressionsprogramm und ein richtiges Passwort. Beim Entpacken die Zip-Datei müssen Sie das Passwort geben. Das Passwort ist die ID-Nummer Ihrer Bestellung. Diese Nummer ist auf der Bestellseite (den Link auf dieser Seite befindet sich in unserer E-Mail)

Helfen Sie uns bitte die Qualität und Einzigartigkeit unseren Produkten zu sichern! Laden Sie bitte keinen gezippten/entpackten Quellordner auf dem Server hoch.

Bootstrap Themes
Dieser Eintrag wurde um Responsive Web-Vorlagen, Web Vorlagen, Website Vorlagen geschrieben und about, Bootstrap, description, template markiert. Bookmarken Sie den permalink.

Submit a ticket

Sollte Ihre Frage durch die Tutorials nicht ausreichend beantwortet worden sein, benutzen Sie bitte den folgenden Link, um sich an unser Beratungsteam (Support) zu wenden. Wir bieten Ihnen unsere Hilfe und Unterstutzung an. 24 Stunden am Tag, 7 Tage die Woche!
Ticket Einrichten