bootstrap Profil
target
Bootstrap adalah kerangka front-end yang paling populer, telah merilis versi ketiga (v3.0.0). Tutorial ini akan membawa Anda untuk mulai belajar Bootstrap 3.
Anda juga akan melihat bagaimana menggunakan fitur bingkai bingkai kustom yang berbeda, seperti menggunakan grid untuk membuat tata letak, navigasi dibuat oleh nav, menggunakan carousal membuat kotak drop-down, tambahkan sosial plug-in dan Google Map dan pihak ketiga plug-in lainnya.
Apa Bootstrap
Bootstrap adalah kerangka front-end untuk pengembangan cepat aplikasi Web dan situs Web.
Dalam pengembangan Web modern, ada beberapa komponen untuk hampir semua proyek Web diperlukan.
Bootstrap menyediakan Anda dengan semua ini modul dasar - Grid, Tipografi, Tabel, Formulir, Buttons dan Responsiveness.
Selain itu, ada banyak berguna komponen front-end lainnya, seperti dropdown, Navigasi, kata modal, Typehead, Pagination, korsel, Breadcrumb, Tab, Thumbnail, Header dan sebagainya.
Dengan ini, Anda dapat membangun sebuah proyek Web, dan biarkan berjalan lebih cepat dan mudah.
Selain itu, karena seluruh kerangka didasarkan pada modul, Anda dapat menempatkan CSS Anda sendiri, atau bahkan koreksi besar setelah dimulainya proyek untuk menyesuaikan.
Hal ini didasarkan pada beberapa praktik terbaik, kami pikir ini adalah tempat yang baik untuk mulai belajar kesempatan pengembangan web modern, setelah Anda menguasai dasar-dasar HTML dan JavaScript / jQuery, Anda dapat menerapkan pengetahuan ini dalam pengembangan Web.
Meskipun beberapa kritikus, semua proyek yang dibangun oleh Bootstrap terlihat sama, Anda tidak perlu tahu terlalu banyak tentang HTML + CSS pengetahuan dapat membangun sebuah website. Namun, kita perlu memahami, Bootstrap adalah kerangka umum, sama seperti hal-hal umum lainnya yang Anda butuhkan untuk menyesuaikan untuk membuatnya unik. Bila Anda ingin menyesuaikan, Anda perlu kajian mendalam, tidak ada HTML baik + dasar CSS tidak layak.
Bootstrap kecuali, tentu saja, ada banyak bingkai depan lain yang baik, menggunakan kerangka yang merupakan pengembangan dari seleksi personil, tapi bootstrap pasti layak mencoba.
Mengapa proyek harus menggunakan Bootstrap?
Download struktur file dan memahami
Anda dapat memilih dari https://github.com/twbs/bootstrap/archive/v3.0.0.zip atau https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist .zip men-download Bootstrap Versi 3.0.0 pada. Kami menggunakan yang pertama, Anda dapat menggunakan kedua.
Selain itu, kami menyediakan kode download berisi link untuk mengunduh pertama melalui folder kode bootstrap. Sisi ini juga mengandung asli yang digunakan untuk menyesuaikan css Bootstrap dari custom.css.
Setelah membongkar, Anda akan menemukan, di root folder bootstrap-3.0.0 Beberapa file dan folder.
File utama CSS - bootstrap.css dan versi sederhana nya bootstrap-min.css, terletak di folder root 'dist' folder 'css' bootstrap-3.0.0 file di bawah folder.
Dalam 'dist' di dalam, ada folder 'js' berisi utama bootstrap.js berkas JavaScript dan versi yang disederhanakan nya.
File di root, ada folder terpisah 'js' berisi file yang berbeda yang berbeda JavaScript plug-in.
Dalam file root di dalam 'aset', Anda akan menemukan folder 'js' lain. Ini adalah tempat dengan HTML5 shim dari html5shiv.js, untuk memperoleh dukungan IE8. Ada juga file respond.min.js untuk mendukung IE8 query multimedia. Folder ini juga berisi js Plugin jquery.js Bootstrap tergantung.
Dalam folder yang sama, ada folder 'ico' berisi berbagai ikon perangkat mobile dan ikon favicon.
Dalam 'css' jalan yang sama folder berisi file css dokumen.
folder '_includes' Dan '_layouts' berisi beberapa struktur layout default dari dokumen, yang mungkin desain berguna untuk prototyping cepat.
root folder folder 'kurang' berisi beberapa berkas .less. Jika Anda ingin dikembangkan berdasarkan KURANG, file-file ini dapat berguna.
Dalam folder root, ada beberapa file. Beberapa digunakan untuk file prototyping HTML dasar, beberapa di antaranya didasarkan pada Bower untuk bower.json dikompilasi, browserstack.json. Selain itu, ada composer.json dan _config.yml file YAML.
Selain men-download dari link yang diberikan, Anda juga dapat menggunakan perintah berikut untuk mengkompilasi semua CSS, file JS -
$ bower install bootstrap
Anda dapat menyalin Git Bootstrap Laporan
git clone git://github.com/twbs/bootstrap.git
Untuk tutorial ini, kita hanya download file Zip, tidak menggunakan.
Setelah Anda mempelajari tutorial ini, kami mendorong Anda untuk Bower pemasangan bingkai untuk melihat cara kerjanya.
NetDNA dukungan kompilasi dan versi sederhana dari Bootstrap CSS, Js dan topik lainnya css. Anda dapat mengutip mereka pernyataan berikut
<!-- 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>
Dikembangkan menggunakan v3.0.0 Bootstrap
dasar HTML
Berikut ini adalah struktur HTML dasar untuk proyek kami
<! DOCTYPE html>
<Html>
<Head>
<Title> Bootstrap V3 template </ title>
<Meta name = "viewport" content = "width = device-width, awal skala = 1.0">
<! - Bootstrap ->
<Link href = "bootstrap-3.0.0 / dist / css / bootstrap.min.css" rel = "stylesheet" Media = "screen">
<! - HTML5 shim dan dukungan Respond.js IE8 elemen HTML5 dan kueri media ->
<! - [Jika lt IE 9]>
<Script src = "bootstrap-3.0.0 / aset / js / html5shiv.js"> </ script>
<Script src = "bootstrap-3.0.0 / aset / js / respond.min.js"> </ script>
<! [Endif] ->
</ Kepala>
<Body>
<H1> Hello, world! </ H1>
<! - JQuery (diperlukan untuk plugin JavaScript Bootstrap ini) ->
<Script src = "// code.jquery.com/jquery.js"> </ script>
<! - Sertakan semua plugin dikompilasi (bawah), atau menyertakan file individual yang diperlukan ->
<Script src = "bootstrap-3.0.0 / dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
Harap dicatat bahwa template dan menambahkan html5shiv.js respond.min.js untuk memperoleh dukungan IE8. Dalam Bootstrap versi 3 telah ditambahkan ke file-file ini.
Kami twitter-bootstrap file dalam folder root folder server Web, telah ditempatkan bootstrap-3.0.0 folder. Semua file HTML kita buat akan ditempatkan di twitter-bootstrap. Alasannya menggambarkan hal ini, untuk merampingkan proses pembangunan kita.
menyesuaikan
Kami akan menyesuaikan gaya kotak CSS yang berbeda. Oleh karena itu, atas dasar CSS asli tidak merusak file di (terletak bootstrap-3.0.0 dari folder dist) dalam folder yang sama, kita akan membuat file CSS terpisah bernama custom.css. Kemudian kami dalam file HTML, segera setelah file CSS asli, referensi file CSS. Dengan cara ini, kita dapat menimpa gaya default kita ingin berubah, namun, jika Bootstrap meng-upgrade, file CSS asli tidak akan merusak kebiasaan kami atas dasar diperbarui. Kami juga menyarankan Anda mengikuti pendekatan ini dalam proses pembangunan.
Buat navigasi
Untuk membuat navigasi, dalam file HTML, diikuti oleh tubuh setelah tag awal, tambahkan kode berikut.
<Nav class = "navbar navbar-inverse navbar-tetap-top" role = "navigasi">
<Class Ul = "nav navbar-nav">
<Li> <a href="new.html" class="navbar-brand">
<Img src = "logo.png"> </a> </ li>
<Li class = "aktif"> <a href="#"> Rumah </a> </ li>
<Li> <a href="price.html"> Harga </a> </ li>
<Li> <a href="contact.html"> Hubungi </a> </ li>
<Class Li = "dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Sosial <b class = "sisipan"> </ b> </a>
<Class Ul = "dropdown-menu">
<Li class = "acara sosial"> <g: plussatu penjelasan = "inline" width = "150"> </ g: plussatu> </ li>
<Li class = "acara sosial"> <div class = "fb-seperti" Data-href = "https://developers.facebook.com/docs/plugins/" Data-width = "Lebar pixel plugin" Data -height = "ketinggian pixel dari plugin" Data-colorscheme = "cahaya" Data-layout = "standar" Data-action = "seperti" Data-show-wajah = "true" Data-send = "false"> < / div> </ li>
<Li class = "acara sosial"> <a href="https://twitter.com/share" class="twitter-share-button"> Tweet </a>
! <Script> function (d, s, id) {var js, Fjs = d.getElementsByTagName (s) [0]; jika {js = d.createElement (s) (d.getElementById (id)!); Js. id = id; js.src = "// platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (dokumen," script "," twitter-WJS "); < / script> </ li>
</ Ul>
</ Li>
</ Ul>
</ Nav>
Untuk navigasi, penggunaan Bootstrap kelas 'navbar' dalam hirarki kontainer. Oleh karena itu, akan ditugaskan untuk memegang seluruh elemen navigasi nav.
Kami telah menggunakan kelas 'navbar-inverse' untuk mengubah warna default dari bar navigasi, penggunaan cahaya sebelum gelap bukan default. kelas 'Navbar-fixed-top' memastikan bahwa ketika kita gulir ke bawah halaman HTML, bar navigasi di bagian atas posisi tetap.
Dalam Bootstrap v3.0.0, ketika navigasi dibuat ketika menggunakan peran = "navigasi" baru. Bootstrap merekomendasikan penggunaan tersebut, untuk memudahkan akses ke bar navigasi.
Pada titik ini, kita harus meningkatkan tubuh dokumen custom.css 'padding-top: 80px;'. Anda tambahkan ke tubuh sebagai puncak piksel diisi mungkin berbeda, tetapi jika Anda melakukannya, bagian atas bar navigasi setelah, akan disembunyikan.
Dalam nav kontainer, kami kami memiliki kelas 'nav' dan 'navbar-nav' daftar unordered. Dalam daftar unordered ini, setiap item daftar berisi link navigasi.
kelas 'Navbar-merek' untuk menyajikan nama merek. Kami telah menggunakan gambar. Karena ketinggian tinggi gambar lebih besar dari navigasi dasar bar, di mana kita melakukan beberapa penyesuaian. The '.navbar-nav> li> a' yang 'line-height' properti dari 20px bawaan asli untuk 50px, mengubah ukuran font untuk 16px.
Link ke kanan, kami telah meningkatkan kotak drop-down. Untuk li terkait ditambahkan ke kelas 'dropdown', diikuti dengan menambahkan 'dropdown-ubah dan anchor' sisipan 'dengan dua kelas. Jangkar proyek kami benar-benar berisi teks jangkar sosial. li ini berisi daftar unordered, setiap item daftar dalam daftar bersarang ditunjukkan dalam kotak berikut berisi link.
Pada kotak drop-down yang kami telah menambahkan sebuah plugin sosial. Pertama berisi li Google Plus mark, dan yang kedua berisi tag li Facebook, dan yang ketiga berisi tag display li Twitter tombol dan beberapa script js.
Selain itu, Anda harus mulai setelah tag body, menambahkan markup dan scripting berikut untuk membuat tombol Facebook karya
<Div id = "fb-root"> </ div>
(Fungsi (d, s, id) {
var js, Fjs = d.getElementsByTagName (s) [0];
jika (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);
} (Dokumen, 'script', 'facebook-jssdk'));
Untuk membuat tombol Twitter kerja, kita berakhir sebelum tag body, tambahkan script berikut
(Fungsi () {
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);
}) ();
Kami menggunakan gaya berikut untuk menambahkan beberapa gaya ekstra untuk kelas 'acara sosial' dari tombol sosial.
.socials {
padding: 10px;
}
Ini melengkapi navigasi kami.
Buat slide show dengan korsel
Dalam rangka proyek halaman rumah navigasi, membuat slide show, kita akan menggunakan tag berikut
<Div id = "korsel-contoh-generic" class = "korsel slide">
<! - Indikator ->
<Ol class = "korsel-indikator">
<Li Data-target = "# carousel-contoh-generik" Data-slide-to = "0" class = "aktif"> </ li>
<Li Data-target = "# carousel-contoh-generik" Data-slide-to = "1"> </ li>
<Li Data-target = "# carousel-contoh-generik" Data-slide-to = "2"> </ li>
</ Ol>
<! - Wrapper untuk slide ->
<Class Div = "korsel-batin">
<Class Div = "item aktif">
<Img src = "computer.jpg" alt = "...">
<Class Div = "korsel-caption">
<H1> Desktop besar di mana-mana </ h1>
<P> <button class = "btn btn-keberhasilan btn-lg"> Coba 30 hari percobaan sekarang </ p>
</ Div>
</ Div>
<Class Div = "item">
<Img src = "mobile.jpg" alt = "...">
<Class Div = "korsel-caption">
<H1> Mobiles yang outnumbering desktop </ h1>
<P> <button class = "btn btn-keberhasilan btn-lg"> Coba 30 hari percobaan sekarang </ p>
</ Div>
</ Div>
<Class Div = "item">
<Img src = "cloud1.jpg" alt = "...">
<Class Div = "korsel-caption">
<H1> Usaha mengadopsi Cloud computing cepat </ h1>
<P> <button class = "btn btn-keberhasilan btn-lg"> Coba 30 hari percobaan sekarang </ p>
</ Div>
</ Div>
</ Div>
<! - Kontrol ->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<Span class = "icon-prev"> </ span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<Span class = "icon-next"> </ span>
</a>
</ Div>
</ Div>
Ada empat bagian di korsel. wadah utama menggunakan 'korsel geser' div tag dengan definisi kelas.
Kemudian kelas 'carousel-indikator' dengan daftar memerintahkan. ol setiap item daftar mewakili slide. Ketika halaman dibuka, dimuat secara default slideshow dengan kelas 'aktif'. Ketika rendering, Anda akan melihat mereka dalam pos lingkaran kecil.
Kemudian, setiap slide (gambar) ditempatkan dengan kelas 'item' dari tag div. Setiap item bersarang dengan kelas 'carousel-caption' div. carousel-caption berisi gambar yang ditampilkan bersama-sama dengan tag judul. Ayat berisi h1 dan tombol, Anda juga bisa memasukkan tanda lain sendiri.
Bagian terakhir digunakan untuk mengontrol slide berikutnya / slide sebelumnya. Ini adalah penggunaan 'kiri' dan 'carousel-control' pada definisi kelas, menggunakan 'tepat' berikut dan definisi 'carousel-control' dari kelas.
'Icon-prev' dan kelas 'icon-depan untuk ikon berikutnya dan sebelumnya.
Kami telah melakukan beberapa penyesuaian di korsel default. Kami berharap keterangan, indikator dan ikon berikutnya / sebelumnya diberikan di atas lokasi default dari beberapa piksel.
Untuk melakukan hal ini, kita menambahkan gaya berikut custom.css berkas
.carousel-batin .item .carousel-caption {
position: absolute;
top: 200px
}
.carousel-indikator {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom: 0;
}
.navbar-nav> li> a {
line-height: 50px;
font-size: 16px
}
Kami juga menyesuaikan h1, menambahkan untuk itu margin bawah 30 piksel.
h1 {
margin-bottom: 30px
}
image Response
Anda mungkin telah memperhatikan bahwa setiap gambar dalam slide, kami telah menggunakan kelas 'img-responsif'. Ini adalah Bootstrap v3.0.0 fitur baru. Dengan menggunakan img tag 'img-responsif' kelas, Bootstrap sehingga respon gambar.
Buat grid
Pada slide berikut, kami menggunakan grid untuk menempatkan konten. Dengan memiliki kelas 'wadah' dari div mulai grid. Harap dicatat bahwa kami akan mengembangkan sebuah website responsif, bukan versi sebelumnya Bootstrap, di mana wadah memiliki satu kelas, defaultnya adalah responsif.
Kontainer div dengan beberapa kelas bersarang 'baris' dari div (baris pertama dari tiga, baris kedua memiliki enam), untuk membuat garis grid Bootstrap.
Setiap baris memiliki dengan kelas 'col-xy' dari div, untuk membuat kolom. Nilai x dapat: xs untuk perangkat mobile untuk sm Tablet PC, md untuk komputer notebook dan layar desktop lebih kecil untuk lg layar desktop yang besar. Ini adalah metode pertama. Nilai y dapat berupa bilangan bulat positif, meskipun jumlah total kolom di grid harus tidak lebih dari 12. Dalam proyek kami, untuk kesederhanaan kita telah menggunakan lg, tapi karena kami sudah melakukannya, Anda mungkin mendapatkan telepon atau tablet untuk melihat lokasi proyek untuk perbandingan.
Dalam tutorial berikut, kita akan memiliki tutorial lengkap tentang sistem grid Bootstrap, untuk mengeksplorasi respon yang menarik.
Dalam contoh ini, kami ingin lebar kolom dari tiga baris pertama adalah sama, jadi kita gunakan untuk semua kolom 'col-lg-4'. Di baris kedua, kita ingin enam kolom lebar sama, jadi kita gunakan untuk semua kolom 'col-lg-2'.
Berikut adalah tag yang berisi grid dua baris, baris pertama ada tiga, baris kedua memiliki enam.
<Class Div = "row Barone"> <Class Div = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / php.png"> </ p> </ Div> <Class Div = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / mysql-logo.jpg"> </ p> </ Div> <Class Div = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / javascript-logo.png"> </ p> </ Div> <Class Div = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / java.jpg"> </ p> </ Div> <Class Div = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / postgresql.png"> </ p> </ Div> </ Div>
Kami memiliki jam dan footer dengan tanda setelah akhir grid
<Hr> <P> Copyright @ 2013-14 oleh ToDo App. </ P>
Gunakan Table
Di halaman price.html dari proyek kami, kami menggunakan formulir untuk membuat daftar harga, diberi label sebagai berikut
<Class Tabel = "meja meja-berbatasan">
<Thead>
<Tr>
<Th> Fitur </ th>
<Th> Individu </ th>
<Th> Tim Kecil </ th>
<Th> Tim Medium </ th>
<Th> Perusahaan </ th>
</ Tr>
</ Thead>
<Tbody>
<Tr>
<Td> <h3> No Dari pengguna </ h3> </ td>
<Td> <span class = "lencana"> Satu </ span> </ td>
<Td> <span class = "lencana"> Lima </ span> </ td>
<Td> <span class = "lencana"> Lima belas </ span> </ td>
<Td> <span class = "lencana"> Terbatas </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Pro pelatihan </ h3> </ td>
<Td> <span class = "lencana"> Tidak ada </ span> </ td>
<Td> <span class = "lencana"> Ya </ span> </ td>
<Td> <span class = "lencana"> Ya </ span> </ td>
<Td> <span class = "lencana"> Ya </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Forum Dukungan </ h3> </ td>
<Td> <span class = "lencana"> Ya </ span> </ td>
<Td> <span class = "lencana"> Ya </ span> </ td>
<Td> <span class = "lencana"> Ya </ span> </ td>
<Td> <span class = "lencana"> Ya </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Dalam orang dukungan </ h3> </ td>
<Td> <span class = "lencana"> Tidak ada </ span> </ td>
<Td> <span class = "lencana"> Tidak ada </ span> </ td>
<Td> <span class = "lencana"> Ya </ span> </ td>
<Td> <span class = "lencana"> Ya </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> webinar mingguan </ h3> </ td>
<Td> <span class = "lencana"> Tidak ada </ span> </ td>
<Td> <span class = "lencana"> Tidak ada </ span> </ td>
<Td> <span class = "lencana"> Ya </ span> </ td>
<Td> <span class = "lencana"> Ya </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Harga </ h3> </ td>
<Td> <button type = "button" class = "btn btn-peringatan btn-lg"> $ 9 / Bulan </ button> </ td>
<Td> <button type = "button" class = "btn btn-peringatan btn-lg"> $ 19 / Bulan </ button> </ td>
<Td> <button type = "button" class = "btn btn-peringatan btn-lg"> $ 49 / Bulan </ button> </ td>
<Td> <button type = "button" class = "btn btn-peringatan btn-lg"> $ 99 / Bulan </ button> </ td>
</ Tr>
<Tr>
<Td> </ td>
<Td> <button type = "button" class = "btn btn-keberhasilan btn-lg"> Beli sekarang </ button> </ td>
<Td> <button type = "button" class = "btn btn-keberhasilan btn-lg" "> Beli sekarang </ button> </ td>
<Td> <button type = "button" class = "btn btn-keberhasilan btn-lg" "> Beli sekarang </ button> </ td>
<Td> <button type = "button" class = "btn btn-keberhasilan btn-lg" "> Beli sekarang </ button> </ td>
</ Tr>
</ Tbody>
</ Table>
Bootstrap menggunakan file CSS 'meja' dan 'meja-berbatasan' dua kelas. Tapi kita harus membuat tabel berikut dengan menambahkan beberapa file CSS kustom di customize.css terlihat berbeda
th {
background-color: # 428bca;
color: # ec8007;
z-index: 10;
text-shadow: 1px 1px 1px # fff;
font-size: 24px;
}
Gunakan lencana
Kami menggunakan kelas 'lencana' untuk menampilkan beberapa teks dalam tabel. Kami memiliki CSS kustom berikut dengan kelas lencana
.badge {
background-color: # 428bca;
Warna: # fff;
font-size: 22px;
}
Untuk halaman dan contact.html halaman ini, kami menambahkan aturan CSS lain di customize.css yang
.container> h1 {
text-align: center;
}
Hal ini memungkinkan h1 berpusat.
menggunakan formulir
Dalam file contact.html, kami membuat tiga kolom, kolom pertama, kita menanamkan formulir. Gunakan gaya default sheet.
<Form class = "bentuk-horisontal" role = "bentuk">
<Class Div = "bentuk-kelompok">
<Label untuk = kelas "email" = "col-lg-2 kontrol label"> Email </ label>
<Class Div = "col-lg-10">
<Jenis Masukan = "email" class = "bentuk-control" id = "email" placeholder = "Email">
</ Div>
</ Div>
<Class Div = "bentuk-kelompok">
<Label untuk = kelas "nama" = "col-lg-2 kontrol label"> Nama </ label>
<Class Div = "col-lg-10">
<Input type = "text" class = "bentuk-control" id = "nama" placeholder = "Nama">
</ Div>
</ Div>
<Class Div = "bentuk-kelompok">
<Label untuk = "negara" class = "col-lg-2 kontrol label"> Negara </ label>
<Class Div = "col-lg-10">
<Pilih>
<Pilihan> Amerika </ option>
<Pilihan> India </ option>
<Pilihan> UK </ option>
<Pilihan> Autralia </ option>
</ Pilih>
</ Div>
</ Div>
<Class Div = "bentuk-kelompok">
<Label untuk = "desc" class = "col-lg-2 kontrol label"> Pesan </ label>
<Class Div = "col-lg-10">
<Textarea baris = "5" cols = "50"> </ textarea>
</ Div>
</ Div>
<Class Div = "bentuk-kelompok">
<Class Div = "col-lg-offset-2 col-lg-10">
<Jenis Tombol = "submit" class = "btn btn-default"> Kirim </ button>
</ Div>
</ Div>
</ Form>
'Form-horisontal' kelas memungkinkan bentuk untuk menjaga keselarasan horizontal. Harap dicatat bahwa untuk kemudahan akses, menambahkan role = "bentuk". Ini adalah versi 3.0.0 fitur baru.
Untuk menemukan setiap form kontrol, Bootstrap 3.0.0 menggunakan kelas 'bentuk-kelompok baru.
Dalam halaman ini, kolom kedua dari grid, kami hanya ditempatkan beberapa teks.
Tambahkan Google Maps
Di halaman contact.html, kolom ketiga dari grid, kami telah menambahkan Google Map (Google Maps). Untuk melakukan hal ini, kita menggunakan tag berikut
<Div id = "map_canvas"> </ div> </ Div>
Js berikut ditambahkan ke header file HTML di dalam header
Fungsi initialize () {
var map_canvas = document.getElementById ( 'map_canvas');
var map_options = {
pusat: google.maps.LatLng baru (23.244066, 87.861276),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var peta = baru google.maps.Map (map_canvas, map_options)
}
google.maps.event.addDomListener (window, 'beban', inisialisasi);
Sebelum mengatakan sebelum js, Anda harus menambahkan tag script berikut
<Script src = "http://maps.googleapis.com/maps/api/js?sensor=false"> </ script>
Dalam rangka untuk benar membuat peta, Anda harus menambahkan gaya berikut custom.css
#map_canvas {
width: 400px;
height: 400px;
}
Ini adalah cara membuat sebuah proyek sederhana berdasarkan Bootstrap v3.0.0. Tapi kita hanya menyentuh permukaan, kemudian bab akan menjelaskan secara lebih rinci.