Pengertian Bootstrap
Assalamualaikum wr.wb
Hay guys hari ini saya sedang belajar tentang materi Bootstrap karena dalam pembuatan suatu website itu memerlukan css bootstrap karena itu sangatlah membantu mempercepat pembuatan website.
Apa yang anda ketahui tentang Css bootstrap?
Bagaimana cara belajar untuk pemula?
Apa kelebihan dan kekurangan dari bootstrap itu sendiri?
Mari kita simak penjelasan berikut ini!!!
Penjelasan dari Bootstrap :
Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.
Kegunaan untuk bootstrap :
Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.
Pengaturan Default bootstrap ini : Bootstrap global standar font-size adalah 14px, dengan garis-tinggi 1,428. Ini diterapkan pada <body> dan semua paragraf.Selain itu, semua elemen <p> memiliki margin bawah yang sama dengan setengah mereka dihitung line-height (10px secara default).
Keuntungan dari Bootstrap:
* Minim gambar karena menggunakan CSS3.
* Belum mampu memberikan tampilan yang sesuai di semua web browser.
* Membuat kita menjadi kurang kreatif karena terpaku dengancoding yang dikembangkan oleh developer.
Tutorial Memasang Dan Menggunakan Bootstrap :
1. dowload bootstrap di http://getbootstrap.com/
2. selanjutnya folder boostrap masukan didalam project
file file diatas adalah komponen file pada bootstrap, jadi ketika didownload kita mendapatkan folder bernama bootstrap yang didalamnya berisi:
– bootstrap-responsive.css : file ini digunakan untuk mensetting layout halaman website , dan keunggulannya file ini dapat menyesuaikan sendiri ukuran website pada device yang digunakan, seperti desktop,i-phone,tablet dsb…
-bootstrap.css : file ini digunakan untuk mensetting keseluruhan style css didalam bootstrap tersebut.
– sedangkan bootstrap-responsive.min.css dan boostrap.min.css : merupakan file hasil compress sehingga ukuran file lebih diperkecil, fungsi tetap sama dengan yang aslinya…
didalam img:
– file pertama merupakan image icon yang digunakan untuk icon2 dibootstrap
– file kedua sama dengan yang diatas cuma background yang digunakan berwarna putih sedang yang atas background icon yang digunakan berwarna hitam
didalam js :
– bootstrap.js : merupakan sebuah file file pengaturan javascript yang menghandle semua event2 dsb didalam bootstrap
– bootstrap.min.js : merupakan file file hasil compress dari bootstrap.js
– jquery.js: (framework javascript) file ini di gunakan untuk memberikan sumber daya script didalam bootstrap.jsistilah simple ini adalah bahan bakar script kita he…
3.kemudian kita coba pasang file file bootstrap tersebut pada html.
Apa yang anda ketahui tentang Css bootstrap?
Bagaimana cara belajar untuk pemula?
Apa kelebihan dan kekurangan dari bootstrap itu sendiri?
Mari kita simak penjelasan berikut ini!!!
Penjelasan dari Bootstrap :
Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.
Kegunaan untuk bootstrap :
Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.
Pengaturan Default bootstrap ini : Bootstrap global standar font-size adalah 14px, dengan garis-tinggi 1,428. Ini diterapkan pada <body> dan semua paragraf.Selain itu, semua elemen <p> memiliki margin bawah yang sama dengan setengah mereka dihitung line-height (10px secara default).
Keuntungan dari Bootstrap:
- Mudah digunakan: Siapa saja dengan pengetahuan hanya dasar dari HTML dan CSS dapat mulai menggunakan Bootstrap
- Fitur responsif: CSS responsif Bootstrap ini menyesuaikan dengan ponsel, tablet, dan desktop
- Pendekatan Mobile-pertama: Dalam Bootstrap 3, gaya mobile-first merupakan bagian dari kerangka inti
- Kompatibilitas browser: Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer, Safari, dan Opera)
* Minim gambar karena menggunakan CSS3.
* Belum mampu memberikan tampilan yang sesuai di semua web browser.
* Membuat kita menjadi kurang kreatif karena terpaku dengancoding yang dikembangkan oleh developer.
Tutorial Memasang Dan Menggunakan Bootstrap :
1. dowload bootstrap di http://getbootstrap.com/
2. selanjutnya folder boostrap masukan didalam project
file file diatas adalah komponen file pada bootstrap, jadi ketika didownload kita mendapatkan folder bernama bootstrap yang didalamnya berisi:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
-bootstrap.css : file ini digunakan untuk mensetting keseluruhan style css didalam bootstrap tersebut.
– sedangkan bootstrap-responsive.min.css dan boostrap.min.css : merupakan file hasil compress sehingga ukuran file lebih diperkecil, fungsi tetap sama dengan yang aslinya…
didalam img:
– file pertama merupakan image icon yang digunakan untuk icon2 dibootstrap
– file kedua sama dengan yang diatas cuma background yang digunakan berwarna putih sedang yang atas background icon yang digunakan berwarna hitam
didalam js :
– bootstrap.js : merupakan sebuah file file pengaturan javascript yang menghandle semua event2 dsb didalam bootstrap
– bootstrap.min.js : merupakan file file hasil compress dari bootstrap.js
– jquery.js: (framework javascript) file ini di gunakan untuk memberikan sumber daya script didalam bootstrap.jsistilah simple ini adalah bahan bakar script kita he…
3.kemudian kita coba pasang file file bootstrap tersebut pada html.
Sekian share kali ini, semoga bermanfaat, terimakasih.
Wassalamualaikum wr.wb