bootstrap Profilo
bersaglio
Bootstrap è il quadro front-end più popolare, ha rilasciato la sua terza versione (v3.0.0). Questo tutorial vi porterà a iniziare ad imparare Bootstrap 3.
Si vedrà anche come utilizzare le diverse caratteristiche del telaio telaio personalizzati, ad esempio utilizzando una griglia per creare il layout, la navigazione viene creato nav, utilizzando carousal creare casella a discesa, aggiungere plug-in sociali e Google Map e altri plug-in di terze parti.
Che cosa è Bootstrap
Bootstrap è un framework front-end per lo sviluppo rapido di applicazioni Web e siti web.
Nello sviluppo Web moderno, ci sono diversi componenti per quasi tutti i progetti web sono necessari.
Bootstrap vi offre tutti questi moduli di base - griglia, tipografia, tabelle, form, pulsanti e la reattività.
In aggiunta, ci sono un sacco di altri componenti di front-end utili, come Dropdowns, navigazione, modali, testina di stampa, impaginazione, carousal, Pangrattato, Tab, miniature, intestazioni e così via.
Con questi, si può costruire un progetto Web, e farlo funzionare per più rapidamente e facilmente.
Inoltre, dal momento che l'intero quadro si basa su moduli, è possibile inserire il proprio CSS, o anche una grande correzione dopo l'avvio del progetto da personalizzare.
Essa si basa su diverse pratiche migliori, pensiamo che questo è un buon posto per iniziare ad imparare moderna opportunità di sviluppo Web, una volta che hai imparato le basi di HTML e JavaScript / jQuery, è possibile applicare queste conoscenze per lo sviluppo Web.
Anche se alcuni critici, tutti i progetti costruiti da Bootstrap lo stesso aspetto, non è necessario sapere troppo sulla conoscenza CSS può costruire un sito web HTML +. Tuttavia, abbiamo bisogno di capire, Bootstrap è un quadro comune, proprio come tutte le altre cose comuni che è necessario personalizzare per renderlo unico. Quando si desidera personalizzare, è necessario uno studio approfondito, non vi è alcuna buona HTML + CSS di base non è fattibile.
Bootstrap tranne, naturalmente, ci sono molti altri buoni telaio anteriore, utilizzando il quadro di cui è lo sviluppo di selezione del personale, ma Bootstrap è sicuramente la pena di provare.
Perché dovrebbe il progetto usare Bootstrap?
Scarica la struttura dei file e capire
È possibile scegliere tra https://github.com/twbs/bootstrap/archive/v3.0.0.zip o https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist .zip scaricare Bootstrap versione 3.0.0 su. Stiamo usando il primo, è possibile utilizzare il secondo.
Inoltre, mettiamo a disposizione il codice scaricabile contiene un link per scaricare il primo attraverso la cartella di codice di bootstrap. Questo lato contiene anche l'originale utilizzato per personalizzare css Bootstrap di custom.css.
Dopo l'estrazione, si trova, nella cartella principale di bootstrap-3.0.0 Alcuni file e cartelle.
Il file principale CSS - bootstrap.css e la sua versione semplificata di bootstrap-min.css, che si trova nel file di bootstrap-3.0.0 cartella principale 'dist' cartella 'css' sotto la cartella.
Nel 'dist' dentro, c'è una cartella 'js' contiene le principali bootstrap.js file JavaScript e la sua versione semplificata.
File nella radice, vi sia una cartella separata 'js' contiene i vari file diversi JavaScript plug-in.
Nel file di root all'interno di 'beni', troverete cartella di un altro 'js'. Questo è un luogo con HTML5 spessore di html5shiv.js, per ottenere il sostegno IE8. C'è anche un file respond.min.js per supportare le query multimediali IE8. Questa cartella contiene anche i js plug jquery.js Bootstrap dipendenti.
Nella stessa cartella, c'è una cartella 'ico' contiene una varietà di dispositivi mobili icone e icona favicon.
In 'css' lo stesso percorso della cartella contenente il file CSS del documento.
cartella '_includes' e '_layouts' contiene una certa struttura layout predefinito del documento, che può essere di progettazione utile per la prototipazione rapida.
Cartella principale 'meno' cartella contiene qualche file .less. Se si vuole essere sviluppato sulla base MENO, questi file possono essere utili.
Nella cartella principale, ci sono alcuni file. Alcuni sono utilizzati per i file HTML prototipazione di base, alcuni dei quali sono basati su Bower per bower.json compilato, browserstack.json. In aggiunta, ci composer.json e un file YAML _config.yml.
Oltre a scaricare dal link indicato, è anche possibile utilizzare il seguente comando per compilare tutti i CSS, file JS -
$ bower install bootstrap
È possibile copiare il Bootstrap Rapporto Git
git clone git://github.com/twbs/bootstrap.git
Per questo tutorial, abbiamo scaricato solo il file Zip, non usa.
Una volta imparato questo tutorial, vi incoraggiamo a Bower telaio di montaggio per vedere come funziona.
NetDNA supporto compilazione e la versione semplificata di Bootstrap CSS, Js e altri argomenti css. Si può citare loro la seguente dichiarazione
<!-- 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>
Sviluppato utilizzando v3.0.0 Bootstrap
HTML di base
Di seguito sono la struttura HTML di base per il nostro progetto
<! DOCTYPE html>
<HTML>
<Head>
template <Titolo> Bootstrap V3 </ title>
<Meta name = "viewport" content = "width = device-width, iniziale di scala = 1.0">
<! - Bootstrap ->
<Link href = "bootstrap.min.css bootstrap-3.0.0 / dist / css /" = "screen" rel = "stylesheet" dei media>
<! - Spessore HTML5 e il supporto Respond.js IE8 di elementi HTML5 e media query ->
<! - [If lt IE 9]>
<Script src = "bootstrap-3.0.0 / attività / js / html5shiv.js"> </ script>
<script src = "bootstrap-3.0.0 / attività / js / respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Body>
<H1> Ciao, mondo! </ H1>
<! - JQuery (necessario per i plugin JavaScript del bootstrap) ->
<Src = "script // code.jquery.com/jquery.js"> </ script>
<! - Include tutti i plugin compilati (in basso), o includere i singoli file, se necessario ->
<Script src = "bootstrap-3.0.0 / dist / JS / bootstrap.min.js"> </ script>
</ Corpo>
</ Html>
Si prega di notare che il modello e html5shiv.js aggiunto respond.min.js per ottenere il supporto IE8. In Bootstrap versione 3 è stato aggiunto a questi file.
Abbiamo twitter-bootstrap file nella cartella principale della cartella del server Web, è stata posta bootstrap-3.0.0 cartella. Tutti i file HTML che creiamo saranno messi in Twitter-bootstrap. La ragione per illustrare questo punto, al fine di semplificare il processo di sviluppo.
personalizzare
Noi personalizzare diverso stile scatola CSS. Pertanto, sulla base dei CSS originale non distrugge i file su (che si trova bootstrap-3.0.0 della cartella dist) nella stessa cartella, creeremo un file CSS separato denominato custom.css. Poi abbiamo nel file HTML, subito dopo il file CSS originale, fare riferimento al file CSS. In questo modo, siamo in grado di ignorare lo stile di default che vogliamo cambiare, tuttavia, se l'aggiornamento del Bootstrap, il file CSS originale non distruggere il nostro personalizzato sulla base di aggiornate. Si consiglia inoltre di seguire questo approccio nel processo di sviluppo.
creazione di navigazione
Per creare una navigazione, nel file HTML, seguito dal corpo dopo il tag iniziale, aggiungere il seguente codice.
<Nav class = "barra di navigazione barra di navigazione-inversa navbar-fisso-top" role = "navigazione">
<Ul class = "nav navbar-nav">
<Li> <a href="new.html" class="navbar-brand">
<Img src = "logo.png"> </a> </ li>
<Li class = "attivo"> <a href="#"> casa </a> </ li>
<Li> <a href="price.html"> prezzo </a> </ li>
<Li> <a href="contact.html"> contatto </a> </ li>
<Li class = "discesa">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> sociale <b class = "cursore"> </ b> </a>
<Ul class = "discesa-menu">
<li class = "eventi sociali"> <g: plusone annotation = "in linea" width = "150"> </ g: plusone> </ li>
<Li class = "eventi sociali"> <div class = "fb-like" dati-href = "https://developers.facebook.com/docs/plugins/~~number=plural" Dati-width = "la larghezza in pixel del plugin" di dati -Altezza = "l'altezza dei pixel del plugin" data-colorscheme = dati-layout "luce" = "standard" data-action = "come" data-show-facce = "true" data-send = "false"> < / div> </ li>
<Li class = "eventi sociali"> <a href="https://twitter.com/share" class="twitter-share-button"> Tweet </a>
<Script> function (d, s, id) {var js, FJS = d.getElementsByTagName (s) [0]; se {js = d.createElement (s) (d.getElementById (id)!); Js. id = id; js.src = "// platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (documento," script "," twitter-WJS "); < / script> </ li>
</ Ul>
</ Li>
</ Ul>
</ Nav>
Per la navigazione, l'uso Bootstrap 'navbar' classe nella gerarchia contenitore. Pertanto, sarà assegnato per contenere l'intero elemento di navigazione nav.
Abbiamo usato classe 'navbar-inverso' per cambiare il colore di default della barra di navigazione, l'uso della luce prima del buio al posto del default. class 'top-Navbar-fisso' assicura che quando scorriamo pagina HTML, barra di navigazione nella parte superiore della posizione fissa.
In Bootstrap V3.0.0, quando la navigazione si crea quando si utilizza il ruolo = "navigazione" è nuovo. BOOTSTRAP raccomandare tale utilizzo, per un facile accesso alla barra di navigazione.
A questo punto, dobbiamo aumentare il corpo del documento in custom.css 'padding-top: 80px;'. Si aggiunge al corpo come la parte superiore dei pixel riempiti possono essere diverse, ma a meno che non lo si fa, la parte superiore della barra di navigazione dopo, verrà nascosto.
Nel menu di navigazione contenitore, abbiamo una classe di 'nav' e lista non ordinata 'navbar-nav'. In questa lista non ordinata, ogni voce dell'elenco contiene un link di navigazione.
classe 'Navbar-brand' per presentare un marchio. Abbiamo usato un'immagine. Dal momento che l'altezza dell'altezza dell'immagine è superiore alla barra di navigazione di base, dove facciamo qualche personalizzazione. Il '.navbar-nav> li> una' proprietà 'line-height' dal 20px di default originale di 50px, modificare la dimensione del carattere di 16px.
Il link a destra, abbiamo aumentato la casella a discesa. Per correlate Li aggiunto alla classe 'discesa', seguito con l'aggiunta di un 'discesa-leva' e di ancoraggio 'accento circonflesso' con due classi. L'ancora del nostro progetto in realtà contiene il testo di ancoraggio sociale. Questo li contiene una lista non ordinata, ogni voce dell'elenco in una lista annidata sono mostrati nella seguente scatola contiene il link.
Nella casella a discesa che abbiamo aggiunto un plugin sociale. Il primo contiene una batteria Li marchio Google Plus, e il secondo contiene il tag li Facebook, e il terzo contiene i pulsanti di Twitter tag visualizzazione Li e alcuni script js.
Inoltre, è necessario avviare dopo il tag body, aggiungere il seguente markup e scripting per rendere Facebook Button opere
<Div id = "fb-root"> </ div>
(Function (d, s, id) {
var js, FJS = d.getElementsByTagName (s) [0];
if (d.getElementById id) () return;
js = d.createElement (s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore (js, FJS);
} (Documento, 'script', 'facebook-jssdk'));
Per rendere Twitter lavoro tasto, si finisce prima del tag body, aggiungere il seguente script
(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);
}) ();
Usiamo il seguente stile per aggiungere un po 'di stile in più alla classe di pulsanti sociali' eventi sociali.
.socials {
padding: 10px;
}
Questo completa la nostra navigazione.
Creare una presentazione da carousal
Al fine di proiettare home page barra di navigazione, creare una presentazione, useremo i seguenti tag
<Div id = "carosello-esempio-generico" class = "carosello scivolo">
<! - -> Indicatori
<Class = "Ol carosello-indicatori">
<Li data-target = "# giostra-esempio-generico" data-slide-to = "0" class = "attivo"> </ li>
<Li data-target = "# giostra-esempio-generico" data-slide-to = "1"> </ li>
<Li data-target = "# giostra-esempio-generico" data-slide-to = "2"> </ li>
</ Ol>
<! - Wrapper per diapositive ->
<Div class = "carosello-interiore">
<Div class = "elemento attivo">
<Img src = "computer.jpg" alt = "...">
<Div class = "carosello-caption">
<H1> Grandi desktop sono ovunque </ h1>
<P> <button class = "btn btn-successo btn-lg"> Prova di 30 giorni di prova ora </ p>
</ Div>
</ Div>
<Div class = "oggetto">
<Img src = "mobile.jpg" alt = "...">
<Div class = "carosello-caption">
<H1> cellulari sono superando in numero i desktop </ h1>
<P> <button class = "btn btn-successo btn-lg"> Prova di 30 giorni di prova ora </ p>
</ Div>
</ Div>
<Div class = "oggetto">
<Img src = "cloud1.jpg" alt = "...">
<Div class = "carosello-caption">
<H1> Le imprese stanno adottando Cloud computing veloce </ h1>
<P> <button class = "btn btn-successo btn-lg"> Prova di 30 giorni di prova ora </ p>
</ Div>
</ Div>
</ Div>
<! - -> Controlli
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<Span class = "icona-prev"> </ span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<Span class = "icona-next"> </ span>
</a>
</ Div>
</ Div>
Ci sono quattro sezioni nel Carousal. contenitore principale utilizzando un 'carosello scivolo' div tag con le definizioni di classe.
Poi una classe 'carosello-indicatori "con una lista ordinata. ol ogni elemento della lista rappresenta una diapositiva. Quando la pagina viene caricata, caricato dalla presentazione default con classe 'attivo'. Durante il rendering, li vedrete nel titolo di piccoli cerchi.
Poi, ogni diapositiva (immagine) è disposto con un 'oggetto' di classe del tag div. Ogni elemento è annidato con una 'giostra-caption' classe del div. carosello-caption contiene l'immagine visualizzata insieme con il tag del titolo. Il paragrafo contiene un H1 e un pulsante, è possibile includere anche altri proprio marchio.
L'ultima parte è utilizzata per controllare una diapositiva diapositiva successiva / precedente. Questo è l'uso di 'sinistra' e 'carousel controllo' sulla definizione di una classe, utilizzando la seguente 'destra' e 'carousel-control' definizione di una classe.
'Icon-prev' e di classe 'icona-next' per l'icona successiva e precedente.
Abbiamo fatto un po 'di personalizzazione carousal di default. Ci auguriamo che le didascalie, indicatori e icone seguenti / precedenti sono resi in cima alla posizione predefinita di pochi pixel.
Per fare questo, si aggiungono i seguenti stili custom.css di file
.carousel-interno .item .carousel-caption {
position: absolute;
top: 200px
}
.carousel Indicatori {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom: 0;
}
.navbar-nav> li> a {
line-height: 50px;
font-size: 16px
}
Abbiamo inoltre personalizzare l'H1, aggiungiamo un margine inferiore di 30 pixel.
h1 {
margin-bottom: 30px
}
immagine di risposta
Avrete notato che ogni immagine nella diapositiva, abbiamo usato il 'img-reattivo' di classe. Questo è un Bootstrap v3.0.0 nuove funzionalità. Utilizzando il tag di classe 'img-reattivo' IMG, Bootstrap in modo che la risposta immagine.
Creare una griglia
Nelle seguenti diapositive, abbiamo utilizzato una griglia per posizionare contenuti. Avendo un 'contenitore' classe di div iniziare una griglia. Si prega di notare che stiamo per sviluppare un sito web reattivo, invece della versione precedente di Bootstrap, in cui il contenitore ha una sola classe, il valore predefinito è reattivo.
div contenitore con nidificato diversi classe 'fila' di div (la prima fila di tre, la seconda linea ha sei), per creare un Bootstrap linee della griglia.
Ogni riga ha un con un 'col-xy' classe di div, per creare colonne. Il valore di x può essere: XS per i dispositivi mobili per l'SM Tablet PC, MD per notebook e lo schermo del desktop più piccolo per lg schermo del desktop di grandi dimensioni. Questo è il primo metodo. Il valore di y può essere qualsiasi numero intero positivo, anche se il numero totale di colonne della griglia deve essere superiore a 12. Nel nostro progetto, per semplicità abbiamo usato LG, ma dal momento che abbiamo già fatto, si può ottenere un telefono o tablet per visualizzare il sito del progetto per il confronto.
Nel seguente tutorial, avremo un tutorial completo su sistema di rete Bootstrap, per esplorare la sua risposta affascinante.
In questo esempio, vogliamo che la larghezza della colonna delle prime tre file sono uguali, in modo da utilizzare per tutte le colonne "col-LG-4 '. In seconda fila, vogliamo sei colonne di uguale larghezza, in modo da utilizzare per tutte le colonne "col-LG-2 '.
Ecco il tag che contiene una griglia di due righe, la prima fila ci sono tre, la seconda fila ha sei.
<Div class = "riga 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>
Abbiamo un hr e un piè con i seguenti marchi la fine della griglia
<Hr> <P> Copyright @ 2013-14 da ToDo App. </ P>
Utilizzare la Tabella
Nella pagina price.html del nostro progetto, usiamo un modulo per il rendering di un listino prezzi, con la seguente dicitura
<Class = Tabella "tavolo da ping-delimitato">
<Thead>
<Tr>
<th> Caratteristiche </ th>
<Th> individuale </ th>
<Th> Small Team </ th>
<Th> Media Squadra </ th>
<Th> Enterprise </ th>
</ Tr>
</ Thead>
<Tbody>
<Tr>
<Td> <h3> No. di utenti </ h3> </ td>
<Td> <span class = "badge"> Un </ span> </ td>
<Td> <span class = "badge"> Cinque </ span> </ td>
<Td> <span class = "badge"> Quindici </ span> </ td>
<Td> <span class = "badge"> illimitato </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> formazione Pro </ h3> </ td>
<Td> <span class = "badge"> No </ span> </ td>
<Td> <span class = "badge"> Sì </ span> </ td>
<Td> <span class = "badge"> Sì </ span> </ td>
<Td> <span class = "badge"> Sì </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Forum Assistenza </ h3> </ td>
<Td> <span class = "badge"> Sì </ span> </ td>
<Td> <span class = "badge"> Sì </ span> </ td>
<Td> <span class = "badge"> Sì </ span> </ td>
<Td> <span class = "badge"> Sì </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> A sostegno persona </ h3> </ td>
<Td> <span class = "badge"> No </ span> </ td>
<Td> <span class = "badge"> No </ span> </ td>
<Td> <span class = "badge"> Sì </ span> </ td>
<Td> <span class = "badge"> Sì </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> webinar settimanale </ h3> </ td>
<Td> <span class = "badge"> No </ span> </ td>
<Td> <span class = "badge"> No </ span> </ td>
<Td> <span class = "badge"> Sì </ span> </ td>
<Td> <span class = "badge"> Sì </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Prezzo </ h3> </ td>
<Td> <button type = "button" class = "btn btn-warning btn-lg"> $ 9 / Mese </ button> </ td>
<Td> <button type = "button" class = "btn btn-warning btn-lg"> $ 19 / mese </ button> </ td>
<Td> <button type = "button" class = "btn btn-warning btn-lg"> $ 49 / mese </ button> </ td>
<Td> <button type = "button" class = "btn btn-warning btn-lg"> $ 99 / mese </ button> </ td>
</ Tr>
<Tr>
<Td> </ td>
<Td> <tipo di pulsante = classe "pulsante" = "btn btn-successo btn-lg"> Compra adesso </ button> </ td>
<Td> <button type = "button" class = "btn btn-successo btn-lg" "> Compra adesso </ button> </ td>
<Td> <button type = "button" class = "btn btn-successo btn-lg" "> Compra adesso </ button> </ td>
<Td> <button type = "button" class = "btn btn-successo btn-lg" "> Compra adesso </ button> </ td>
</ Tr>
</ Tbody>
</ Table>
Bootstrap utilizzando il file CSS originale 'table' e due di classe 'table-delimitato'. Ma dobbiamo fare la seguente tabella con l'aggiunta di un po 'di file CSS personalizzato in customize.css aspetto diverso
esimo {
background-color: # 428bca;
color: # ec8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}
Utilizzare il distintivo
Usiamo la classe 'distintivo' per visualizzare un testo in tabella. Abbiamo il seguente CSS personalizzato con la classe distintivo
.badge {
background-color: # 428bca;
colore: #fff;
font-size: 22px;
}
Per questa pagina pagina e contact.html, abbiamo aggiunto un'altra regola CSS nel customize.css
.container> h1 {
text-align: center;
}
Questo permette h1 centrato.
Utilizzo dei moduli
Nel file di contact.html, creiamo tre colonne, la prima colonna, abbiamo incorporare un modulo. Utilizzare il foglio di stile predefinito.
<Form class = "form-orizzontale" role = "forma">
<Div class = "forma-gruppo">
<Label for = "email" class = "col-lg-2 di controllo-label"> E-mail </ label>
<Div class = "col-lg-10">
<Input type = "email" class = "forma-control" id = segnaposto "e-mail" = "Email">
</ Div>
</ Div>
<Div class = "forma-gruppo">
<Label for = "nome" class = "col-lg-2 di controllo-label"> Nome </ label>
<Div class = "col-lg-10">
<Input type = "text" class = "forma-control" id = "nome" segnaposto = "Nome">
</ Div>
</ Div>
<Div class = "forma-gruppo">
<Label for = "paese" class = "col-lg-2 di controllo-label"> Paese </ label>
<Div class = "col-lg-10">
<Seleziona>
<Opzione> Stati Uniti d'America </ option>
<Opzione> India </ option>
<Opzione> Regno Unito </ option>
<Opzione> Autralia </ option>
</ Select>
</ Div>
</ Div>
<Div class = "forma-gruppo">
<Label for = "desc" class = "-2 col-lg controllo-label"> Messaggio </ label>
<Div class = "col-lg-10">
<Righe Textarea = "5" cols = "50"> </ textarea>
</ Div>
</ Div>
<Div class = "forma-gruppo">
<Div class = "col-lg-offset-2 col-lg-10">
<Tipo Pulsante = "submit" class = "btn btn-default"> Invia </ button>
</ Div>
</ Div>
</ Form>
'Form-orizzontale' classe consente forma per mantenere l'allineamento orizzontale. Si prega di notare che per la facilità di accesso, aggiungere role = "forma". Questa è la versione 3.0.0 delle nuove funzionalità.
Per individuare ogni controlli dei moduli, Bootstrap 3.0.0 utilizza una nuova classe 'forma-gruppo'.
In questa pagina, la seconda colonna della griglia, abbiamo semplicemente messo una parte di testo.
Aggiungere Google Maps
Nella pagina contact.html, la terza colonna della griglia, abbiamo aggiunto una mappa di Google (Google Maps). Per fare questo, usiamo i seguenti tag
<Div id = "map_canvas"> </ div> </ Div>
I seguenti js aggiunti l'intestazione del file HTML all'interno della intestazione
funzione initialize () {
var map_canvas = document.getElementById ( 'map_canvas');
var map_options = {
Centro: nuova 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 (finestra, 'carico', inizializzare);
Prima detto prima js, è necessario aggiungere il seguente tag script
<Script src = "http://maps.googleapis.com/maps/api/js?sensor=false"> </ script>
Al fine di rendere correttamente la mappa, è necessario aggiungere i seguenti stili custom.css
#map_canvas {
width: 400px;
altezza: 400px;
}
Questo è come creare un progetto semplice basata su Bootstrap V3.0.0. Ma abbiamo toccato solo la superficie, poi capitoli spiegare più in dettaglio.