Creare un tema: "Società"
Questa pagina vi mostrerà come costruire un tema Bootstrap da zero.
Inizieremo con una semplice pagina HTML, e quindi aggiungere sempre più componenti, fino a quando abbiamo un sito web completamente funzionale, personale e reattivo.
Il risultato sarà simile a questo, e si è liberi di modificare, salvare, condividere, utilizzare o fare quello che vuoi con esso:
HTML Pagina di avvio
Inizieremo con la seguente pagina HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Theme Company</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Company</h1>
<p>We specialize in blablabla</p>
</body>
</html>Aggiungere Bootstrap CDN e aggiungere un Jumbotron
Aggiungere Bootstrap CDN e un link per jQuery e mettere elementi HTML all'interno di un .jumbotron :
Esempio
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Theme Company</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="jumbotron">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
</body>
</html>Risultato:
Società
Ci siamo specializzati in blablabla
Aggiungere colore di sfondo e testo al centro
1. Aggiungere un colore di sfondo arancione per il Jumbotron.
2. Aggiungere il .text-center di classe per centrare il testo all'interno del Jumbotron:
Esempio
<style>
.jumbotron {
background-color:
#f4511e;
/* Orange */
color: #ffffff;
}
</style>
<body>
<div class="jumbotron
text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
</div>
</body>Risultato:
Società
Ci siamo specializzati in blablabla
Aggiungi Form
Aggiungere un modulo con un campo di input e un pulsante:
Esempio
<div class="jumbotron
text-center">
<h1>Company</h1>
<p>We specialize in blablabla</p>
<form class="form-inline">
<input type="email" class="form-control" size="50" placeholder="Email
Address">
<button type="button" class="btn btn-danger">Subscribe</button>
</form>
</div>Risultato:
Società
Ci siamo specializzati in blablabla
Aggiungere Contenitori
Aggiungere due contenitori ( .container-fluid ), e aggiungere una classe personalizzata per il secondo contenitore ( .bg-grey - aggiunge un colore di sfondo grigio):
Esempio
<style>
.bg-grey {
background-color: #f6f6f6;
}
</style>
<div class="container-fluid">
<h2>About Company Page</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button
class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="container-fluid
bg-grey">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..
</div>Risultato:
A proposito di società Pagina
Lorem ipsum ..
Lorem ipsum ..
I nostri valori
MISSIONE: La nostra missione lorem ipsum ..
VISION: La nostra visione Lorem ipsum ..
Aggiungere Imbottitura
Consente di rendere il Jumbotron ei contenitori guardare bene con l'aggiunta di un po 'di imbottitura:
Esempio
<style>
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
}
.container-fluid {
padding: 60px
50px;
}
</style>Risultato:
Società
Ci siamo specializzati in blablabla
A proposito di società Pagina
Lorem ipsum ..
Lorem ipsum ..
I nostri valori
MISSIONE: La nostra missione lorem ipsum ..
VISION: La nostra visione Lorem ipsum ..
Aggiungere una griglia
1. Aggiungere un'icona (o il logo della società) per ogni contenitore.
2. Separare l'icona e il "su testo" con la creazione di due colonne ( .col-sm-8 e .col-sm-4 )
3. Aggiungere le media query per centrare colonna "logo" su schermi di grandi dimensioni più piccolo di 768 pixel.
Esempio
<style>
.logo {
font-size: 200px;
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
</style>
<div class="container-fluid">
<div
class="row">
<div class="col-sm-8">
<h2>About Company Page</h2>
<h4>Lorem
ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">Get
in Touch</button>
</div>
<div
class="col-sm-4">
<span
class="glyphicon glyphicon-signal logo"></span>
</div>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon
glyphicon-globe logo"></span>
</div>
<div class="col-sm-8">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..</p>
</div>
</div>
</div>Risultato:
A proposito di società Pagina
Lorem ipsum ..
Lorem ipsum ..
I nostri valori
MISSIONE: La nostra missione lorem ipsum ..
VISION: La nostra visione Lorem ipsum ..
Aggiungere Servizi Container
Aggiungere un nuovo contenitore, con colonne 2x3 di uguale larghezza ( .col-sm-4 ):
Esempio
<div class="container-fluid text-center">
<h2>SERVICES</h2>
<h4>What we offer</h4>
<br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon
glyphicon-off"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon
glyphicon-heart"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon
glyphicon-lock"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon
glyphicon-leaf"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon
glyphicon-certificate"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor
sit amet..</p>
</div>
<div
class="col-sm-4">
<span class="glyphicon
glyphicon-wrench"></span>
<h4>HARD
WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
Risultato:
SERVIZI
Cosa offriamo
ENERGIA
Lorem ipsum dolor sit amet..
AMORE
Lorem ipsum dolor sit amet..
LAVORO FATTO
Lorem ipsum dolor sit amet..
VERDE
Lorem ipsum dolor sit amet..
CERTIFICATO
Lorem ipsum dolor sit amet..
LAVORO DURO
Lorem ipsum dolor sit amet..
styling Icone
Aggiungere una classe personalizzata ( .logo-small ) ad ogni glyphicon nel contenitore "Servizi". Utilizzare i CSS per lo stile di loro:
Esempio
/* Add an orange color to all icons and set the font-size */
.logo-small
{
color: #f4511e;
font-size:
50px;
}
.logo
{
color: #f4511e;
font-size:
200px;
}
Risultato:
A proposito di società Pagina
Lorem ipsum ..
Lorem ipsum ..
I nostri valori
MISSIONE: La nostra missione lorem ipsum ..
VISION: La nostra visione Lorem ipsum ..
SERVIZI
Cosa offriamo
ENERGIA
Lorem ipsum dolor sit amet..
AMORE
Lorem ipsum dolor sit amet..
LAVORO FATTO
Lorem ipsum dolor sit amet..
VERDE
Lorem ipsum dolor sit amet..
CERTIFICATO
Lorem ipsum dolor sit amet..
LAVORO DURO
Lorem ipsum dolor sit amet..
Aggiungere portafoglio Container
Creare un nuovo contenitore di grande ampiezza, con tre colonne di uguale larghezza ( .col-sm-4 ):
All'interno di ciascuna colonna, aggiungere un'immagine.
Quindi, utilizzare il .img-thumbnail classe di plasmare l'immagine di una miniatura.
Normalmente, si dovrebbe aggiungere il .img-thumbnail classe direttamente all'elemento <img>. In questo esempio, abbiamo posto un contenitore miniatura intorno all'immagine, in modo che possiamo specificare un testo immagine pure.
Esempio
<div class="container-fluid text-center bg-grey">
<h2>Portfolio</h2>
<h4>What we have created</h4>
<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>Yes, we built Paris</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img
src="newyork.jpg" alt="New York">
<p><strong>New York</strong></p>
<p>We built New York</p>
</div>
</div>
<div
class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="San Francisco">
<p><strong>San Francisco</strong></p>
<p>Yes, San Fran is ours</p>
</div>
</div>
</div>
Risultato:
Portafoglio
Quello che abbiamo creato
Parigi
Sì, abbiamo costruito Paris
New York
Abbiamo costruito New York
San Francisco
Sì, San Francisco è nostra
Immagini Styling Miniatura
Utilizzare i CSS per lo stile delle immagini. Nel nostro esempio, abbiamo cercato di farli apparire come carte, togliendo loro confine, e impostare una larghezza di 100% su ogni immagine.
Esempio
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
Risultato:
Portafoglio
Quello che abbiamo creato
Parigi
Sì, abbiamo costruito Paris
New York
Abbiamo costruito New York
San Francisco
Sì, San Francisco è nostra
Aggiungere un carosello
Aggiungere un carosello:
Esempio
<h2>What our customers say</h2>
<div id="myCarousel" class="carousel
slide text-center" 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">
<h4>"This company is the
best. I am so happy with the result!"<br><span style="font-style:normal;">Michael
Roe, Vice President, Comment Box</span></h4>
</div>
<div class="item">
<h4>"One word...
WOW!!"<br><span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4>
</div>
<div class="item">
<h4>"Could I... BE any more happy with this company?"<br><span style="font-style:normal;">Chandler
Bing, Actor, FriendsAlot</span></h4>
</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>Risultato:
Cosa dicono i nostri clienti
Prova tu stesso "Lo stile del carosello
Utilizzare i CSS per lo stile del carosello:
Esempio
.carousel-control.right, .carousel-control.left {
background-image: none;
color:
#f4511e;
}
.carousel-indicators li {
border-color: #f4511e;
}
.carousel-indicators li.active {
background-color: #f4511e;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item
span {
font-style: normal;
}Risultato:
Cosa dicono i nostri clienti
Prova tu stesso "Aggiungere prezzi Container
Creare un contenitore pieno di larghezza, con tre colonne di uguale larghezza ( .col-sm-4 ):
All'interno di ciascuna colonna, aggiungere un pannello:
Esempio
<div class="container-fluid">
<div class="text-center">
<h2>Pricing</h2>
<h4>Choose a payment plan that works
for you</h4>
</div>
<div class="row">
<div class="col-sm-4">
<div
class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div
class="panel-footer">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Pro</h1>
</div>
<div class="panel-body">
<p><strong>50</strong> Lorem</p>
<p><strong>25</strong> Ipsum</p>
<p><strong>10</strong> Dolor</p>
<p><strong>5</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div
class="panel-footer">
<h3>$29</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Premium</h1>
</div>
<div class="panel-body">
<p><strong>100</strong> Lorem</p>
<p><strong>50</strong> Ipsum</p>
<p><strong>25</strong> Dolor</p>
<p><strong>10</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div
class="panel-footer">
<h3>$49</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
Risultato:
Prezzi
Scegliere un piano di pagamento che funziona per voi
Di base
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Endless Amet
professionista
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Endless Amet
premio
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Endless Amet
Pannelli styling
Utilizzare i CSS per lo stile dei pannelli:
Esempio
.panel {
border: 1px solid #f4511e;
border-radius:0;
transition: box-shadow
0.5s;
}
.panel:hover {
box-shadow: 5px 0px
40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #f4511e;
background-color: #fff
!important;
color: #f4511e;
}
.panel-heading
{
color: #fff !important;
background-color: #f4511e !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius:
0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color:
#fff !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin:
15px 0;
background-color: #f4511e;
color: #fff;
}
Risultato:
Prezzi
Scegliere un piano di pagamento che funziona per voi
Di base
20 Lorem
15 Ipsum
5 Dolor
2 Sit
Endless Amet
professionista
50 Lorem
25 Ipsum
10 Dolor
5 Sit
Endless Amet
premio
100 Lorem
50 Ipsum
25 Dolor
10 Sit
Endless Amet
Aggiungi contatto Container
Aggiungere un nuovo contenitore con informazioni di contatto:
Esempio
<div class="container-fluid bg-grey">
<h2
class="text-center">CONTACT</h2>
<div class="row">
<div
class="col-sm-5">
<p>Contact us and we'll get back to you
within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>
Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>
[email protected]</p>
</div>
<div class="col-sm-7">
<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><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right"
type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>Risultato:
CONTATTO
Aggiungere Google Maps
Aggiungere Google Maps (Per ulteriori informazioni, leggere la nostra Google Maps Tutoria l):
Esempio
<!-- Set height and width with CSS -->
<div id="googleMap" style="height:400px;width:100%;"></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>Risultato:
Prova tu stesso "Aggiungere un Navbar
Aggiungere una barra di navigazione nella parte superiore della pagina che crolla su schermi più piccoli:
Esempio
<nav class="navbar navbar-default
navbar-fixed-top">
<div class="container">
<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="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>Risultato:
Prova tu stesso " | Tip: destro allineare i pulsanti di navigazione con la navbar-right di classe. |
|---|
Stile La Navbar
Utilizzare i CSS per personalizzare la barra di navigazione:
Esempio
.navbar {
margin-bottom: 0;
background-color: #f4511e;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing:
4px;
border-radius: 0;
}
.navbar li a, .navbar
.navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav
li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle
{
border-color: transparent;
color: #fff !important;
}Risultato:
Prova tu stesso "Aggiungere Scrollspy
Aggiungere scrollspy per aggiornare automaticamente i collegamenti barra di navigazione durante lo scorrimento:
Esempio
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div id="about" class="container-fluid">
<div id="services"
class="container-fluid">
<div id="portfolio" class="container-fluid">
<div id="pricing" class="container-fluid">
<div id="contact"
class="container-fluid"> Prova tu stesso " Aggiungere un piè di pagina
Aggiungere l'icona di "Freccia" per il piè di pagina, che avrà l'utente alla parte superiore della pagina quando si fa clic su:
Esempio
<style>
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color:
#f4511e;
}
</style>
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon
glyphicon-chevron-up"></span>
</a>
<p>Bootstrap Theme
Made By <a href="http://www.w3ii.com"
title="Visit w3ii">www.w3ii.com</a></p>
</footer>Risultato:
Prova tu stesso "Aggiunta di scorrimento uniforme
Utilizzare jQuery per aggiungere lo scorrimento uniforme (quando si fa clic sui link nella barra di navigazione):
Esempio
<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> Prova tu stesso " tocco finale
Personalizza il tuo tema con l'aggiunta di un carattere che ti piace. Abbiamo usato "Montserrat" e "Lato" dalla libreria font di Google.
Link alla fonte nella <head> sezione:
<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">
Quindi è possibile utilizzare nella pagina:
Esempio
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
.jumbotron {
font-family: Montserrat,
sans-serif;
}
.navbar {
font-family:
Montserrat, sans-serif;
}Abbiamo anche aggiunto un po 'di stile in più ad alcuni elementi:
Esempio
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
} Prova tu stesso " Scorrere in Elements
Abbiamo anche creato un effetto di animazione che farà scorrere facilmente dentro elementi di scorrimento. Se si desidera utilizzarlo, basta aggiungere il .slideanim classe per l'elemento che si desidera scorrere in, e aggiungere il seguente al vostro CSS e jQuery (sentitevi liberi di modificare la durata, l'opacità, da dove cominciare, quando a scivolare in, e così via):
CSS Esempio
.slideanim {visibility:hidden;}
.slide {
/* The
name of the animation */
animation-name: slide;
-webkit-animation-name: slide;
/* The duration of the
animation */
animation-duration: 1s;
-webkit-animation-duration:
1s;
/* Make the element visible */
visibility: visible;
}
/* Go from 0% to 100% opacity (see-through) and specify the percentage
from when to slide in the element along the Y-axis */
@keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-webkit-keyframes
slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}jQuery Esempio
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop =
$(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
}); Prova tu stesso "