<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html >
<!--[jika IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
< html class =" no-js " >
<!--<![endif]-->
< kepala >
< meta charset =" utf-8 " >
< meta http-equiv =" X-UA-Compatible " content =" IE=edge " >
< judul > </ judul >
< nama meta =" deskripsi " konten ="" >
< meta name =" viewport " content =" width=device-width, initial-scale=1 " >
<!-- Tempatkan favicon.ico dan apple-touch-icon.png di direktori root -->
< link rel =" stylesheet " href =" css/normalize.css " >
< link rel =" stylesheet " href =" css/main.css " >
< link rel =" stylesheet " href =" css/bootstrap.min.css " >
< script src =" js/vendor/modernizr-2.6.2.min.js " > </ script >
< gaya >
tubuh {
padding-top : 40 px ;
padding-bottom : 40 px ;
background-warna : # eee ;
}
. layar penuh_bg {
posisi : tetap;
atas : 0 ;
kanan : 0 ;
bawah : 0 ;
kiri : 0 ;
ukuran latar belakang : sampul;
posisi latar belakang : 50 % 50 % ;
background-image : url ( 'http://31.media.tumblr.com/ad65726441493f47e0c8f0473206f4e5/tumblr_mvwl4fCEb21rdpk23o1_1280.jpg' );
}
. formulir-masuk {
lebar maksimum : 280 piksel ;
bantalan : 15 piksel ;
margin : 0 otomatis;
}
. form-masuk . form-signin-heading , . formulir-masuk {
margin-bawah : 10 px ;
}
. form-masuk . bentuk-kontrol {
posisi : relatif;
ukuran font : 16 px ;
tinggi : otomatis;
bantalan : 10 piksel ;
-ukuran kotak-webkit : kotak-batas;
-moz-box-sizing : border-box;
ukuran kotak : border-box;
}
. form-masuk . bentuk-kontrol : fokus {
indeks-z : 2 ;
}
. form-masuk input [ ketik = "teks" ] {
margin-bawah : -1 px ;
batas-bawah-kiri-radius : 0 ;
radius-batas-kanan-bawah : 0 ;
border-top-style : solid;
border-right-style : solid;
border-bottom-style : tidak ada;
border-left-style : solid;
warna batas : # 000 ;
}
. form-signin input [ type = "password" ] {
margin-bawah : 10 px ;
batas-atas-kiri-radius : 0 ;
batas-atas-kanan-radius : 0 ;
border-top-style : tidak ada;
border-right-style : solid;
border-bottom-style : solid;
border-left-style : solid;
warna batas : # 000 ;
}
. form-signin-heading {
Warna : # fff ;
perataan teks : tengah;
text-shadow : 0 2 px 2 px rgba ( 0 , 0 , 0 , 0.5 );
}
</ gaya >
</ kepala >
< tubuh >
<!--[jika IE 7]>
<p class="browsehappy">Anda menggunakan browser <strong>usang</strong>. Harap <a href="http://browsehappy.com/">tingkatkan versi browser Anda</a> untuk meningkatkan pengalaman Anda.</p>
<![endif]-->
<!-- Tambahkan situs atau konten aplikasi Anda di sini -->
< div id =" fullscreen_bg " class =" fullscreen_bg " >
< div class =" wadah " >
< form class =" form-masuk " >
< h1 class =" form-signin-heading text-muted " > Masuk </ h1 >
< tipe input =" teks " class =" form-control " placeholder =" Alamat email " diperlukan ="" autofocus ="" >
< tipe input =" kata sandi " class =" form-control " placeholder =" Kata sandi " diperlukan ="" >
< button class =" btn btn-lg btn-primary btn-block " type =" kirim " >
Masuk
</ tombol >
</ bentuk >
</ div >
< script src =" http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js " > </ script >
< naskah >
jendela . jQuery || dokumen . tulis ( '<script src="js/vendor/jquery-1.10.2.min.js"><//script>' )
</ skrip >
< script src =" js/plugins.js " > </ script >
< script src =" js/main.js " > </ script >
<!-- Google Analytics: ubah UA-XXXXX-X menjadi ID situs Anda. ->
< naskah >
( fungsi ( b , o , i , l , e , r ) {
b . GoogleAnalyticsObject = l ;
b [ l ] || ( b [ l ] = fungsi ( ) {
( b [ l ] . q = b [ l ] . q || [ ] ) . mendorong ( argumen )
} ) ;
b [ l ] . l = + Tanggal baru ;
e = o . createElement ( i ) ;
r = o . getElementsByTagName ( i ) [ 0 ] ;
e . src = 'http://www.google-analytics.com/analytics.js' ;
r . parentNode . sisipkanSebelum ( e , r )
} ( Jendela , dokumen , 'script' , 'ga' ) ) ;
ga ( 'buat' , 'UA-XXXXX-X' ) ;
ga ( 'kirim' , 'tampilan halaman' ) ;
</ skrip >
</ tubuh >
</ html >
/*! HTML5 Boilerplate v4.3.0 | Lisensi MIT | http://h5bp.com/ */
/*
* Berikut ini adalah hasil dari banyak penelitian tentang gaya lintas-browser.
* Kredit kiri sebaris dan terima kasih banyak kepada Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, serta komunitas dan tim pengembang H5BP.
*/
/* ================================================ ============================
Gaya dasar: default berpendirian
================================================== ======================== */
html ,
tombol ,
masukan ,
pilih ,
area teks {
warna : # 222 ;
}
html {
ukuran font : 1 em ;
tinggi garis : 1.4 ;
}
/*
* Hapus bayangan teks dalam sorotan pilihan: h5bp.com/i
* Kumpulan aturan pemilihan ini harus terpisah.
* Sesuaikan warna latar belakang agar sesuai dengan desain Anda.
*/
:: -moz-pilihan {
latar belakang : # b3d4fc ;
text-shadow : tidak ada;
}
:: pilihan {
latar belakang : # b3d4fc ;
text-shadow : tidak ada;
}
/*
* Aturan horizontal default yang terlihat lebih baik
*/
jam {
tampilan : blok;
tinggi : 1 piksel ;
batas : 0 ;
border-top : 1 px solid # ccc ;
margin : 1 em 0 ;
bantalan : 0 ;
}
/*
* Hapus celah antara gambar, video, audio dan kanvas dan bagian bawah
* wadah mereka: h5bp.com/i/440
*/
audio ,
kanvas ,
gambar ,
video {
vertikal-align : tengah;
}
/*
* Hapus gaya fieldset default.
*/
kumpulan bidang {
batas : 0 ;
batas : 0 ;
bantalan : 0 ;
}
/*
* Izinkan hanya pengubahan ukuran vertikal area teks.
*/
area teks {
mengubah ukuran : vertikal;
}
/* ================================================ ============================
Jelajahi Happy prompt
================================================== ======================== */
. jelajahisenang {
margin : 0.2 em 0 ;
background : # ccc ;
warna : # 000 ;
bantalan : 0.2 em 0 ;
}
/* ================================================ ============================
Gaya kustom penulis
================================================== ======================== */
/* ================================================ ============================
Kelas pembantu
================================================== ======================== */
/*
* Penggantian gambar
*/ luapan : tersembunyi;
/* IE 6/7 mundur */
* teks - indentasi : -9999px;
}
. ir : sebelum {
isi : "" ;
tampilan : blok;
lebar : 0 ;
tinggi : 150 % ;
}
/*
* Sembunyikan dari pembaca layar dan browser: h5bp.com/u
*/
. tersembunyi {
tampilan : tidak ada !penting ;
visibilitas : tersembunyi;
}
/*
* Sembunyikan hanya secara visual, tetapi sediakan untuk pembaca layar: h5bp.com/v
*/
. tersembunyi secara visual {
batas : 0 ;
klip : persegi ( 0 0 0 0 );
tinggi : 1 piksel ;
Margin : -1 px ;
luapan : tersembunyi;
bantalan : 0 ;
posisi : mutlak;
lebar : 1 piksel ;
}
/*
* Memperluas kelas .visuallyhidden agar elemen dapat difokuskan
* saat dinavigasi melalui keyboard: h5bp.com/p
*/
. tersembunyi secara visual . fokus : aktif ,
. tersembunyi secara visual . dapat difokus : fokus {
klip : otomatis;
tinggi : otomatis;
batas : 0 ;
melimpah : terlihat;
posisi : statis;
lebar : otomatis;
}
/*
* Sembunyikan secara visual dan dari pembaca layar, tetapi pertahankan tata letak
*/
. tak terlihat {
visibilitas : tersembunyi;
}
/*
* Clearfix: mengandung pelampung
*
* Untuk browser modern
* 1. Konten ruang adalah salah satu cara untuk menghindari bug Opera saat
* Atribut `contenteditable` disertakan di tempat lain dalam dokumen.
* Jika tidak, itu menyebabkan ruang muncul di bagian atas dan bawah elemen
* yang menerima kelas `clearfix`.
* 2. Penggunaan `table` daripada `block` hanya diperlukan jika menggunakan
* `:before` untuk memuat margin atas elemen turunan.
*/
. clearfix : sebelum ,
. clearfix : setelah {
isi : " " ; /* 1 */
tampilan : meja; /*2*/
}
. clearfix : setelah {
jelas : keduanya;
}
/*
* Untuk IE 6/7 saja
* Sertakan aturan ini untuk memicu hasLayout dan berisi float.
*/
. perbaikan yang jelas {
* perbesaran : 1;
}
/* ================================================ ============================
CONTOH Kueri Media untuk Desain Responsif.
Contoh-contoh ini menggantikan gaya utama ('mobile first').
Ubah sesuai kebutuhan konten.
================================================== ======================== */
@media hanya layar dan ( min-width : 35 em ) {
/* Penyesuaian gaya untuk viewport yang memenuhi kondisi */
}
@media cetak ,
( O-min-perangkat-pixel-ratio : 5 / 4 ) ,
( -webkit-min-device-pixel-ratio : 1.25 ) ,
( resolusi min : 120 dpi ) {
/* Penyesuaian gaya untuk perangkat resolusi tinggi */
}
/* ================================================ ============================
Gaya cetak.
Digarisbawahi untuk menghindari koneksi HTTP yang diperlukan: h5bp.com/r
================================================== ======================== */
@media cetak {
* {
latar belakang : transparan !penting ;
warna : # 000 !penting ; /* Cetak hitam lebih cepat: h5bp.com/s */
box-shadow : tidak ada !penting ;
text-shadow : tidak ada !penting ;
}
sebuah ,
a : mengunjungi {
text-decoration : garis bawah;
}
a [ href ] : setelah {
isi : "(" attr (href) ")" ;
}
abbr [ judul ] : setelah {
isi : "(" attr (judul) ")" ;
}
/*
* Jangan tampilkan tautan untuk gambar, atau tautan javascript/internal
*/
. ir a : setelah ,
a [ href ^= "javascript:" ] : setelah ,
a [ href ^= "#" ] : setelah {
isi : "" ;
}
pra ,
tanda kutip {
batas : 1 px solid # 999 ;
page-break-inside : hindari;
}
kepala {
tampilan : table-header-group; /* h5bp.com/t */
}
tr ,
gambar {
page-break-inside : hindari;
}
gambar {
max-width : 100 % !penting ;
}
@halaman {
margin : 0,5 cm ;
}
p ,
h2 ,
h3 {
anak yatim : 3 ;
janda : 3 ;
}
h2 ,
h3 {
page-break-after : hindari;
}
}
<!DOCTYPE html >
< html lang =" en " >
< kepala >
< meta charset =" UTF-8 " >
< title > Bootstrap Modallery </ title >
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " >
< link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css " >
< link rel =" stylesheet " href =" src/css/bootstrap.modallery.min.css " >
</ kepala >
< tubuh >
< div class =" wadah " >
< h2 > Demo Modallery < kecil > klik gambar </ kecil > </ h2 >
< div kelas =" baris " >
< div class =" col-md-3 " >
< img src =" img/sm-1.jpg " data-to =" img/lg-1.jpg " data-caption =" Yang ini memiliki keterangan " class =" modallery " >
</ div >
< div class =" col-md-3 " >
< img src =" img/sm-2.jpg " data-to =" img/lg-2.jpg " data-caption =" Berikut adalah keterangan " class =" modallery " >
</ div >
< div class =" col-md-3 " >
< img src =" img/sm-3.jpg " data-to =" img/lg-3.jpg " data-caption =" Yang ini juga memiliki keterangan " class =" modallery " >
</ div >
< div class =" col-md-3 " >
< img src =" img/sm-4.jpg " data-ke =" img/lg-4.jpg " class =" modallery " >
</ div >
< div class =" col-md-3 " >
< img src =" img/sm-5.jpg " data-to =" img/lg-5.jpg " data-caption =" Yang ini memiliki keterangan " class =" modallery " >
</ div >
< div class =" col-md-3 " >
< img src =" img/sm-6.jpg " data-ke =" img/lg-6.jpg " class =" modallery " >
</ div >
< div class =" col-md-3 " >
< img src =" img/sm-7.jpg " data-to =" img/lg-7.jpg " data-caption =" Yang ini juga memiliki keterangan " class =" modallery " >
</ div >
< div class =" col-md-3 " >
< img src =" img/sm-8.jpg " data-ke =" img/lg-8.jpg " class =" modallery " >
</ div >
</ div >
< h2 > Instalasi </ h2 > < jam >
< p > Anda harus mengimpor 2 file: </ p >
< ul >
< li > JS: < code > bootstrap.modallery.min.js </ code > </ li >
< li > CSS: < code > bootstrap.modallery.min.css </ code > (Opsional. Cukup impor jika Anda ingin menggunakan navigasi atau menyesuaikan) </ li >
</ ul >
< p > Modallery juga membutuhkan < em > bootstrap.min.js </ em > dan < em > jquery.min.js </ em > untuk bekerja. </ p >
< jam > < h2 > Penggunaan </ h2 > < jam >
< p > Sederhana saja. Cukup impor file, panggil plugin < code > $(document).modallery(); </ code > dan tambahkan kelas < code > .modallery </ code > pada setiap gambar yang ingin Anda tampilkan dengan atribut data < code > data-to </ code > yang merujuk pada gambar mana yang harus dibuka. </ p >
< p > < b > Contoh: </ b > </ p >
< sebelum > <div class="col-md-3">
<img src="img/sm-1.jpg" data-to="img/lg-1.jpg" class="modallery">
</div>
<div class="col-md-3">
<img src="img/sm-2.jpg" data-to="img/lg-2.jpg" class="modallery">
</div>
<div class="col-md-3">
<img src="img/sm-3.jpg" data-to="img/lg-3.jpg" class="modallery">
</div>
<div class="col-md-3">
<img src="img/sm-4.jpg" data-to="img/lg-4.jpg" class="modallery">
</div>
</ sebelum >
< jam > < h2 > Opsi </ h2 > < jam >
< p > < b > - Atribut data </ b > </ p >
< p > < b > < em > data-caption </ em > </ b > < br > Cukup tambahkan ini di < code > <img> </ code > tag dan keterangan akan muncul di bawah gambar. </ p >
< p > < b > - Atribut JavaScript </ b > </ p >
< p > Setel opsi di bawah ini di dalam < code > .modallery() </ code > call. </ p >
< p > < b > < em > ukuran </ em > </ b > < br > Default: kosong. Menyetel ukuran Bootstrap yang tersedia untuk modals: < u > sm </ u > atau < u > lg </ u > </ p >
< p > < b > < em > pemanggil </ em > </ b > < br > Default: 'modallery' < br > Mengubah kelas yang harus ditemukan oleh Modallery. </ p >
< p > < b > < em > judul </ em > </ b > < br > Default: 'Galeri Gambar' < br > Mengubah judul galeri modal. </ p >
< p > < b > < em > navigasi </ em > </ b > < br > Default: false < br > Menampilkan modal footer dengan link ke gambar lain di galeri. </ p >
</ div >
< script src =' https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js ' > </ script >
< script src =' https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js ' > </ script >
< script src =' src/js/bootstrap.modallery.min.js ' > </ script >
< naskah >
$ ( dokumen ) . modalleri ( {
judul : 'Keindahan Dunia' ,
navigasi : benar ,
panah : benar ,
penekanan tombol : benar
} ) ;
</ skrip >
</ tubuh >
</ html >
