demi menjaga memori agar teringat dalam otak saya, saya manusia yg kekurangan coba meng-uplod tulisan megenai Html dan Css dengan Bootraps agar senantiasa nanti bakal ingat terus dalam pemikiran saya.hihi...
Tools atau alat yang di gunakan adalah XAMPP , Editor (Notepad,dll),Bootrap
1 >langkah pertama
download Bootraph di link boothrap (google.com) ,bahas sejenak mengenai bootrap adalah sebuat Source kemasan yang sangan ringan namun banyak Fungsi, pengembang dari bootstap sudah membuat dengan berbagai Fungsi tinggal user yang nantinya bakal memodifikasi sehingga nga usah cape cape lagi
2>langkah kedua
Bootstap yg sudah didowload tadi extrack ke dalam File folder Html yg ini anda bikin web, disini isi Bootsep ada CSS, Font, Js
3>langkah selanjutnya
.bmp)
perhatikan hasil Ekstrakan file Bootrapt saya masukan di Folder "D:\workspace\grid\assets"
4>......next
buka Editor html km, saya menyarankaan pakai sublime krna nyaman digunakan (pakai Notepad jg gpp :D)
lalu kertikan Source kode spt ini :
.bmp)
ini adalah tampilan utuh web respontive dengan auto rotasi minimize tampilan web bila ingin melihat hasil, ohhh,,ya satu lagi, kalau cape ngetik tenang, nanti di Upload deh lengkapnya.hehe...
5>......Next Lagi :D
Penjelasan mengenai Coding di atas adalah
<title>Belajar Grid</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css.map"
........................
ini adalah File memanggil data dari Bootrapt yg di depan kita Download tadi
#paragraf1 {
background-color:blue;
}
#paragraf2 {
background-color: rgb(84, 190, 89);
}
.......................
merupakan tampilan yang nanti akan diterapkan di web !
<div class="row">
<div class="col-xs-6" id="paragraf1">
.........................
perhatikan, div row merupakan fungsi untuk memanggil Screen Shot web, artinya dalam sebuah tampilan web Row akan terbaca sebesar 12, disini col-xs-6 merupakan bagiaan potongan web berati ada setengah tampilan lagi ya (setelah di kurangain 6 pada paragraft 1), bila di simak ke bawah nanti akan menjumpai col-xs-6 lagi yang artinya Row yang kita pakai sejumlah 12,
catatan bisa kita ingin membagi row ke dalam banyak tampilan tingal bagi menjagi berapa bagian keinginan anda dalam tambpilan web . misal :
<div class="row">
<div class="col-xs-2" id="paragraf1">
ini adalah Row petama.......
<div class="col-xs-2" id="paragraf2">
ini berarti Row kedua..........
<div class="col-xs-5" id="paragraf3">
ini row ke tiga.............
<div class="col-xs-3" id="paragraf4">
ini row ke empat.........
maka di ketahui Row berjumlah 12 (bila dijumlahkan),dan ini bisa diubah sesuai kemauan pembaca tergantung ingin seperti apa,yg penting berjulah 12. untuk lebih jelas nanti pembaca bisa melakukan modifikasi saat praktek sehingga mengeti akan penjelasan ini.
5>lanjut....
.bmp)
penjelasan di atas bahwa saya memakai dua tampilan ,sementara yg Belajar Grid merupakan tampilan Mobile atau Smartphone...
6>Yang perlu diperhatikan
dalam hal ini, contoh kasus yang mudah adalah kesalan user dalam tata letak Folder sehingga akan terjadi error 404 yang artinya keseringan web/croome/firefox dan lain nya nga bsa membaca alamat folder yang kita buat tadi !!
sekian dari penulis , pasti banyak kekurangan karena penulis menyadari kamipun sama sedang menjalani proses belajar,,,wasalamallkm,,,
link untuk Download Project : https://plus.google.com/u/0/
Tidak ada komentar:
Posting Komentar