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:

Aggiungere Bootstrap CDN e aggiungere un Jumbotron

Aggiungere Bootstrap CDN e un link per jQuery e mettere elementi HTML all'interno di un .jumbotron :

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:

Aggiungi Form

Aggiungere un modulo con un campo di input e un pulsante:

Aggiungere Contenitori

Aggiungere due contenitori ( .container-fluid ), e aggiungere una classe personalizzata per il secondo contenitore ( .bg-grey - aggiunge un colore di sfondo grigio):

Aggiungere Imbottitura

Consente di rendere il Jumbotron ei contenitori guardare bene con l'aggiunta di un po 'di imbottitura:

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.

Aggiungere Servizi Container

Aggiungere un nuovo contenitore, con colonne 2x3 di uguale larghezza ( .col-sm-4 ):

styling Icone

Aggiungere una classe personalizzata ( .logo-small ) ad ogni glyphicon nel contenitore "Servizi". Utilizzare i CSS per lo stile di loro:

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

Prova tu stesso "

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

Prova tu stesso "

Aggiungere un carosello

Aggiungere un carosello:

Lo stile del carosello

Utilizzare i CSS per lo stile del carosello:

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:

Pannelli styling

Utilizzare i CSS per lo stile dei pannelli:

Aggiungi contatto Container

Aggiungere un nuovo contenitore con informazioni di contatto:

Aggiungere Google Maps

Aggiungere Google Maps (Per ulteriori informazioni, leggere la nostra Google Maps Tutoria l):

Aggiungere un Navbar

Aggiungere una barra di navigazione nella parte superiore della pagina che crolla su schermi più piccoli:

	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:

Aggiungere Scrollspy

Aggiungere scrollspy per aggiornare automaticamente i collegamenti barra di navigazione durante lo scorrimento:

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:

Aggiunta di scorrimento uniforme

Utilizzare jQuery per aggiungere lo scorrimento uniforme (quando si fa clic sui link nella barra di navigazione):

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:

Abbiamo anche aggiunto un po 'di stile in più ad alcuni elementi:

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):

Completa "Società" Theme