Erstellen Sie ein Thema: "The Band"
Diese Seite zeigt Ihnen, wie eine Bootstrap Thema von Grund auf neu zu bauen.
Wir werden mit einem einfachen HTML-Seite zu starten, und dann mehr und mehr Komponenten hinzufügen, bis wir eine voll funktionsfähige, persönliche und ansprechende Website.
Das Ergebnis sieht wie folgt aus, und Sie sind frei, zu verändern, zu speichern, zu teilen, verwenden oder tun, was man will:
HTML-Startseite
Wir werden mit der folgenden HTML-Seite zu starten:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Theme The Band</title>
<meta charset="utf-8">
</head>
<body>
<div>
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>In Bootstrap CDN und Hinzufügen eines Container
In Bootstrap CDN und einen Link zu jQuery und setzen HTML - Elemente in einem Container ( .container ):
Beispiel
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Theme The Band</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have
created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>Ergebnis:
DIE BAND
Wir lieben Musik!
Wir haben eine fiktive Band-Website erstellt. Lorem ipsum ..
Center Text
Fügen Sie die .text-center - Klasse den Text innerhalb des Containers zu zentrieren, und verwenden Sie die <em> Element das zu machen "Wir lieben Musik" Text kursiv:
Beispiel
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We love music!</em></p>
<p>We have
created a fictional band website. Lorem ipsum..</p>
</div>Ergebnis:
DIE BAND
Wir lieben Musik!
Wir haben eine fiktive Band-Website erstellt. Lorem ipsum ..
In Padding
Verwenden Sie CSS, um den Behälter mit Polsterung gut aussehen:
Beispiel
.container {
padding: 80px 120px;
}Ergebnis:
DIE BAND
Wir lieben Musik!
Wir haben eine fiktive Band-Website erstellt. Lorem ipsum ..
Fügen Sie ein Gitter
Erstellen Sie drei Spalten mit gleicher Breite ( .col-sm-4 ), Text und Bilder hinzufügen, und legen Sie sie im Inneren des Behälters:
Beispiel
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We
love music!</em></p>
<p>We have created a fictional band website.
Lorem ipsum..</p>
<br>
<div class="row">
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
</div>
</div>Ergebnis:
DIE BAND
Wir lieben Musik!
Wir haben eine fiktive Band-Website erstellt. Lorem ipsum ..
Name
Name
Name
Kreis Bild
Prägen das Bild auf einem Kreis mit dem .img-circle
Außerdem haben wir einige CSS machen die Bilder gut aussehen:
Beispiel
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity: 0.7;
}
.person:hover {
border-color: #f1f1f1;
}
<img src="bandmember.jpg"
class="img-circle person" alt="Random Name">
<img src="bandmember.jpg"
class="img-circle person" alt="Random Name">
<img src="bandmember.jpg"
class="img-circle person" alt="Random Name">
Ergebnis:
Name
Name
Name
Collapsibles
Machen Sie die Bilder zusammenklappbaren; zeigen zusätzliche Inhalte, wenn Sie auf das jeweilige Bild klicken:
Beispiel
<div class="row">
<div class="col-sm-4">
<p
class="text-center"><strong>Name</strong></p><br>
<a href="#demo"
data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person"
alt="Random Name">
</a>
<div id="demo"
class="collapse">
<p>Guitarist and Lead Vocalist</p>
<p>Loves long
walks on the beach</p>
<p>Member since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo2" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle
person" alt="Random Name">
</a>
<div id="demo2"
class="collapse">
<p>Drummer</p>
<p>Loves drummin'</p>
<p>Member
since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p
class="text-center"><strong>Name</strong></p><br>
<a href="#demo3"
data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person"
alt="Random Name">
</a>
<div id="demo3"
class="collapse">
<p>Bass player</p>
<p>Loves math</p>
<p>Member
since 2005</p>
</div>
</div>
</div>Ergebnis (Klicken Sie auf die Bilder, um den Effekt zu sehen):
Name
Gitarrist und Lead-Vocalist
Liebt lange Spaziergänge am Strand
Mitglied seit 1988
Name
Schlagzeuger
Liebt drummin '
Mitglied seit 1988
Name
Bassist
liebt Mathe
Mitglied seit 2005
Fügen Sie ein Karussell
Erstellen Sie ein Karussell und fügen Sie sie vor dem Container:
Beispiel
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
<div
class="item">
<img src="chicago.jpg"
alt="Chicago">
<div
class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago - A night we won't forget.</p>
</div>
</div>
<div
class="item">
<img src="la.jpg"
alt="Los Angeles">
<div
class="carousel-caption">
<h3>LA</h3>
<p>Even though the traffic was a mess, we had the best time.</p>
</div>
</div>
</div>
<!--
Left and right controls -->
<a class="left carousel-control" href="#myCarousel"
role="button" data-slide="prev">
<span class="glyphicon
glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control" href="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Ergebnis:
New York
Die Atmosphäre in New York ist Lorem ipsum.
Chicago
Danke, Chicago - Eine Nacht, die wir nicht vergessen werden.
LA
Auch wenn der Verkehr war ein Chaos, wir hatten die beste Zeit in Venice Beach zu spielen!
Style Das Karussell
Verwenden Sie CSS, das Karussell, um Stil:
Beispiel
.carousel-inner img {
-webkit-filter:
grayscale(90%);
filter: grayscale(90%); /* make all photos black and
white */
width: 100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color: #fff !important;
}
@media
(max-width: 600px) {
.carousel-caption {
display: none; /* Hide the
carousel text when the screen is less than 600 pixels wide */
}
}Ergebnis:
New York
Die Atmosphäre in New York ist Lorem ipsum.
Chicago
Danke, Chicago - Eine Nacht, die wir nicht vergessen werden.
LA
Auch wenn der Verkehr war ein Chaos, wir hatten die beste Zeit in Venice Beach zu spielen!
In Reise Container
Fügen Sie einen neuen Container und fügen Sie eine Liste ( .list-group und .list-group-item ) im Inneren.
Fügen Sie eine benutzerdefinierte Klasse ( .bg-1 ) zu dem Behälter (schwarze Hintergrundfarbe) und einige Arten an seine Kinder:
Beispiel
<style>
.bg-1 {
background: #2d2d30;
color: #bdbdbd;
}
.bg-1 h3 {color: #fff;}
.bg-1 p {font-style:
italic;}
</style>
<div class="bg-1">
<div
class="container">
<h3 class="text-center">TOUR
DATES</h3>
<p class="text-center">Lorem ipsum we'll
play you some music.<br> Remember to book your tickets!</p>
<ul class="list-group">
<li
class="list-group-item">September Sold Out!</li>
<li class="list-group-item">October Sold Out!</li>
<li class="list-group-item">November 3</li>
</ul>
</div>
</div>
Ergebnis:
TOURDATEN
Lorem ipsum wir Sie etwas Musik zu spielen.
Denken Sie daran, Ihre Tickets zu buchen!
- September Ausverkauft!
- Oktober Ausverkauft!
- 3. November
In Labels & Badges
Fügen Sie ein Etikett ( .label ) und ein Abzeichen ( .badge ) verfügbaren Tickets zu markieren / ausverkauft:
Beispiel
<ul class="list-group">
<li class="list-group-item">September
<span class="label label-danger">Sold Out!</span></li>
<li
class="list-group-item">October <span class="label label-danger">Sold
Out!</span></li>
<li class="list-group-item">November <span
class="badge">3</span></li>
</ul>Ergebnis:
TOURDATEN
Lorem ipsum wir Sie etwas Musik zu spielen.
Denken Sie daran, Ihre Tickets zu buchen!
- September Ausverkauft!
- Oktober Ausverkauft!
- 3. November
In Miniaturbilder
Im Inneren des Behälters Tour fügen Sie drei Spalten mit gleicher Breite ( .col-sm-4 ):
In jeder Spalte, um ein Bild hinzuzufügen.
Verwenden Sie dann die .img-thumbnail - Klasse das Bild auf ein Bild um es zu formen.
Normalerweise würden Sie das Add .img-thumbnail - Klasse direkt auf das <img> Element. In diesem Beispiel haben wir eine Miniatur Behälter um das Bild platziert, so dass wir ein Bild Text als auch angeben können.
Beispiel
<div class="row text-center">
<div class="col-sm-4">
<div
class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button
class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img
src="newyork.jpg" alt="New York">
<p><strong>New
York</strong></p>
<p>Sat. 28 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg"
alt="San Francisco">
<p><strong>San
Francisco</strong></p>
<p>Sun. 29 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
</div>Ergebnis:
Paris
Fr. 27. November 2015
New York
Sat. 28. November 2015
San Francisco
Sonne. 29. November 2015
Style-Listen, Thumbnails & Buttons
Verwenden Sie CSS, um die Liste und die Miniaturbilder zu gestalten. In unserem Beispiel haben wir die abgerundeten Ränder aus der Liste entfernt, und wir haben versucht, die Thumbnail-Bilder wie Karten zu machen, durch ihre Grenze zu entfernen und eine Breite von 100% auf jedes Bild eingestellt.
Wir haben verändert auch die Standardformate von Bootstrap der .btn Klasse, auf einen schwarzen Knopf:
Beispiel
/* Remove rounded borders from list */
.list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* Remove border and add padding
to thumbnails */
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
/* Black buttons with extra padding and without rounded borders */
.btn {
padding: 10px 20px;
background-color: #333;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
/* On
hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
border: 1px solid #333;
background-color: #fff;
color: #000;
}Ergebnis:
- September Ausverkauft!
- Oktober Ausverkauft!
- 3. November
Paris
Fr. 27. November 2015
New York
Sat. 28. November 2015
San Francisco
Sonne. 29. November 2015
Fügen Sie einen Modal
Ändern Sie zunächst, alle Tasten innerhalb der Miniaturansicht aus <button class="btn">Buy Tickets</button> auf <button class="btn" data-toggle="modal" data-target="#myModal" >Buy Tickets</button> . Diese Tasten werden verwendet, um die tatsächliche modal zu öffnen.
Um die modale erstellen, schauen Sie sich den folgenden Code:
Beispiel
<style>
/* Add a dark gray background color to the modal header and
center text */
.modal-header, h4, .close {
background-color: #333;
color: #fff !important;
text-align: center;
font-size: 30px;
}
.modal-header, .modal-body {
padding: 40px 50px;
}
</style>
<!-- Used to open the Modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">Buy
Tickets</button>
<!-- Modal -->
<div class="modal fade" id="myModal"
role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">×</button>
<h4><span class="glyphicon
glyphicon-lock"></span> Tickets</h4>
</div>
<div class="modal-body">
<form role="form">
<div
class="form-group">
<label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span>
Tickets, $23 per person</label>
<input type="number" class="form-control"
id="psw" placeholder="How many?">
</div>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Send
To</label>
<input type="text" class="form-control" id="usrname"
placeholder="Enter email">
</div>
<button type="submit" class="btn btn-block">Pay
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger
btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
Cancel
</button>
<p>Need <a href="#">help?</a></p>
</div>
</div>
</div>
</div>Ergebnis (klicken Sie auf "Tickets kaufen", um den Effekt zu sehen):
Kontakt hinzufügen Container
Erstellen Sie einen neuen Behälter, mit zwei Spalten mit ungleicher Breite ( .col-md-4 und .col-md-8 ).
In Informations Symbole mit Text in der ersten Spalte und Formular-Steuerelemente in der zweiten:
Beispiel
<div class="container">
<h3 class="text-center">Contact</h3>
<p class="text-center"><em>We love our fans!</em></p>
<div class="row test">
<div class="col-md-4">
<p>Fan? Drop a
note.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Chicago,
US</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: +00
1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email:
[email protected]</p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-6 form-group">
<input
class="form-control" id="name" name="name" placeholder="Name" type="text"
required>
</div>
<div class="col-sm-6 form-group">
<input
class="form-control" id="email" name="email" placeholder="Email"
type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments"
placeholder="Comment" rows="5"></textarea>
<div class="row">
<div
class="col-md-12 form-group">
<button class="btn
pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>Ergebnis:
Kontakt
Wir lieben unsere Fans!
In Toggable Tabs
In Registerkarten ( .nav nav-tabs ) innerhalb der Kontaktbehälter, mit "Anführungszeichen" von den Bandmitgliedern:
Beispiel
<style>
.nav-tabs li a {
color: #777;
}
</style>
<h3 class="text-center">From The Blog</h3>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Mike</a></li>
<li><a data-toggle="tab" href="#menu1">Chandler</a></li>
<li><a
data-toggle="tab" href="#menu2">Peter</a></li>
</ul>
<div
class="tab-content">
<div id="home" class="tab-pane fade in
active">
<h2>Mike Ross, Manager</h2>
<p>Man, we've been on the road for some time now. Looking forward to lorem
ipsum.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>Chandler Bing, Guitarist</h2>
<p>Always a pleasure
people! Hope you enjoyed it as much as I did. Could I BE.. any more
pleased?</p>
</div>
<div id="menu2" class="tab-pane
fade">
<h2>Peter Griffin, Bass player</h2>
<p>I mean, sometimes I enjoy the show, but other times I enjoy other
things.</p>
</div>
</div>Ergebnis:
Von dem Blog
Mike Ross, Geschäftsführer
Man, wir haben nun schon seit einiger Zeit auf der Straße gewesen. Wir freuen uns auf Lorem ipsum.
Google Maps
In Google Maps (Für weitere Informationen lesen Sie unsere Google Maps Tutoria l).
Verwenden Sie CSS, um die Breite, Höhe und Farbe der Karte zu setzen:
Beispiel
<style>
#googleMap {
width:
100%; /* Span the entire width of the screen */
height: 400px;
/* Set the height to 400 pixels */
-webkit-filter:
grayscale(100%);
filter: grayscale(100%); /* Change
the color of the map to black and white * /
}
</style>
<div id="googleMap"></div>
<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("googleMap"),mapProp);
var
marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window,
'load', initialize);
</script>Ergebnis:
Versuch es selber "Fügen Sie einen Navbar
Fügen Sie ein navbar am oberen Rand der Seite, die auf kleineren Bildschirmen zusammenbricht:
Beispiel
<nav class="navbar navbar-default navbar-fixed-top">
<div
class="container-fluid">
<div class="navbar-header">
<button
type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul
class="nav navbar-nav navbar-right">
<li><a href="#home">HOME</a></li>
<li><a href="#band">BAND</a></li>
<li><a href="#tour">TOUR</a></li>
<li><a href="#contact">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"
href="#">MORE
<span class="caret"></span>
</a>
<ul
class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a
href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
Ergebnis:
Versuch es selber " | Tipp: Mit der rechten richten Sie die Navigations - Links mit der navbar-right - Klasse. Wenn Sie einen der Links in der Navigationsleiste wie ein Drop - Down - Menü zu verhalten wollen, verwenden Sie die .dropdown Klasse |
|---|
Style Die Navbar
Verwenden Sie CSS, um die Navigationsleiste anpassen:
Beispiel
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.9;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn
white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c
!important;
}
/* Remove border color from the collapsible button
*/
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff
;
background-color: #555 !important;
}
/*
Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}Ergebnis:
Versuch es selber "In Scrollspy
In scrollspy automatisch navbar links aktualisiert beim Scrollen:
Beispiel
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="band" class="container">
<div id="tour"
class="container">
<div id="contact" class="container"> Versuch es selber " Fügen Sie einen Footer
1. Erstellen Sie eine <footer> Element und einen Text hinzufügen.
2. Verwenden Sie CSS, um die Fußzeile zu gestalten.
3. Fügen Sie ein "Pfeil nach oben" Symbol, das den Benutzer auf die oben auf der Seite nehmen, wenn darauf geklickt wird.
4. Verwenden Sie jQuery den Tooltip Plugin zu initialisieren:
Beispiel
<style>
/* Add a dark background color to the footer */
footer {
background-color: #2d2d30;
color:
#f5f5f5;
padding: 32px;
}
footer a {
color: #f5f5f5;
}
footer
a:hover {
color: #777;
text-decoration: none;
}
</style>
<footer class="text-center">
<a class="up-arrow" href="#myPage" data-toggle="tooltip"
title="TO TOP">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
<p>Bootstrap Theme Made By <a href="http://www.w3ii.com"
data-toggle="tooltip" title="Visit w3ii">www.w3ii.com</a></p>
</footer>
<script>
$(document).ready(function(){
// Initialize Tooltip
$('[data-toggle="tooltip"]').tooltip();
})
</script>Ergebnis:
Versuch es selber "Hinzufügen Sanftes Rollen
Verwenden Sie jQuery smooth scrolling hinzuzufügen (wenn in der Navigationsleiste auf die Links zu klicken):
Beispiel
<script>
$(document).ready(function(){
// Add
smooth scrolling to all links in navbar + footer link
$(".navbar
a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor
click behavior
event.preventDefault();
// Store hash
var hash =
this.hash;
// Using jQuery's animate() method to add smooth page
scroll
// The optional number (900) specifies the number of milliseconds
it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash
(#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
})
</script> Versuch es selber " Letzter Schliff
Personalisieren Sie Ihre Themen eine Schriftart durch Zugabe, die Sie mögen. Wir haben "Montserrat" und "Lato" aus dem Google-Font Library verwendet.
Link zur Schriftart im <head> Sektion:
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
Dann können Sie sie in der Webseite:
Beispiel
body {
font: 400 15px/1.8 Lato, sans-serif;
color: #777;
}
.navbar {
font-family:
Montserrat, sans-serif;
}Außerdem haben wir einige zusätzliche Stil zu einigen Elementen:
Beispiel
/* Overwrite default styles of h3 and h4 */
h3, h4 {
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 20px;
color: #111;
}
/* Remove rounded borders on input fields */
.form-control {
border-radius: 0;
}
/* Disable the ability to resize textareas */
textarea {
resize: none;
} Versuch es selber "